/* ==========================================================================
   FIS Careers — Direction 1: Precision
   Tokens follow fis-typescale-colours.md. Additions are marked "ADDED".
   ========================================================================== */

/* ---------- Fonts (web files from the FIS brand folder) ---------- */
@font-face {
  font-family: "Roobert";
  src: url("fonts/Roobert-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("fonts/Roobert-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("fonts/Roobert-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roobert";
  src: url("fonts/Roobert-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Colour: brand */
  --eggplant: #431C5B;
  --navy: #1D1F48;
  --raspberry: #B21A53;
  --charcoal: #3D3D40;
  --gray: #E6E7E8;
  --black: #000000;
  --white: #FFFFFF;
  --core-green: #4BCD3E;

  /* Colour: roles */
  /* Navy page with inverse (white) text */
  --color-bg: var(--navy);
  --color-text: rgba(255, 255, 255, .85);
  --color-heading: var(--white);
  --color-muted: rgba(255, 255, 255, .7);    /* ADDED: white 70%, ~9:1 on Navy */
  --color-line: rgba(255, 255, 255, .2);
  --color-line-strong: var(--white);
  --color-accent: var(--core-green);
  --color-eyebrow: var(--white);

  /* Type */
  --font-family: "Roobert", system-ui, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;  /* ADDED: eyebrows */

  --font-size-h1: clamp(2.5rem, 1.972rem + 2.254vw, 4rem);         /* 40 → 64 */
  --font-size-h2: clamp(2rem, 1.648rem + 1.502vw, 3rem);           /* 32 → 48 */
  --font-size-h3: clamp(1.75rem, 1.486rem + 1.127vw, 2.5rem);      /* 28 → 40 */
  --font-size-h4: clamp(1.5rem, 1.324rem + 0.751vw, 2rem);         /* 24 → 32 */
  --font-size-h5: clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem);      /* 20 → 24 */
  --font-size-h6: clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem);    /* 18 → 20 */
  --font-size-quote: clamp(1.375rem, 1.287rem + 0.376vw, 1.625rem);/* 22 → 26 */
  --font-size-body-lg: 1.125rem;                                   /* 18 */
  --font-size-body: 1rem;                                          /* 16 */
  --font-size-button: 0.9375rem;                                   /* 15 */

  /* ADDED: display + numeral styles */
  --font-size-display: clamp(3.5rem, 1.563rem + 8.263vw, 9rem);    /* 56 → 144 */
  --font-size-numeral: clamp(3rem, 2.12rem + 3.756vw, 5.5rem);     /* 48 → 88 */
  --font-size-label: 0.75rem;                                      /* 12 */

  /* Layout */
  --container: 1440px;
  --gutter: clamp(1.5rem, 0.296rem + 3.005vw, 4rem);               /* 24 → 64: page margins, never under 24px */
  --col-gap: clamp(1rem, 0.824rem + 0.751vw, 1.5rem);              /* 16 → 24 */
  --section-space: clamp(5rem, 3.239rem + 7.512vw, 10rem);         /* 80 → 160 */

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(75, 205, 62, .35);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Moving background behind the whole page (script.js draws into it). The
   body's Navy shows if WebGL isn't available. */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Massive blur so it reads as soft colour fields, not smoke. The canvas is
   oversized so the blur's faded edges fall off screen. */
.page-bg { overflow: hidden; }
.page-bg canvas {
  position: absolute;
  inset: -120px;
  display: block;
  width: calc(100% + 240px);
  height: calc(100% + 240px);
  filter: blur(60px);
}

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--white); color: var(--navy); padding: .75rem 1rem; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.section { padding-block: var(--section-space) 0; }
.section:last-child { padding-bottom: var(--section-space); }

/* ---------- Type styles ---------- */
.display {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-light);
  line-height: .95;
  letter-spacing: -0.04em;
  color: var(--color-heading);
  text-wrap: balance;
}
.h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-light);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  text-wrap: balance;
}
.h6 {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-regular);
  line-height: 1.35;
  color: var(--color-heading);
}
.body-lg { font-size: var(--font-size-body-lg); line-height: 1.6; }


.eyebrow,
.label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Eyebrows are title case, not all caps: a touch larger, no tracking */
.eyebrow {
  font-size: .9375rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: var(--font-weight-medium);
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  color: var(--color-eyebrow);
  align-self: start;
}
.label { color: var(--color-muted); }

.marker {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  flex: none;
}

.rule { border: 0; margin: 0; height: 1px; background: var(--color-line); }
.rule--strong { background: var(--color-line-strong); }
.rule--double {
  height: 4px;
  background: none;
  border-top: 1px solid var(--color-line-strong);
  border-bottom: 1px solid var(--color-line-strong);
}

/* ---------- Buttons & links ---------- */
/* Dot button: the dot sits left of the label and, on hover, stretches
   right into a pill that fills the whole button, while the label
   slides to centre. Hover in and out use the same timing. */
.btn {
  --dot: 8px;
  --inset: 0px;
  --pad: 1.25rem;
  --btn-dur: .35s;
  --btn-ease: cubic-bezier(.65, 0, .35, 1);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--pad) 0 calc(var(--pad) + var(--dot) + .625rem);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-decoration: none;
  border-radius: 999px;
  transition: color var(--btn-dur) var(--btn-ease);
}
/* Accent (Core Green) outline and dot with a white label; on hover the dot
   fills the button green and the label turns Navy (white on green is too
   low-contrast) */
.btn--primary {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--color-accent);
  transition: color var(--btn-dur) var(--btn-ease), border-color var(--btn-dur) var(--btn-ease);
}
.btn--primary:hover,
.btn--primary:focus-visible { border-color: var(--color-accent); color: var(--navy); }
.btn__label {
  position: relative;
  z-index: 1;
  /* Trim the font's extra space above caps so the label centres optically */
  text-box: trim-both cap alphabetic;
  transition: transform var(--btn-dur) var(--btn-ease);
}
.btn__marker {
  position: absolute;
  z-index: 0;
  top: calc(50% - var(--dot) / 2);
  bottom: calc(50% - var(--dot) / 2);
  left: var(--pad);
  right: calc(100% - var(--pad) - var(--dot));
  border-radius: 999px;
  background: var(--color-accent);
  transition:
    top var(--btn-dur) var(--btn-ease),
    bottom var(--btn-dur) var(--btn-ease),
    left var(--btn-dur) var(--btn-ease),
    right var(--btn-dur) var(--btn-ease);
}
@supports not (text-box: trim-both cap alphabetic) {
  .btn__label { top: -1px; }   /* nudge for browsers without text-box trim (Firefox) */
}
.btn:hover,
.btn:focus-visible { color: var(--white); }
.btn:hover .btn__marker,
.btn:focus-visible .btn__marker {
  top: var(--inset);
  bottom: var(--inset);
  left: var(--inset);
  right: var(--inset);
}
.btn:hover .btn__label,
.btn:focus-visible .btn__label { transform: translateX(calc((var(--dot) + .625rem) / -2)); }

/* Plain white button: white pill, Navy label */
.btn--white {
  padding: 0 var(--pad);
  color: var(--navy);
  background: var(--white);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.btn--white:hover,
.btn--white:focus-visible { color: var(--navy); background: color-mix(in srgb, var(--white) 85%, var(--navy)); }
.btn--white .btn__label { transform: none !important; }   /* no dot to make room for */

/* Outline button: no fill, a white outline and white label. On hover it fills Core Green with a Navy label
   (white on green is too low-contrast). */
.btn--glass {
  padding: 0 var(--pad);
  color: var(--white);
  background-color: transparent;   /* no fill: white outline only */
  box-shadow: inset 0 0 0 1px var(--white);
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn--glass:focus-visible {
  color: var(--navy);
  background-color: var(--core-green);
  box-shadow: inset 0 0 0 1px var(--core-green);
}
/* Hover only where there's a real pointer: on touch a tap leaves it stuck */
@media (hover: hover) {
  .btn--glass:hover {
    color: var(--navy);
    background-color: var(--core-green);
    box-shadow: inset 0 0 0 1px var(--core-green);
  }
}
.btn--glass .btn__label { transform: none !important; }   /* no dot to make room for */

.link-arrow {
  display: inline-flex;
  gap: .5rem;
  color: var(--color-heading);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-decoration-thickness: 1px;
  text-underline-offset: .4em;
  transition: text-decoration-color .25s var(--ease);
}
.link-arrow span { transition: transform .25s var(--ease); }
.link-arrow:hover { text-decoration-color: var(--white); }
.link-arrow:hover span { transform: translateX(4px); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  margin-top: 2.5rem;
}

/* ---------- Navigation ---------- */
:root {
  /* Jobs panel and nav dropdowns: the same glass Navy as the docked nav bar */
  --panel-bg: color-mix(in srgb, var(--navy) 82%, transparent);
  --panel-blur: blur(16px) saturate(140%);
  --nav-h: 88px;                    /* bar height at the top of the page (hero, sticky offsets, anchor scroll) */
  --nav-ease: cubic-bezier(0, 0, .2, 1);   /* decelerate */
  --nav-dur: .45s;
  --nav-glass-line: rgba(255, 255, 255, .12);
}
/* One bar fixed to the top edge: logo left, links centred, CTA right. At the
   top of the page it spans the full width with no background. Once the page
   scrolls (.is-condensed, set in script.js) it stays on screen the whole
   way down, same full-width layout and size, fully clear (no fill or
   divider). Smaller screens swap the links for a menu button. */
.nav {
  --ctl: 56px;                      /* control size (logo, buttons) */
  --pad: 16px;                      /* bar padding above/below controls */
  --inset: var(--gutter);           /* side margin when condensed */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  pointer-events: none;
  transition: translate var(--nav-dur) var(--nav-ease);
}
.nav__bar {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  height: calc(var(--ctl) + var(--pad) * 2);
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;   /* logo, links (left, beside the logo), CTA */
  align-items: center;
  gap: 1.25rem;
  padding-inline: var(--gutter);
  border-radius: 0 0 16px 16px;
  background: transparent;
  box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent;
  pointer-events: auto;
  transition:
    width var(--nav-dur) var(--nav-ease),
    max-width var(--nav-dur) var(--nav-ease),
    height var(--nav-dur) var(--nav-ease),
    padding var(--nav-dur) var(--nav-ease),
    background-color var(--nav-dur) var(--nav-ease),
    box-shadow var(--nav-dur) var(--nav-ease);
}
/* Faint full-width divider along the bottom of the bar at the top of the
   page. Fades out once the bar docks or the menu opens. */
.nav__bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, .2);
  pointer-events: none;
  transition: opacity var(--nav-dur) var(--nav-ease);
}
.nav.is-menu-open .nav__bar::after,
.nav.is-condensed .nav__bar::after { opacity: 0; }
/* Docked: same full-width bar and square corners, fully clear: no fill,
   no blur and no divider, so it floats over the page */
.nav.is-condensed .nav__bar {
  border-radius: 0;
  background: transparent;
}
/* Menu open: bar goes solid and squares off so the drop-down joins it */
.nav.is-menu-open .nav__bar {
  background: var(--navy);
  border-radius: 0;
}
.nav__logo {
  display: flex;
  align-items: center;
  height: var(--ctl);
  padding-inline: 8px;
  transition: height var(--nav-dur) var(--nav-ease);
}
.nav__logo img { display: block; height: 28px; width: auto; filter: brightness(0) invert(1); }   /* black PNG logo shown white */

.nav__logo { justify-self: start; }
.nav__menu { justify-self: start; margin-left: clamp(1rem, .5rem + 2vw, 2.5rem); }   /* links sit just right of the logo */
.nav__end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.nav__cta { flex: none; }
.nav__list { display: flex; gap: .25rem; }
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .5rem .75rem;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
a.nav__trigger { text-decoration: none; }
.nav__trigger[aria-expanded="true"] {
  background: var(--panel-bg);      /* same fill as the drop-down */
  box-shadow: inset 0 0 0 1px var(--nav-glass-line);   /* and the same stroke */
  -webkit-backdrop-filter: var(--panel-blur);
  backdrop-filter: var(--panel-blur);
}
/* Hover only where there's a real pointer: on touch a tap leaves it stuck */
@media (hover: hover) {
  .nav__trigger:hover {
    background: var(--panel-bg);      /* same fill as the drop-down */
    box-shadow: inset 0 0 0 1px var(--nav-glass-line);   /* and the same stroke */
    -webkit-backdrop-filter: var(--panel-blur);
    backdrop-filter: var(--panel-blur);
  }
}
.nav__chev { transition: rotate .25s var(--ease); opacity: .6; position: relative; top: 1.5px; }   /* optical alignment with the label */
.nav__trigger[aria-expanded="true"] .nav__chev { rotate: 180deg; }

/* Drop-down: a compact rounded glass card just under its own nav item
   (aligned to its left edge), not full width. Rows of thumbnail + title + line, or a
   two-column list for Teams, with a link along the bottom. The page behind
   blurs. */
.nav__item { position: relative; }
.nav__panel {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);            /* just under its nav item */
  width: 400px;
  z-index: 2;
  overflow: hidden;
  border-radius: 28px;
  background: var(--panel-bg);
  -webkit-backdrop-filter: var(--panel-blur);
  backdrop-filter: var(--panel-blur);
  border: 1px solid var(--nav-glass-line);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .5);
  pointer-events: auto;
  animation: nav-in .55s cubic-bezier(.65, 0, .35, 1);
}
/* Opens top-down: the panel is revealed from its top edge downwards */
@keyframes nav-in {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 -40px 0); }   /* -40px keeps the drop shadow visible */
}
/* Closing: the panel gently rolls back up and fades, rather than vanishing */
.nav .nav__panel.is-closing {
  animation: nav-out .35s cubic-bezier(.65, 0, .35, 1) both;
  pointer-events: none;
}
@keyframes nav-out {
  from { clip-path: inset(0 0 -40px 0); opacity: 1; }
  to   { clip-path: inset(0 0 100% 0); opacity: 0; }
}
/* Feature cards ease in after the links: fade up with a soft blur, one after
   another (--ci set per card in script.js). Runs on open and when switching. */
.nav__panel:not([hidden]) .nav__feature,
.nav__panel:not([hidden]) .nav__stat {
  animation: nav-card .6s var(--ease) both;
  animation-delay: calc(var(--ci, 0) * 70ms + 260ms);
}
@keyframes nav-card {
  from { opacity: 0; filter: blur(8px); translate: 0 10px; }
  to   { opacity: 1; filter: none; translate: none; }
}
.nav .nav__panel.is-swap .nav__feature,
.nav .nav__panel.is-swap .nav__stat { animation-delay: calc(var(--ci, 0) * 60ms + 80ms); }
/* Switching between menus while one is open just swaps content */
.nav .nav__panel.is-swap { animation: none; }
.nav .nav__panel.is-swap .nav__col a,
.nav .nav__panel.is-swap .nav__col-title { animation-delay: calc(var(--i, 0) * 30ms); }
.nav__panel--wide { width: max-content; max-width: calc(100vw - var(--gutter) * 2); }   /* Teams: as wide as its two columns of names */
.nav__panel-inner {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.25rem;
}
.nav__label {
  padding: .25rem .5rem 0;
  font-size: .875rem;
  font-weight: var(--font-weight-regular);
  color: rgba(255, 255, 255, .55);   /* faint */
}
/* Rows: square thumbnail, then title over a muted line */
.nav__rows { display: grid; gap: .25rem; }
.nav__box.nav__row {
  min-height: 0;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: .5rem;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
}
.nav__box.nav__row:hover,
.nav__box.nav__row:focus-visible { background: rgba(255, 255, 255, .07); box-shadow: none; }
.nav__row-img {
  flex: none;
  width: 72px; height: 72px;
  border-radius: 16px;
  object-fit: cover;
}
.nav__row-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.nav__box.nav__row .nav__box-title { margin-top: 0; font-size: 1.0625rem; font-weight: var(--font-weight-medium); }
.nav__box.nav__row .nav__box-desc { font-size: .9375rem; }
/* Teams: plain names in two columns */
.nav__links { display: grid; grid-template-columns: repeat(2, max-content); gap: .125rem 1.5rem; }
.nav__box.nav__link {
  min-height: 0;
  padding: .5rem;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}
.nav__box.nav__link:hover,
.nav__box.nav__link:focus-visible { background: rgba(255, 255, 255, .07); box-shadow: none; }
.nav__box.nav__link .nav__box-title { margin-top: 0; font-size: .9375rem; white-space: nowrap; }   /* one line each */
/* Footer button: "Search all 1,284 roles", styled like the nav's Search
   Careers CTA (.btn--glass): no fill, white outline and label;
   fills Core Green with a Navy label on hover */
.nav__box.nav__more {
  flex: none;
  align-self: flex-start;
  flex-direction: row;
  align-items: center;
  min-height: 0;
  height: 40px;
  margin: .5rem 0 0 .5rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  background-color: transparent;   /* no fill: white outline only */
  box-shadow: inset 0 0 0 1px var(--white);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--white);
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.nav__box.nav__more:hover,
.nav__box.nav__more:focus-visible {
  background-color: var(--core-green);
  box-shadow: inset 0 0 0 1px var(--core-green);
  color: var(--navy);
}
.nav__grid { display: grid; gap: .75rem; }
.nav__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nav__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nav__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav__grid > li { display: flex; }
/* Box: icon top-left, title + short description pinned to the bottom */
.nav__box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-height: 7.5rem;
  padding: 1.125rem 1.25rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px var(--color-line);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.nav__box:hover,
.nav__box:focus-visible { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.nav__box-icon { width: 18px; height: 18px; margin-bottom: auto; color: var(--color-muted); }
.nav__box-title {
  margin-top: auto;                 /* no icons: title + description sit at the bottom of the box */
  font-size: 1.0625rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.3;
  color: var(--color-heading);
}
.nav__box-desc { font-size: .875rem; line-height: 1.45; color: var(--color-muted); }
/* Teams has 20 boxes: shorter, title only */
.nav__grid--4 .nav__box { min-height: 5.75rem; }
.nav__grid--4 .nav__box-title { font-size: .9375rem; }
/* Live count box: green accent with Navy type */
.nav__box--stat { background: var(--color-accent); box-shadow: none; color: var(--navy); }
.nav__box--stat:hover,
.nav__box--stat:focus-visible { background: color-mix(in srgb, var(--color-accent) 88%, var(--white)); box-shadow: none; }
.nav__box-live {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: auto;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(29, 31, 72, .75);
}
.nav__box--stat .nav__stat-dot { background: var(--navy); animation-name: live-pulse-navy; }
/* The number takes the icon's slot (its line box is the icon's 18px, so the
   box comes out the same height as the team boxes) and the label takes the
   title's slot */
.nav__box-num {
  margin-bottom: auto;
  font-size: 1.625rem;
  font-weight: var(--font-weight-light);
  line-height: 18px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.nav__box--stat .nav__box-desc {
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--navy);
}
.nav__grid--4 .nav__box--stat .nav__box-desc { margin-top: 1rem; font-size: .9375rem; }
/* Boxes rise in one after another as a menu opens (--i set in script.js) */
.nav__panel:not([hidden]) .nav__box {
  animation: nav-box .5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 25ms + 180ms);
}
.nav .nav__panel.is-swap .nav__box { animation-delay: calc(var(--i, 0) * 15ms); }
@keyframes nav-box {
  from { opacity: 0; translate: 0 8px; }
  to   { opacity: 1; translate: none; }
}
/* Text columns share the space left of the feature evenly, so the panel
   reads balanced rather than bunched on the left */
.nav__cols {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem clamp(2rem, 1rem + 3vw, 4.5rem);
}
/* Column labels match the section eyebrows (12px, SemiBold, uppercase) */
.nav__col-title {
  margin-bottom: 1.25rem;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.nav__col ul { display: grid; gap: 1rem; }
.nav__col a {
  font-size: .875rem;              /* 14px */
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  text-decoration: none;
}
.nav__col a:hover { text-decoration: underline; text-underline-offset: .3em; }
/* When a dropdown opens, its links load in line by line, sharpening from
   blurred accent green into white (--i set per link in script.js) */
.nav__panel:not([hidden]) .nav__col a,
.nav__panel:not([hidden]) .nav__col-title {
  animation: nav-line .6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms + 220ms);   /* begin as the panel drops open */
}
@keyframes nav-line {
  from { opacity: 0; filter: blur(6px); color: var(--color-accent); translate: 0 4px; }
  to   { opacity: 1; filter: none; translate: none; }
}
/* Teams menu has 19 links: tighter rows so three columns fit */
#menu-teams .nav__col ul { gap: .875rem; }
.nav__feature {
  position: relative;
  flex: 0 0 min(440px, 38vw);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  color: var(--white);
  text-decoration: none;
}
.nav__feature img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease); }
.nav__feature:hover img { scale: 1.04; }
.nav__feature::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(to top, rgba(29, 31, 72, .8), transparent);
}
.nav__feature-text {
  position: absolute;
  z-index: 1;
  left: 1.25rem; bottom: 1rem;
  display: grid;
  gap: .125rem;
  font-size: .875rem;
}
.nav__feature-text strong { font-size: var(--font-size-body-lg); font-weight: var(--font-weight-medium); }
.nav__feature-text span { opacity: .8; }
/* Locations: one image card per region, filling the panel width */
.nav__regions {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}
.nav__regions .nav__region { flex: none; width: auto; }
.nav__region .nav__feature-text { right: 1.25rem; bottom: 5.5rem; }   /* text sits above the chevron */
.nav__region .nav__go { left: 1.25rem; right: auto; }

/* Early Talent: two features side by side (live count + story) */
/* Two full-size cards (same size as the Teams card) - Early Talent has only one
   column of links, so there is room */
.nav__features { display: grid; grid-template-columns: repeat(2, min(440px, 30vw)); gap: 1rem; flex: 0 0 auto; }
.nav__features > .nav__stat,
.nav__features > .nav__feature { flex: none; width: auto; min-width: 0; aspect-ratio: 4 / 3; }
/* Accent card: Core Green with Navy type (white on green is too low-contrast) */
.nav__stat.nav__stat--accent { background: var(--color-accent); color: var(--navy); }
.nav__stat--accent .nav__stat-live { color: rgba(29, 31, 72, .75); }
.nav__stat--accent .nav__stat-label { color: rgba(29, 31, 72, .85); }
.nav__stat--accent .nav__stat-dot { background: var(--navy); animation-name: live-pulse-navy; }
@keyframes live-pulse-navy {
  0% { box-shadow: 0 0 0 0 rgba(29, 31, 72, .5); }
  70% { box-shadow: 0 0 0 8px rgba(29, 31, 72, 0); }
  100% { box-shadow: 0 0 0 0 rgba(29, 31, 72, 0); }
}
.nav__stat--accent .nav__go { color: var(--navy); border-color: rgba(29, 31, 72, .45); }
.nav__stat--accent .nav__go::before { background: var(--navy); }
.nav__stat--accent:hover .nav__go,
.nav__stat--accent:focus-visible .nav__go { color: var(--color-accent); border-color: var(--navy); }
#menu-early .nav__cols { grid-template-columns: 1fr; }

/* Teams menu: live open-roles count on an Eggplant block */
.nav__stat {
  flex: 0 0 min(440px, 38vw);
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 4px;
  background: var(--eggplant);
  color: var(--white);
  text-decoration: none;
}
.nav__stat-live {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}
.nav__stat-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--core-green);
  box-shadow: 0 0 0 0 rgba(75, 205, 62, .6);
  animation: live-pulse 2s infinite;
}
@keyframes live-pulse {
  70% { box-shadow: 0 0 0 8px rgba(75, 205, 62, 0); }
  100% { box-shadow: 0 0 0 0 rgba(75, 205, 62, 0); }
}
.nav__stat-num {
  margin-top: auto;
  font-size: clamp(2.75rem, 2rem + 2.5vw, 4rem);
  font-weight: var(--font-weight-light);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.nav__stat-label { margin-top: .5rem; padding-right: 88px; font-size: .9375rem; color: rgba(255, 255, 255, .8); }

/* Big round chevron on every menu feature: the testimonial arrow button,
   inverted (white outline + chevron on the card; fills white on hover) */
.nav__go {
  position: absolute;
  z-index: 1;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.nav__go::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--white);
  transform: scale(0);
  transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}
.nav__feature:hover .nav__go,
.nav__stat:hover .nav__go,
.nav__feature:focus-visible .nav__go,
.nav__stat:focus-visible .nav__go { color: var(--navy); border-color: var(--white); }
.nav__feature:hover .nav__go::before,
.nav__stat:hover .nav__go::before,
.nav__feature:focus-visible .nav__go::before,
.nav__stat:focus-visible .nav__go::before { transform: scale(1.02); }
.nav__stat { position: relative; }

/* Feature cards fill the panel's full content height, so the space above and
   below them matches the panel padding (all menus share one height) */
.nav__feature,
.nav__stat,
.nav__features,
.nav__features > .nav__stat,
.nav__features > .nav__feature { height: auto; align-self: stretch; aspect-ratio: auto; }

.nav__scrim {
  position: fixed;
  inset: 0;
  z-index: 90;               /* just under the nav (100) */
  background: rgba(29, 31, 72, .4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.nav.is-open + .nav__scrim,
.nav.is-menu-open + .nav__scrim { opacity: 1; pointer-events: auto; }
/* Menu button: the three-line icon; lines fold into an X when open */
/* Menu button: a circle with a white outline, beside the Search Careers CTA
   (same 40px height); fills Core Green on hover (mouse only) */
.nav__burger {
  display: none;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;               /* a circle, the height of the CTA beside it */
  color: var(--white);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--white);
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.nav__burger svg { width: 20px; height: 20px; }
.nav__burger:focus-visible { background: var(--core-green); box-shadow: inset 0 0 0 1px var(--core-green); color: var(--navy); }
/* Hover only where there's a real pointer: on touch a tap leaves it stuck */
@media (hover: hover) {
  .nav__burger:hover { background: var(--core-green); box-shadow: inset 0 0 0 1px var(--core-green); color: var(--navy); }
}
.nav__burger line {
  transform-origin: 12px 12px;
  transition: transform var(--nav-dur) var(--nav-ease), opacity .25s var(--nav-ease);
}
.nav.is-menu-open .nav__burger { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px var(--white); color: var(--white); }
.nav.is-menu-open .nav__burger-top { transform: rotate(45deg) translateY(6px); }   /* to the middle, then turned about the centre */
.nav.is-menu-open .nav__burger-mid { opacity: 0; }
.nav.is-menu-open .nav__burger-bot { transform: rotate(-45deg) translateY(-6px); }

/* Menu: drops down from the bar at the same width, rounded at the bottom;
   links slide down into place one after another */
/* Smaller screens: a full-screen menu under the bar, in pages. The top
   level lists the sections; a section slides its own page in from the
   right (Back, title, links), the top level easing off to the left. */
.nav__popup {
  position: fixed;
  top: calc(var(--ctl) + var(--pad) * 2);   /* under the bar */
  left: 0; right: 0; bottom: 0;
  overflow: hidden;
  background: var(--navy);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  pointer-events: none;
  transition: clip-path var(--nav-dur) var(--nav-ease), visibility 0s var(--nav-dur);
}
.nav.is-menu-open .nav__popup {
  clip-path: inset(0);
  visibility: visible;
  pointer-events: auto;
  transition: clip-path .55s var(--nav-ease), visibility 0s;
}
.nav__popup-inner {
  position: relative;
  height: 100%;
  border-top: 1px solid var(--color-line);
}
.nav__page {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.75rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  transition: translate .45s var(--nav-ease), opacity .35s var(--nav-ease), visibility 0s .45s;
}
.nav__page::-webkit-scrollbar { display: none; }
.nav__page > * { flex-shrink: 0; }   /* long pages (Teams) scroll; nothing gets squashed to fit */
/* The top level eases off to the left while a section page is open */
.nav__popup-inner.is-sub .nav__page--main { translate: -25% 0; opacity: 0; visibility: hidden; }
.nav__popup-inner:not(.is-sub) .nav__page--main { transition: translate .45s var(--nav-ease), opacity .35s var(--nav-ease) .05s, visibility 0s; }
/* Section pages wait off to the right */
.nav__page--sub { translate: 100% 0; visibility: hidden; }
.nav__page--sub.is-current { translate: 0 0; visibility: visible; transition: translate .45s var(--nav-ease), opacity .35s var(--nav-ease), visibility 0s; }
.nav__popup-list {
  display: flex;
  flex-direction: column;
}
.nav__popup-item { border-bottom: 1px solid var(--color-line); }
.nav__popup-link {
  display: flex;
  width: 100%;
  align-items: center;
  overflow: hidden;
  padding-block: 1rem;
  font-size: clamp(1.75rem, 1.25rem + 1.75vw, 2.75rem);
  font-weight: var(--font-weight-light);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
  text-align: left;
  text-decoration: none;
  transition: color .3s var(--nav-ease);
}
/* Other links dim while one is hovered */
.nav__popup-list:has(.nav__popup-link:hover) .nav__popup-link:not(:hover) { color: rgba(255, 255, 255, .4); }
.nav__popup-label {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: .35em;
}
.nav__popup-chev { width: .6em; height: .6em; opacity: .6; flex: none; }
/* Section page: Back, the section's title, its links */
.nav__page-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  height: 40px;
  padding: 0 1rem 0 .75rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
  font-size: .9375rem;
  font-weight: var(--font-weight-medium);
  color: var(--white);
  transition: background-color .2s var(--ease);
}
.nav__page-back:hover,
.nav__page-back:focus-visible { background: rgba(255, 255, 255, .08); }
.nav__page-title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-light);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
}
.nav__page-list { display: flex; flex-direction: column; margin-top: -.75rem; }
.nav__page-list li { border-bottom: 1px solid var(--color-line); }
.nav__page-link {
  display: block;
  padding-block: .875rem;
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--color-text);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.nav__page-link:hover,
.nav__page-link:focus-visible { color: var(--white); }
.nav__popup-cta {
  opacity: 0;
  translate: 0 8px;
  transition: opacity .4s var(--nav-ease), translate .4s var(--nav-ease);
}
.nav.is-menu-open .nav__popup-cta { opacity: 1; translate: 0 0; transition-delay: .45s; }
.nav__page--sub .nav__popup-cta { transition-delay: 0s; }
html.nav-locked { overflow: hidden; }

/* ---------- Hero: full-screen video that morphs into a circle ----------
   The section is taller than the screen; the stage pins while the video
   shrinks from full screen (edge to edge, square corners) into
   a circle in the centre (script.js sets the clip-path from scroll).
   Headline + message centred on the screen (over the circle once it forms);
   search centred along the bottom. */
.hero {
  --orb: min(36svh, 24vw);          /* circle diameter */
  --ring: calc(var(--orb) * 1.4);   /* Benefits portal ring diameter */
  --edge: 0px;                      /* video inset from the screen edges at the start (full bleed) */
  --edge-r: 0px;                    /* its corner radius at the start (square) */
  position: relative;
  height: 150svh;                   /* pinned for half a screen: enough to land on Benefits, then the page moves straight on */
}
.hero__stage {
  position: sticky;
  top: 0;
  height: 100svh;                   /* full screen; the floating nav sits over the top */
  min-height: 600px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: end;               /* the search row sits at the bottom */
  justify-items: center;
  text-align: center;
  padding: calc(var(--nav-h) + 1rem) var(--gutter) clamp(2rem, 1.5rem + 2vw, 3.5rem);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .06) 0, transparent calc(var(--orb) * 1.1));   /* soft glow; the page background shows through */
}

/* Where the circle ends up: the centre of the screen, behind the heading */
.hero__target {
  position: absolute;
  left: 50%; top: calc(50% + var(--cy-shift, 0px));   /* the layout's centre line (lower on mobile) */
  width: var(--orb);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
}

/* The video fills the stage; the clip-path does the morph. Start state is
   set here so it looks right before script.js runs. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: color-mix(in srgb, var(--white) 8%, var(--navy));
  clip-path: inset(var(--edge) round var(--edge-r));
  will-change: clip-path;
}
/* The video fills the stage (cover). The portraits are sized, like the
   Benefits images, to a square the length of the CIRCLE's diagonal (--ring-d,
   set by makeRingSwap from .hero__target) so the ring transition's turning
   rings line up with them and never show corners, without blowing the
   640px portraits up to full-screen size. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
}
.hero__video.is-active { opacity: 1; }
.hero__still {
  position: absolute;
  left: 50%; top: calc(50% + var(--cy-shift, 0px));
  width: var(--ring-d, 100%);
  height: var(--ring-d, 100%);
  translate: -50% -50%;
  object-fit: cover;
  display: block;
  opacity: 0;
}
.hero__still.is-active { opacity: 1; }
/* Even black overlay across the whole video while it's full screen, so the
   nav, heading, sub-heading, cue and card all read over it. Fades as the
   video becomes the circle (--e is the morph progress, 0 -> 1). */
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 2;                       /* above the transition rings */
  background: rgba(0, 0, 0, .4);
  /* stays at half strength in the circle, where the heading still sits over the video */
  opacity: calc(1 - var(--e, 0) * .5);
}

/* Video pause + scroll cue, side by side. Desktop: bottom left on the page
   margin, level with the bottom of the careers card. Mobile: under the
   sub-heading (see the mobile rules). */
.hero__meta {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
  display: flex;
  align-items: center;
  gap: 16px;
  pointer-events: auto;              /* the heading block around it doesn't take clicks */
}
.hero__meta .media-toggle.hero__toggle { position: static; flex: none; }

/* Heading, top left: just under the nav, on the page margin. Absolute so
   nothing else in the stage can push it around. */
.hero__lead {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(1.75rem, 1.25rem + 2vw, 3rem);   /* heading to sub-heading */
  padding: calc(var(--nav-h) + clamp(2.5rem, 1.5rem + 4vw, 5rem)) var(--gutter) 0;   /* space below the nav */
  text-align: left;
  pointer-events: none;
}
.hero__title {
  max-width: 12em;
  font-size: clamp(3rem, min(7vw, 11svh), 9rem);   /* 48 -> 144, capped by height on short screens */
  font-weight: var(--font-weight-light);
  line-height: .95;
  letter-spacing: -0.035em;
  color: var(--color-heading);
  text-wrap: balance;
  text-box: trim-both cap alphabetic;
  transform-origin: 0 0;            /* the exit scale pulls in towards the top-left corner */
  /* Fades away in a blur once the page scrolls (.is-title-out, script.js).
     Coming back it waits for the circle to open out to full screen first. */
  transition: opacity .5s var(--ease) .75s, filter .5s var(--ease) .75s, scale .5s var(--ease) .75s;
}
.hero.is-title-out .hero__title {
  opacity: 0;
  filter: blur(16px);
  scale: .96;
  transition-delay: 0s;
}

/* Sub-heading: under the heading in the top-left block (.hero__lead's gap
   spaces them). Leaves and returns with the heading. */
.hero__sub {
  max-width: 26em;
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-regular);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  text-align: left;
  text-wrap: pretty;
  pointer-events: none;
  transition: opacity .5s var(--ease) .75s, filter .5s var(--ease) .75s;
}
.hero.is-title-out .hero__sub {
  opacity: 0;
  filter: blur(12px);
  transition-delay: 0s;
}

/* Careers card: bottom right, on the page margin and bottom-aligned with
   the sub-heading. Thin white frame, image left, uppercase title top right
   and a round white search button bottom right. Opens the jobs panel.
   Leaves and returns with the heading. */
.hero__card {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
  width: 280px;
  display: flex;                    /* image left; text + button column right, as tall as the image */
  gap: .875rem;
  padding: .5rem;
  border: 1px solid rgba(255, 255, 255, .2);   /* same as the nav divider */
  border-radius: 20px;
  background-color: rgba(255, 255, 255, .08);   /* frosted glass fill */
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  color: var(--white);
  text-align: left;
  text-decoration: none;
  transition: opacity .5s var(--ease) .75s, filter .5s var(--ease) .75s, visibility 0s .75s, background-color .25s var(--ease), border-color .25s var(--ease);
}
.hero__card-img {
  flex: none;
  align-self: flex-start;           /* its square sets the card height; never stretched */
  width: 38%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: 12px;              /* the card's 20px minus its 8px padding, so the corners nest */
}
.hero__card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .375rem; padding-top: .25rem; }
.hero__card-title {
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  white-space: nowrap;              /* "Search careers" on one line */
}
.hero__card-meta { font-size: .8125rem; line-height: 1.4; color: var(--color-muted); }
.hero__card-btn {
  position: absolute;               /* bottom-right inside the frame */
  right: .5rem;
  bottom: .5rem;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  transition: scale .3s var(--ease);
}
.hero__card-btn svg { display: block; }
/* Hover: green accent on the frame */
.hero__card:hover { background-color: rgba(255, 255, 255, .14); border-color: var(--core-green); }
.hero__card:hover .hero__card-btn,
.hero__card:focus-visible .hero__card-btn { scale: 1.08; }
.hero__card:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.hero.is-title-out .hero__card {
  opacity: 0;
  filter: blur(12px);
  visibility: hidden;               /* out of the tab order and unclickable once gone */
  transition: opacity .5s var(--ease), filter .5s var(--ease), visibility 0s .5s;
}

/* Scroll cue: mouse outline (its wheel line drifts down on a loop) then the
   label, in a row. Just right of the pause button (36px, on the page
   margin) and centred on it. Leaves with the heading
   (.is-title-out) and comes back with it. */
.hero__cue {
  position: static;                 /* in the .hero__meta row, after the pause button */
  height: 36px;
  display: flex;
  align-items: center;
  gap: .625rem;
  pointer-events: none;
  transition: opacity .5s var(--ease) .75s, filter .5s var(--ease) .75s;
}
.hero.is-title-out .hero__cue {
  opacity: 0;
  filter: blur(12px);
  transition-delay: 0s;
}
.hero__cue-label {
  font-size: .875rem;               /* 14px */
  line-height: 1.2;
  color: var(--white);
  white-space: nowrap;
}
/* Same height (36px) and 1px stroke as the pause button beside it */
.hero__cue-mouse {
  position: relative;
  width: 22px;
  height: 36px;
  border: 1px solid var(--white);
  border-radius: 11px;
}
.hero__cue-wheel {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 1px;
  height: 7px;
  margin-left: -.5px;
  border-radius: 1px;
  background: var(--white);
  animation: cue-wheel 1.8s var(--ease) infinite;
}
@keyframes cue-wheel {
  0%   { opacity: 0; translate: 0 -2px; }
  25%  { opacity: 1; }
  70%  { opacity: 0; translate: 0 8px; }
  100% { opacity: 0; translate: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__cue-wheel { animation: none; }
}

/* On the Benefits image the circle drops its shade, so it matches the
   unshaded Benefits circle it hands over to */
.hero.is-benefits .hero__shade { opacity: 0; transition: opacity .6s var(--ease); }

/* ---------- Benefits portal ----------
   The circle (the morphed media) shows the current benefit. Around it a
   thin ring (--ring across) grows out of the circle once Benefits arrive
   (.is-portal, script.js); a brighter arc on it marks the current benefit,
   one segment per benefit, turning to each (--turn). Arrows sit in the gap
   between circle and ring, left and right, with a 01/06 counter at the
   bottom. Section heading on the left, benefit details on the right. */
.hero__portal {
  position: absolute;
  left: 50%; top: calc(50% + var(--cy-shift, 0px));
  width: var(--ring);
  aspect-ratio: 1;
  translate: -50% -50%;
  scale: .714;                      /* starts at the circle's size (orb / ring = 1 / 1.4) */
  opacity: 0;
  pointer-events: none;
  transition: scale .9s cubic-bezier(.65, 0, .35, 1), opacity .4s var(--ease);
}
.hero.is-portal .hero__portal { scale: 1; opacity: 1; }
.hero__portal-ring { display: block; width: 100%; height: 100%; overflow: visible; }
/* Stroke widths are in viewBox units, set by script.js from the ring's
   size so they draw at 1px (track) and 2px (arc) on screen. (A
   non-scaling stroke would do that too, but it breaks the arc's
   pathLength-based dash in some browsers.) */
.hero__portal-ring circle { fill: none; }
.hero__portal-track { stroke: rgba(255, 255, 255, .2); stroke-width: var(--px, .15); }   /* thin and faint, like the nav divider */
/* Current segment: a faint white track the fill grows along */
.hero__portal-seg,
.hero__portal-arc {
  stroke-width: calc(var(--px, .15) * 2);
  stroke-linecap: butt;
  stroke-dasharray: var(--dash);
  transform-origin: 50px 50px;      /* the ring's centre, in its 100 x 100 viewBox */
  transform: rotate(calc(var(--turn, 0deg) - 90deg));   /* segment 0 starts at 12 o'clock */
  transition: transform .8s cubic-bezier(.65, 0, .35, 1);
}
.hero__portal-seg { stroke: rgba(255, 255, 255, .35); }
/* Progress fill: FIS green over the faint track */
.hero__portal-arc { stroke: var(--core-green); }
/* Auto-advance fill: the segment draws in from its start over --b-dur
   (empty = dash offset of a whole segment). Without the animation (reduced
   motion) it shows full. */
.hero { --b-dur: 6s; }
.hero__portal-arc.is-running { animation: arc-fill var(--b-dur) linear both; }
.hero__portal-arc.is-paused { animation-play-state: paused; }
@keyframes arc-fill {
  from { stroke-dashoffset: var(--seg); }
  to   { stroke-dashoffset: 0; }
}


/* Benefit texts and controls */
.hero__benefits {
  --side-w: calc((100% - var(--ring)) / 2 - var(--gutter) - clamp(3rem, 2rem + 4vw, 6rem));   /* each side column, with clear space before the ring */
  position: absolute;
  inset: 0;
  pointer-events: none;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s .3s;
}
.hero.is-portal .hero__benefits {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s var(--ease) .4s, visibility 0s .4s;
}

/* Left: eyebrow, heading, sub-heading, vertically centred on the ring */
.hero__blead {
  position: absolute;
  left: var(--gutter);
  top: calc(50% + var(--cy-shift, 0px));
  translate: 0 -50%;
  width: var(--side-w);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.hero__btitle {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-light);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  text-wrap: balance;
}
.hero__bintro {
  font-size: var(--font-size-body-lg);
  line-height: 1.5;
  color: var(--color-text);
  text-wrap: pretty;
}

/* Right: one block per benefit, stacked in one cell; the current one
   sharpens in */
.hero__bside {
  position: absolute;
  right: var(--gutter);
  top: calc(50% + var(--cy-shift, 0px));
  translate: 0 -50%;
  width: var(--side-w);
  display: grid;
}
.hero__bitem {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0;
  filter: blur(12px);               /* the site's text blur, as in the stats */
  transition: opacity .75s var(--ease), filter .75s var(--ease);   /* a touch slower than elsewhere */
}
.hero__bitem.is-active { opacity: 1; filter: none; transition-delay: .3s; }
.hero__bname {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-regular);
  line-height: 1.25;
  color: var(--color-heading);
}
.hero__bline {
  margin-top: 1rem;
  font-size: var(--font-size-body-lg);
  line-height: 1.5;
  color: var(--color-text);
}
.hero__bdetail {
  margin-top: 1rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--color-muted);
  text-wrap: pretty;
}

/* Arrows: plain chevrons, centred in the gap between circle and ring */
.hero__barrow {
  position: absolute;
  top: calc(50% + var(--cy-shift, 0px));
  translate: -50% -50%;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  color: var(--white);
  opacity: .8;
  pointer-events: auto;
  transition: opacity .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.hero__barrow { border-radius: 50%; }   /* round focus ring */
/* Hover: the nav items' hover state (drop-down glass fill, white chevron) */
.hero__barrow:focus-visible {
  opacity: 1;
  background: var(--panel-bg);
  box-shadow: inset 0 0 0 1px var(--nav-glass-line);
  -webkit-backdrop-filter: var(--panel-blur);
  backdrop-filter: var(--panel-blur);
}
/* Hover only where there's a real pointer: on touch a tap leaves it stuck */
@media (hover: hover) {
  .hero__barrow:hover {
    opacity: 1;
    background: var(--panel-bg);
    box-shadow: inset 0 0 0 1px var(--nav-glass-line);
    -webkit-backdrop-filter: var(--panel-blur);
    backdrop-filter: var(--panel-blur);
  }
}
.hero__barrow svg { display: block; }
/* Centred in the gap on each side: half-way between image edge and ring
   (centred on their own width, so it holds whatever the button size) */
.hero__barrow--prev { left: calc(50% - (var(--ring) + var(--orb)) / 4); }
.hero__barrow--next { left: calc(50% + (var(--ring) + var(--orb)) / 4); }
/* Pause/play: centred in the gap below the circle, styled like the arrows */
.hero__bpause {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--cy-shift, 0px) + (var(--ring) + var(--orb)) / 4);
  translate: -50% -50%;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--white);
  opacity: .8;
  pointer-events: auto;
  transition: opacity .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.hero__bpause[hidden] { display: none; }
.hero__bpause:focus-visible {
  opacity: 1;
  background: var(--panel-bg);
  box-shadow: inset 0 0 0 1px var(--nav-glass-line);
  -webkit-backdrop-filter: var(--panel-blur);
  backdrop-filter: var(--panel-blur);
}
/* Hover only where there's a real pointer: on touch a tap leaves it stuck */
@media (hover: hover) {
  .hero__bpause:hover {
    opacity: 1;
    background: var(--panel-bg);
    box-shadow: inset 0 0 0 1px var(--nav-glass-line);
    -webkit-backdrop-filter: var(--panel-blur);
    backdrop-filter: var(--panel-blur);
  }
}
.hero__bpause svg { display: block; }
/* One icon at a time (these must beat .hero__bpause svg above) */
.hero__bpause .hero__bpause-play { display: none; }
.hero__bpause.is-paused .hero__bpause-pause { display: none; }
.hero__bpause.is-paused .hero__bpause-play { display: block; margin-left: 2px; }
/* Counter: centred in the gap above the circle */
.hero__bcount {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--cy-shift, 0px) - (var(--ring) + var(--orb)) / 4);
  translate: -50% -50%;
  font-size: .9375rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}




/* ---------- Benefits: rows past a fixed circle ----------
   Rows run full width: title + sub-title left, details right, the middle
   kept clear for the circle. Each row's circle is position: fixed at the
   centre of the screen and the row clips it (clip-path clips fixed
   descendants, overflow doesn't), so the circle appears to stay still while
   the rows slide past, swapping image at each row boundary. Same size and
   crop as the hero's circle, so the hand-over from the hero is seamless. */
.benefit-rows {
  --orb: min(40svh, 28vw);          /* matches the hero's circle */
  position: relative;
  border-top: 1px solid var(--color-line);
}
.benefit-row {
  position: relative;
  clip-path: inset(0);
  min-height: 60svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--orb) + 4rem) minmax(0, 1fr);
  column-gap: var(--col-gap);
  align-items: start;
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--gutter);
  border-bottom: 1px solid var(--color-line);
}
.benefit-row--intro { min-height: 100svh; align-items: center; }
.benefit-row__orb {
  position: fixed;
  left: 50%; top: 50%;
  z-index: 0;
  width: var(--orb);
  aspect-ratio: 1;
  margin: calc(var(--orb) / -2) 0 0 calc(var(--orb) / -2);
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--white) 8%, var(--navy));
  pointer-events: none;
}
.benefit-row__orb img {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--orb) * 1.4143);   /* the circle's diagonal: same crop as the hero's circle */
  height: calc(var(--orb) * 1.4143);
  max-width: none;
  translate: -50% -50%;
  object-fit: cover;
}
.benefit-row__left { grid-column: 1; position: relative; z-index: 1; }
.benefit-row__right { grid-column: 3; position: relative; z-index: 1; max-width: 30em; }
.benefit-row__heading { margin-top: 1.25rem; max-width: 11em; }
.benefit-row__title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-light);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-heading);
}
.benefit-row__sub {
  margin-top: .75rem;
  font-size: var(--font-size-body-lg);
  color: var(--color-muted);
}
.benefit-row__line { margin-bottom: .75rem; color: var(--color-text); }
.benefit-row__details {
  display: grid;
  gap: .5rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--color-muted);
}
.benefit-row__details li { position: relative; padding-left: 1.125rem; }
.benefit-row__details li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---------- Benefits: big circle carousel ----------
   Circle size is set so three sit fully in view and the next two are cut in
   half by the screen edges: centres one step (diameter + gap) apart, with a
   step of a quarter of the screen width (capped by height on wide screens). */
.bcar {
  --g: clamp(1rem, .5rem + 1.5vw, 2rem);                  /* gap between circles */
  --d: min(calc(25vw - var(--g)), 46svh);                 /* circle diameter */
  --step: calc(var(--d) + var(--g));
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  padding: clamp(4rem, 3rem + 3vw, 6rem) 0;
  overflow: hidden;
  text-align: center;
  border-top: 1px solid var(--color-line);
}
.bcar__head { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding-inline: var(--gutter); }
.bcar__head .eyebrow { align-self: center; }
/* Names (and panels) stack in one cell; the current one sharpens in */
.bcar__names,
.bcar__panels { display: grid; }
.bcar__name,
.bcar__panel {
  grid-area: 1 / 1;
  opacity: 0;
  filter: blur(10px);
  transition: opacity .45s var(--ease), filter .45s var(--ease);
}
.bcar__name.is-active,
.bcar__panel.is-active { opacity: 1; filter: none; transition-delay: .2s; }
.bcar__name {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-light);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-heading);
}

.bcar__track { position: relative; height: var(--d); }
.bcar__item {
  position: absolute;
  left: 50%; top: 0;
  width: var(--d);
  aspect-ratio: 1;
  margin-left: calc(var(--d) / -2);
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: color-mix(in srgb, var(--white) 8%, var(--navy));
  translate: calc(var(--off, 0) * var(--step)) 0;
  filter: brightness(.55) saturate(.8);
  transition: translate .7s cubic-bezier(.65, 0, .35, 1), filter .7s cubic-bezier(.65, 0, .35, 1);
}
.bcar__item.is-center { filter: none; cursor: default; }
.bcar__item.no-anim { transition: none; }
.bcar__item img { width: 100%; height: 100%; object-fit: cover; }

.bcar__foot { display: flex; flex-direction: column; align-items: center; gap: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); padding-inline: var(--gutter); }
/* Condensed points: one row, green dots between */
.bcar__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.75rem;
  max-width: 60rem;
  font-size: var(--font-size-body);
  color: var(--color-text);
}
.bcar__points li { position: relative; padding-left: 1rem; }
.bcar__points li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}
.bcar__arrows { display: flex; gap: .375rem; }
.bcar__arrows .icon-btn { width: 64px; height: 64px; }

/* ---------- How we hire ----------
   Copy, accordion steps and CTA on the left; a framed photo with an
   "Up next" glass card on the right (script.js). */
.hire { padding-bottom: var(--section-space); }
.hire > .container { max-width: none; }   /* full width to the page gutters, like the sections above and below */
.hire__inner { align-items: center; row-gap: 3rem; }
.hire__copy { grid-column: 1 / span 5; }
.hire__media { grid-column: 7 / -1; }
.hire__title {
  margin-top: 1rem;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-light);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  text-wrap: balance;
}
.hire__desc { margin-top: 1.25rem; max-width: 34em; font-size: var(--font-size-body-lg); line-height: 1.6; color: var(--color-muted); }
.hire__steps { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid rgba(255, 255, 255, .2); }
.hire__step { border-bottom: 1px solid rgba(255, 255, 255, .2); }
.hire__step-heading { margin: 0; font: inherit; }
.hire__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.125rem 0;
  font-size: var(--font-size-body-lg);
  line-height: 1.4;
  text-align: left;
  color: var(--color-muted);
  transition: color .3s var(--ease);
}
.hire__step.is-open .hire__trigger,
.hire__trigger:hover { color: var(--white); }
.hire__trigger:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.hire__chev { flex: none; transition: rotate .4s var(--ease); }
.hire__step.is-open .hire__chev { rotate: 180deg; }
/* Height animates via grid rows 0fr -> 1fr */
.hire__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.hire__step.is-open .hire__panel { grid-template-rows: 1fr; }
.hire__panel-inner { overflow: hidden; min-height: 0; }
.hire__panel-inner p { padding-bottom: 1.25rem; max-width: 34em; font-size: .9375rem; line-height: 1.6; color: var(--color-muted); }
.hire__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* Framed photo: same glass frame and radii as the hero's Search careers card */
.hire__frame {
  position: relative;
  width: 100%;                      /* fills its columns to the right-hand gutter */
  height: min(760px, calc(100svh - var(--nav-h) - 4rem));
  overflow: hidden;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .04);
}
.hire__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.04;
  transition: opacity .6s var(--ease), scale 1.2s var(--ease);
}
.hire__img.is-active { opacity: 1; scale: 1; }
/* "Up next" card, bottom left of the photo: the hero's Search careers card
   (glass frame, square thumbnail, white round button), with the green
   stroke on hover */
.hire__next {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 1;
  width: 280px;
  display: flex;
  gap: .875rem;
  padding: .5rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 20px;
  background-color: rgba(29, 31, 72, .5);   /* navy-tinted glass: the photos are lighter than the hero video, so white text needs the extra depth */
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  color: var(--white);
  text-align: left;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.hire__next-img {
  flex: none;
  align-self: flex-start;
  width: 38%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}
.hire__next-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .375rem; padding-top: .25rem; }
.hire__next-title { font-size: 1rem; font-weight: var(--font-weight-medium); line-height: 1.2; white-space: nowrap; }
.hire__next-meta { font-size: .8125rem; line-height: 1.4; color: rgba(255, 255, 255, .75); }
.hire__next-btn {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  transition: scale .3s var(--ease);
}
.hire__next-btn svg { display: block; }
.hire__next:hover { background-color: rgba(29, 31, 72, .6); border-color: var(--core-green); }
.hire__next:hover .hire__next-btn,
.hire__next:focus-visible .hire__next-btn { scale: 1.08; }
.hire__next:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
/* Content swap: a quick fade as it changes to the following step */
.hire__next-img, .hire__next-body { transition: opacity .25s var(--ease); }
.hire__next.is-swapping .hire__next-img,
.hire__next.is-swapping .hire__next-body { opacity: 0; }
@media (max-width: 1100px) {
  .hire__copy { grid-column: 1 / span 6; }
  .hire__media { grid-column: 7 / -1; }
}
@media (max-width: 860px) {
  .hire__copy, .hire__media { grid-column: 1 / -1; }
  .hire__frame { height: auto; aspect-ratio: 4 / 5; max-height: 560px; }
  .hire__next { display: none; }   /* no step card on mobile: the steps sit right above the photo */
}
@media (prefers-reduced-motion: reduce) {
  .hire__img, .hire__panel, .hire__chev { transition: none; }
}

/* ---------- FIS in Numbers: its own pinned section ----------
   Pinned for four stats at 1¼ screens each. The dot grid fills the sticky
   stage; the patterns sit in its central --board square. .is-board and
   .is-stats-text are set by script.js as the section arrives. */
.stats-pin {
  --board: min(56svh, 38vw);        /* dot grid square */
  position: relative;
  height: 600svh;                   /* 100 + 4 x 125 */
  background: transparent;          /* the moving page background shows through */
}
.stats-pin__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  text-align: center;
}
.hero__pheading {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-light);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-heading);
}
.hero__board {
  position: absolute;
  inset: 0;
  z-index: 1;
  visibility: hidden;
}
.hero__board .numbers__canvas { width: 100%; height: 100%; aspect-ratio: auto; }
.num-probe { position: absolute; width: var(--board); height: 0; visibility: hidden; pointer-events: none; }
/* Dots stay hidden until the grid fills in, then ripple in (their --d) */
.hero__board .num-dot { opacity: 0; transition: scale .55s cubic-bezier(.34, 1.3, .64, 1) var(--d), background-color .45s var(--ease) var(--d), opacity .35s var(--ease) var(--d), transform .45s var(--ease); }
.stats-pin.is-board .hero__board { visibility: visible; }
.stats-pin.is-board .hero__board .num-dot { opacity: var(--e, 1); }   /* edge fade, set per dot in script.js */
.stats-pin:not(.is-board) .hero__board .num-dot { transition-delay: 0s; }

.hero__stats {
  position: absolute;
  inset: 0;
  z-index: 2;                       /* text over the dot grid (.hero__board is 1) */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s .3s;
}
.stats-pin.is-stats-text .hero__stats { opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility 0s; }
/* Side columns either side of the grid: heading left, stat right */
.hero__stats {
  --s-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  --s-side: calc((100% - var(--gutter) * 2 - var(--board) - 2rem - var(--s-gap) * 2) / 2);
}
.hero__shead {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  translate: 0 -50%;
  width: var(--s-side);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
  text-align: left;
}
.hero__shead .eyebrow { align-self: flex-start; }
.hero__shead .hero__pheading { text-wrap: balance; }
/* The stat: number above its label, right-aligned in the right-hand column */
.hero__sgrid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--board) + 2rem) minmax(0, 1fr);
  column-gap: var(--s-gap);
  align-items: center;
  padding-inline: var(--gutter);
}
.hero__stat {
  grid-row: 1;
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;            /* right-aligned on the page margin, mirroring the heading on the left */
  text-align: right;
  gap: .75rem;
  opacity: 0;
  filter: blur(12px);
  transition: opacity .45s var(--ease), filter .45s var(--ease);
}
.hero__stat.is-active { opacity: 1; filter: none; transition-delay: .2s; }
.hero__snum {
  text-align: right;
  font-size: clamp(3rem, 2rem + 3vw, 5.5rem);
  font-weight: var(--font-weight-light);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hero__slabel {
  max-width: 12em;
  text-align: right;
  font-size: clamp(1.125rem, .9rem + .6vw, 1.625rem);
  line-height: 1.25;
  color: var(--color-heading);
}

/* ---------- Section heads ---------- */
.section-head {
  row-gap: 1.5rem;
}
.section-head .eyebrow { grid-column: 1 / span 3; padding-top: .9em; }
.section-head__title { grid-column: 4 / span 8; }

/* ---------- Numbers ---------- */
/* Numbers: pinned scroll section. Left: heading + stacked numbers with a
   vertical progress line. Right: square dot board. */
.numbers {
  position: relative;
  height: 360svh;                  /* scroll distance while pinned (incl. grace at each end) */
}
.numbers__pin {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
}
.numbers > .numbers__pin > .container { max-width: none; }
/* Same 12-column grid as Benefits, so the board matches the image column */
.numbers__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: center;
}
/* Board on the left (cols 1-6), heading + numbers on the right (cols 7-12) */
.numbers__viz { grid-column: 1 / span 6; grid-row: 1; }
.numbers__left {
  grid-column: 7 / -1;
  grid-row: 1;
  padding-left: clamp(0rem, 3vw, 4rem);
  /* Stretch to the board's height: heading at the top, numbers at the bottom */
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.numbers__left .num-list { margin-top: auto; padding-top: 2rem; }
.numbers__eyebrow { margin-bottom: 1rem; }
.numbers__title { margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.num-list {
  position: relative;
  padding-left: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.num-list ul { display: grid; gap: clamp(1rem, .5rem + 1.5vw, 2rem); }
/* Vertical track beside the stacked numbers */
.num-track {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--color-line);
  overflow: hidden;
}
/* White thumb (a quarter of the track) slides down like a scrollbar */
.num-track span {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 25%;
  border-radius: 2px;
  background: var(--white);
  transform: translateY(calc(var(--p, 0) * 300%));   /* 300% of its height = bottom of the track */
}
.num-row__num {
  font-size: clamp(3rem, 2rem + 3vw, 5.5rem);
  font-weight: var(--font-weight-light);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color .4s var(--ease);
}
.num-row__label {
  margin-top: .5rem;
  font-size: .9375rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  transition: color .4s var(--ease);
}
.num-list li { opacity: .35; cursor: pointer; transition: opacity .4s var(--ease); }
.num-list li:hover { opacity: .65; }
.num-list li.is-active { opacity: 1; }
/* Active number: full-strength white (others fade back) */
.num-list li.is-active .num-row__num,
.num-list li.is-active .num-row__label { color: var(--white); }
.numbers__viz { margin: 0; }
.numbers__canvas {
  position: relative;
  width: min(100%, calc(100svh - 4rem));   /* full column width; square */
  aspect-ratio: 1;
}
.num-dot {
  position: absolute;
  width: calc(var(--cell, 24px) * .7);
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  scale: .3;
  background: color-mix(in srgb, var(--core-green) 18%, var(--navy));
  transform: scale(var(--h, 1));    /* hover swell, on top of the pattern's own scale */
  transition:
    scale .55s cubic-bezier(.34, 1.3, .64, 1) var(--d),
    background-color .45s var(--ease) var(--d),
    transform .45s var(--ease);       /* hover swell: a soft follow */
}

/* ---------- Benefits: accordion with matching media ---------- */
.benefits__body {
  row-gap: clamp(2rem, 1.5rem + 2vw, 3rem);
  align-items: start;
}
/* Full width like the hero: content sits one gutter from the screen edges */
.benefits > .container { max-width: none; }

/* Left half: heading block on top, accordion pushed to the bottom.
   Right half: large image that syncs with the open item. */
.benefits__left {
  grid-column: 1 / span 6;
  grid-row: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-right: clamp(0rem, 3vw, 4rem);
}
.benefits__title { margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); }
.benefits__intro { margin-top: 1.5rem; max-width: 32em; }
.acc__media {
  grid-column: 7 / -1;
  grid-row: 1;
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, .08);
}
/* Images are sized to a square the length of the frame's diagonal so the
   ring transition can turn them without exposing the corners */
.acc__img,
.ring__layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ring-d, 100%);
  height: var(--ring-d, 100%);
  translate: -50% -50%;
}
.acc__img {
  object-fit: cover;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.acc__img.is-active { opacity: 1; }
/* Pause/play for the benefits auto-advance: white icon on a dark blurred chip */
.media-toggle {
  position: absolute;
  z-index: 3;
  left: 16px;
  bottom: 16px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--white);   /* white outline, no fill */
  transition: background-color .25s var(--ease);
}
/* display:grid above would otherwise beat the [hidden] attribute (the hero
   hides its button while the circle shows the still image) */
.media-toggle[hidden] { display: none; }
.media-toggle:hover { background: rgba(255, 255, 255, .15); }
.media-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.media-toggle__play { display: none; }
.media-toggle.is-paused .media-toggle__pause { display: none; }
.media-toggle.is-paused .media-toggle__play { display: block; margin-left: 2px; }
.benefits__body.is-static .media-toggle { display: none; }   /* no auto-advance with reduced motion */

/* Rings for the brand ring transition (built by makeRingSwap in script.js),
   centred on the circle (the layout's centre line, lower on mobile) */
.ring {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--cy-shift, 0px));
  width: var(--ring-d, 100%);
  height: var(--ring-d, 100%);
  translate: -50% -50%;
  z-index: 1;
  will-change: transform;
  pointer-events: none;
}
.ring .ring__layer {
  background-size: cover;
  background-position: center;
}

.acc__heading { font: inherit; }
.acc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0 .875rem;
  text-align: left;
  color: var(--color-heading);
}
.acc__title {
  font-size: var(--font-size-body-lg);
  line-height: 1.4;
  transition: color .3s var(--ease);
}
.acc__item:not(.is-open) .acc__title { color: var(--color-muted); }
.acc__trigger:hover .acc__title,
.acc__item:not(.is-open) .acc__trigger:hover .acc__title { color: var(--white); }
/* Divider doubles as a progress bar while the item is open (auto-advance) */
.acc__bar {
  position: relative;
  height: 2px;                     /* same weight as the numbers track */
  background: var(--color-line);
  overflow: hidden;
}
.acc__bar span {
  position: absolute;
  inset: 0;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
}
.acc__item.is-open .acc__bar span { animation: acc-progress var(--acc-dur, 4.9s) linear forwards;   /* 30% faster than 7s */ }
.acc.is-paused .acc__item.is-open .acc__bar span { animation-play-state: paused; }
.acc.is-static .acc__item.is-open .acc__bar span { animation: none; transform: scaleX(1); }
@keyframes acc-progress { to { transform: scaleX(1); } }

/* Height animates via grid rows 0fr -> 1fr */
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; min-height: 0; }
.acc__content {
  padding-bottom: 1.25rem;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.acc__item.is-open .acc__content { opacity: 1; transform: none; transition-delay: .1s; }
.acc__stat {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-regular);
  line-height: 1.3;
  color: var(--color-heading);
}
.acc__line { margin-top: .375rem; font-size: var(--font-size-body); }
.acc__details {
  margin-top: 1rem;
  display: grid;
  gap: .5rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--color-muted);
}
.acc__details li {
  position: relative;
  padding-left: 1.125rem;
}
.acc__details li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--core-green);
}
.acc__media-inline { display: none; }

/* ---------- People / testimonials ---------- */
/* Testimonials sit on Navy like the rest of the page: default tokens,
   white controls and the standard section spacing */
.people { background: transparent; }   /* the moving page background (.page-bg) runs on behind it, as in the hero */
.people__body { align-items: center; row-gap: 3rem; }

/* Portrait wheel. It bleeds to the viewport's left edge. The active portrait
   sits in the left column; the previous/next portraits sit half cut off by
   the viewport edge; the rest are parked out of frame. Geometry (hub
   position, radius, angle between portraits) is set in script.js. */
.wheel {
  --bleed: max(0px, (100vw - var(--container)) / 2);
  grid-column: 1 / span 3;
  margin-left: calc((var(--gutter) + var(--bleed)) * -1);
  overflow-x: clip;
}
.wheel__inner {
  --D: 300px;          /* active portrait diameter */
  --R: 200px;          /* wheel radius */
  --hub: 0px;          /* hub x, from the viewport edge */
  --small: .62;        /* neighbour scale */
  --H: 600px;          /* wheel height */
  position: relative;
  height: var(--H);
}
.wheel__item {
  --a: 0deg;           /* angle on the wheel, set in script.js */
  --s: var(--small);
  position: absolute;
  left: var(--hub);
  top: 50%;
  width: var(--D);
  height: var(--D);
  margin: calc(var(--D) / -2) 0 0 calc(var(--D) / -2);
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  /* The leading translate (--ox/--oy) is 0 on the wheel; the pinned intro
     uses it to move the centre of turning to the ring's centre, so the
     same function list carries both and moving between them spins */
  /* --a0 turns the whole wheel (a quarter on mobile, where it lies flat as
     a carousel row); the portraits stay upright */
  transform: translate(var(--ox, 0px), var(--oy, 0px)) rotate(calc(var(--a) + var(--a0, 0deg))) translateX(var(--R)) rotate(calc((var(--a) + var(--a0, 0deg)) * -1)) scale(var(--s));
  transition: transform .9s cubic-bezier(.65, 0, .35, 1), opacity .3s;
}
.wheel__item.is-active { --s: 1; cursor: default; }
/* Leaving portraits travel all the way out of frame first, then fade */
.wheel__item.is-parked { opacity: 0; transition: transform .9s cubic-bezier(.65, 0, .35, 1), opacity .2s .9s; }
.wheel__item.is-active { z-index: 2; }

/* Pinned intro (desktop; .is-pinned / .is-intro set by script.js). The
   section pins for 1.2 extra screens. In the intro the eyebrow and heading
   sit centred near the top; below them a ring of the four overlapping
   portraits, which turns and moves to the centre as you scroll: each sits on a
   circle of radius --ir around a centre offset --iox/--ioy from the wheel
   hub, at its own angle --ia (script.js), scaled --cs. The quote and
   controls are hidden. Leaving the intro, the heading drifts away and the
   four turn onto the wheel. */
.people.is-pinned { height: 165svh; padding: 0; overflow-x: clip; }   /* the sequence auto-completes, so it only needs a short hold */   /* intro, then a short hold on the testimonial before it scrolls on */   /* clip here (not on .wheel) so the centred group isn't cut off; clip keeps sticky working */
.people.is-pinned .wheel { overflow-x: visible; }
.people.is-pinned > .container {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  display: flex;
  align-items: center;
}
.people.is-pinned .people__body { width: 100%; }
/* Intro title: centred near the top of the stage. Once the portraits move
   out (not .is-intro) it drifts up and fades away. */
.people.is-pinned .people__intro {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  top: 18%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  transform: translateY(var(--hy, 0px));   /* scrolls away with the page in scene 2 (script.js) */
  translate: 0 -60px;
  opacity: 0;
  visibility: hidden;
  transition: translate .8s cubic-bezier(.65, 0, .35, 1), opacity .5s var(--ease), visibility 0s .8s;
}
.people.is-pinned .people__intro .quote__eyebrow,
.people.is-pinned .people__intro .people__title { margin: 0; align-self: center; }
.people.is-intro .people__intro {
  translate: none;
  opacity: var(--ho, 1);            /* fades and blurs as it rolls away (script.js) */
  filter: blur(var(--hb, 0px));
  visibility: visible;
  transition: translate .8s cubic-bezier(.65, 0, .35, 1), opacity .6s var(--ease) .2s, visibility 0s;
}
/* The four, on the ring */
.people.is-intro .wheel__item {
  /* Per-item values from script.js (ring -> wheel, by scroll) */
  --ox: var(--iox);
  --oy: var(--ioy);
  --a: var(--ia) !important;        /* beats the wheel angle set inline */
  --R: var(--ir);
  --s: var(--cs) !important;        /* beats the active portrait's scale */
  opacity: var(--io, 1) !important; /* beats .is-parked; the left one fades as it leaves */
  z-index: var(--iz, 1);
  pointer-events: none;
}
/* Idle in the ring: script.js turns it every frame, so no easing */
.people.is-scrub .wheel__item,
.people.is-intro.is-scrub .people__intro { transition: none !important; }   /* driven frame by frame by script.js */
.people.is-pinned .people__quotes,
.people.is-pinned .people__controls {
  transition: opacity .6s var(--ease) .55s, translate .6s var(--ease) .55s, visibility 0s .55s;
}
.people.is-intro .people__quotes,
.people.is-intro .people__controls {
  opacity: 0;
  translate: 0 16px;
  visibility: hidden;
  transition: opacity .3s var(--ease), translate .3s var(--ease), visibility 0s .3s;
}
.people.no-anim *,
.people.no-anim .wheel__item { transition: none !important; }
.no-anim .wheel__item, .wheel__item.no-anim { transition: none !important; }
.wheel__item img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }   /* team portraits are 4:5 with faces high in frame */

.people__content { grid-column: 4 / -1; padding-left: calc(80px - var(--col-gap)); }   /* 80px from the portrait */
.quote__eyebrow { margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.people__quotes { display: grid; }
/* Changing person: the whole slide cross-fades with the site's text blur
   (as the stats and Benefits do): the old one blurs out, the new one
   sharpens in. All four share one grid cell. */
.quote {
  grid-area: 1 / 1;
  opacity: 0;
  filter: blur(12px);
  visibility: hidden;
  transition: opacity .45s var(--ease), filter .45s var(--ease), visibility 0s .45s;
}
.quote.is-active {
  opacity: 1;
  filter: none;
  visibility: visible;
  transition: opacity .45s var(--ease) .2s, filter .45s var(--ease) .2s, visibility 0s;
}
/* Intro title block (static layout: above the wheel and quote) */
.people__intro { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.people__intro .quote__eyebrow { margin-bottom: 1rem; }
/* Section heading under the eyebrow */
.people__title {
  margin: 0;                        /* the intro block spaces it */
  max-width: none;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-light);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  text-wrap: balance;
}
.quote__text {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-light);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  text-indent: -0.4em;           /* hang the opening quote mark */
  max-width: none;               /* runs the full width of the text column */
  text-wrap: pretty;
}
/* Byline: name, then role and team */
.quote__by {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--color-muted);
}
.quote__name { font-size: 1.0625rem; font-weight: var(--font-weight-medium); color: var(--color-heading); }
/* Career journey: above the quote */
.quote__path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  margin: 0 0 1.25rem;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--color-muted);
}
.quote__step-sep { color: rgba(255, 255, 255, .4); }   /* faint white arrows */
.quote__step:last-child { color: var(--color-heading); }   /* where they are now */

/* Arrows, then counter */
.people__controls {
  display: flex;
  align-items: center;
  gap: 1rem;            /* 16px */
  margin-top: 2.5rem;
}
/* Text swapped in place (the carousel counters): blurs in, as the stats do */
.is-blurring { animation: blur-in .45s var(--ease) both; }
@keyframes blur-in {
  from { opacity: 0; filter: blur(12px); }
  to   { opacity: 1; filter: none; }
}
/* Testimonial controls, as in Benefits: pause/play, plain chevrons, then a
   01/04 counter; hover gives the nav items' glass
   fill and stroke */
:root { --people-dur: 8s; }
.people__controls { gap: .5rem; }    /* one even gap between every control */
.ctl-btn {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);   /* faint outline, like the nav divider */
  color: var(--white);
  opacity: .8;
  transition: opacity .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ctl-btn[hidden] { display: none; }
.ctl-btn:focus-visible {
  opacity: 1;
  background: var(--panel-bg);
  box-shadow: inset 0 0 0 1px var(--nav-glass-line);
  -webkit-backdrop-filter: var(--panel-blur);
  backdrop-filter: var(--panel-blur);
}
/* Hover only where there's a real pointer: on touch a tap leaves it stuck */
@media (hover: hover) {
  .ctl-btn:hover {
    opacity: 1;
    background: var(--panel-bg);
    box-shadow: inset 0 0 0 1px var(--nav-glass-line);
    -webkit-backdrop-filter: var(--panel-blur);
    backdrop-filter: var(--panel-blur);
  }
}
/* Green accent: hover swaps the glass stroke for FIS green, like the
   Search careers card */
@media (hover: hover) {
  .people__controls .ctl-btn:hover { box-shadow: inset 0 0 0 1px var(--core-green); }
}
.ctl-btn svg { display: block; }
.ctl-btn .ctl-btn__play { display: none; }
.ctl-btn.is-paused .ctl-btn__pause { display: none; }
.ctl-btn.is-paused .ctl-btn__play { display: block; margin-left: 2px; }
.people__count {
  margin: 0;                        /* same gap as between the buttons */
  text-align: left;
  font-size: .9375rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
/* Auto-advance timer: nothing to see; script.js turns on its animationend */
.people__timer { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; }
.people__timer.is-running { animation: people-timer var(--people-dur) linear both; }
.people__timer.is-paused { animation-play-state: paused; }
@keyframes people-timer { from { opacity: 0; } to { opacity: 1; } }

/* Pause/play toggle uses filled icons */
/* Pause/play drawn as outlines to match the chevrons' line weight */
.icon-btn--toggle svg { width: 14px; height: 14px; }
/* Play icon is a solid filled triangle (same colour stroke keeps the corners soft) */
.icon-btn--toggle .icon-btn__play { fill: currentColor; }
.icon-btn--toggle .icon-btn__play { display: none; }
.icon-btn--toggle.is-paused .icon-btn__pause { display: none; }
.icon-btn--toggle.is-paused .icon-btn__play { display: block; margin-left: 1px; }
/* Round control buttons. On hover a filled circle grows from the
   centre to fill the button. */
.icon-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--white) 25%, transparent);   /* 25% stroke */
  border-radius: 50%;
  color: var(--white);
  transition: color .2s var(--ease);
}
.icon-btn__fill {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 100%; height: 100%;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--white);
  transform: scale(0);
  transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}
.icon-btn:hover,
.icon-btn:focus-visible { color: var(--navy); }
.icon-btn:hover .icon-btn__fill,
.icon-btn:focus-visible .icon-btn__fill { transform: scale(1.02); }
.icon-btn__icon { display: block; }
.icon-btn--prev .icon-btn__icon { transform: scaleX(-1); }
/* Testimonial prev/next arrows: double size (64px) */
.icon-btn[data-prev],
.icon-btn[data-next] { width: 64px; height: 64px; }
.icon-btn[data-prev] .icon-btn__icon,
.icon-btn[data-next] .icon-btn__icon { width: 24px; height: 24px; }

/* ==========================================================================
   Search: hero search bar + slide-up jobs panel
   Ported from the Pitch/home kit onto this page's tokens: Navy surfaces,
   white text, Core Green as the accent.
   ========================================================================== */

/* Icon sprite: hidden without display:none, which some engines ignore for <use> */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1em; height: 1em; flex: 0 0 auto; }

/* Registered so the glow position is a real, animatable percentage */
@property --mx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: true; initial-value: 100%; }

/* ---------- Search bar ----------
   A button that looks like a field: clicking opens the jobs panel. Fixed to
   the screen. At the top of the page it's a glass pill along the bottom of
   the hero; once the page scrolls (.is-docked, set in script.js) it docks to
   the bottom edge as a narrower container with rounded top corners, the
   mirror of the nav at the top, and reads "Search for a career with us". */
.hero-search[hidden] { display: none; }   /* beats the display set below */
.hero-search {
  --sb-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);   /* gap below it in the hero */
  position: fixed;
  z-index: 90;                      /* under the nav (100) and the jobs panel (200) */
  left: 0; right: 0;
  bottom: var(--sb-bottom);
  margin-inline: auto;              /* centred while its width animates */
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: .75rem;
  width: min(560px, calc(100% - var(--gutter) * 2));
  height: 56px;
  padding: 0 1.25rem;
  border-radius: 28px;              /* half the height: a pill, in px so it can animate to the docked shape */
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 0 0 0 transparent;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--white);
  text-align: left;
  transition:
    bottom var(--nav-dur) var(--nav-ease),
    width var(--nav-dur) var(--nav-ease),
    height var(--nav-dur) var(--nav-ease),
    padding var(--nav-dur) var(--nav-ease),
    border-radius var(--nav-dur) var(--nav-ease),
    background-color .25s var(--ease),
    box-shadow .25s var(--ease);
}
/* Hover: text, icon and outline go to full white; nothing else changes */
.hero-search:hover,
.hero-search:focus-visible { box-shadow: inset 0 0 0 1px var(--white), 0 0 0 0 transparent; }
.hero-search:hover .hero-search__ghost,
.hero-search:focus-visible .hero-search__ghost,
.hero-search:focus-visible .hero-search__icon { color: var(--white); }
/* Docked: hangs from the bottom edge, glass Navy like the condensed nav */
.hero-search.is-docked {
  bottom: 0;
  /* Hugs "Search for a career with us" plus 24px each side: --dock-w is
     measured in script.js so the width can animate (auto can't) */
  width: min(var(--dock-w, 420px), calc(100% - var(--gutter) * 2));
  padding-inline: 24px;
  height: calc(52px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);   /* clear the home indicator on phones */
  border-radius: 16px 16px 0 0;
  background: color-mix(in srgb, var(--navy) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 0 0 1px var(--nav-glass-line), 0 -8px 24px rgba(0, 0, 0, .25);
}
/* Docked: icon + text centred in the bar. The text hugs its content rather
   than filling the bar, so there's no right-edge fade to apply. */
.hero-search.is-docked { justify-content: center; }
.hero-search.is-docked .hero-search__ghost {
  flex: 0 1 auto;
  -webkit-mask-image: none;
  mask-image: none;
}
/* Room at the end of the page so the docked bar never covers the last content */
body:has(.hero-search:not([hidden])) { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
.hero-search.is-docked:hover,
.hero-search.is-docked:focus-visible { box-shadow: inset 0 0 0 1px var(--white), 0 -8px 24px rgba(0, 0, 0, .25); }

.hero-search__icon { width: 20px; height: 20px; flex: none; color: var(--color-muted); transition: color .25s var(--ease); }
.hero-search:hover .hero-search__icon { color: var(--white); }
/* The visible placeholder: dimmed "Search for a" + a full-strength rolling tail.
   Fills the bar so the right-edge fade lands on empty space, not the text. */
.hero-search__ghost {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .3ch;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--font-size-body);
  color: var(--color-muted);
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
  mask-image: linear-gradient(to right, #000 88%, transparent);
}
/* Rolling phrase (shared by the bar and the panel field): .roll-out exits
   upward, .at-bottom parks below with no transition, then it rises in */
.hero-search__roll,
.jobs__search-roll {
  display: inline-block;
  color: var(--white);
  transition: transform .26s var(--ease), opacity .26s var(--ease);
}
.roll-out { transform: translateY(-100%); opacity: 0; }
.at-bottom { transform: translateY(100%); opacity: 0; transition: none !important; }

/* ---------- Jobs panel: a sheet that slides up over a blurred scrim ---------- */
.jobs-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;                     /* above the nav (100) */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s .55s;
}
.jobs-sheet.is-open { visibility: visible; pointer-events: auto; transition: none; }
.jobs-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.jobs-sheet.is-open .jobs-sheet__scrim { opacity: 1; }
.jobs-sheet__panel {
  --sheet-gap: clamp(16px, 6vh, 72px);   /* breathing room above and either side */
  position: relative;
  width: min(calc(100% - var(--sheet-gap) * 2), var(--container));
  height: calc(100dvh - var(--sheet-gap));
  border-radius: 16px 16px 0 0;
  background: var(--panel-bg);
  -webkit-backdrop-filter: var(--panel-blur);
  backdrop-filter: var(--panel-blur);
  box-shadow: 0 0 0 1px var(--color-line), 0 -30px 80px rgba(0, 0, 0, .4);
  color: var(--color-text);
  overflow: hidden;
  transform: translateY(100%);
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.jobs-sheet.is-open .jobs-sheet__panel { transform: none; }
html.search-locked { overflow: hidden; }

.jobs {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-inline: clamp(1.25rem, 1rem + 1.5vw, 3rem);
}
.jobs__head { flex: none; }
.jobs__head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1rem, .75rem + 1vw, 1.5rem);
}
.jobs__title {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-light);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}
.jobs__close { width: 40px; height: 40px; flex: none; }

/* Search field */
.jobs__search { position: relative; display: flex; align-items: center; }
.jobs__search-input {
  width: 100%;
  height: 60px;
  padding: 0 60px 0 26px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: var(--white);
  font: inherit;
  font-size: var(--font-size-body-lg);
  outline: 0;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.jobs__search-input:hover { border-color: rgba(255, 255, 255, .35); }
.jobs__search-input:focus { border-color: var(--white); background: rgba(255, 255, 255, .08); }
.jobs__search-input::-webkit-search-cancel-button,
.jobs__search-input::-webkit-search-decoration { -webkit-appearance: none; }
.jobs__search-icon { position: absolute; right: 24px; width: 22px; height: 22px; color: var(--white); pointer-events: none; }
/* Ghost placeholder over the input; click-through. Left inset = padding + border */
.jobs__search-ghost {
  position: absolute;
  inset: 0 60px 0 27px;
  display: flex;
  align-items: center;
  gap: .3ch;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  color: var(--color-muted);
  font-size: var(--font-size-body-lg);
  transition: opacity .2s var(--ease);
}
.jobs__search.has-value .jobs__search-ghost { opacity: 0; }   /* typed text beats the placeholder */

/* Count + filters */
.jobs__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.25rem 0 .25rem;
}
.jobs__count { font-size: .9375rem; color: var(--color-muted); }
.jobs__count strong { font-weight: var(--font-weight-medium); color: var(--color-heading); font-variant-numeric: tabular-nums; }
.jobs__filters { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(.75rem, 2vw, 1.75rem); }
.jobs-filter { position: relative; }   /* the dropdown hangs off this */
.jobs-filter__btn,
.jobs-filter__static {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9375rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-muted);
  white-space: nowrap;
}
.jobs-filter__btn { transition: color .2s var(--ease); }
.jobs-filter__btn:hover,
.jobs-filter.is-open .jobs-filter__btn { color: var(--white); }
.jobs-filter__btn .icon,
.jobs-filter__static .icon { width: 15px; height: 15px; opacity: .7; }
.jobs-filter__btn .icon { transition: rotate .2s var(--ease); }
.jobs-filter.is-open .jobs-filter__btn .icon { rotate: 180deg; }
/* Right-aligned so it stays inside the panel under a right-hand filter */
.jobs-filter__panel {
  position: absolute;
  top: calc(100% + .75rem);
  right: 0;
  z-index: 5;
  width: min(340px, 80vw);
  padding: .75rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--navy) 80%, #000);   /* a step lighter than the panel it opens over */
  box-shadow: 0 0 0 1px var(--nav-glass-line), 0 18px 40px rgba(0, 0, 0, .4);
}
.jobs-filter__search { position: relative; display: flex; align-items: center; margin-bottom: .5rem; }
.jobs-filter__search .icon { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--color-muted); pointer-events: none; }
.jobs-filter__input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: var(--white);
  font: inherit;
  font-size: .875rem;
  outline: 0;
}
.jobs-filter__input::placeholder { color: var(--color-muted); }
.jobs-filter__input:focus { border-color: var(--white); }
.jobs-filter__input::-webkit-search-cancel-button,
.jobs-filter__input::-webkit-search-decoration { -webkit-appearance: none; }
/* overscroll-behavior stops a flick at the end of this list scrolling the grid behind */
.jobs-filter__list { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.team-option {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .6rem;
  border-radius: 8px;
  font-size: .875rem;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color .15s var(--ease);
}
.team-option:hover { background: rgba(255, 255, 255, .06); color: var(--white); }
/* Real checkbox stays for keyboard + form semantics; the span is the visible box */
.team-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.team-option__box {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 5px;
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
/* Tick: a rotated L from two borders; springs in from scale 0 */
.team-option__box::after {
  content: "";
  width: 8px; height: 4px;
  margin-top: -1px;                 /* optical centre: a tick's ink sits low */
  border-left: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: rotate(-45deg) scale(0);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.team-option input:checked + .team-option__box { background: var(--core-green); border-color: var(--core-green); }
.team-option input:checked + .team-option__box::after { transform: rotate(-45deg) scale(1); }
.team-option input:focus-visible + .team-option__box { outline: 2px solid var(--white); outline-offset: 2px; }
.team-option__name { flex: 1; min-width: 0; }
.jobs-filter__empty { margin: .5rem .6rem; font-size: .875rem; color: var(--color-muted); }

/* Scroll box: rows fade out at its top edge, so the head needs no background.
   padding-top matches the fade so the first row isn't half-faded at rest. */
.jobs__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 40px;
  padding-bottom: clamp(2rem, 5vw, 4rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
}
/* auto-fill reflows to any panel width without a breakpoint per column count */
.jobs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--col-gap);
}
.jobs__grid > li { display: flex; transition: opacity .22s var(--ease), transform .22s var(--ease); }
.jobs__grid > li.is-out { opacity: 0; transform: scale(.96); pointer-events: none; }
.jobs__grid > li[hidden] { display: none; }   /* display:flex above would otherwise beat [hidden] */
.job-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* tags + location line up along a row */
  gap: 2rem;
  min-height: 240px;
  padding: 1.5rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px var(--color-line);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease), translate .25s var(--ease);
}
.job-card:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); translate: 0 -2px; }
.job-card:hover .job-card__title { color: var(--white); }
.job-card__title {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-regular);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--color-heading);
}
.job-card__tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.job-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  font-size: .8125rem;
  color: var(--color-text);
}
.job-tag .icon { width: 14px; height: 14px; color: var(--color-muted); }
.job-card__location { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--color-text); }
.job-card__location .icon { width: 16px; height: 16px; color: var(--core-green); }
.jobs__empty { padding: 2rem 0; color: var(--color-muted); }

@media (max-width: 768px) {
  .jobs-sheet__panel { --sheet-gap: var(--gutter); }
  .jobs { padding-inline: var(--gutter); }
}

/* ---------- Scroll reveal (only applied when JS runs) ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .nav__menu { display: none; }
  .nav__burger { display: grid; }
  .nav__bar { grid-template-columns: auto minmax(0, 1fr); }
  .section-head .eyebrow { grid-column: 1 / -1; padding-top: 0; }
  .section-head__title { grid-column: 1 / -1; }

  .numbers { height: auto; }
  .numbers__pin { position: static; height: auto; display: block; }
  .numbers__inner { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .numbers__left, .numbers__viz { grid-column: 1 / -1; grid-row: auto; padding-left: 0; }
  .numbers__left .num-list { margin-top: 0; }
  .numbers__viz { order: -1; max-width: 360px; }

  .benefits__left { grid-column: 1 / span 7; padding-right: 0; }
  .acc__media { grid-column: 8 / -1; }

  .wheel { grid-column: 1 / span 4; }
  .people__content { grid-column: 5 / -1; }

}

/* Vertical scroll progress for FIS in Numbers, styled like the benefits
   ring: a thin faint track, the current stat's segment a little brighter
   and thicker, and a green fill drawing down it as you scroll (--f 0 -> 1,
   set by script.js). Half the dot board's height, on the right between the
   dots and the stat (it counts the stats), held two column-gaps clear of the
   board's edge so it doesn't move as the numbers change width. */
.stats-progress {
  position: absolute;
  left: calc(50% + var(--board) / 2 + 1rem + var(--s-gap) * 2);
  top: 50%;
  translate: -50% -50%;
  height: calc(var(--board) / 2);
  width: 2px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stats-progress__seg {
  position: relative;
  flex: 1;
  width: 1px;
  margin-inline: auto;
  background: rgba(255, 255, 255, .2);   /* faint track, as the ring's */
  transition: width .3s var(--ease), background-color .3s var(--ease);
}
.stats-progress__seg.is-current { width: 2px; background: rgba(255, 255, 255, .35); }   /* current segment, as the ring's */
.stats-progress__seg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--core-green);
  transform-origin: 50% 0;
  transform: scaleY(var(--f, 0));
}

@media (max-width: 860px) {
  /* Hero: same centred stack, smaller type; pause/play moves up out of the
     way of the full-width search bar */
  /* Stats: grid a little bigger; number then label stacked under it */
  .stats-pin { --board: min(80vw, 46svh); }
  /* Heading sits above the board here, so the bar takes the right margin beside the board */
  .stats-progress { left: calc(100% - (50% - var(--board) / 2) / 2); top: calc(50% + var(--cy-shift, 0px)); }
  /* Heading above the grid, stat below it, both centred */
  /* Heading 40px above the grid, stat 40px below it (--board-h: the grid's
     height, taller than wide on mobile; set by script.js) */
  .hero__shead { top: auto; bottom: calc(50% - var(--cy-shift, 0px) + var(--board-h, var(--board)) / 2 + 40px); translate: none; left: var(--gutter); right: var(--gutter); width: auto; align-items: center; text-align: center; }
  .hero__shead .eyebrow { align-self: center; }
  .hero__sgrid { grid-template-columns: minmax(0, 1fr); align-items: start; top: calc(50% + var(--cy-shift, 0px) + var(--board-h, var(--board)) / 2 + 40px); bottom: auto; }   /* top (not padding) so the % is of the stage's height */
  .hero__stat { grid-column: 1; gap: .5rem; align-items: center; }
  .hero__snum { text-align: center; font-size: clamp(2.5rem, 10vw, 3.5rem); }
  .hero__slabel { text-align: center; max-width: none; }   /* fill the width rather than wrapping early */
  .hero__sgrid { padding-inline: var(--gutter); }
  /* Benefits carousel: one big circle in view with its neighbours cut off */
  .bcar { --d: min(62vw, 40svh); }
  /* Benefits rows: stacked, with the circle inline under the title (a
     fixed circle mid-screen would sit on top of the text here) */
  .benefit-row { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; min-height: 0; clip-path: none; }
  .benefit-row--intro { min-height: 0; }
  .benefit-row--intro .benefit-row__orb { display: none; }
  .benefit-row__orb { position: relative; left: auto; top: auto; margin: 0 auto; grid-row: 2; --orb: min(64vw, 320px); }
  .benefit-row__right { grid-column: 1; grid-row: 3; }
  /* The ring spans the screen, a page margin in from each side (capped so the text
     above and below still fits on short phones); the image keeps its
     1 : 1.4 ratio to the ring */
  .hero { --ring: min(calc(100vw - var(--gutter) * 2), 60svh); --orb: calc(var(--ring) / 1.4); }
  /* Benefits and FIS in Numbers centre on a line a little below the
     middle, so heading + circle/grid + text read as centred in the space
     under the nav (script.js mirrors this for the dot grid) */
  :root { --cy-shift: calc(var(--nav-h) / 2 + .5rem); }   /* evens the gap above (to the nav) and below */
  /* Benefits: heading block at the top, benefit details under the ring, all centred */
  /* Heading 40px above the ring, details 40px below it */
  .hero__blead { top: auto; bottom: calc(50% - var(--cy-shift, 0px) + var(--ring) / 2 + 40px); translate: none; left: var(--gutter); right: var(--gutter); width: auto; gap: .5rem; align-items: center; text-align: center; }
  .hero__blead .eyebrow { align-self: center; }
  .hero__barrow { width: 40px; height: 40px; }
  .hero__btitle,
  .hero__shead .hero__pheading { font-size: var(--font-size-h2); text-wrap: wrap; }   /* full H2 size, each line filling the width (balance / pretty narrow the lines) */
  .hero__blead,
  .hero__shead { left: var(--gutter); right: var(--gutter); }   /* heading blocks run to the page margins */
  .hero__bintro { display: none; }
  .hero__bside { top: calc(50% + var(--cy-shift, 0px) + var(--ring) / 2 + 40px); translate: none; left: var(--gutter); right: var(--gutter); width: auto; text-align: center; }
  .hero__bitem { align-self: start; }
  .hero__bdetail { display: none; }   /* no room under the ring; name + summary only */
  .hero__title { font-size: clamp(2.75rem, 12vw, 4.5rem); }
  /* Pause + scroll cue under the sub-heading; the careers card along the
     bottom of the screen, a page margin in from the edges */
  .hero__meta { position: static; margin-top: .25rem; }
  .hero__card { left: var(--gutter); right: var(--gutter); bottom: var(--gutter); width: auto; }

  .benefits__left { grid-column: 1 / -1; grid-row: auto; }
  .acc__media { display: none; }
  .acc__media-inline {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-top: 1.5rem;
    border-radius: 2px;
  }

  .wheel,
  .people__content { grid-column: 1 / -1; }
  /* Carousel: the row of portraits above, the testimonial left-aligned
     under it. Controls run the full width: pause and the counter on the
     left, the arrows at the right edge. */
  .people__content { padding-left: 0; }
  .people__content .people__controls { width: 100%; }
  .people__controls .ctl-btn--pause { display: none; }   /* no auto-advance on mobile, so nothing to pause */
  .people__controls .people__count { order: 1; margin-right: auto; }
  .people__controls [data-prev] { order: 2; }
  .people__controls [data-next] { order: 3; }
  .people__body { row-gap: 1.5rem; }
}

@media (max-width: 1100px) {
  /* Open menu (smaller screens): white, with navy text, outlines and a
     dark logo, bar and panel alike */
  .nav.is-menu-open .nav__bar { background: var(--white); }
  .nav.is-menu-open .nav__bar::after { opacity: 0; }
  .nav.is-menu-open .nav__logo img { filter: none; }   /* the logo PNG is dark as it is */
  .nav.is-menu-open .nav__burger { background: transparent; box-shadow: inset 0 0 0 1px var(--navy); color: var(--navy); }
  .nav.is-menu-open .nav__cta { box-shadow: inset 0 0 0 1px var(--navy); color: var(--navy); }
  .nav__popup { background: var(--white); color: var(--navy); }
  .nav__popup-inner { border-top-color: color-mix(in srgb, var(--navy) 15%, transparent); }
  .nav__popup-item,
  .nav__page-list li { border-bottom-color: color-mix(in srgb, var(--navy) 15%, transparent); }
  .nav__popup-link,
  .nav__page-title,
  .nav__page-back { color: var(--navy); }
  .nav__popup-list:has(.nav__popup-link:hover) .nav__popup-link:not(:hover) { color: color-mix(in srgb, var(--navy) 40%, transparent); }
  .nav__page-back { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--navy) 30%, transparent); }
  .nav__page-back:hover,
  .nav__page-back:focus-visible { background: color-mix(in srgb, var(--navy) 6%, transparent); }
  .nav__page-link { color: color-mix(in srgb, var(--navy) 80%, transparent); }
  .nav__page-link:hover,
  .nav__page-link:focus-visible { color: var(--navy); }
  .nav__popup .btn--glass { box-shadow: inset 0 0 0 1px var(--navy); color: var(--navy); }
  .nav__popup .btn--glass:focus-visible { background-color: var(--core-green); box-shadow: inset 0 0 0 1px var(--core-green); color: var(--navy); }
}

@media (max-width: 560px) {
  /* Search Careers stays beside the menu button, a little tighter */
  .nav__cta { --pad: 1rem; }
  .nav__end { gap: .375rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .nav__stat-dot { animation: none; }
  .acc__item.is-open .acc__bar span { animation: none; transform: scaleX(1); }
}