@charset "UTF-8";
/* ==========================================================================
   BSL — BAE Systems Strategic Aerospace Services (W.L.L)
   Design system converted from Figma "Untitled" (file 7eey8OiFN96RGPtYiNFjd1)
   --------------------------------------------------------------------------
   SCALING MODEL
   The Figma artboards are 1800px wide. The root font-size is pinned to
   1/180th of the viewport, so `1rem = 10 design px`. Every value below is
   authored as `design-px / 10` in rem, which makes the desktop rendering
   pixel-identical to Figma at a 1800px viewport and perfectly proportional
   at every width down to the 1200px breakpoint. Below 1200px the root
   returns to a fixed 10px (so 1rem === 10 real px, i.e. design-native type
   sizes) and the layout reflows through Bootstrap's grid.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --bsl-maroon: #821445;
  --bsl-maroon-dark: #6b0f38;
  --bsl-navy: #1f3f7c;
  --bsl-ink: #011220;
  --bsl-black: #000000;
  --bsl-white: #ffffff;

  /* Neutrals (sampled from the Figma fills) */
  --bsl-grey-900: #161616;
  --bsl-grey-800: #464646;
  --bsl-grey-700: #515151;
  --bsl-grey-600: #676767;
  --bsl-grey-500: #757575;   /* Figma #797979, nudged to clear 4.5:1 on white */
  --bsl-grey-400: #979797;
  --bsl-grey-350: #a9a9a9;
  --bsl-grey-300: #b1b1b1;
  --bsl-grey-250: #bab7b7;
  --bsl-grey-200: #d9d9d9;
  --bsl-grey-150: #e3e3e3;
  --bsl-grey-100: #e6e6e6;
  --bsl-grey-050: #f5f5f5;
  --bsl-surface: #f8f8f8;
  --bsl-blush: #fdecf3;
  --bsl-blush-soft: #fdeff5;

  /* Type */
  --bsl-font: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bsl-font-alt: "Inter", "Segoe UI", system-ui, sans-serif;
  --bsl-font-ubuntu: "Ubuntu", "Segoe UI", system-ui, sans-serif;
  --bsl-font-jakarta: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --bsl-font-dm: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --bsl-font-display: "Iansui", "Outfit", system-ui, sans-serif;

  /* Layout */
  /* Figma content column is 1552px wide (x 124 -> 1676) on a 1800px board.
     max-width therefore carries the 2 x 24px gutter so the CONTENT BOX is
     exactly 1552px at the design width. */
  --bsl-container: 165rem;     /* 1552 content + 2 x 24 gutter = 1600 */

  /* Page hero height. Every inner page uses this one value so the banner is
     uniform site-wide, clamped so it stays a usable band on short laptops and
     does not balloon on tall monitors. */
  --bsl-hero-h: 52rem;
  --bsl-gutter: 2.4rem;
  --bsl-header-h: 9rem;

  /* Bootstrap overrides */
  --bs-body-font-family: var(--bsl-font);
  --bs-body-color: var(--bsl-grey-900);
  --bs-body-bg: var(--bsl-white);
  --bs-link-color: var(--bsl-maroon);
  --bs-link-hover-color: var(--bsl-maroon-dark);
  --bs-primary: var(--bsl-maroon);
  --bs-border-color: var(--bsl-grey-150);
}
@media (min-width:1600px) {
  :root {
   --bsl-container: 150rem;
  }
}

/* --------------------------------------------------------------------------
   2. Root scaling + base
   -------------------------------------------------------------------------- */
html {
  font-size: 10px;              /* 1rem = 10px === design px on small screens */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (min-width: 1200px) {
  html { font-size: clamp(7.2px, calc(100vw / 180), 10px); }
}

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

body {
  margin: 0;
  font-family: var(--bsl-font);
  font-size: 1.7rem;
  line-height: 1.7;
  color: var(--bsl-grey-900);
  background: var(--bsl-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
h1, h2, h3, h4, h5, h6, p, li, a { overflow-wrap: break-word; }
button { font: inherit; color: inherit; }

::selection { background: var(--bsl-maroon); color: #fff; }

/* Visually-hidden helper (kept accessible to screen readers / crawlers) */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Keyboard focus ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--bsl-maroon);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.bsl-container {
  width: 100%;
  max-width: var(--bsl-container);
  margin-inline: auto;
  padding-inline: var(--bsl-gutter);
  /* establishes a BFC so a first child's margin-top cannot collapse out of
     the section — several overlay panels position themselves that way */
  display: flow-root;
}

.bsl-container--wide { max-width: 179.1rem; } /* 1743 content + gutters */
.bsl-section { position: relative; }

/* Decorative triangle watermark used across several sections */
.bsl-watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.bsl-section > .bsl-container { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   4. Typography scale (straight from the Figma text styles)
   -------------------------------------------------------------------------- */
.t-display {           /* Outfit 500 · 100/56 · -3 */
  font-weight: 500; font-size: 10rem; line-height: .96;
  letter-spacing: -.3rem; color: var(--bsl-black);
}
.t-h1 {                /* Outfit 500 · 90/96 · -4.05 */
  font-weight: 500; font-size: 9rem; line-height: 1.06;
  letter-spacing: -.405rem;
}
.t-h2 {                /* Outfit 500 · 61/60 · -2.75 */
  font-weight: 500; font-size: 6.1rem; line-height: 1;
  letter-spacing: -.275rem;
}
.t-h3 {                /* Outfit 400 · 42/56 · -1.26 */
  font-weight: 400; font-size: 4.2rem; line-height: 1.33;
  letter-spacing: -.126rem;
}
.t-h4 {                /* Outfit 600 · 42/44 */
  font-weight: 600; font-size: 4.2rem; line-height: 1.05;
}
.t-h5 {                /* Outfit 500 · 30/36 · -0.9 */
  font-weight: 500; font-size: 3rem; line-height: 1.2;
  letter-spacing: -.09rem;
}
.t-h6 {                /* Outfit 600 · 25/32 · -0.75 */
  font-weight: 600; font-size: 2.5rem; line-height: 1.28;
  letter-spacing: -.075rem;
}
.t-lead {              /* Outfit 400 · 22/32 · -0.66 */
  font-weight: 400; font-size: 2.2rem; line-height: 1.45;
  letter-spacing: -.066rem;
}
.t-body {              /* Outfit 400 · 18/29 */
  font-weight: 400; font-size: 1.8rem; line-height: 1.61;
}
.t-body-sm {           /* Outfit 400 · 16/24 */
  font-weight: 400; font-size: 1.6rem; line-height: 1.5;
}
.t-eyebrow {           /* Outfit 400 · 14/17 · +0.56 · UPPER */
  font-weight: 400; font-size: 1.4rem; line-height: 1.21;
  letter-spacing: .056rem; text-transform: uppercase;
}
.t-kicker {            /* Outfit 300 · 14/30 · +10 · UPPER  (the "B S L" label) */
  font-weight: 300; font-size: 1.4rem; line-height: 2.14;
  letter-spacing: 1rem; text-transform: uppercase;
}

.t-maroon { color: var(--bsl-maroon); }
.t-white  { color: var(--bsl-white); }
.t-ink    { color: var(--bsl-ink); }
.t-grey   { color: var(--bsl-grey-600); }
.t-muted  { color: var(--bsl-grey-500); }

/* "Our <accent>" split headings that recur on nearly every page */
.t-split { font-weight: 500; font-size: 4.2rem; line-height: 1.2; letter-spacing: -.126rem; }
.t-split > .lead-word { color: var(--bsl-maroon); font-weight: 400; }
.t-split > .accent { color: var(--bsl-maroon); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn-bsl {
  --btn-bg: var(--bsl-maroon);
  --btn-fg: var(--bsl-white);
  --btn-bd: var(--bsl-maroon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  min-height: 4rem;
  padding: .9rem 2.4rem;
  font-family: var(--bsl-font);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .02rem;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: .1rem solid var(--btn-bd);
  border-radius: 0;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn-bsl:hover { background: var(--bsl-maroon-dark); border-color: var(--bsl-maroon-dark); color: #fff; }
.btn-bsl:active { transform: translateY(.1rem); }
.btn-bsl .icon { width: 1.4rem; height: 1.4rem; flex: none; }

.btn-bsl--dark { --btn-bg: var(--bsl-black); --btn-bd: var(--bsl-black); }
.btn-bsl--dark:hover { background: var(--bsl-maroon); border-color: var(--bsl-maroon); }

.btn-bsl--outline { --btn-bg: transparent; --btn-fg: var(--bsl-black); --btn-bd: var(--bsl-black); }
.btn-bsl--outline:hover { background: var(--bsl-black); color: #fff; }

.btn-bsl--ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: #fff; }
.btn-bsl--ghost-light:hover { background: #fff; color: var(--bsl-maroon); }

/* Pill CTA used in the conversation band — 202×60, radius 80 */
.btn-pill {
  display: inline-flex; align-items: center; gap: 1rem;
  min-width: 20.2rem; height: 6rem; padding: 0 2.6rem;
  font-size: 2.5rem; font-weight: 600; letter-spacing: -.075rem;
  color: #fff; background: transparent;
  border: .1rem solid #fff; border-radius: 8rem;
  justify-content: center; white-space: nowrap;
  transition: background-color .3s ease, color .3s ease;
}
.btn-pill:hover { background: #fff; color: var(--bsl-maroon); }

/* Circular arrow button on the service cards — 55×55 */
.btn-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 5.5rem; height: 5.5rem; border-radius: 50%;
  background: var(--bsl-maroon); color: #fff;
  border: none; flex: none;
  transition: transform .3s ease, background-color .3s ease;
}
.btn-circle:hover { transform: rotate(45deg); background: var(--bsl-maroon-dark); }
.btn-circle svg { width: 1.8rem; height: 1.8rem; }

/* Small outline arrow chip used in list rows */
.chip-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.8rem; height: 2.8rem; border-radius: 50%;
  border: .1rem solid var(--bsl-grey-200); color: var(--bsl-grey-600);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.chip-arrow svg { width: 1.1rem; height: 1.1rem; }

/* Underlined "Explore More" text link */
.link-explore {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: 1.4rem; letter-spacing: .204rem; text-transform: uppercase;
  color: currentColor; padding-bottom: .6rem;
  border-bottom: .1rem solid currentColor;
  transition: gap .25s ease, opacity .25s ease;
}
.link-explore:hover { gap: 1.4rem; opacity: .8; }

/* --------------------------------------------------------------------------
   6. Site header  (not present in the Figma file — built from the footer's
      information architecture using the design's own tokens)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(1.2rem);
  -webkit-backdrop-filter: saturate(180%) blur(1.2rem);
  border-bottom: .1rem solid var(--bsl-grey-150);
  transition: box-shadow .3s ease;
}
.site-header.is-stuck { box-shadow: 0 .6rem 2.4rem rgba(0, 0, 0, .08); }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 3.2rem; height: var(--bsl-header-h);
}
.site-header__logo img { width: 11.6rem; height: auto; }

.site-nav { display: flex; align-items: center; gap: 3.4rem; }
.site-nav__link {
  position: relative;
  font-size: 1.6rem; font-weight: 400; letter-spacing: -.016rem;
  color: var(--bsl-grey-900); white-space: nowrap;
  padding: .6rem 0;
  transition: color .25s ease;
}
.site-nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: .2rem; background: var(--bsl-maroon);
  transition: width .3s ease;
}
.site-nav__link:hover { color: var(--bsl-maroon); }
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after { width: 100%; }
.site-nav__link[aria-current="page"] { color: var(--bsl-maroon); font-weight: 500; }

/* Dropdown */
.site-nav__item { position: relative; }
.site-nav__toggle {
  display: inline-flex; align-items: center; gap: .6rem;
  background: none; border: 0; padding: .6rem 0; cursor: pointer;
}
.site-nav__toggle svg { width: 1rem; height: 1rem; transition: transform .3s ease; }
.site-nav__item.is-open .site-nav__toggle svg { transform: rotate(180deg); }
.site-nav__menu {
  position: absolute; top: calc(100% + 1.4rem); left: 50%;
  transform: translateX(-50%) translateY(-.6rem);
  min-width: 21rem; padding: 1.2rem 0;
  background: #fff; border: .1rem solid var(--bsl-grey-150);
  box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, .1);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.site-nav__item.is-open .site-nav__menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.site-nav__menu a {
  display: block; padding: .9rem 2.2rem;
  font-size: 1.5rem; color: var(--bsl-grey-700);
  transition: background-color .2s ease, color .2s ease;
}
.site-nav__menu a:hover { background: var(--bsl-blush); color: var(--bsl-maroon); }

.site-header__cta { display: flex; align-items: center; gap: 1.6rem; }
.site-header__burger {
  display: none; width: 4.4rem; height: 4.4rem;
  align-items: center; justify-content: center;
  background: none; border: .1rem solid var(--bsl-grey-150); cursor: pointer;
}
.site-header__burger svg { width: 2rem; height: 2rem; }

/* Off-canvas mobile navigation */
.mobile-nav .offcanvas-header { padding: 2rem 2.4rem; }
.mobile-nav .offcanvas-body { padding: 0 2.4rem 3.2rem; }
.mobile-nav__link {
  display: block; padding: 1.5rem 0;
  font-size: 1.8rem; color: var(--bsl-grey-900);
  border-bottom: .1rem solid var(--bsl-grey-150);
}
.mobile-nav__link[aria-current="page"] { color: var(--bsl-maroon); font-weight: 500; }
.mobile-nav__sub a {
  display: block; padding: 1.1rem 0 1.1rem 1.8rem;
  font-size: 1.6rem; color: var(--bsl-grey-600);
}

/* --------------------------------------------------------------------------
   7. Page hero — full-bleed image with the translucent title plate
      (Figma: image 1800×777 · plate 1553×~112 sitting at y≈608)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  min-height: var(--bsl-hero-h);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--bsl-grey-900);
}
.page-hero__media {
  position: absolute; inset: 0;
}
.page-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
/* Figma "Rectangle 4259": #000 -> transparent, 1800x508, node opacity .64 */
.page-hero__media::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%;
  background: linear-gradient(180deg, #000000 0%, rgb(0 0 0 / 60%) 65%);
  opacity: .64;
}
/* The header floats over the banner, so the plate keeps clear of it even when
   a long title + intro makes the plate tall on a narrow screen. */
.page-hero__inner {
  position: relative; z-index: 2; width: 100%;
  padding-top: 9.6rem;
  /* Figma: title block bottom sits ~50px clear of the 520px banner edge. */
  padding-bottom: 5rem;
}
/* Figma "Group 427320460": the page title sits directly on the banner photo in
   white -- there is no plate behind it on any inner page (procurement 1:12355,
   services 1:12125, course-details 1:12447, contact 1:11983 are all #FFFFFF
   text drawn straight onto the image). The plate that used to live here came
   from an older revision of the board. */
.page-hero__plate {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 2.3rem;
  min-height: 0;
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Figma: Outfit 500, 90/96.32, ls -4.05 (= -.045em), #FFF, baseline box ending
   ~50px above the banner edge. */
.page-hero__title {
  font-weight: 500; font-size: 9rem; line-height: 1.07;
  letter-spacing: -.045em; color: #fff;
  text-transform: capitalize;
  text-shadow: 0 .2rem 2.4rem rgba(0, 0, 0, .35);
}
/* contact + course-details run the smaller cut: Outfit 600, 78/80, ls -3.12 */
.page-hero__title--md {
  font-weight: 600; font-size: 7.8rem; line-height: 1.026;
  letter-spacing: -.04em;
}
.page-hero__intro {
  font-size: 2.4rem; line-height: 3.1rem; letter-spacing: -.024rem;
  color: var(--bsl-grey-600);
}
/* Every page uses the plain `.page-hero` -- there are no height or layout
   modifiers left, which is what keeps the banner identical site-wide. */

/* Breadcrumb bar used on the short heroes */
/* The crumb bar sits directly above the title plate inside the banner. It is
   part of the flow so it can never overlap the plate on a narrow screen. */
.hero-crumbs {
  position: relative; z-index: 2; margin-bottom: 1.6rem;
  /* Figma: 24/26 wt300 ls -1.08 */
  font-weight: 300; font-size: 2.4rem; line-height: 2.6rem; letter-spacing: -.108rem;
  color: rgba(255, 255, 255, .9); text-transform: capitalize;
}
.hero-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.hero-crumbs a { color: rgba(255, 255, 255, .85); }
.hero-crumbs a:hover { color: #fff; text-decoration: underline; }
.hero-crumbs li + li::before { content: "/"; margin-right: .6rem; opacity: .7; }
.hero-crumbs [aria-current="page"] { color: #fff; }


/* Intro copy that used to sit inside the hero plate. It lives in its own band
   directly under the banner so every page's banner carries the heading alone
   and is therefore identical in height. */
.hero-lede {
  padding: clamp(3.2rem, 4vw, 5.6rem) 0 0;
  background: #fff;
}
.hero-lede__text {
  max-width: 96rem;
  margin: auto;
  font-size: 2.1rem;
  line-height: 2.8rem;
  letter-spacing: -.063rem;
  color: var(--bsl-grey-600);
  text-align: center;
}

/* --------------------------------------------------------------------------
   8. "Let's Start a Conversation" band
      Figma: 1553×274, #821445, overlapping the black footer by ~150px
   -------------------------------------------------------------------------- */
.cta-band-wrap {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #e8e8e8 100%);
  padding-top: 8rem;
}
.cta-band-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 15.1rem; background: var(--bsl-black);
}
.cta-band {
  position: relative; z-index: 2;
  min-height: 27.4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4rem;
  padding: 5.6rem 6.4rem;
  background: var(--bsl-maroon);
  overflow: hidden;
}
.cta-band__deco {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background:
    linear-gradient(135deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 46%),
    linear-gradient(310deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 40%);
}
.cta-band > :not(.cta-band__deco) { position: relative; z-index: 1; }
.cta-band__title {
  font-weight: 500; font-size: 6.1rem; line-height: 1;
  letter-spacing: -.275rem; color: #fff;
}
.cta-band__sub {
  margin-top: 1.4rem;
  font-size: 1.8rem; line-height: 1.06; color: rgba(255, 255, 255, .92);
}
.cta-band__field { min-width: 38.4rem; }
.cta-band__select {
  width: 100%; height: 5.2rem;
  padding: 0 3rem 0 0;
  font-family: var(--bsl-font); font-size: 1.8rem; color: #fff;
  background: transparent;
  border: 0; border-bottom: .1rem solid #fff; border-radius: 0;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 11'%3E%3Cpath d='M1 1l9 9 9-9' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .4rem center;
  background-size: 2rem 1.1rem;
  cursor: pointer;
}
.cta-band__select option { color: var(--bsl-grey-900); background: #fff; }
.cta-band__select:focus { outline: none; border-bottom-color: #fff; box-shadow: 0 .1rem 0 #fff; }

/* --------------------------------------------------------------------------
   9. Site footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--bsl-black);
  color: #fff;
  padding: 15.6rem 0 0;   /* Figma: logo top sits 156px below the CTA band */
}
.site-footer__grid {
  display: grid;
  /* Figma columns start at x 124 / 738 / 985 / 1253 */
  grid-template-columns: 57.4rem 20.7rem 22.8rem minmax(0, 1fr);
  gap: 4rem;
  padding-bottom: 9.7rem;
}
.site-footer__brand img { width: 23.8rem; height: auto; }
.site-footer__about {
  margin-top: 5.8rem; max-width: 48.5rem;
  font-size: 2.9rem; line-height: 1.2; letter-spacing: -.087rem;
  color: rgba(255, 255, 255, .7);
}
.site-footer__heading {
  margin-bottom: 4.5rem;
  font-size: 2.4rem; font-weight: 400; line-height: 1;
  letter-spacing: -.024rem; text-transform: uppercase; color: #fff;
}
.site-footer__links a {
  display: block; padding-block: .45rem;   /* keeps the tap target >= 24px */
  font-family: var(--bsl-font-alt);
  font-size: 1.7rem; line-height: 1.71; letter-spacing: -.051rem;
  color: var(--bsl-grey-300);
  transition: color .25s ease, padding-left .25s ease;
}
.site-footer__links a:hover { color: #fff; padding-left: .5rem; }

.site-footer__social {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2.4rem;
  min-height: 2.6rem; padding-bottom: 7rem;
}
.site-footer__region {
  font-size: 1.4rem; line-height: 1; text-transform: uppercase;
  letter-spacing: .02rem; color: #fff;
}
.site-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; color: #fff;
  transition: opacity .25s ease, transform .25s ease;
}
.site-footer__social a:hover { opacity: .7; transform: translateY(-.2rem); }
.site-footer__social svg { width: 100%; height: 100%; fill: currentColor; }
.site-footer__divider {
  width: .1rem; height: 2.6rem; background: rgba(255, 255, 255, .5); flex: none;
}
.site-footer__social .is-facebook { color: var(--bsl-maroon); }

.site-footer__rule { height: .1rem; background: rgba(255, 255, 255, .1); }
.site-footer__legal {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.6rem;
  padding: 1.8rem 0 7rem;
  font-family: var(--bsl-font-ubuntu);
  font-size: 1.6rem; line-height: 1.5; letter-spacing: -.048rem;
  color: var(--bsl-grey-250);
}

/* Back-to-top block, pinned inside the footer like the Figma */
.back-to-top {
  position: absolute; right: 0; bottom: 10.5rem;
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  background: none; border: 0; cursor: pointer;
}
.back-to-top__box {
  display: flex; align-items: center; justify-content: center;
  width: 7.4rem; height: 7.4rem; background: #fff;
  transition: transform .3s ease;
}
.back-to-top:hover .back-to-top__box { transform: translateY(-.4rem); }
.back-to-top__box svg { width: 1.4rem; height: 2.9rem; }
.back-to-top__label {
  font-size: 1rem; font-weight: 300; line-height: 1.1;
  letter-spacing: -.025rem; color: #8a8a8a;   /* Figma #676767, nudged to clear 4.5:1 on black */
}
.site-footer__bottom { position: relative; }

/* --------------------------------------------------------------------------
   10. Reusable content components
   -------------------------------------------------------------------------- */

/* Section heading pair: small grey label above a large split heading */
.section-head { margin-bottom: 5.6rem; }
.section-head__label {
  font-size: 4.2rem; font-weight: 400; line-height: 1.33;
  letter-spacing: -.126rem; color: #8d8d8d;   /* Figma #979797, nudged to clear 3:1 on white */
}
.section-head__title {
  font-size: 4.2rem; font-weight: 500; line-height: 1.2;
  letter-spacing: -.126rem; color: var(--bsl-black);
}
.section-head__title .accent { color: var(--bsl-maroon); }

/* Media + copy split rows (About, HR, Procurement) */
.split-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6.4rem; align-items: center; }
.split-row--wide-left { grid-template-columns: 1.15fr 1fr; }
.split-row--wide-right { grid-template-columns: 1fr 1.15fr; }
.split-row img { width: 100%; }

/* Generic bordered card */
.bsl-card {
  position: relative;
  padding: 4rem;
  background: #fff;
  border: .1rem solid var(--bsl-grey-150);
  height: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}
.bsl-card:hover { transform: translateY(-.6rem); box-shadow: 0 2rem 4.8rem rgba(0, 0, 0, .08); }
.bsl-card__icon { width: 6.4rem; height: 6.4rem; object-fit: contain; margin-bottom: 2.8rem; }
.bsl-card__title { font-size: 2.4rem; font-weight: 500; line-height: 1.2; margin-bottom: 1.6rem; }
.bsl-card__text { font-size: 1.5rem; line-height: 1.6; color: var(--bsl-grey-600); }

/* Stat tile — big ghosted number behind a solid figure */
.stat-tile {
  position: relative; overflow: hidden;
  padding: 5.4rem 5.8rem;
  background: #fff; min-height: 38.2rem;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.stat-tile__ghost {
  /* Figma: linear gradient #000 -> rgba(67,67,67,0) at 4% fill opacity */
  position: absolute; top: 3.2rem; right: 3.2rem; left: 3.2rem;
  font-size: 15rem; font-weight: 600; line-height: .8;
  letter-spacing: -.45rem; text-align: right;
  background: linear-gradient(196deg, rgba(0, 0, 0, .04) 0%, rgba(67, 67, 67, 0) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; pointer-events: none; user-select: none;
}
.stat-tile__icon { width: 10.4rem; height: 10.4rem; object-fit: contain; position: relative; z-index: 1; margin-bottom: auto; }
.stat-tile__value {
  position: relative; z-index: 1;
  font-size: 6.4rem; font-weight: 600; line-height: .88;
  letter-spacing: -.192rem; color: var(--bsl-black);
}
.stat-tile__label {
  position: relative; z-index: 1; margin-top: 1.2rem;
  font-size: 3rem; font-weight: 400; line-height: 1.2; color: var(--bsl-grey-600);
}
.stat-tile--featured {
  /* Figma "Rectangle 72": linear gradient rgba(55,55,55,0) -> #9d9d9d,
     sampled off the artboard as a 0 -> 33% grey wash. */
  background: linear-gradient(180deg,
    rgba(55, 55, 55, 0) 0%,
    rgba(106, 106, 106, .165) 50%,
    rgba(157, 157, 157, .33) 100%);
  border: .1rem solid rgba(255, 255, 255, .18);
}
.stat-tile--featured .stat-tile__value,
.stat-tile--featured .stat-tile__label { color: #fff; }
.stat-tile--featured .stat-tile__ghost {
  background: linear-gradient(196deg, rgba(255, 255, 255, .21) 0%, rgba(67, 67, 67, 0) 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* Sector accordion rows (Home + Services) */
.sector-row {
  position: relative;
  display: flex; align-items: center; gap: 8.6rem;
  height: 10.5rem; padding: 0 2.8rem 0 4rem;
  background: var(--bsl-surface);
  border: .1rem solid var(--bsl-grey-150);
  margin-bottom: 1.8rem;
  transition: background .35s ease, color .35s ease, border-color .35s ease, height .35s ease;
}
.sector-row__icon { width: 8rem; height: 7.7rem; object-fit: contain; object-position: center; flex: none; }
.sector-row__title {
  flex: 1 1 auto;
  font-size: 3.6rem; font-weight: 500; line-height: 1.2;
  letter-spacing: -.072rem; color: var(--bsl-grey-800);
}
.sector-row__num {
  display: flex; align-items: center; justify-content: center;
  width: 7.2rem; height: 7.2rem; border-radius: 50%; flex: none;
  font-size: 3.4rem; font-weight: 100; letter-spacing: -.2rem; color: #a1a1a1;
  background: linear-gradient(180deg, #f3f3f3 0%, #e6e6e6 100%);
}
/* Active / hovered row — Figma "Process > Block 1": 1550x142, white card with
   a #09456a hairline, an inner #203e7c -> #ffffff wash and a soft drop shadow. */
.sector-row.is-active,
.sector-row:hover {
  height: 14.2rem;
  background: linear-gradient(90deg, #203e7c 0%, #ffffff 100%);
  border-color: #09456a;
  box-shadow: 0 1rem 1.6rem rgba(238, 238, 238, .16);
}
.sector-row.is-active .sector-row__title,
.sector-row:hover .sector-row__title { color: #fff; font-size: 4.1rem; letter-spacing: -.082rem; }
.sector-row.is-active .sector-row__icon,
.sector-row:hover .sector-row__icon { filter: brightness(0) invert(1); }
.sector-row.is-active .sector-row__num,
.sector-row:hover .sector-row__num {
  width: 7.3rem; height: 7.3rem;
  background: #fff; border: .1rem solid #09456a; color: transparent;
}
.sector-row.is-active .sector-row__num::before,
.sector-row:hover .sector-row__num::before {
  content: attr(data-num);
  display: flex; align-items: center; justify-content: center;
  width: 5.5rem; height: 5.5rem; border-radius: 50%;
  background: #203e7c; color: rgba(255, 255, 255, .85);
  font-size: 3.4rem; font-weight: 100; letter-spacing: -.2rem;
}

/* Article / insight card */
.post-card { display: block; height: 100%; }
.post-card > a { display: block; color: inherit; }
.post-card__media { display: block; position: relative; overflow: hidden; aspect-ratio: 470 / 260; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__tag {
  display: inline-block;
  position: absolute; left: 0; bottom: 0;
  padding: .5rem 1.4rem;
  font-size: 1.1rem; letter-spacing: .08rem; text-transform: uppercase;
  color: #fff; background: var(--bsl-maroon);
}
.post-card__date {
  margin: 1.8rem 0 .8rem;
  font-size: 1.2rem; letter-spacing: .04rem; text-transform: uppercase;
  color: var(--bsl-grey-500);
}
.post-card__title {
  font-size: 1.9rem; font-weight: 500; line-height: 1.35; color: var(--bsl-grey-900);
  transition: color .25s ease;
}
.post-card:hover .post-card__title { color: var(--bsl-maroon); }
.post-card__more {
  display: inline-flex; align-items: center; gap: .8rem; vertical-align: top;
  margin-top: 1.4rem; font-size: 1.3rem; color: var(--bsl-maroon);
}
.post-card__more svg { width: 1.6rem; height: 1rem; transition: transform .25s ease; }
.post-card:hover .post-card__more svg { transform: translateX(.5rem); }

/* Team member card */
.team-card__photo { aspect-ratio: 285 / 350; overflow: hidden; background: var(--bsl-grey-100); }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__name { margin-top: 1.8rem; font-size: 1.8rem; font-weight: 500; color: var(--bsl-grey-900); }
.team-card__role { margin-top: .4rem; font-size: 1.3rem; color: var(--bsl-grey-500); }

/* Filter pills (Insights) */
.filter-pills { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.filter-pill {
  padding: 1.1rem 2.6rem;
  font-size: 1.5rem; color: var(--bsl-grey-700);
  background: transparent; border: .1rem solid transparent; border-radius: 5rem;
  cursor: pointer; transition: all .25s ease;
}
.filter-pill:hover { color: var(--bsl-maroon); }
.filter-pill.is-active { background: var(--bsl-black); color: #fff; }

/* Pagination */
.bsl-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.2rem; }
.bsl-pagination a, .bsl-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3.4rem; height: 3.4rem; padding: 0 .8rem;
  font-size: 1.5rem; color: var(--bsl-grey-700);
  transition: background-color .25s ease, color .25s ease;
}
.bsl-pagination a:hover { color: var(--bsl-maroon); }
.bsl-pagination .is-current { background: var(--bsl-maroon); color: #fff; }

/* Prose blocks (Terms / Privacy) */
.bsl-prose { font-size: 1.4rem; line-height: 1.75; color: var(--bsl-grey-700); }
.bsl-prose h2 {
  margin: 3.6rem 0 1.2rem;
  font-size: 1.5rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02rem; color: var(--bsl-grey-900);
}
.bsl-prose h3 { margin: 2.4rem 0 .8rem; font-size: 1.45rem; font-weight: 600; color: var(--bsl-grey-900); }
.bsl-prose p { margin-bottom: 1rem; }
.bsl-prose a { color: var(--bsl-maroon); text-decoration: underline; }
.bsl-prose ol, .bsl-prose ul { margin: 0 0 1rem 0; }
.bsl-prose li { margin-bottom: .5rem; }

/* Ordered/unordered lists inside cards */
.bsl-list { display: grid; gap: .8rem; }
.bsl-list li { position: relative; padding-left: 1.8rem; font-size: 1.4rem; line-height: 1.55; }
.bsl-list li::before {
  content: ""; position: absolute; left: 0; top: .85rem;
  width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; opacity: .7;
}
.bsl-list--num { counter-reset: bsl; }
.bsl-list--num li { padding-left: 2.6rem; counter-increment: bsl; }
.bsl-list--num li::before {
  content: counter(bsl) "."; width: auto; height: auto; border-radius: 0;
  background: none; top: 0; font-weight: 600; opacity: 1;
}

/* Logo wall */
.logo-wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.6rem; }
.logo-wall__item {
  display: flex; align-items: center; justify-content: center;
  min-height: 14rem; padding: 2.4rem; background: var(--bsl-grey-050);
}
.logo-wall__item img { max-height: 7rem; width: auto; object-fit: contain; }

/* Certificate / accreditation tiles */
.cert-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.8rem; }
.cert-tile {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1.05; padding: 2.4rem;
  background: #fff; border: .1rem solid var(--bsl-grey-150);
}
.cert-tile img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }

/* Form controls */
.bsl-field { position: relative; margin-bottom: 2.8rem; }
.bsl-input, .bsl-textarea, .bsl-select {
  width: 100%;
  padding: 1.2rem 0;
  font-family: var(--bsl-font); font-size: 1.5rem; color: var(--bsl-grey-900);
  background: transparent;
  border: 0; border-bottom: .1rem solid var(--bsl-grey-200); border-radius: 0;
  transition: border-color .25s ease;
}
.bsl-textarea { min-height: 8rem; resize: vertical; }
.bsl-input::placeholder, .bsl-textarea::placeholder { color: var(--bsl-grey-350); }
.bsl-input:focus, .bsl-textarea:focus, .bsl-select:focus {
  outline: none; border-bottom-color: var(--bsl-maroon);
}

/* --------------------------------------------------------------------------
   11. Utilities
   -------------------------------------------------------------------------- */
.bg-maroon { background: var(--bsl-maroon); }
.bg-navy { background: var(--bsl-navy); }
.bg-black { background: var(--bsl-black); }
.bg-surface { background: var(--bsl-surface); }
.bg-blush { background: linear-gradient(180deg, var(--bsl-blush) 0%, #ffffff 100%); }
.bg-fade { background: linear-gradient(180deg, #f9f9f9 0%, #e3e3e3 100%); }

.pt-sec { padding-top: 12rem; }
.pb-sec { padding-bottom: 12rem; }
.py-sec { padding-block: 12rem; }
.py-sec-sm { padding-block: 8rem; }

.rule { height: .1rem; background: #d7caca; border: 0; opacity: 1; margin: 0; }

.reveal { opacity: 0; transform: translateY(2.4rem); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   12. Responsive — below 1200px the artboard switches to a flowing layout
   -------------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
  .site-nav { gap: 2.4rem; }
  .site-nav__link, .site-nav__toggle { font-size: 1.5rem; }
}

@media (max-width: 1199.98px) {
  :root { --bsl-gutter: 2.4rem; --bsl-header-h: 7.2rem; }

  .site-nav, .site-header__cta .btn-bsl { display: none; }
  .site-header__burger { display: inline-flex; }
  .site-header__logo img { width: 9.6rem; }

  .t-display { font-size: 5.6rem; letter-spacing: -.15rem; }
  .t-h1 { font-size: 4.8rem; letter-spacing: -.16rem; }
  .t-h2 { font-size: 3.8rem; letter-spacing: -.1rem; }
  .t-h3, .t-h4, .t-split, .section-head__label, .section-head__title { font-size: 3.2rem; letter-spacing: -.06rem; }
  .t-h5 { font-size: 2.4rem; }
  .t-h6 { font-size: 2rem; }
  .t-lead { font-size: 1.8rem; }

  /* Tablet: same proportion, lower floor/ceiling. */
  :root { --bsl-hero-h: clamp(38rem, 58vh, 56rem); }
  .page-hero__inner { padding-bottom: 4rem; }
  .page-hero__plate {
    grid-template-columns: minmax(0, 1fr); gap: 1.6rem;
    min-height: 0; padding: 0;
  }
  .page-hero__title,
  .page-hero__title--md { font-size: 3.6rem; line-height: 1.1; letter-spacing: -.1rem; }
  .page-hero__intro { font-size: 1.6rem; line-height: 1.5; }
  .hero-crumbs { margin-bottom: 1.2rem; font-size: 1.4rem; line-height: 1.4; }

  .split-row,
  .split-row--wide-left,
  .split-row--wide-right { grid-template-columns: minmax(0, 1fr); gap: 3.2rem; }

  .cta-band-wrap { padding-top: 5.6rem; }
  .cta-band-wrap::after { height: 10rem; }
  .cta-band {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.8rem; padding: 4rem 3.2rem; min-height: 0;
  }
  .cta-band__title { font-size: 3.6rem; letter-spacing: -.1rem; }
  .cta-band__field { min-width: 0; }
  .btn-pill { width: 100%; min-width: 0; height: 5.2rem; font-size: 1.8rem; }

  .site-footer { padding-top: 8rem; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.6rem 2.4rem; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__about { font-size: 1.8rem; margin-top: 2.4rem; }
  .site-footer__heading { font-size: 1.8rem; margin-bottom: 1.6rem; }
  .site-footer__links a { font-size: 1.5rem; line-height: 2; }
  .back-to-top { position: static; flex-direction: row; margin-bottom: 2.4rem; }
  .back-to-top__box { width: 4.4rem; height: 4.4rem; }
  .back-to-top__box svg { width: 1rem; height: 2rem; }

  .stat-tile { min-height: 0; padding: 3.2rem; }
  .stat-tile__ghost { font-size: 8rem; }
  .stat-tile__icon { width: 6.4rem; height: 6.4rem; }
  .stat-tile__value { font-size: 4rem; }
  .stat-tile__label { font-size: 1.8rem; }

  .sector-row { min-height: 8rem; gap: 1.8rem; padding: 1.6rem 2rem; }
  .sector-row__icon { width: 4.4rem; height: 4rem; }
  .sector-row__title { font-size: 2rem; }
  .sector-row__num { width: 4.4rem; height: 4.4rem; font-size: 1.6rem; }

  .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .py-sec { padding-block: 7.2rem; }
  .pt-sec { padding-top: 7.2rem; }
  .pb-sec { padding-bottom: 7.2rem; }
  .py-sec-sm { padding-block: 5.6rem; }
}

@media (max-width: 767.98px) {
  :root { --bsl-gutter: 2rem; }

  body { font-size: 1.5rem; }

  .t-display { font-size: 4rem; }
  .t-h1 { font-size: 3.4rem; }
  .t-h2 { font-size: 2.8rem; letter-spacing: -.06rem; }
  .t-h3, .t-h4, .t-split, .section-head__label, .section-head__title { font-size: 2.6rem; }
  .t-kicker { letter-spacing: .6rem; }

  :root { --bsl-hero-h: clamp(32rem, 50vh, 44rem); }
  .page-hero__title,
  .page-hero__title--md { font-size: 2.8rem; }

  .cta-band__title { font-size: 2.8rem; }
  .cta-band { padding: 3.2rem 2.4rem; }

  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .site-footer__legal { flex-direction: column; align-items: flex-start; font-size: 1.3rem; }

  .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .bsl-card { padding: 2.8rem; }
  .section-head { margin-bottom: 3.2rem; }

  .py-sec { padding-block: 5.6rem; }
  .pt-sec { padding-top: 5.6rem; }
  .pb-sec { padding-bottom: 5.6rem; }
}

/* --------------------------------------------------------------------------
   13. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .cta-band-wrap, .site-footer, .back-to-top { display: none !important; }
  body { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; }
}

.article__body ol,.article__body ul {
  list-style: revert; 
  margin-left: 27px;
  margin-top: 5px;
}