@font-face {
  font-family: "Neuzeit Grotesk";
  src: url("../fonts/NeuzeitGroteskLight_normal_normal.woff2") format("woff2"),
       url("../fonts/NeuzeitGroteskLight_normal_normal.woff")  format("woff");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neuzeit Grotesk";
  src: url("../fonts/NeuzeitGroteskRegular_normal_normal.woff2") format("woff2"),
       url("../fonts/NeuzeitGroteskRegular_normal_normal.woff")  format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neuzeit Grotesk";
  src: url("../fonts/NeuzeitGroteskBold_normal_normal.woff2") format("woff2"),
       url("../fonts/NeuzeitGroteskBold_normal_normal.woff")  format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neuzeit Grotesk";
  src: url("../fonts/NeuzeitGroteskBlack_normal_normal.woff2") format("woff2"),
       url("../fonts/NeuzeitGroteskBlack_normal_normal.woff")  format("woff");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {

  --fil-red:    #C8102E;
  --blue:       #0a3a54;
  --blue-link:  #0A72B9;
  --blue-dark:  #015A8C;
  --teal:       #2EBEC0;
  --teal-dark:  #0C6E6C;
  --btn-primary:       #016FAD;
  --btn-primary-hover: #0190d2;
  /* Secondary = the grey button in the Fidelity hierarchy. These are the exact
     colours the article CTA button (.cta__btn) already renders as: white at 20%
     over the navy block composites to these values. Kept here as solids so the
     same button works on a light background. */
  --btn-secondary:       #3B586A;
  --btn-secondary-hover: #587181;
  --navy:       #0A2E45;
  --navy-2:     #082234;

  --ink:        #23303B;
  --ink-body:   #3A444C;
  --ink-soft:   #5B6770;
  --line:       #E3E8EC;
  --bg:         #FFFFFF;
  --bg-alt:     #F4F5F6;
  --white:      #FFFFFF;

  --measure:        760px;
  --measure-wide:   1280px;
  --rail-w:         240px;
  --rail-gap:       56px;
  --pad-x:          clamp(20px, 5vw, 40px);
  --radius:         12px;
  --radius-lg:      16px;

  --font: "Neuzeit Grotesk", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink-body);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 { color: var(--ink); font-weight: 400; line-height: 1.18; margin: 0; }
strong, b { font-weight: 700; }

:focus-visible { outline: 3px solid #015A8C; outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .85); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; text-decoration: none; }

.glass {
  background: linear-gradient(to bottom right, rgba(0, 0, 0, .42), rgba(0, 0, 0, .22));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .15);
  border-top-color: rgba(255, 255, 255, .35);
  border-left-color: rgba(255, 255, 255, .35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* Short travel and a quick fade: the block is caught up well before it is read.
   A longer transition is what left content visibly part-faded while scrolling. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

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

/* ---- preloader -------------------------------------------------------------
   A branded cover over the page until it is ready. In core.css because it is on
   every page, and in the markup rather than script so it paints before any
   JavaScript runs.

   preloader.js removes it, with a failsafe there if that never happens. Note
   the styling here is what makes it a cover at all, so a page that loses its
   CSS shows the mark and bars as ordinary content, not a stuck screen. */

.preloader {
  position: fixed; inset: 0; z-index: 300;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px;
  transition: opacity .4s var(--ease);
}
.preloader.is-done { opacity: 0; pointer-events: none; }
.preloader__mark { display: block; width: 52px; height: 52px; }

/* Bars rather than a spinner: a spinner reads as "working", which is a claim
   about the server. This reads as "loading", which is all we know. */
.preloader__bars { display: flex; align-items: center; gap: 4px; height: 30px; }
.preloader__bars span {
  display: block; width: 3px; height: 100%;
  background: #A9B2BC;
  transform: scaleY(.3);
  animation: preloader-bar 1.1s var(--ease) infinite;
}
.preloader__bars span:nth-child(2) { animation-delay: .12s; }
.preloader__bars span:nth-child(3) { animation-delay: .24s; }
.preloader__bars span:nth-child(4) { animation-delay: .36s; }
.preloader__bars span:nth-child(5) { animation-delay: .48s; }

@keyframes preloader-bar {
  0%, 100% { transform: scaleY(.3); }
  50%      { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .preloader__bars span { animation: none; transform: scaleY(.62); }
  .preloader { transition: none; }
}