/* ═══════════════════════════════════════════════════════════
   FIGTREE, self-hosted. Previously loaded from fonts.googleapis.com,
   which sent every visitor's IP to Google on every page view. Keeping
   the font local avoids that extra third-party request.

   These are the VARIABLE files (300 to 900 on the weight axis), not the
   five static weights the CDN request asked for. The sheet below uses
   font-weight 650 and 750, which static weights cannot render: the
   browser was snapping them to a neighbour or synthesising them. A
   variable font renders them as authored.

   Licence: SIL Open Font License 1.1, see assets/fonts/OFL.txt
   ═══════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* The footer acknowledgement is set in italic. Shipping the real italic
   beats letting the browser slant the roman. */
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/figtree-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/figtree-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

    /* Brand palette sampled from the Prima logo + site:
       navy #004781 wordmark · gold #EFD200 chevron · gold #DFC058 accent

       ── The gold rule ──────────────────────────────────────────────────────
       #DFC058 is THE brand gold. It is the previous Prima site's champagne
       (#CCB96D) held at the same lightness and hue but taken from 48% to 68%
       saturation: the old value read dusty and beige rather than gold. The
       logo's bright chevron gold (#EFD200) is deliberately NOT used in the
       UI, two golds a few degrees apart read as drift, not as a system.

       Gold is a highlight, not a fill. Buttons are navy on light surfaces
       (.btn-primary, .btn-navy); gold fills appear only on navy surfaces
       (.btn-accent, and the one nav CTA), where the scarcity is what makes
       them read as the primary action.

       Surfaces decide the tone. Gold is 8.8:1 on navy but 1.78:1 on white,
       so light backgrounds use --gold-ink, which holds the same hue at
       4.8:1. --accent-display carries the brand gold on white for display
       text 24px+ only (the accent word in a heading), never for body text.

       Every gold in the sheet is one of the tokens below, no raw gold hex
       or rgba outside :root. `python3 build/lint_gold.py` enforces this. */
    :root {
      --blue:       #004781;
      --blue-dark:  #00365f;
      --blue-light: #eaf1f8;
      --navy:       #002544;
      --accent:       #DFC058;  /* base: dark surfaces, + display text 24px+ */
      /* Lighter, at the SAME 68% saturation, lightening and desaturating
         together is what produced a dusty beige, which is the exact quality
         the brand gold was re-saturated to get rid of. */
      --accent-light: #EAD590;  /* hover on dark, upper gradient stop */
      --accent-dark:  #D6AE29;  /* pressed / hover on gold fills */
      /* Two golds for LIGHT backgrounds, split by role, sharing a single
         token here is what forced one compromise value that suited neither.

         Display text 24px+ (the accent word in a section title) keeps the
         full brand gold. At that size it reads as a brand mark rather than
         as a reading surface. It is 1.78:1 on white: a deliberate brand
         choice, documented in README. */
      --accent-display: #DFC058;
      /* Everything else on light, body text, small labels, icons, rules.
         Same 46° hue and saturation as the brand gold, darkened to 4.82:1
         on white so it passes AA for body text, not only for large text. */
      --gold-ink:   #896F1A;
      /* Brand gold at alpha, for glows and tint fills. */
      --accent-a10: rgba(223,192,88,.10);
      --accent-a14: rgba(223,192,88,.14);
      --accent-a20: rgba(223,192,88,.20);
      --accent-a35: rgba(223,192,88,.35);
      --accent-a50: rgba(223,192,88,.50);
      --text:       #1a1a2e;
      --muted:      #6b7280;
      --border:     #e5e7eb;
      --white:      #ffffff;
      --off-white:  #f8fafc;
      --radius:     12px;
      --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
      --shadow-md:  0 4px 16px rgba(0,0,0,.10);
      --shadow-lg:  0 12px 40px rgba(0,0,0,.14);
      --font-display: 'Figtree', 'Segoe UI', sans-serif;
      --font-body: 'Figtree', 'Segoe UI', sans-serif;
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body); color: var(--text); background: var(--white); line-height: 1.6;
      -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    }
    h1, h2, h3, h4, h5, h6,
    .section-label, .post-meta, .leader-role, .stat-num {
      font-family: var(--font-display);
    }
    button, input, select, textarea { font: inherit; }

    /* ── NAV ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      transition: all .35s ease;
    }

    /* Brand top accent bar, navy → gold, matching the logo chevron */
    .nav-rainbow {
      height: 3px;
      background: linear-gradient(90deg,
        #004781 0%, #00598f 25%, var(--accent) 50%,
        #00598f 75%, #004781 100%);
      background-size: 200% 100%;
      animation: rainbowShift 9s linear infinite;
    }
    @keyframes rainbowShift { to { background-position: 200% 0; } }

    .nav-body {
      background: rgba(255,255,255,.98);
      backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid rgba(0,37,68,.09);
      box-shadow: 0 3px 20px rgba(0,37,68,.08);
      transition: background .35s, box-shadow .35s;
    }
    nav.scrolled .nav-body {
      background: rgba(255,255,255,.98);
      box-shadow: 0 2px 24px rgba(0,0,0,.10);
      border-bottom: 1px solid rgba(0,0,0,.06);
    }
    nav.scrolled .logo-text span { color: var(--blue); }
    nav.scrolled .nav-links a { color: var(--text); }
    nav.scrolled .nav-links a:hover { color: var(--blue); }
    nav.scrolled .nav-toggle span { background: var(--navy); }

    .nav-inner {
      max-width: 1240px; margin: 0 auto;
      padding: 0 28px;
      display: flex; align-items: center; justify-content: space-between;
      height: 68px;
    }

    /* Logo */
    .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; transition: opacity .2s; }
    .logo:hover { opacity: .9; }
    .logo:hover .logo-svg { transform: scale(1.04); }
    .logo-svg { height: 44px; width: auto; transition: transform .2s; }
    /* The coloured wordmark stays on the white navigation surface. */
    .logo-svg-dark  { display: none; }
    .logo-svg-color { display: block; }
    nav.scrolled .logo-svg-dark  { display: none; }
    nav.scrolled .logo-svg-color { display: block; }

    /* Nav links */
    .nav-links { display: flex; align-items: center; gap: 0; list-style: none; }

    .nav-links > li { position: relative; }

    .nav-links > li > a {
      position: relative;
      display: flex; align-items: center; gap: 5px;
      padding: 8px 16px; border-radius: 8px;
      text-decoration: none; font-size: 13.5px; font-weight: 600; letter-spacing: .2px;
      color: var(--navy);
      transition: color .2s, background .2s;
      white-space: nowrap;
    }
    .nav-links > li > a:hover { color: var(--blue); background: var(--blue-light); }
    .nav-parent > a {
      position: relative;
      display: flex; align-items: center; gap: 5px;
      padding: 8px 16px; border-radius: 8px;
      text-decoration: none; font-size: 13.5px; font-weight: 600; letter-spacing: .2px;
      color: var(--navy);
      transition: color .2s, background .2s;
      white-space: nowrap;
    }
    nav.scrolled .nav-parent > a, nav.solid .nav-parent > a { color: var(--text); }
    nav.scrolled .nav-parent > a:hover, nav.solid .nav-parent > a:hover { color: var(--blue); }
    /* Parent item = link + separate caret button, so the link stays clickable
       and the caret gives keyboard/touch users a way to open the submenu. */
    .nav-parent {
      display: flex; align-items: center;
      border-radius: 10px;
      transition: background .2s, box-shadow .2s;
    }
    .nav-links > li.has-sub:hover .nav-parent,
    .nav-links > li.has-sub.open .nav-parent,
    .nav-parent:focus-within {
      background: var(--blue-light);
      box-shadow: inset 0 0 0 1px rgba(0, 71, 129, .04);
    }
    .nav-links > li.has-sub:hover .nav-parent > a,
    .nav-links > li.has-sub:hover .nav-caret,
    .nav-links > li.has-sub.open .nav-parent > a,
    .nav-links > li.has-sub.open .nav-caret { color: var(--blue); }
    .nav-parent > a { padding-right: 4px !important; }
    .nav-caret {
      display: flex; align-items: center; justify-content: center;
      background: none; border: none; cursor: pointer;
      padding: 8px 12px 8px 4px; margin: 0;
      /* Explicit colour: `inherit` would pull the dark body colour and the
         caret would disappear against the dark nav. */
      color: var(--navy);
      border-radius: 8px; transition: background .2s, color .2s;
    }
    .nav-caret:hover { color: var(--blue); background: transparent; }
    nav.scrolled .nav-caret, nav.solid .nav-caret { color: var(--text); }
    nav.scrolled .nav-caret:hover, nav.solid .nav-caret:hover { color: var(--blue); }
    .nav-caret .ic { width: 12px; height: 12px; opacity: .85; transition: transform .22s ease, opacity .2s; }
    .nav-links > li.has-sub:hover .nav-caret .ic,
    .nav-links > li.has-sub.open .nav-caret .ic { transform: rotate(180deg); opacity: 1; }
    .nav-caret:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

    /* Underline accent on hover */
    .nav-links > li > a:not(.btn-nav-cta)::before {
      content: ''; position: absolute; bottom: 2px; left: 16px; right: 16px;
      height: 2px; border-radius: 2px;
      background: linear-gradient(90deg,var(--accent-light),var(--accent));
      transform: scaleX(0); transform-origin: left;
      transition: transform .22s ease;
    }
    .nav-links > li > a:not(.btn-nav-cta):hover::before { transform: scaleX(1); }

    /* Dropdown */
    .nav-dropdown {
      position: absolute; top: 100%; left: 50%;
      min-width: 236px;
      /* Top padding bridges the visual gap to the nav item without creating a
         dead zone, the pointer stays inside the dropdown's hover area. */
      padding: 18px 8px 8px;
      opacity: 0; visibility: hidden; pointer-events: none;
      transform: translateX(-50%) translateY(6px);
      transition: opacity .18s ease, transform .18s ease, visibility .18s;
      z-index: 200;
    }
    .nav-dropdown::before {
      content: ''; position: absolute; inset: 10px 0 0 0;
      background: rgba(255,255,255,.99); backdrop-filter: blur(24px);
      border: 1px solid var(--border); border-radius: 14px;
      box-shadow: 0 20px 60px rgba(0,37,68,.16);
      z-index: -1;
    }
    /* :focus-within is scoped to the menu itself, putting it on the <li>
       would also match the caret button, which would keep the menu stuck
       open after Escape returns focus there. */
    .nav-links > li.has-sub:hover .nav-dropdown,
    .nav-links > li.has-sub.open .nav-dropdown,
    .nav-dropdown:focus-within {
      opacity: 1; visibility: visible; pointer-events: all;
      transform: translateX(-50%) translateY(0);
    }
    nav.scrolled .nav-dropdown::before {
      background: white; border: 1px solid var(--border);
      box-shadow: 0 16px 48px rgba(0,0,0,.12);
    }
    .nav-dropdown a {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px; border-radius: 8px;
      text-decoration: none; font-size: 13.5px; font-weight: 600;
      color: var(--text); transition: background .15s, color .15s;
    }
    .nav-dropdown a:hover { background: var(--blue-light); color: var(--blue); }
    nav.scrolled .nav-dropdown a { color: var(--text); }
    nav.scrolled .nav-dropdown a:hover { background: var(--blue-light); color: var(--blue); }
    .nav-dropdown a .drop-icon {
      width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
      font-size: 14px; flex-shrink: 0;
    }
    .nav-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }
    nav.scrolled .nav-dropdown-divider { background: var(--border); }

    /* CTA button */
    .btn-nav-cta {
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--accent);
      color: #002544 !important; font-weight: 700 !important;
      padding: 9px 22px !important; border-radius: 50px !important;
      box-shadow: 0 4px 18px var(--accent-a35);
      border: 1px solid var(--accent-dark);
      transition: transform .15s, box-shadow .2s, background .2s, color .2s !important;
      margin-left: 10px; font-size: 13.5px !important;
    }
    .btn-nav-cta:hover,
    nav.scrolled .btn-nav-cta:hover,
    nav.solid .btn-nav-cta:hover {
      transform: translateY(-2px) !important;
      background: var(--accent-light) !important;
      color: #002544 !important;
      box-shadow: 0 8px 22px var(--accent-a35) !important;
    }
    .btn-nav-cta:active { transform: translateY(0) !important; background: var(--accent-dark); }
    nav.scrolled .btn-nav-cta { color: #002544 !important; }

    /* Mobile */
    .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
    .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--navy); margin: 5px 0; border-radius: 2px; transition: .3s; }

    @media(max-width:900px) {
      .nav-toggle { display: block; }
      .nav-links {
        display: none; flex-direction: column; align-items: stretch;
        position: absolute; top: 71px; left: 0; right: 0;
        background: white; backdrop-filter: blur(24px);
        border-bottom: 1px solid var(--border);
        padding: 12px 20px 20px; gap: 2px; box-shadow: 0 12px 40px rgba(0,37,68,.16);
      }
      .nav-links.open { display: flex; }
      .nav-links > li > a { padding: 11px 16px; color: var(--navy) !important; border-radius: 10px; }
      .nav-links > li > a::before { display: none; }
      .nav-links > li > a:hover { background: var(--blue-light) !important; color: var(--blue) !important; }
      .nav-dropdown { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: all;
        background: var(--off-white); border: 1px solid var(--border); border-radius: 10px;
        padding: 4px 8px; box-shadow: none; margin: 2px 0 6px 12px; }
      .nav-dropdown::before { display: none; }
      .nav-dropdown a { padding: 9px 14px; }
      /* Caret is only needed where hover/click toggling applies */
      .nav-caret { display: none; }
      .nav-parent { display: block; }
      .nav-links > li.has-sub:hover .nav-parent,
      .nav-links > li.has-sub.open .nav-parent,
      .nav-parent:focus-within { background: transparent; box-shadow: none; }
      .nav-parent > a { padding-right: 16px !important; }
      .nav-dropdown a { color: var(--muted) !important; font-size: 14px; }
      .btn-nav-cta { margin: 8px 0 0; justify-content: center; border-radius: 12px !important; }
      nav.scrolled .nav-links { background: white; border-bottom: 1px solid var(--border); }
      nav.scrolled .nav-links > li > a { color: var(--text) !important; }
    }

    /* ── HERO ── */
    .hero {
      position: relative;
      min-height: 100svh;
      display: flex; align-items: center;
      overflow: hidden;
      padding-top: 109px; /* utility bar + nav */
    }

    /* Full-bleed photo, subject positioned right */
    .hero-photo {
      position: absolute; inset: 0; z-index: 0;
      background-image: url('../assets/team-meeting-yan-krukau-pexels.jpg');
      background-size: cover;
      background-position: center 45%;
      transform: scale(1.03);
      animation: heroZoom 12s ease-out forwards;
    }
    @keyframes heroZoom {
      from { transform: scale(1.06); }
      to   { transform: scale(1.0); }
    }

    /* Layered overlays, strong left for text, clear right for person */
    .hero-overlay-dark {
      position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(
        to right,
        rgba(0,24,46, 0.95) 0%,
        rgba(0,30,56, 0.86) 35%,
        rgba(0,30,56, 0.42) 63%,
        rgba(0,20,40, 0.16) 100%
      );
    }
    .hero-overlay-blue {
      position: absolute; inset: 0; z-index: 2;
      background: linear-gradient(
        to right,
        rgba(0,71,129, 0.40) 0%,
        rgba(0,71,129, 0.12) 44%,
        transparent 65%
      );
    }
    /* Decorative bottom fade */
    .hero-overlay-bottom {
      position: absolute; bottom: 0; left: 0; right: 0; height: 180px; z-index: 3;
      background: linear-gradient(to top, rgba(0,20,40,.55), transparent);
    }

    .hero-inner {
      position: relative; z-index: 4;
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 52px 60px 74px max(7%, 32px);
      display: flex; flex-direction: column; justify-content: center;
      align-items: flex-start;
      min-height: calc(100svh - 109px);
    }
    /* Constrain text to left ~50% so person shows clearly on right */
    .hero-left {
      width: 100%; max-width: 670px;
    }

    .hero h1 {
      font-size: clamp(3rem, 4.5vw, 4.4rem);
      font-weight: 800;
      color: white;
      line-height: 1.04;
      margin-bottom: 24px;
      letter-spacing: -1.8px;
      text-shadow: 0 2px 20px rgba(0,0,0,.3);
    }
    /* Solid, not a gradient. A left-to-right ramp across the headline meant
       the phrase started pale and only reached the brand gold by its last
       word, which read as a colour mistake rather than as a sheen, and it
       undercut the whole point of settling on one gold. */
    .hero h1 em {
      font-style: normal;
      color: var(--accent);
    }
    .hero-sub {
      font-size: clamp(1rem, 1.2vw, 1.125rem); color: rgba(255,255,255,.88);
      line-height: 1.65; margin-bottom: 36px;
      max-width: 56ch;
      text-shadow: 0 1px 8px rgba(0,0,0,.25);
    }

    /* Dual-audience CTA blocks like PeopleBank */
    .hero-audience {
      display: flex; flex-direction: row; gap: 14px; flex-wrap: wrap; align-items: center;
      margin-top: 10px;
    }

    .btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--blue); color: white; text-decoration: none;
      min-height: 50px; padding: 13px 26px; border-radius: 50px; font-weight: 700; font-size: 16px;
      transition: background .2s, transform .15s, box-shadow .2s;
      box-shadow: 0 4px 20px rgba(0,71,129,.45);
    }
    .btn-primary:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,71,129,.55); }

    .btn-outline-hero {
      display: inline-flex; align-items: center; gap: 8px;
      background: transparent; color: white; text-decoration: none;
      padding: 12px 26px; border-radius: 50px; font-weight: 600; font-size: 15px;
      border: 2px solid rgba(255,255,255,.55);
      transition: background .2s, border-color .2s, transform .15s;
      backdrop-filter: blur(4px);
    }
    .btn-outline-hero:hover { background: rgba(255,255,255,.12); border-color: white; transform: translateY(-2px); }

    .btn-accent {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--accent); color: var(--text); text-decoration: none;
      min-height: 50px; padding: 13px 26px; border-radius: 50px; font-weight: 700; font-size: 16px;
      transition: background .2s, transform .15s, box-shadow .2s;
      box-shadow: 0 4px 20px var(--accent-a35);
    }
    .btn-accent:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 8px 24px var(--accent-a50); }

    /* Floating glass card on right */

    /* Scroll indicator */
    .hero-scroll {
      position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
      z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 6px;
      opacity: .7; animation: bounce 2s infinite;
    }
    .hero-scroll span { font-size: 11px; color: rgba(255,255,255,.7); letter-spacing: 1px; text-transform: uppercase; }
    .hero-scroll-arrow {
      width: 28px; height: 28px; border: 2px solid rgba(255,255,255,.4); border-radius: 50%;
      display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;
    }
    @keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }

    @media(max-width:1024px) {
      .hero-inner { gap: 40px; padding: 72px 28px 70px; }
    }
    @media(max-width:600px) {
      .hero { min-height: 760px; padding-top: 109px; align-items: flex-start; }
      .hero-inner { min-height: 651px; padding: 72px 20px 76px; }
      .hero h1 { font-size: clamp(2.35rem, 10.25vw, 2.5rem); line-height: 1.04; letter-spacing: -.8px; }
      .hero-sub { font-size: 16px; line-height: 1.6; max-width: 36ch; margin-bottom: 30px; }
      .hero-photo { background-position: 48% center; }
      .hero-overlay-dark { background: linear-gradient(to bottom, rgba(0,24,46,.9) 0%, rgba(0,24,46,.82) 64%, rgba(0,20,40,.94) 100%); }
      .hero-audience { width: 100%; }
      .btn-primary, .btn-outline-hero, .btn-accent { justify-content: center; }
    }

    /* ═══ SHARED SECTION BASE ═══ */
    section { padding: 100px 24px; }
    .section-inner { max-width: 1200px; margin: 0 auto; }
    .section-label {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
      color: var(--blue); margin-bottom: 16px;
    }
    .section-label::before {
      content: ''; display: block; width: 20px; height: 2px;
      background: var(--blue); border-radius: 2px;
    }
    .section-title { font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 800; color: var(--navy); line-height: 1.15; margin-bottom: 20px; letter-spacing: -.5px; }
    .section-sub { font-size: 17px; color: var(--muted); max-width: 580px; line-height: 1.75; }
    .section-header { margin-bottom: 64px; }
    .section-header.center { text-align: center; }
    .section-header.center .section-sub { margin: 0 auto; }
    .section-header.center .section-label { justify-content: center; }
    .section-header.center .section-label::before { display: none; }

    /* ═══ SERVICES ═══ */
    #services { background: white; }
    .service-card h3 {
      font-size: 19px; font-weight: 700; color: var(--navy); margin-bottom: 14px;
      transition: color .3s;
    }
    .service-card:hover h3 { color: white; }
    .service-card p {
      font-size: 14.5px; color: var(--muted); line-height: 1.7; margin-bottom: 24px;
      transition: color .3s;
    }
    .service-card:hover p { color: rgba(255,255,255,.7); }
    .service-link {
      display: inline-flex; align-items: center; gap: 6px;
      color: var(--blue); font-size: 14px; font-weight: 700;
      text-decoration: none; transition: color .3s, gap .2s;
    }
    .service-link::after { content: '→'; transition: transform .2s; display: inline-block; }
    .service-card:hover .service-link { color: var(--accent-light); }
    .service-card:hover .service-link::after { transform: translateX(4px); }

    @media(max-width:900px) { .services-grid { grid-template-columns: 1fr 1fr; } }
    @media(max-width:560px) { .services-grid { grid-template-columns: 1fr; border-radius: 16px; } }

    /* ═══ ABOUT ═══ */
    #about { background: var(--off-white); padding-bottom: 56px; }
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    .about-photo-col { position: relative; margin-bottom: 58px; }
    .about-photo-main {
      width: 100%; border-radius: 24px; overflow: hidden;
      aspect-ratio: 4/5;
      background-image: url('../assets/Pri-image.jpeg');
      background-size: cover; background-position: center top;
      box-shadow: var(--shadow-lg);
      position: relative;
      display: flex; align-items: flex-end;
    }
    .about-photo-caption {
      width: 62%; padding: 46px 28px 24px;
      background: linear-gradient(to top, rgba(0,20,40,.88), transparent);
      border-radius: 0 0 24px 24px;
    }
    .about-photo-caption strong { display: block; color: white; font-size: 17px; font-weight: 700; }
    .about-photo-caption span { color: var(--accent); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; }
    .about-photo-card {
      /* Sits mostly BELOW the photo's bottom-right corner: overlapping the
         top covered the subject's face, and sitting fully inside the bottom
         collided with the name caption on the left. */
      position: absolute; bottom: -58px; right: -26px;
      background: white; border-radius: 20px; padding: 24px 28px;
      box-shadow: var(--shadow-lg); min-width: 200px;
      border: 1px solid var(--border);
    }
    .about-photo-card-stat { display: flex; flex-direction: column; gap: 4px; }
    .about-photo-card-stat strong { font-size: 36px; font-weight: 800; color: var(--navy); line-height: 1; }
    .about-photo-card-stat span { font-size: 13px; color: var(--muted); }
    .about-text { }
    .about-lead { font-size: 18px; color: var(--navy); line-height: 1.75; font-weight: 500; margin-bottom: 20px; }
    .about-body { font-size: 15.5px; color: var(--muted); line-height: 1.8; margin-bottom: 36px; }
    .values { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
    .value-item {
      display: flex; gap: 16px; align-items: flex-start;
      padding: 20px 22px; background: white; border-radius: 14px;
      border: 1px solid var(--border);
      transition: box-shadow .2s, border-color .2s;
    }
    .value-item:hover { box-shadow: var(--shadow-md); border-color: rgba(0,71,129,.2); }
    .value-dot {
      width: 44px; height: 44px; border-radius: 12px;
      background: var(--blue-light); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 17px; margin-top: 1px; color: var(--blue); font-weight: 800;
    }
    .value-item h3 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
    .value-item p { font-size: 14.5px; color: var(--muted); line-height: 1.65; }

    /* Homepage About composition: keep the portrait and copy visually level.
       These tighter values are scoped so Services can retain its roomier list. */
    #about .about-grid { gap: 64px; }
    #about .about-text .section-title { margin-bottom: 12px; }
    #about .about-text .rule-gold { margin-top: 12px; margin-bottom: 16px; }
    #about .about-lead { line-height: 1.6; margin-bottom: 16px; }
    #about .about-body { line-height: 1.7; margin-bottom: 18px; }
    #about .about-body + .about-body { margin-bottom: 24px; }
    #about .values { gap: 12px; margin-bottom: 24px; }
    #about .value-item { gap: 12px; padding: 12px 16px; }
    #about .value-dot { width: 38px; height: 38px; border-radius: 10px; font-size: 15px; }

    /* ── SECTORS ACCORDION (home page) ──
       The sector list was five .value-item cards, each carrying a full
       paragraph: ~900px of scroll for content most visitors scan for one
       word, "is my sector here". The client rejected the boxed treatment,
       so the rows lose their card chrome entirely and become a hairline
       list, with one sector expanded at a time.

       Scoped to #sectors. About and the Services pages still use the
       .value-item card and are untouched by everything below. */
    #sectors .sector-list { border-top: 1px solid var(--border); }
    #sectors .sector-item { border-bottom: 1px solid var(--border); }
    #sectors .sector-btn {
      width: 100%; display: flex; align-items: center; gap: 16px;
      background: none; border: 0; padding: 20px 0; cursor: pointer;
      text-align: left; font-family: inherit; color: inherit;
    }
    #sectors .sector-btn h3 {
      flex: 1; font-size: 17px; font-weight: 700; color: var(--navy);
      margin: 0; letter-spacing: -.2px; transition: color .2s;
    }
    #sectors .sector-btn .ic { font-size: 17px; color: var(--blue); opacity: .55; transition: opacity .2s, color .2s; }
    #sectors .sector-btn:hover h3 { color: var(--blue); }
    #sectors .sector-btn:hover .ic { opacity: 1; }
    /* A rotating border-corner rather than a glyph, so the marker inherits
       the row's colour and needs no icon in the sprite. */
    #sectors .sector-chev {
      width: 11px; height: 11px; flex-shrink: 0; margin-right: 2px;
      border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
      transform: rotate(45deg); transition: transform .28s ease, border-color .2s;
    }
    #sectors .sector-item.open .sector-chev { transform: rotate(-135deg); border-color: var(--gold-ink); }
    #sectors .sector-item.open .sector-btn .ic { opacity: 1; color: var(--gold-ink); }
    /* grid-template-rows 0fr->1fr animates to the content's own height, so
       the panel does not need a hard-coded max-height per sector. */
    #sectors .sector-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
    #sectors .sector-item.open .sector-panel { grid-template-rows: 1fr; }
    #sectors .sector-panel > div { overflow: hidden; }
    /* 33px aligns the copy under the title: 17px icon + the 16px row gap. */
    #sectors .sector-panel p {
      font-size: 15px; color: var(--muted); line-height: 1.75;
      margin: 0 0 22px; padding-left: 33px; max-width: 60ch;
    }
    @media(max-width:900px) {
      #sectors .sector-btn { padding: 17px 0; }
      #sectors .sector-btn h3 { font-size: 16px; }
      #sectors .sector-panel p { padding-left: 0; margin-bottom: 18px; }
    }

    @media(min-width:901px) {
      #about .about-photo-main { aspect-ratio: 3/4; }
    }
    .btn-navy {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--navy); color: white; text-decoration: none;
      padding: 13px 26px; border-radius: 50px; font-weight: 700; font-size: 15px;
      transition: background .2s, transform .15s;
    }
    .btn-navy:hover { background: #00598f; transform: translateY(-2px); }
    .btn-line {
      display: inline-flex; align-items: center; gap: 8px;
      background: transparent; color: var(--navy); text-decoration: none;
      padding: 12px 26px; border-radius: 50px; font-weight: 600; font-size: 15px;
      border: 2px solid var(--border);
      transition: border-color .2s, transform .15s;
    }
    .btn-line:hover { border-color: var(--navy); transform: translateY(-2px); }

    @media(max-width:900px) {
      .about-grid { grid-template-columns: 1fr; gap: 60px; }
      .about-photo-card { right: 0; bottom: -48px; }
    }

    /* ═══ STATS BAND ═══ */
    /* Sits inside #deliver as the proof of the process above it, so it takes
       that section's blue rather than painting a band of its own. It carried
       its own background and a 135deg gradient before, which is what drew a
       false section break across the middle of one section. */
    .stats-band {
      background: transparent;
      padding: 0;
      margin-top: 56px;
    }
    .stats-band-inner {
      max-width: 1200px; margin: 0 auto;
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 2px; background: rgba(255,255,255,.12); border-radius: 20px; overflow: hidden;
    }
    .stat-block {
      background: rgba(255,255,255,.06);
      padding: 40px 32px; text-align: center;
      transition: background .2s;
    }
    .stat-block:hover { background: rgba(255,255,255,.14); }
    /* Tabular figures: without them the digits change width as the value
       counts up and the number visibly jitters. */
    .stat-num {
      font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 800; color: white;
      line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums;
    }
    .stat-label { font-size: 14px; color: rgba(255,255,255,.72); font-weight: 500; }
    @media(max-width:768px) { .stats-band-inner { grid-template-columns: 1fr 1fr; } }
    @media(max-width:480px) { .stats-band-inner { grid-template-columns: 1fr 1fr; } }

    /* ═══ SPECIALISATIONS ═══ */
    /* This is the real section change on this part of the page, blue gives
       way to navy, so the boundary is stated with a hairline. It used to
       fall between the process cards and their stats, which split one
       section in half and left this genuine break unmarked. */
    #specialisations {
      background: var(--navy);
      border-top: 1px solid rgba(255,255,255,.34);
      position: relative; overflow: hidden;
    }
    #specialisations::before {
      content: ''; position: absolute; top: -200px; right: -200px;
      width: 600px; height: 600px; border-radius: 50%;
      background: radial-gradient(circle, var(--accent-a10) 0%, transparent 70%);
      pointer-events: none;
    }
    #specialisations .section-title { color: white; }
    #specialisations .section-label { color: var(--accent); }
    #specialisations .section-label::before { background: var(--accent); }
    #specialisations .section-sub { color: rgba(255,255,255,.6); }
    .spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .spec-card {
      position: relative; border-radius: 20px; overflow: hidden;
      padding: 32px 26px; cursor: default;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.09);
      transition: transform .3s, border-color .3s, box-shadow .3s;
    }
    .spec-card:hover { transform: translateY(-6px); border-color: var(--accent-a35); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
    .spec-card-glow {
      position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--blue), var(--accent));
      opacity: 0; transition: opacity .3s;
    }
    .spec-card:hover .spec-card-glow { opacity: 1; }
    .spec-icon { font-size: 32px; margin-bottom: 18px; display: block; color: var(--accent); }
    .spec-card h3 { color: white; font-size: 15.5px; font-weight: 700; margin-bottom: 8px; }
    .spec-card p { color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.65; }

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

    /* ═══ JOB SEEKERS: SPLIT PHOTO PANELS ═══ */
    #job-seekers { padding: 0; overflow: hidden; }
    .js-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; }
    .js-panel {
      position: relative; overflow: hidden;
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 56px 52px;
    }
    .js-panel-photo {
      position: absolute; inset: 0; background-size: cover; background-position: center;
      transition: transform .6s ease;
    }
    .js-panel:hover .js-panel-photo { transform: scale(1.04); }
    .js-panel-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(0,20,40,.95) 0%, rgba(0,20,40,.72) 55%, rgba(0,20,40,.35) 100%);
    }
    .js-panel.employers .js-panel-overlay {
      background: linear-gradient(to top, rgba(0,71,129,.95) 0%, rgba(0,71,129,.75) 55%, rgba(0,71,129,.38) 100%);
    }
    .js-panel-content { position: relative; z-index: 2; }
    .js-audience-tag {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,.15); backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.2);
      color: white; font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
      text-transform: uppercase; padding: 6px 14px; border-radius: 100px;
      margin-bottom: 16px;
    }
    .js-panel h2 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 800; color: white; margin-bottom: 14px; line-height: 1.2; }
    .js-panel p { font-size: 15px; color: rgba(255,255,255,.78); line-height: 1.7; margin-bottom: 28px; max-width: 400px; }
    .js-checklist { list-style: none; margin-bottom: 32px; display: flex; flex-direction: column; gap: 10px; }
    .js-checklist li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,.88); }
    .js-check {
      width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
      background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 800; color: white;
    }
    .js-panel .btn-white {
      display: inline-flex; align-items: center; gap: 8px;
      background: white; color: var(--navy); text-decoration: none;
      padding: 13px 26px; border-radius: 50px; font-weight: 700; font-size: 15px;
      transition: transform .15s, box-shadow .2s; align-self: flex-start;
      box-shadow: 0 6px 20px rgba(0,0,0,.2);
    }
    .js-panel .btn-white:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.3); }
    .js-panel .btn-white.accent { background: var(--accent); color: var(--text); }

    @media(max-width:768px) { .js-split { grid-template-columns: 1fr; } .js-panel { padding: 48px 32px; min-height: 480px; } }

    /* ═══ OPEN ROLES ═══ */
    #open-roles { background: var(--off-white); }
    .role-card:hover::before { opacity: 1; }

    /* ═══ WHY PRIMA ═══ */
    /* No watermark. An 18vw `content: 'PRIMA'` sat behind this grid and showed
       through the gaps between cards as giant letterforms, which read as a
       rendering fault rather than as texture. */
    #why-prima {
      background: white;
      position: relative;
    }
    .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; }
    .why-card {
      background: var(--off-white); border-radius: 20px; padding: 32px 44px;
      border: 1.5px solid transparent;
      transition: border-color .25s, box-shadow .25s, transform .25s, background .25s;
      cursor: default;
    }
    .why-card:hover { border-color: rgba(0,71,129,.2); box-shadow: var(--shadow-md); transform: translateY(-4px); background: white; }
    /* The glyph sits on a navy disc rather than straight on the card. On a
       #f8fafc card the brand gold is 1.65:1 and washes out, so a flat gold
       icon has to be darkened until it reads brown, the disc gives it a
       dark ground instead, where the real gold runs 8.8:1. */
    .why-icon {
      display: flex; align-items: center; justify-content: center;
      width: 68px; height: 68px; border-radius: 50%;
      background: var(--navy); color: var(--accent);
      font-size: 30px; margin-bottom: 20px;
      transition: background .25s, transform .25s;
    }
    .why-card:hover .why-icon { background: var(--blue); transform: scale(1.04); }
    .why-card h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
    .why-card p { font-size: 14.5px; color: var(--muted); line-height: 1.7; }

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

    /* ═══ CONTACT ═══ */
    #contact {
      position: relative; overflow: hidden;
      background: var(--navy);
    }
    #contact::before {
      content: ''; position: absolute; bottom: -100px; left: -100px;
      width: 500px; height: 500px; border-radius: 50%;
      background: radial-gradient(circle, var(--accent-a10) 0%, transparent 70%);
      pointer-events: none;
    }
    #contact .section-title { color: white; }
    #contact .section-label { color: var(--accent); }
    #contact .section-label::before { background: var(--accent); }
    #contact .section-sub { color: rgba(255,255,255,.6); }
    .contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: start; position: relative; z-index: 1; }
    .contact-info-panel { display: flex; flex-direction: column; gap: 28px; }
    .contact-item {
      display: flex; gap: 18px; align-items: flex-start;
      padding: 22px 24px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 16px;
      transition: background .2s;
    }
    .contact-item:hover { background: rgba(255,255,255,.1); }
    .contact-icon {
      width: 48px; height: 48px; border-radius: 14px;
      background: var(--accent-a14); border: 1px solid var(--accent-a20);
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; flex-shrink: 0; color: var(--accent);
    }
    .contact-item .row-label { display: block; color: var(--accent); font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; margin-bottom: 5px; }
    .contact-item p, .contact-item a { color: white; font-size: 15px; text-decoration: none; line-height: 1.5; }
    .contact-item a:hover { color: var(--accent); }
    .contact-form {
      background: white; border-radius: 24px; padding: 44px 40px;
      box-shadow: 0 32px 80px rgba(0,0,0,.25);
    }
    .contact-form h3 { font-size: 22px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
    .contact-form p.form-sub { font-size: 14px; color: var(--muted); margin-bottom: 28px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
    .form-group label { font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: .2px; }
    .form-group input, .form-group select, .form-group textarea {
      padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px;
      font-size: 14.5px; font-family: var(--font-body); color: var(--text);
      transition: border-color .2s, box-shadow .2s; background: var(--off-white);
    }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
      outline: none; background: white; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,71,129,.10);
    }
    .form-group textarea { resize: vertical; min-height: 110px; }
    .form-file-area input { display: none; }
    .btn-submit {
      width: 100%; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
      color: white; border: none; cursor: pointer;
      padding: 15px; border-radius: 50px; font-size: 15.5px; font-weight: 700;
      font-family: var(--font-body);
      transition: opacity .2s, transform .15s, box-shadow .2s;
      box-shadow: 0 6px 24px rgba(0,71,129,.35);
      margin-top: 6px;
    }
    .btn-submit:hover { opacity: .9; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,71,129,.45); }

    @media(max-width:900px) {
      .contact-grid { grid-template-columns: 1fr; gap: 40px; }
      .form-row { grid-template-columns: 1fr; }
      .contact-form { padding: 32px 28px; }
    }

    /* ═══ ACCREDITATIONS (footer column) ═══
       These used to be a light grey band of their own sitting above the
       footer, which made the foot of every page three stacked zones doing one
       job. They are now a column inside the footer, so the tones below are
       for a dark surface. */
    /* The Gateway PNG carries its own white ground and border, so on the dark
       footer it reads as an accreditation card rather than needing a chip. */
    .footer-col-cred img { width: 128px; height: auto; display: block; border-radius: 4px; }
    /* Gateway and BBP sit side by side, centred on one another; they wrap to
       a stack when the column narrows. */
    .footer-cred-logos {
      display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 10px;
    }
    .footer-cred-logos a { display: block; line-height: 0; }
    /* The BBP mark is a transparent SVG with dark-on-light artwork, so it
       needs the white ground the Gateway PNG carries in the file itself. The
       chip is held to the Gateway card's exact height (128px wide at the
       PNG's 200x77 ratio) so the two cards match top and bottom. */
    .footer-cred-chip {
      display: flex; align-items: center; justify-content: center;
      box-sizing: border-box; height: 49.28px; padding: 7px 11px;
      background: #fff; border-radius: 4px;
    }
    .footer-cred-logos .footer-cred-chip img { width: auto; height: 100%; }
    .footer-cred-logos a:hover { opacity: .85; }
    .footer-cred-logos img { transition: opacity .2s; }
    /* Plain prose, not a coded list. Scheme numbers ("SCM0020") are meaningless
       to anyone who does not already know the schemes, so the schemes are named
       in words and the codes live on the Government & Panels page instead. */
    .footer-col-cred p {
      color: rgba(255,255,255,.58); font-size: 12.5px; line-height: 1.65;
    }
    .footer-col-cred p + p { margin-top: 12px; }
    .footer-cred-link {
      display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
      color: var(--accent); text-decoration: none; font-size: 12.5px; font-weight: 700;
      transition: color .2s;
    }
    .footer-cred-link .ic { font-size: 10px; transition: transform .2s; }
    .footer-cred-link:hover { color: white; }
    .footer-cred-link:hover .ic { transform: translateX(3px); }

    /* ═══ FOOTER ═══ */
    footer {
      background: #001424;
      color: rgba(255,255,255,.55);
      padding: 0;
    }
    .footer-top-gradient {
      height: 3px;
      background: linear-gradient(90deg, var(--blue), var(--accent), var(--blue));
    }
    .footer-body { padding: 48px 24px 28px; }
    .footer-inner { max-width: 1200px; margin: 0 auto; }
    .footer-grid {
      display: grid; grid-template-columns: minmax(240px, .58fr) minmax(700px, 1.42fr); gap: 48px;
      padding-bottom: 38px;
    }
    .footer-logo { display: inline-block; text-decoration: none; }
    .footer-logo img { width: auto; height: 34px; filter: brightness(0) invert(1); }
    .footer-brand p { font-size: 14px; line-height: 1.7; margin-top: 15px; max-width: 470px; }
    /* One "Contact us" list: email, phone, address and the social links all
       share the gold-icon-plus-label treatment. The socials used to be circular
       chips, which read as a different kind of control sitting in the same row. */
    .footer-contact-links { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; margin-top: 14px; }
    .footer-contact-links > a,
    .footer-contact-links > .footer-contact-static {
      color: rgba(255,255,255,.75); text-decoration: none; font-size: 13.5px; font-weight: 600;
      display: inline-flex; align-items: flex-start; gap: 10px; transition: color .2s;
      line-height: 1.5; word-break: break-word;
    }
    .footer-contact-links .ic { color: var(--accent); flex: 0 0 auto; margin-top: 3px; }
    .footer-contact-links > a:hover { color: white; }
    .footer-contact-static { cursor: default; }
    .footer-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 18px; }
    .footer-actions a {
      color: var(--accent); text-decoration: none; font-size: 12.5px; font-weight: 700;
      display: inline-flex; align-items: center; gap: 7px; transition: color .2s;
    }
    .footer-actions a .ic { font-size: 10px; transition: transform .2s; }
    .footer-actions a:hover { color: white; }
    .footer-actions a:hover .ic { transform: translateX(3px); }
    /* Accreditations carries the most copy, so it takes the widest column. */
    .footer-nav { display: grid; grid-template-columns: .85fr .68fr 1.35fr; gap: 32px; }
    /* .footer-brand carries a "Contact us" heading now, and it has to read as a
       column heading like SERVICES and COMPANY, not as a page sub-heading. */
    .footer-col h3, .footer-brand h3 { color: white; font-size: 12px; font-weight: 700; margin-bottom: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
    .footer-brand h3 { margin-top: 24px; margin-bottom: 0; }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
    .footer-col a {
      color: rgba(255,255,255,.55); text-decoration: none; font-size: 13.5px; line-height: 1.45;
      transition: color .2s; display: inline-flex; align-items: center;
    }
    .footer-col a:hover { color: white; }
    /* Stacked, not side by side: the social buttons sat in the same row and
       squeezed the acknowledgement into a narrow three-line column. It now
       runs the full width and the buttons take their own line below. */
    /* Last block in the footer now, so it takes a top rule only, no bottom.
       The socials moved up into the contact row, leaving two text blocks that
       read as one centred closing statement. */
    .footer-meta {
      padding: 26px 0 0; border-top: 1px solid rgba(255,255,255,.08);
      display: flex; flex-direction: column; align-items: center;
      text-align: center; gap: 16px;
    }
    .footer-acknowledgement {
      max-width: 900px; margin: 0 auto; padding: 0; border: 0;
      color: rgba(255,255,255,.56); font-size: 12.5px; line-height: 1.65; font-style: italic;
    }
    /* Copyright left, build credit right, on one line. They stack and
       re-centre below 700px, where side by side leaves neither room. */
    .footer-meta-row {
      width: 100%; display: flex; flex-wrap: wrap; gap: 10px 28px;
      align-items: baseline; justify-content: space-between;
    }
    .footer-legal { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.68); }
    /* Sized to match .footer-legal opposite it, so the two ends of the row
       read as one line rather than two competing weights. */
    .footer-builder-credit {
      display: flex; align-items: baseline; gap: 7px;
      color: rgba(255,255,255,.78); font-size: 14.5px; font-weight: 600;
    }
    /* No resting underline. Gold on navy already separates the link from the
       text beside it; the underline returns on hover and focus so the
       affordance is not lost for anyone reaching for it. */
    .footer-builder-credit .footer-jobgen-credit {
      display: inline-block; color: var(--accent); font-size: inherit;
      font-weight: 800; letter-spacing: .045em;
      text-decoration: none;
      transition: color .2s;
    }
    .footer-builder-credit .footer-jobgen-credit:hover,
    .footer-builder-credit .footer-jobgen-credit:focus-visible {
      color: #fff;
      text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
    }
    @media(max-width:700px) {
      .footer-meta-row { justify-content: center; text-align: center; }
    }

    @media(max-width:1000px) {
      .footer-grid { gap: 46px; }
      .footer-nav { gap: 28px; }
    }
    @media(max-width:900px) {
      .footer-body { padding: 42px 20px 26px; }
      .footer-grid { grid-template-columns: 1fr; gap: 34px; }
      .footer-nav { max-width: 620px; gap: 32px; }
    }
    @media(max-width:560px) {
      /* Three columns will not fit; Accreditations takes its own full-width
         row beneath Services and Company. */
      .footer-nav { grid-template-columns: 1fr 1fr; gap: 24px; }
      .footer-col-cred { grid-column: 1 / -1; }
    }

    /* ═══ SCROLL ANIMATIONS ═══ */
    .fade-up { opacity: 0; transform: translateY(30px); transition: opacity .65s ease, transform .65s ease; }
    .fade-up.visible { opacity: 1; transform: translateY(0); }
    .fade-up:nth-child(2) { transition-delay: .1s; }
    .fade-up:nth-child(3) { transition-delay: .2s; }
    .fade-up:nth-child(4) { transition-delay: .3s; }
    .fade-up:nth-child(5) { transition-delay: .15s; }
    .fade-up:nth-child(6) { transition-delay: .25s; }

/* ═══════════════════════════════════════════════════════════
   INNER PAGES: page hero, prose, cards, sidebar
   ═══════════════════════════════════════════════════════════ */

/* Inner pages have a solid nav from the start (no transparent hero) */
body.inner { padding-top: 0; }

.page-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, #00406f 55%, #00598f 100%);
  padding: 150px 24px 80px;
}
.page-hero::before {
  content: ''; position: absolute; top: -220px; right: -160px;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-a14) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--accent), var(--blue));
}
.page-hero-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,.55); margin-bottom: 18px;
}
.breadcrumb a { color: rgba(255,255,255,.72); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span.sep { opacity: .45; }
.page-hero h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight: 800; color: white;
  line-height: 1.12; letter-spacing: -1px; margin-bottom: 18px; max-width: 900px;
}
.page-hero p.page-lead {
  font-size: 17.5px; line-height: 1.75; color: rgba(255,255,255,.75); max-width: 720px;
}

/* Prose / article body */
.prose { font-size: 16.5px; line-height: 1.85; color: #374151; }
.prose > * + * { margin-top: 22px; }
.prose h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; color: var(--navy);
  line-height: 1.25; letter-spacing: -.4px; margin-top: 48px; padding-top: 4px;
}
.prose h3 { font-size: 19px; font-weight: 700; color: var(--navy); margin-top: 36px; }
.prose h4 { font-size: 16.5px; font-weight: 700; color: var(--navy); margin-top: 30px; }
.prose p strong { color: var(--navy); font-weight: 700; }
.prose ul, .prose ol { padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.prose ul li { position: relative; padding-left: 30px; }
.prose ul li::before {
  content: ''; position: absolute; left: 6px; top: 11px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold-ink);
  box-shadow: 0 0 0 3px var(--accent-a20);
}
.prose ol { counter-reset: n; }
.prose ol li { position: relative; padding-left: 40px; counter-increment: n; }
.prose ol li::before {
  content: counter(n); position: absolute; left: 0; top: 2px;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--blue-light); color: var(--blue);
  font-size: 12.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.prose blockquote {
  border-left: 4px solid var(--gold-ink); background: var(--off-white);
  padding: 22px 26px; border-radius: 0 14px 14px 0;
  font-size: 17.5px; line-height: 1.7; color: var(--navy); font-weight: 500;
}
.prose a { color: var(--blue); font-weight: 600; }
.prose img { max-width: 100%; height: auto; border-radius: 16px; }

/* Partnership block: a two-logo lockup over the photograph, used where a page
   describes work delivered jointly with another organisation. The lockup sits
   on white so both marks keep their own colour rather than being tinted by a
   shared background. */
.partner-block { margin-top: 30px; }
.prose > .partner-block + * { margin-top: 30px; }
.partner-lockup {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: clamp(20px, 5vw, 48px);
  background: white; border: 1.5px solid var(--border);
  border-radius: 18px 18px 0 0; border-bottom: none;
  padding: 30px clamp(20px, 5vw, 40px);
}
.partner-lockup img { border-radius: 0; display: block; }
.partner-lockup .partner-mark-prima { height: 52px; width: auto; }
.partner-lockup .partner-mark-jobgen { height: 30px; width: auto; }
/* The divider reads as "with", so it is decorative and stays out of the
   accessibility tree, the surrounding copy already names both parties. */
.partner-lockup-sep {
  width: 1px; align-self: stretch; min-height: 40px;
  background: var(--border);
}
.partner-block figure, .partner-photo { margin: 0; }
.partner-photo {
  /* The source frame carries a lot of sky and floor. Cropping to 16:10 keeps
     both people centred while the block stays a readable height in the
     article column. */
  display: block; width: 100%; height: auto;
  aspect-ratio: 16/10; object-fit: cover; object-position: center 34%;
  border-radius: 0 0 18px 18px;
  border: 1.5px solid var(--border); border-top: none;
}
.partner-block figcaption {
  margin-top: 14px; font-size: 14px; line-height: 1.7; color: var(--muted);
}
.partner-block figcaption strong { color: var(--navy); font-weight: 700; }

@media(max-width:600px) {
  .partner-lockup { gap: 18px; padding: 24px 20px; }
  .partner-lockup .partner-mark-prima { height: 42px; }
  .partner-lockup .partner-mark-jobgen { height: 24px; }
  .partner-lockup-sep { width: 100%; height: 1px; min-height: 0; align-self: auto; }
}

/* Two-column page layout with sidebar */
.page-body { padding: 84px 24px; background: white; }
.layout-sidebar {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 64px; align-items: start;
}
.sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
.sidebar-card {
  background: var(--off-white); border: 1px solid var(--border);
  border-radius: 18px; padding: 26px 24px;
}
.sidebar-card h3 {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--blue); margin-bottom: 16px;
}
.sidebar-card ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.sidebar-card ul a {
  display: block; padding: 10px 14px; border-radius: 10px;
  color: var(--text); text-decoration: none; font-size: 14.5px; font-weight: 600;
  transition: background .18s, color .18s;
}
.sidebar-card ul a:hover { background: var(--blue-light); color: var(--blue); }
.sidebar-card ul a.current { background: var(--blue); color: white; }
.sidebar-cta {
  background: linear-gradient(140deg, var(--navy), #00406f);
  border: none; color: white;
}
.sidebar-cta h3 { color: var(--accent); }
.sidebar-cta p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.72); margin-bottom: 18px; }

@media(max-width:960px) {
  .layout-sidebar { grid-template-columns: 1fr; gap: 44px; }
  .sidebar { position: static; }
}

/* Narrow single-column page */
.layout-narrow { max-width: 820px; margin: 0 auto; }

/* Feature list cards used across service/about pages */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 20px; }
.service-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-card {
  background: white; border: 1.5px solid var(--border); border-radius: 18px;
  padding: 28px 26px; transition: border-color .22s, box-shadow .22s, transform .22s;
}
.feature-card:hover { border-color: rgba(0,71,129,.22); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.feature-card .fc-icon {
  width: 50px; height: 50px; border-radius: 14px; background: var(--blue-light);
  display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px;
  color: var(--blue);
}
.feature-card h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.feature-card p { font-size: 14.5px; color: var(--muted); line-height: 1.7; }

@media(max-width:900px) {
  .service-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media(max-width:600px) {
  .service-overview-grid { grid-template-columns: 1fr; }
}

/* Leadership profiles, photography leads the hierarchy, while the copy stays
   easy to scan beneath it. */
.about-intro { padding: 104px 24px 96px; background: white; }
.about-intro-grid {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  align-items: start; gap: clamp(56px, 8vw, 120px);
}
.about-intro .section-title { max-width: 520px; margin-bottom: 0; }
.about-intro-copy { max-width: 720px; }
.about-intro-copy p { color: var(--muted); font-size: 16px; line-height: 1.8; margin-bottom: 16px; }
.about-intro-copy .about-intro-lead { color: var(--navy); font-size: 20px; font-weight: 600; line-height: 1.6; }

.about-operating { background: white; }
.about-operating-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.about-operating-item { min-width: 0; padding: 32px 28px 38px; border-right: 1px solid var(--border); }
.about-operating-item:last-child { border-right: 0; }
.about-operating-item > span { display: block; color: var(--gold-ink); font-size: 12px; font-weight: 800; letter-spacing: 1.4px; margin-bottom: 22px; }
.about-operating-item h3 { color: var(--navy); font-size: 18px; margin-bottom: 12px; }
.about-operating-item p { color: var(--muted); font-size: 14.5px; line-height: 1.72; }
.about-operating-item a { display: inline-block; margin-top: 18px; color: var(--blue); font-size: 13.5px; font-weight: 750; text-decoration: none; }
.about-operating-item a:hover { color: var(--navy); }

/* About is a long editorial page. Its core content must never depend on an
   intersection animation to become readable; doing so created large, empty
   white bands in full-page views and while quickly scrolling. */
.about-intro .fade-up,
#leadership .fade-up,
.about-operating .fade-up,
.about-recognition .fade-up,
#values .fade-up {
  opacity: 1;
  transform: none;
}

.leadership-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.leader-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: white;
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 12px 36px rgba(0, 37, 68, .08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.leader-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 71, 129, .22);
  box-shadow: 0 20px 48px rgba(0, 37, 68, .13);
}
.leader-photo {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #dfe8ef;
}
.leader-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  transition: transform .5s ease;
}
.leader-photo-ayaz img { object-position: center 24%; }
.leader-card:hover .leader-photo img { transform: scale(1.025); }
.leader-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 30px 32px 34px;
}
.leader-role {
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  line-height: 1.4;
  text-transform: uppercase;
}
.leader-content h3 {
  margin-bottom: 6px;
  color: var(--navy);
  font-size: clamp(1.5rem, 2vw, 1.85rem);
  line-height: 1.2;
}
.leader-focus {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .25px;
}
.leader-bio {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}
.leader-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}
.leader-link:hover { color: var(--navy); }
.leader-link svg { width: 13px; height: 13px; }

@media(max-width:780px) {
  .about-intro { padding: 72px 24px; }
  .about-intro-grid { grid-template-columns: 1fr; gap: 30px; }
  .about-intro-copy .about-intro-lead { font-size: 18px; }
  .about-operating-grid { grid-template-columns: 1fr 1fr; }
  .about-operating-item:nth-child(2) { border-right: 0; }
  .about-operating-item:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .leadership-grid { grid-template-columns: 1fr; gap: 24px; }
  .leader-photo { aspect-ratio: 5/4; }
}

@media(max-width:480px) {
  .about-operating-grid { grid-template-columns: 1fr; }
  .about-operating-item { border-right: 0; border-bottom: 1px solid var(--border); padding: 28px 4px; }
  .about-operating-item:nth-child(3) { border-bottom: 1px solid var(--border); }
  .about-operating-item:last-child { border-bottom: 0; }
  .leader-card { border-radius: 18px; }
  .leader-photo { aspect-ratio: 1/1; }
  .leader-content { padding: 24px 22px 28px; }
  .leader-bio { font-size: 14.5px; }
}

/* Panel / credential list */
.cred-list { display: flex; flex-direction: column; gap: 14px; }
.cred-item {
  display: flex; gap: 18px; align-items: flex-start;
  background: white; border: 1.5px solid var(--border); border-left: 4px solid var(--gold-ink);
  border-radius: 14px; padding: 22px 24px;
  transition: box-shadow .22s, border-color .22s;
}
.cred-item:hover { box-shadow: var(--shadow-md); }
.cred-code {
  background: var(--blue-light); color: var(--blue);
  border-radius: 9px; padding: 7px 13px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .5px; white-space: nowrap; flex-shrink: 0;
}
.cred-item h3 { font-size: 15.5px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.cred-item p { font-size: 14px; color: var(--muted); line-height: 1.65; }

/* Blog index cards */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 26px; }
.post-card {
  display: flex; flex-direction: column; background: white;
  border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: box-shadow .25s, transform .22s, border-color .22s;
}
.post-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); border-color: rgba(0,71,129,.2); }
.post-card-img { aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: var(--navy); }
.post-card-body { padding: 26px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.post-meta {
  font-size: 11.5px; font-weight: 800; color: var(--blue);
  text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 12px;
}
.post-card h3 { font-size: 17.5px; font-weight: 700; color: var(--navy); line-height: 1.35; margin-bottom: 12px; }
.post-card p { font-size: 14px; color: var(--muted); line-height: 1.7; flex: 1; margin-bottom: 18px; }
.post-card .read-more { color: var(--blue); font-size: 13.5px; font-weight: 700; }

/* Article header meta */
.article-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 13.5px; color: rgba(255,255,255,.62); margin-top: 22px;
}
.article-meta .author-chip {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: 100px; padding: 6px 16px 6px 6px; color: white; font-weight: 600;
}
.article-meta .author-chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.article-hero-img {
  width: calc(100% - 48px); max-width: 1000px; height: auto;
  margin: -60px auto 0; display: block; object-fit: contain;
  border-radius: 20px; box-shadow: var(--shadow-lg); position: relative; z-index: 5;
}
.article-hero-img--square { max-width: 760px; }
/* A 2:3 portrait rendered 680px wide becomes 1020px tall. Keeping it to
   480px preserves the artwork while allowing the article to begin sooner. */
.article-hero-img--portrait { max-width: 480px; }

.article-page-body { padding-top: 72px; }
.article-layout { grid-template-columns: minmax(0, 720px) 300px; justify-content: center; gap: 72px; }
.article-layout .sidebar { position: static; }
.article-prose {
  max-width: 68ch;
  color: #344054;
  font-size: 17px;
  line-height: 1.78;
}
.article-prose > p:first-of-type {
  color: var(--navy);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.65;
}
.article-prose h2 {
  position: relative;
  margin-top: 58px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 120px;
}
.article-prose h2::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 52px;
  height: 2px;
  background: var(--gold-ink);
}
.article-prose li { line-height: 1.72; }
/* In-article artwork, e.g. the awards finalist badge. Near-black artwork
   needs the same hairline the home-page award banner uses. */
.article-figure { margin: 36px 0; }
.article-figure img {
  display: block; width: 100%; height: auto; border-radius: 14px;
  border: 1px solid rgba(0,37,68,.10); box-shadow: var(--shadow-md);
}
.article-figure figcaption { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* In-article video: a navy "screening room" panel. The thin inset gold frame
   echoes the hairline rectangle on the Business Awards finalist artwork, so
   the badge near the top of the article and the footage near the bottom read
   as a pair. */
.article-video {
  position: relative; margin: 48px 0 8px; padding: 28px 28px 24px;
  background: linear-gradient(160deg, var(--navy) 0%, #00182d 100%);
  border-radius: 20px; box-shadow: var(--shadow-lg); isolation: isolate;
}
.article-video::before {
  content: ""; position: absolute; inset: 10px; z-index: -1;
  border: 1px solid var(--accent-a35); border-radius: 13px; pointer-events: none;
}
.article-video-head { margin-bottom: 18px; }
.article-video-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent);
}
.article-video-eyebrow .ic { font-size: 10px; }
.article-prose .article-video-title {
  margin: 8px 0 0; color: white; font-size: 22px; font-weight: 750;
  line-height: 1.3; letter-spacing: -.2px;
}
.article-video .video-embed { border-radius: 12px; box-shadow: none; }
.article-video .video-play span { width: 68px; height: 68px; font-size: 22px; }
.video-duration {
  position: absolute; right: 12px; bottom: 12px; pointer-events: none;
  background: rgba(0,0,0,.72); color: white; border-radius: 6px;
  font-size: 12.5px; font-weight: 700; padding: 3px 8px; font-variant-numeric: tabular-nums;
}
.article-video figcaption {
  margin-top: 14px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.66);
}
.article-prose .article-video figcaption a {
  color: var(--accent); font-weight: 650; text-decoration: none; white-space: nowrap;
}
.article-prose .article-video figcaption a:hover { color: var(--accent-light); }
.article-video figcaption .ic { font-size: 11px; margin-left: 2px; }

/* Closing sign-off: the article's last line and the PRIMA tagline, set apart
   as a signature rather than two more body paragraphs. */
.article-signoff { margin: 56px 0 8px; text-align: center; }
.article-prose .article-signoff-lead {
  margin: 0; color: var(--navy); font-size: clamp(24px, 3.4vw, 30px);
  font-style: italic; font-weight: 600; line-height: 1.3; letter-spacing: -.3px;
}
.article-signoff .rule-gold { margin: 20px auto 18px; }
.article-prose .article-signoff-tagline {
  margin: 0; color: var(--gold-ink); font-size: 13px; font-weight: 800;
  letter-spacing: 2.4px; text-transform: uppercase;
}
@media(max-width:600px) {
  .article-video { padding: 20px 16px 18px; margin-top: 40px; }
  .article-video::before { inset: 6px; }
  .article-prose .article-video-title { font-size: 19px; }
  .article-video .video-play span { width: 58px; height: 58px; font-size: 19px; }
}

.article-toc {
  position: static;
  inset: auto;
  z-index: auto;
  padding: 24px 22px;
  background: white;
  transition: none;
}
.article-toc ol { list-style: none; display: grid; gap: 2px; }
.article-toc li { border-bottom: 1px solid var(--border); }
.article-toc li:last-child { border-bottom: 0; }
.article-toc a {
  display: block;
  padding: 10px 2px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: color .18s, padding-left .18s;
}
.article-toc a:hover,
.article-toc a:focus-visible { color: var(--blue); padding-left: 5px; }
.article-more .fade-up { opacity: 1; transform: none; }

@media(max-width:960px) {
  .article-layout {
    grid-template-columns: minmax(0, 720px);
    justify-content: center;
    gap: 48px;
  }
  .article-layout .sidebar { width: 100%; max-width: 720px; }
  /* On a single-column screen this navigation would sit after the article,
     where it no longer helps orientation. Keep the supporting actions only. */
  .article-toc { display: none; }
}

@media(max-width:600px) {
  .article-hero-img { width: calc(100% - 32px); margin-top: -34px; border-radius: 14px; }
  .article-page-body { padding-top: 56px; }
  .article-prose { font-size: 16.5px; line-height: 1.78; }
  .article-prose > p:first-of-type { font-size: 18px; }
  .article-prose h2 { margin-top: 46px; }
}

/* Simple CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--navy) 0%, #00406f 100%);
  padding: 76px 24px; text-align: center; position: relative; overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; top: -180px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse, var(--accent-a14) 0%, transparent 70%);
}
.cta-band-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; color: white; margin-bottom: 16px; letter-spacing: -.5px; }
.cta-band p { font-size: 16.5px; color: rgba(255,255,255,.72); line-height: 1.75; margin-bottom: 32px; }
.cta-band-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Nav on inner pages is always solid */
nav.solid .nav-body {
  background: rgba(255,255,255,.98);
  box-shadow: 0 2px 24px rgba(0,0,0,.10);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
nav.solid .logo-svg-dark { display: none; }
nav.solid .logo-svg-color { display: block; }
nav.solid .nav-links > li > a { color: var(--text); }
nav.solid .nav-links > li > a:hover { color: var(--blue); }
nav.solid .nav-toggle span { background: var(--navy); }
nav.solid .nav-dropdown::before { background: white; border: 1px solid var(--border); box-shadow: 0 16px 48px rgba(0,0,0,.12); }
nav.solid .nav-dropdown a { color: var(--text); }
nav.solid .nav-dropdown a:hover { background: var(--blue-light); color: var(--blue); }
nav.solid .nav-dropdown-divider { background: var(--border); }
nav.solid .btn-nav-cta { color: #002544 !important; }
@media(max-width:900px) {
  nav.solid .nav-links { background: white; border-bottom: 1px solid var(--border); }
  nav.solid .nav-links > li > a { color: var(--text) !important; }
  nav.solid .nav-links > li > a:hover { background: var(--blue-light) !important; color: var(--blue) !important; }
  nav.solid .nav-dropdown::before { background: var(--off-white); }
  nav.solid .nav-dropdown a { color: var(--muted) !important; }
}

/* ═══════════════════════════════════════════════════════════
   ICONS: Font Awesome Free 6 Solid/Brands, inlined as an SVG
   sprite. CC BY 4.0 · https://fontawesome.com/license/free
   ═══════════════════════════════════════════════════════════ */
.ic {
  width: 1em; height: 1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* Circular icon tile, the card/feature treatment */
/* Gold icon, no tile, the original site's "Why PRIMA" treatment */
.ic-bare { font-size: 40px; color: var(--gold-ink); display: block; margin-bottom: 18px; }
.ic-bare.center { margin-left: auto; margin-right: auto; }

/* ═══════════════════════════════════════════════════════════
   UTILITY BAR: thin contact strip above the nav
   ═══════════════════════════════════════════════════════════ */
.utility-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 101;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: 13px;
  transition: transform .35s ease;
}
.utility-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 28px;
  height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.utility-tag {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-weight: 600; font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.utility-links { display: flex; align-items: center; gap: 4px; }
.utility-links a {
  display: inline-flex; align-items: center; gap: 7px;
  color: rgba(255,255,255,.78); text-decoration: none; font-weight: 500;
  padding: 6px 12px; border-radius: 8px;
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.utility-links a:hover { color: white; background: rgba(255,255,255,.09); }
a.utility-tag { text-decoration: none; }
a.utility-tag:hover { color: var(--accent-light); }
.utility-links a .ic { font-size: 13px; color: var(--accent); }

/* Nav sits below the utility bar */
nav { top: 38px; }
/* Once scrolled, the utility bar slides away and the nav takes the top */
body.scrolled-past .utility-bar { transform: translateY(-100%); }
body.scrolled-past nav { top: 0; }

@media(max-width:760px) {
  .utility-tag { display: none; }
  .utility-inner { justify-content: center; padding: 0 12px; }
  .utility-links a { padding: 6px 9px; font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════════════════
   TWO-TONE HEADINGS: navy + gold, with a short gold rule.
   The original site's signature treatment: "Why PRIMA".
   ═══════════════════════════════════════════════════════════ */
/* Two-tone headings. Section titles are 29–45px, so the accent word takes the
   brand champagne on light surfaces too, --gold-ink is for body-size text and
   would read as olive at this scale. */
.section-title .gold { color: var(--accent-display); }
#specialisations .section-title .gold,
#deliver .section-title .gold,
.cta-band h2 .gold,
.page-hero h1 .gold { color: var(--accent); }

/* Purely decorative, and it sits directly under the heading, it matches the
   accent word rather than the body ink. */
.rule-gold { display: block; width: 62px; height: 3px; border-radius: 3px;
  background: var(--accent-display); margin: 18px 0 22px; }
#specialisations .rule-gold, #deliver .rule-gold, .cta-band .rule-gold { background: var(--accent); }
.section-header.center .rule-gold { margin-left: auto; margin-right: auto; }

/* Heading style used where the label chip isn't wanted */
.section-header.plain .section-label { display: none; }

/* ═══════════════════════════════════════════════════════════
   HOME: service cards with photos (as on the original site)
   ═══════════════════════════════════════════════════════════ */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 26px; }
.svc-card {
  display: flex; flex-direction: column; background: white;
  border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: box-shadow .28s, transform .24s, border-color .24s;
}
.svc-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); border-color: rgba(0,71,129,.2); }
.svc-card-img { aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: var(--navy); }
.svc-card-body { padding: 28px 28px 30px; flex: 1; display: flex; flex-direction: column; }
.svc-card h3 { font-size: 18.5px; font-weight: 700; color: var(--navy); margin-bottom: 12px; line-height: 1.3; }
.svc-card p { font-size: 14.5px; color: var(--muted); line-height: 1.7; flex: 1; margin-bottom: 20px; }

/* HOW WE DELIVER */
/* Runs from the heading through the process cards to the stats that prove
   them, one flat blue, no internal breaks. The real section boundary is
   below, where #specialisations starts. */
#deliver {
  background: var(--blue);
  position: relative; overflow: hidden;
}
#deliver::before {
  content: ''; position: absolute; top: -180px; left: -120px;
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-a10) 0%, transparent 70%);
}
.deliver-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 20px; position: relative; }
.deliver-card {
  background: white; border-radius: 18px; padding: 34px 28px;
  position: relative; transition: transform .25s, box-shadow .25s;
}
.deliver-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,.22); }
.deliver-num {
  position: absolute; top: 18px; right: 22px;
  font-size: 13px; font-weight: 800; color: var(--border); letter-spacing: 1px;
}
/* #deliver is a blue surface, so this icon takes the dark-surface champagne
   (4.84:1). It was on --gold-ink, which is 1.96:1 here, near invisible. */
.deliver-card .ic-bare { font-size: 34px; color: var(--accent); margin-bottom: 16px; }
.deliver-card h3 { font-size: 16.5px; font-weight: 700; color: var(--blue); margin-bottom: 10px; }
.deliver-card p { font-size: 14.5px; color: var(--muted); line-height: 1.7; }

/* WHY PRIMA: two-up centred cards */
/* Why PRIMA: 2x2 as on the original site, not 3+1 */
/* Full section width, not 960px. Wider cards let the copy fall in fewer lines,
   which is what actually takes the height out, trimming padding alone just
   crowds the text. */
.why-grid.two { grid-template-columns: repeat(2, 1fr); max-width: 1200px; margin: 0 auto; }
@media(max-width:720px) { .why-grid.two { grid-template-columns: 1fr; } }
.why-card.center { text-align: center; }
.why-card.center .why-icon { margin-left: auto; margin-right: auto; }
.why-card.center h3 { color: var(--blue); }

/* AWARDS */
/* #why-prima is white and #awards used to be too, so the two ran together as
   one long white stretch. Awards takes the off-white step; its inner cards
   flip to white to keep the same figure/ground relationship they had. */
#awards { background: var(--off-white); }
/* ── AWARDS (home page) ──
   Was a 300px-wide finalist image with the citation stacked under it, then
   three bordered cards: the proof point was the smallest thing on screen.
   The artwork now leads at full width with the citation alongside, and the
   three further recognitions drop their card chrome for hairline columns.
   .recog-grid / .recog-item are untouched, the CSR page still uses them. */
#awards { background: var(--off-white); }
.award-feature {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px;
  align-items: center; margin-bottom: 56px;
}
.award-banner { margin: 0; }
/* The artwork is near-black, so it needs a hairline to sit on the off-white
   ground rather than float, and no white padding that would fight it. */
.award-banner img {
  display: block; width: 100%; height: auto; border-radius: 14px;
  border: 1px solid rgba(0,37,68,.10); box-shadow: var(--shadow-md);
}
.award-eyebrow {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--gold-ink); margin-bottom: 10px;
}
.award-cite h3 {
  font-size: 23px; font-weight: 800; color: var(--navy);
  line-height: 1.25; letter-spacing: -.3px; margin-bottom: 12px;
}
.award-cite p { font-size: 15.5px; line-height: 1.8; color: var(--muted); max-width: 46ch; }
.award-link {
  display: inline-block; margin-top: 18px; color: var(--blue);
  font-size: 14.5px; font-weight: 700; text-decoration: none;
}
.award-link:hover { color: var(--navy); }
/* About page: the same banner + citation lockup, on off-white so it separates
   from the white "How we operate" band above and the navy values below. */
.about-recognition { background: var(--off-white); }
.about-recognition .award-feature { margin-bottom: 0; }
.about-recognition .section-title { margin-bottom: 10px; }
.award-recog {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--border);
}
.award-recog-item { padding: 28px 30px; border-left: 1px solid var(--border); }
.award-recog-item:first-child { border-left: 0; padding-left: 0; }
.award-recog-item:last-child { padding-right: 0; }
.award-recog-year {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--gold-ink); margin-bottom: 9px;
}
.award-recog-item h3 {
  font-size: 16px; font-weight: 700; color: var(--navy);
  line-height: 1.35; margin-bottom: 8px;
}
.award-recog-item p { font-size: 14px; color: var(--muted); line-height: 1.65; }
@media(max-width:900px) {
  .award-feature { grid-template-columns: 1fr; gap: 28px; margin-bottom: 40px; }
  .award-cite p { max-width: none; }
  /* Vertical rules make no sense once the columns stack. */
  .award-recog { grid-template-columns: 1fr; }
  .award-recog-item {
    border-left: 0; border-top: 1px solid var(--border);
    padding: 24px 0;
  }
  .award-recog-item:first-child { border-top: 0; }
}

/* Home hero: dual-audience buttons */
body.home .hero-audience { display: flex; gap: 14px; flex-wrap: wrap; }
body.home .btn-primary .ic, body.home .btn-accent .ic { font-size: 14px; }
.hero-scroll-arrow .ic { font-size: 12px; }

/* ═══════════════════════════════════════════════════════════
   VIDEO: click-to-load facade. The real YouTube iframe is only
   injected on click, so the page makes no third-party request
   (and sets no tracking cookie) unless the visitor asks for it.
   ═══════════════════════════════════════════════════════════ */
.video-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: center; }
#video { padding-top: 56px; }
@media(max-width:900px) { .video-split { grid-template-columns: 1fr; gap: 36px; } }

.video-embed {
  position: relative; width: 100%; aspect-ratio: 16/9;
  border-radius: 20px; overflow: hidden; background: var(--navy);
  box-shadow: var(--shadow-lg); cursor: pointer; border: none; padding: 0;
  display: block;
}
.video-embed img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease, filter .3s; }
.video-embed:hover img { transform: scale(1.04); filter: brightness(.85); }
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.video-play span {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--accent); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; padding-left: 5px;
  box-shadow: 0 10px 34px rgba(0,0,0,.4);
  transition: transform .25s ease, background .25s;
}
.video-embed:hover .video-play span { transform: scale(1.1); background: var(--accent); }
.video-embed:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Download / document link */
.doc-link {
  display: inline-flex; align-items: center; gap: 14px;
  background: white; border: 1.5px solid var(--border); border-left: 4px solid var(--gold-ink);
  border-radius: 14px; padding: 18px 24px; text-decoration: none;
  transition: box-shadow .22s, border-color .22s, transform .18s;
}
.doc-link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.doc-link .ic { font-size: 26px; color: var(--gold-ink); }
.doc-link strong { display: block; font-size: 15px; color: var(--navy); font-weight: 700; margin-bottom: 2px; }
.doc-link small { font-size: 12.5px; color: var(--muted); }

/* Recognition / community list */
.recog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 18px; text-align: left; }
.recog-item {
  background: var(--off-white); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px 24px;
}
.recog-item .recog-year {
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--gold-ink); margin-bottom: 8px; display: block;
}
.recog-item h3 { font-size: 15.5px; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.35; }
.recog-item p { font-size: 14px; color: var(--muted); line-height: 1.65; }
.recog-item p a { color: var(--blue); font-weight: 650; text-decoration: none; white-space: nowrap; }
.recog-item p a:hover { color: var(--navy); }

/* ═══════════════════════════════════════════════════════════
   FOCUS: the browser default ring is near-black, which is
   invisible on the navy surfaces this site uses heavily.
   One visible ring, applied only for keyboard users.
   ═══════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
/* On light surfaces the bright gold is too low-contrast; use navy there. */
.page-body :focus-visible,
.contact-form :focus-visible,
section[style*="var(--off-white)"] :focus-visible,
#services :focus-visible, #awards :focus-visible, #why-prima :focus-visible,
.post-card:focus-visible, .svc-card:focus-visible, .feature-card:focus-visible {
  outline-color: var(--blue);
}
/* Inputs already show a focus ring via border + shadow; keep them consistent */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible { outline-offset: 0; outline-color: var(--blue); }

/* ═══════════════════════════════════════════════════════════
   ALIGNMENT FIXES
   ═══════════════════════════════════════════════════════════ */
/* Prose columns started ~30px below their sidebar because the first heading
   still carried its top margin. Kill the leading margin on the first child. */
.prose > :first-child { margin-top: 0; }

/* Two-column sections were vertically centred, which left the columns
   starting on different baselines. Align them to the top. */
.video-split { align-items: start; }
.about-grid { align-items: start; }
#about .about-grid { align-items: start; }

/* ═══════════════════════════════════════════════════════════
   CONTACT PANEL: details and form share one card so they read
   as a single unit rather than two floating blocks.
   ═══════════════════════════════════════════════════════════ */
.contact-panel {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  background: white; border-radius: 24px; overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.28);
  max-width: 1120px; margin: 0 auto;
}
.contact-panel-info {
  background: linear-gradient(160deg, var(--navy) 0%, #003a66 100%);
  padding: 48px 42px; display: flex; flex-direction: column; gap: 26px;
  position: relative; overflow: hidden;
}
.contact-panel-info::after {
  content: ''; position: absolute; bottom: -140px; right: -120px;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-a14) 0%, transparent 70%);
  pointer-events: none;
}
.contact-panel-info h2 { color: white; font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.contact-panel-info > p { color: rgba(255,255,255,.68); font-size: 14.5px; line-height: 1.7; margin-top: -12px; }
.contact-panel-info .contact-list { display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 1; }
.contact-row { display: flex; gap: 16px; align-items: flex-start; }
.contact-row .ic-wrap {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: var(--accent-a14); border: 1px solid var(--accent-a20);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 16px;
}
.contact-row .row-label { display: block;
  color: var(--accent); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 1.5px; font-weight: 800; margin-bottom: 5px;
}
.contact-row p, .contact-row a {
  color: white; font-size: 14.5px; line-height: 1.55; text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-row a:hover { color: var(--accent); }
.contact-social { display: flex; gap: 10px; margin-top: auto; padding-top: 26px; position: relative; z-index: 1; }
.contact-social a {
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.75); font-size: 15px; text-decoration: none;
  transition: background .2s, color .2s, transform .15s;
}
.contact-social a:hover { background: var(--accent); color: var(--navy); transform: translateY(-2px); }

.contact-panel-form { padding: 48px 44px; background: white; }
.contact-panel-form h2 { font-size: 21px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.contact-panel-form .form-sub { font-size: 14px; color: var(--muted); margin-bottom: 26px; }

/* Honeypot. Moved off-screen rather than display:none, which some bots know to
   skip; combined with aria-hidden and tabindex="-1" on the field itself, no
   human (sighted, screen reader or keyboard) ever reaches it. */
.hp-field {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.cf-turnstile { margin-bottom: 18px; }

.form-status { font-size: 14px; line-height: 1.6; margin-top: 14px; }
.form-status:empty { margin-top: 0; }
/* Not colour alone: each state gets a leading glyph, so the outcome survives
   greyscale and colour blindness. */
.form-status.is-ok { color: #15803d; font-weight: 600; }
.form-status.is-ok::before { content: "✓ "; }
.form-status.is-error { color: #b91c1c; font-weight: 600; }
.form-status.is-error::before { content: "! "; }

.btn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

@media(max-width:900px) {
  .contact-panel { grid-template-columns: 1fr; border-radius: 20px; }
  .contact-panel-info { padding: 36px 28px; }
  .contact-panel-form { padding: 36px 28px; }
  .contact-social { margin-top: 8px; }
}

/* ═══════════════════════════════════════════════════════════
   SKIP LINK: keyboard users would otherwise tab the whole nav
   on every page. Visible only when focused.
   ═══════════════════════════════════════════════════════════ */
.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 999;
  background: var(--accent); color: var(--navy);
  padding: 12px 22px; border-radius: 0 0 12px 12px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
  transition: top .18s ease;
}
.skip-link:focus { top: 0; }
:target { scroll-margin-top: 120px; }

/* ═══════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════
   BACK TO TOP: appears once the hero is behind you, so it never
   sits over content at the top of the page.
   ═══════════════════════════════════════════════════════════ */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: var(--blue); color: white; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 20, 40, .35);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s, background .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--navy); }
@media(max-width:560px) {
  .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION: this design leans on movement (a marquee and
   an animated gradient that both run forever, a hero zoom, a
   pulsing dot, scroll reveals). Honour the OS setting.
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Scroll reveals must not leave content invisible or shifted */
  .fade-up { opacity: 1 !important; transform: none !important; }
  /* Fade the back-to-top in without the slide */
  .to-top { transform: none !important; }
  .hero-photo { animation: none !important; transform: none !important; }
  .hero-scroll { animation: none !important; }
  /* Hover lifts are motion too */
  .svc-card:hover, .post-card:hover, .feature-card:hover, .deliver-card:hover,
  .why-card:hover, .spec-card:hover, .doc-link:hover, .btn-primary:hover,
  .btn-accent:hover, .btn-navy:hover, .btn-nav-cta:hover,
  .contact-social a:hover, .why-card:hover .why-icon { transform: none !important; }
}

/* Card sub-headings: these were <h4> for their size, but they sit directly
   under an <h2>, so they are <h3> now and keep their compact styling. */
.contact-panel-info h2.sub { font-size: 21px; }
h3.sub { font-size: inherit; }
.footer-col h3, .sidebar-card h3, .value-item h3, .cred-item h3,
.recog-item h3, .contact-panel-info h2 { font-weight: 700; }

/* Visually hidden, still announced by screen readers. Used for section
   headings that the visual design does not need but the document outline does. */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Readable measure that stays flush-left with full-width grids on the same
   page (centring it created a ragged left edge between sections). */
.measure { max-width: 820px; }

/* ══════════════════════════════════════════════════════════════════
   Government positioning, legal pages and form privacy notices
   ══════════════════════════════════════════════════════════════════ */

/* The headline is now a full positioning statement rather than a three-word
   brand line, so it cannot carry the old display size. Scoped to .home and
   given its own mobile step, because the base .hero h1 rules would otherwise
   win at one breakpoint and lose at the other. */
body.home .hero-brandline {
  font-size: 13px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 18px;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
body.home .hero h1 {
  font-size: clamp(2rem, 3.3vw, 3.05rem);
  letter-spacing: -1.1px;
  margin-bottom: 20px;
  text-wrap: balance;
  max-width: 20ch;
}
@media (max-width: 600px) {
  body.home .hero h1 { font-size: clamp(1.85rem, 7.2vw, 2.15rem); letter-spacing: -.6px; max-width: none; }
  body.home .hero-brandline { font-size: 11.5px; letter-spacing: 2px; margin-bottom: 14px; }
}

/* Credentials below the hero. Two columns so five schemes do not push the
   rest of the page down; the codes stay left-aligned across both. */
.cred-list-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
}
.cred-note {
  margin-top: 20px; text-align: center;
  font-size: 14px; color: var(--muted); line-height: 1.7;
}
.cred-note + .cred-note { margin-top: 8px; }
.cred-note a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cred-note a:hover { color: var(--gold-ink); text-decoration-color: currentColor; }

/* Optional-field marker on the contact form. */
.label-optional { font-weight: 400; color: var(--muted); }