/* ==========================================================================
   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 */
  --color-bg: var(--white);
  --color-text: var(--charcoal);
  --color-heading: var(--navy);
  --color-muted: #6E6E74;        /* ADDED: Charcoal tint, 5:1 on white */
  --color-line: var(--gray);
  --color-line-strong: var(--navy);
  --color-accent: var(--core-green);
  --color-eyebrow: var(--navy);

  /* 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(1rem, 0.296rem + 3.005vw, 4rem);                 /* 16 → 64 */
  --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(--navy);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(75, 205, 62, .35);
}

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--navy); color: var(--white); 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;
}
.eyebrow {
  font-weight: var(--font-weight-semibold);
  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 ---------- */
/* CTA: a single Raspberry pill, 32px tall, 12px either side */
.btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--raspberry);
  color: var(--white);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .25s var(--ease);
}
.btn:hover { background: color-mix(in srgb, var(--raspberry) 85%, black); }
.btn:focus-visible { outline: 2px solid var(--raspberry); outline-offset: 2px; }
/* Trim the font's extra space above caps so the label centres optically */
.btn__label { text-box: trim-both cap alphabetic; }
@supports not (text-box: trim-both cap alphabetic) {
  .btn__label { position: relative; top: -1px; }
}

.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(--navy); }
.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 { --nav-h: 64px; }
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
/* Slides up out of view on scroll down, back on scroll up (script.js) */
.nav { transition: transform .45s cubic-bezier(.65, 0, .35, 1), background-color .25s var(--ease); }
.nav.is-hidden,
.nav-waiting .nav { transform: translateY(-100%); }   /* also hidden during the hero intro, then slides down */
.nav-waiting .nav { transition-duration: 0s; }
html:not(.nav-waiting) .nav { transition-duration: .45s, .25s; }
.nav__bar {
  position: relative;
  z-index: 2;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: .75rem;                       /* menu sits close to the CTA */
  padding-inline: var(--gutter);
}
.nav__logo img { display: block; height: 28px; width: auto; }
.nav__list { display: flex; gap: .25rem; }
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  position: relative;
  padding: .5rem .75rem .5rem 1.375rem;   /* room on the left for the hover dot */
  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);
}
a.nav__trigger { text-decoration: none; }
/* Hover / open: a Core Green dot pops in to the left of the label (space is
   already reserved in the padding, so nothing shifts) */
.nav__trigger::before {
  content: "";
  position: absolute;
  left: .625rem;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--core-green);
  transform: scale(0);
  transition: transform .25s cubic-bezier(.34, 1.4, .64, 1);
}
.nav__trigger:hover::before,
.nav__trigger:focus-visible::before,
.nav__trigger[aria-expanded="true"]::before { transform: scale(1); }
.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; }
/* Over the hero (desktop): no bar, so the menu sits straight on the video in white.
   The video's frame reaches up behind the nav for this. Set by script.js. */
/* ...but once a dropdown opens it switches back to the white bar, joining up with the panel */
.nav.is-over-hero:not(.is-mobile-open):not(.is-open) { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav__trigger { transition: background-color .2s var(--ease), color .3s var(--ease); }
.nav.is-over-hero:not(.is-open):not(.is-mobile-open) .nav__trigger { color: var(--white); }
.nav.is-over-hero:not(.is-open):not(.is-mobile-open) .nav__chev { opacity: .85; }
.nav__menu { margin-left: auto; }   /* menu sits on the right, next to the CTA */
.nav__actions { display: flex; align-items: center; gap: .5rem; }
.nav__link {
  padding: .5rem .75rem;
  font-size: .9375rem;
  color: var(--color-heading);
  text-decoration: none;
}
.nav__link:hover { text-decoration: underline; text-underline-offset: .3em; }

/* Mega menu panel drops below the bar; the page behind blurs */
.nav__panel {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: 2;
  background: var(--white);
  border-top: 1px solid var(--color-line);
  box-shadow: 0 24px 40px -24px rgba(29, 31, 72, .18);
  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-inner {
  min-height: var(--panel-h, 0);   /* all dropdowns match the tallest (set in script.js) */
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  padding: clamp(3rem, 2.25rem + 2.25vw, 4.5rem) var(--gutter);   /* equal top/bottom; page gutters left/right like other sections */
}
/* 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 { color: var(--raspberry); }
/* When a dropdown opens, its links load in line by line, sharpening from
   blurred Raspberry into Navy (--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(--core-green); 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: calc(1.25rem + 64px + 16px); }   /* 16px 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; }
.nav__stat.nav__stat--raspberry { background: var(--raspberry); }
#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(255, 255, 255, .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 { opacity: 1; pointer-events: auto; }
/* Mobile menu button: three dots; turns into a close cross when open */
.nav__burger { display: none; width: 40px; height: 40px; margin-right: -10px; position: relative; color: var(--navy); }   /* -10px: the dots line up with the page margin, not their tap area */
.nav__dots {
  position: absolute; left: 10px; top: 10px;
  transition: opacity .2s var(--ease), transform .3s var(--ease);
}
.nav__burger span {
  position: absolute; left: 11px; right: 11px; top: 18.75px; height: 2.5px; border-radius: 2px;
  background: currentColor;
  opacity: 0;
  transition: opacity .2s var(--ease), rotate .3s var(--ease);
}
.nav.is-mobile-open .nav__dots { opacity: 0; transform: scale(.6); }
.nav.is-mobile-open .nav__burger span { opacity: 1; }
.nav.is-mobile-open .nav__burger span:nth-of-type(1) { rotate: 45deg; }
.nav.is-mobile-open .nav__burger span:nth-of-type(2) { rotate: -45deg; }

/* ---------- Hero: fills the screen below the nav and scrolls normally ---------- */
.hero { position: relative; }
.hero__sticky {
  position: relative;           /* containing block for the pause toggle's grid placement */
  height: calc(100svh - var(--nav-h));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);   /* flipped: narrow column on the left */
  grid-template-rows: minmax(0, 7fr) minmax(0, 3fr);
  overflow: hidden;
  background: var(--white);
  border-bottom: 1px solid var(--color-line);
}
.hero__cell { position: relative; min-height: 0; overflow: hidden; }
.hero__cell--lg   { grid-area: 1 / 2; }
.hero__cell--copy { grid-area: 1 / 1; border-right: 1px solid var(--color-line); }
.hero__cell--title { grid-area: 2 / 2; border-top: 1px solid var(--color-line); }
.hero__cell--sm   { grid-area: 2 / 1; border-top: 1px solid var(--color-line); border-right: 1px solid var(--color-line); }

/* Stacked images that wipe sideways between sets: the new image is revealed
   from the left edge over the previous one, which stays put underneath */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(.7, 0, .2, 1);
}
.hero__img.is-active { z-index: 2; clip-path: inset(0 0 0 0); }
.hero__img.was-active { z-index: 1; clip-path: inset(0 0 0 0); transition: none; }

/* Large cell: looping video (full-hero size, cropped to the cell by its frame) */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-toggle.hero__toggle { grid-area: 1 / 2 / 2 / 3; left: auto; right: 16px; bottom: 16px; }   /* bottom-right of the large image (the grid area is its containing block) */


/* ---------- Hero first-load intro (classes set in script.js) ----------
   The grid never changes. Instead the frames crop the media: the video is
   always full-hero size and its frame (clip-path) starts as the whole hero,
   then closes in to the top-right cell; the small image is always its cell
   size and its frame opens out from the bottom-left corner. The content
   never resizes, only the frames holding it.
   is-intro: frames at their start. is-morphing: frames easing to their cells.
   is-text: eyebrow and CTA fade up. */
.hero__cell--lg { position: static; overflow: visible; }   /* the video is placed against the whole hero */
.hero__video {
  z-index: 3;
  /* The video reaches up behind the nav, so it can fill the whole screen
     during the intro and sit under the see-through nav afterwards. Its frame
     ends on the top-right cell plus the strip above it. */
  top: calc(var(--nav-h) * -1);
  height: calc(100% + var(--nav-h));
  clip-path: inset(0 0 calc((100% - var(--nav-h)) * .3) calc(100% / 3));   /* top-right cell, plus the strip behind the nav */
  transition: clip-path 1.4s cubic-bezier(.65, 0, .35, 1);
}
/* Black shade across the top of the video so the white menu stays readable.
   Same box and frame as the video, so it crops with it. */
.hero__cell--lg::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--nav-h) * -1);
  height: calc(100% + var(--nav-h));
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, .7) 0,
    rgba(0, 0, 0, .55) var(--nav-h),
    rgba(0, 0, 0, .3) calc(var(--nav-h) * 2.5),
    rgba(0, 0, 0, .1) calc(var(--nav-h) * 4),
    rgba(0, 0, 0, 0) calc(var(--nav-h) * 5.5));
  clip-path: inset(0 0 calc((100% - var(--nav-h)) * .3) calc(100% / 3));
  transition: clip-path 1.4s cubic-bezier(.65, 0, .35, 1);
}
.hero-intro .hero:not(.is-morphing) .hero__video,
.hero.is-intro .hero__video,
.hero-intro .hero:not(.is-morphing) .hero__cell--lg::after,
.hero.is-intro .hero__cell--lg::after { clip-path: inset(0 0 0 0); }
.hero__sticky { overflow: visible; }   /* let the video reach up behind the nav */
.hero__cell--sm {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.4s cubic-bezier(.65, 0, .35, 1);
}
.hero-intro .hero:not(.is-morphing) .hero__cell--sm,
.hero.is-intro .hero__cell--sm { clip-path: inset(100% 100% 0 0); }   /* opens from the bottom-left corner */
.hero-intro .hero:not(.is-morphing) .hero__cell--copy,
.hero-intro .hero:not(.is-morphing) .hero__cell--title,
.hero-intro .hero:not(.is-morphing) .hero__toggle,
.hero.is-intro .hero__cell--copy,
.hero.is-intro .hero__cell--title,
.hero.is-intro .hero__toggle { opacity: 0; }
.hero.is-morphing .hero__toggle { opacity: 0; }
.hero__toggle { transition: opacity .5s var(--ease), background-color .25s var(--ease); }
/* Copy column: eyebrow and CTA wait for the hand-over, then fade up */
.hero-intro .hero:not(.is-morphing) .hero__eyebrow,
.hero-intro .hero:not(.is-morphing) .hero__cta,
.hero.is-intro .hero__eyebrow,
.hero.is-intro .hero__cta,
.hero.is-morphing:not(.is-text) .hero__eyebrow,
.hero.is-morphing:not(.is-text) .hero__cta { opacity: 0; transform: translateY(12px); }
.hero__eyebrow,
.hero__cta { transition: opacity .7s var(--ease), transform .8s var(--ease); }
.hero.is-text .hero__cta { transition-delay: 1.7s; }   /* after the sentence has blurred in */

/* Right column: message + CTA, sitting at the bottom */
.hero__cell--copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem) clamp(1.25rem, 1rem + 1vw, 2rem) clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--gutter);   /* page edge now on the left */
}

.hero__cta { margin-top: clamp(1.5rem, 1rem + 1vw, 2rem); }
.hero__eyebrow { margin-bottom: 1rem; }
.hero__msg {
  max-width: 20em;
  font-size: var(--font-size-quote);
  font-weight: var(--font-weight-regular);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--color-heading);
}
.hero__msg { --blur-base: 250ms; }   /* blur-in starts just after the headline */

/* Bottom left: headline */
.hero__cell--title {
  display: flex;
  flex-direction: column;
  justify-content: center;          /* equal space above the eyebrow and below the headline */
  gap: 1.25rem;
  padding: clamp(2rem, 1.25rem + 2.5vw, 4rem) var(--gutter);
}
/* trim the headline's line-box overhang so the visible text is truly centred */
.hero__title { text-box: trim-both cap alphabetic; }
.hero__title {
  font-size: clamp(2.5rem, min(6vw, 8.5svh), 7rem);
  font-weight: var(--font-weight-light);
  line-height: .98;
  letter-spacing: -0.035em;
  color: var(--color-heading);
  text-wrap: balance;
  max-width: 13em;
}


/* ---------- 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 ----------
   Plain figures in black on white: four across, split by thin rules,
   number above its label. Each blurs and slides up in turn as it reveals
   (staggered via --reveal-delay) while the number counts up. */
.numbers__head { max-width: 40em; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.numbers__title { margin-top: clamp(1rem, .75rem + 1vw, 1.5rem); }
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 2.5rem;
}
.stat {
  padding: .5rem clamp(1rem, .5rem + 2vw, 2.5rem);
  border-left: 1px solid var(--color-line);
}
.stat:first-child { padding-left: 0; border-left: 0; }
.stat__num {
  font-size: clamp(2.75rem, 1.75rem + 3.2vw, 5rem);
  font-weight: var(--font-weight-light);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--black);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat__label {
  margin-top: .875rem;
  font-size: 1rem;
  color: var(--color-muted);
}
/* Entrance: blur + slide up, ease-out-expo */
.js .stat.reveal {
  filter: blur(10px);
  transform: translateY(28px);
  transition:
    opacity .9s cubic-bezier(.16, 1, .3, 1),
    transform 1.1s cubic-bezier(.16, 1, .3, 1),
    filter .9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--reveal-delay, 0s) * 2);   /* 0, .16, .32, .48s */
}
.js .stat.reveal.is-visible { filter: none; transform: none; }
/* Numbers get the headings' green blur-in: sharpen while Core Green, hold, then ease to black */
.js .stat.reveal .stat__num {
  color: var(--core-green);
  transition: color 1s cubic-bezier(.65, 0, .35, 1) calc(var(--reveal-delay, 0s) * 2 + .5s);
}
.js .stat.reveal.is-visible .stat__num { color: var(--black); }

/* ---------- Benefits: heading | image with graph | accordion ----------
   The open accordion item drives the image: the new one wipes up over the
   last (script.js) and its line graph draws in. Items auto-advance as the
   green bar fills, and any item can be clicked open. */
/* Benefits opener: centred heading with the image strip just below;
   script.js rolls it away (--roll 0 → 1) as you scroll */
.benefits__opener {
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(1rem, 6vh, 5rem) clamp(2rem, 5vh, 3.5rem);   /* image sits close below */
}
.benefits__opener[hidden] { display: none; }   /* retired once the intro has played */
.benefits__opener.is-sticky { position: sticky; top: var(--opener-top); z-index: 1; }   /* held with the small image while pinned */
/* Pinning (desktop, set by script.js): the track adds scroll distance and the
   stage sticks, centred on screen, while the image grows */
.benefits__track.is-pinning { height: var(--track-h); }
.benefits__track.is-pinning .benefits__stage { position: sticky; top: var(--pin-top); }
.benefits__opener-inner {
  --roll: 0;
  opacity: calc(1 - var(--roll));
  transform: translateY(calc(var(--roll) * -64px)) scale(calc(1 - var(--roll) * .04));
  filter: blur(calc(var(--roll) * 6px));
  will-change: transform, opacity, filter;
}
.benefits__opener-title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-light);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-heading);
}
.benefits__opener-sub {
  --blur-base: 450ms;   /* blur-in follows the heading */
  margin-top: .75rem;
  font-size: var(--font-size-h5, 1.25rem);
  color: var(--color-muted);
}
.benefits > .container,
.people > .container,
.numbers > .container { max-width: none; }   /* full width, page gutters only */
.benefits__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 1rem + 3vw, 5rem);
  align-items: center;
}
.benefits__lead { grid-area: 1 / 1; max-width: 26em; align-self: start; }
.benefits__title { margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); }
.benefits__intro { margin-top: 1.5rem; max-width: 32em; }
.benefits__media {
  grid-area: 1 / 2;
  position: relative;
  width: 100%;
  max-height: calc(100svh - var(--nav-h) - 4rem);
  aspect-ratio: 350 / 530;
  justify-self: center;
  overflow: hidden;
  border-radius: 2px;
  background: var(--navy);
}
.acc { grid-area: 1 / 3; align-self: start; }   /* top aligned with the image */

/* Stacked images: only the current one (and the one it is wiping over) show */
.bmedia {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  visibility: hidden;
}
.bmedia.is-current,
.bmedia.is-prev { visibility: visible; }
.bmedia.is-prev { z-index: 1; }
.bmedia.is-current { z-index: 2; }
.bmedia__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(1.1);
}
/* Anchor to the top edge so the zoom crops from the bottom (keeps heads in frame) */
.bmedia__img--top { object-position: 50% 0; transform-origin: 50% 0; }
/* Light navy wash so the white graph reads on any photo */
.bmedia::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(29, 31, 72, .3);
  pointer-events: none;
}

/* Graph overlay: each image's circle motif, all white with a green pill.
   On .is-drawn: solid rings draw out from their anchor, dashed rings spread
   out, dots travel round their ring, then the pill pops and stretches. */
.bgraph {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 8%;
  overflow: visible;
  pointer-events: none;
}
.gm-ring { fill: none; stroke: var(--white); }
.gm-draw {
  stroke-dasharray: 0 1;
  stroke-dashoffset: 0;
  transition:
    stroke-dasharray 1.4s var(--ease) var(--d, 0s),
    stroke-dashoffset 1.4s var(--ease) var(--d, 0s);
}
.gm-dashed {
  stroke-dasharray: 5 5;
  transform-box: view-box;
  opacity: 0;
  transform: scale(.72);
  transition: transform 1.4s var(--ease) var(--d, 0s), opacity .8s var(--ease) var(--d, 0s);
}
.gm-field {
  transform-box: view-box;
  transform-origin: 150px 150px;
  opacity: 0;
  transform: scale(.9);
  transition: transform 1.4s var(--ease) .4s, opacity 1s var(--ease) .4s;
}
.gm-orbit {
  transform-box: view-box;
  transform: rotate(var(--from, 0deg));
  transition: transform 1.4s var(--ease) var(--d, 0s);
}
.gm-dot {
  fill: var(--white);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform .5s var(--ease) var(--d, 0s);
}
.gm-dot--hollow { fill: none; stroke: var(--white); stroke-width: 1.5; }
/* Pill: pops in as a dot, then the caps slide apart and the middle fills */
.gm-pill {
  transform-box: view-box;
  transform: scale(0);
  transition: transform .45s cubic-bezier(.34, 1.4, .64, 1) .45s;
}
.gm-pill-mid,
.gm-cap { fill: var(--core-green); }
.gm-pill-mid {
  transform-box: view-box;
  transform: scaleX(0);
  transition: transform .6s var(--ease) .9s;
}
.gm-cap { transition: transform .6s var(--ease) .9s; }
.gm-cap--l { transform: translateX(var(--half, 0px)); }
.gm-cap--r { transform: translateX(calc(var(--half, 0px) * -1)); }
.gm-pill text {
  fill: var(--navy);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  opacity: 0;
  transition: opacity .4s var(--ease) 1.25s;
}
.bmedia.is-drawn .gm-draw { stroke-dasharray: var(--da); stroke-dashoffset: var(--do); }
.bmedia.is-drawn .gm-dashed,
.bmedia.is-drawn .gm-field { opacity: 1; transform: none; }
.bmedia.is-drawn .gm-orbit,
.bmedia.is-drawn .gm-dot,
.bmedia.is-drawn .gm-pill,
.bmedia.is-drawn .gm-pill-mid,
.bmedia.is-drawn .gm-cap { transform: none; }
.bmedia.is-drawn .gm-pill text { opacity: 1; }
.bmedia.gm-reset .bgraph * { transition: none !important; }

/* Section intro (script.js adds .is-in on scroll): the image's side clip
   (--grow) follows the scroll; the accordion wipes down; the rest fades up */
/* Intro: the image starts as a smaller copy of itself (same proportions)
   and scales up from its centre with the scroll */
.benefits__media { transform: scale(var(--bscale, 1)); transform-origin: 50% 50%; }
.acc { transition: clip-path 1.2s cubic-bezier(.65, .05, .25, 1) .3s; }
.js .benefits__stage:not(.is-in) .acc { clip-path: inset(-12px -12px 100% -12px); }
.benefits__stage.is-in .acc { clip-path: inset(-12px); }   /* a little slack so focus rings aren't cut off */
.benefits__stage > .benefits__lead .eyebrow,
.benefits__nav {
  transition: opacity .7s var(--ease), transform .8s var(--ease);
}
.js .benefits__stage:not(.is-in) .benefits__lead .eyebrow,
.js .benefits__stage:not(.is-in) .benefits__nav { opacity: 0; transform: translateY(12px); }
.benefits__stage.is-in .benefits__nav { transition-delay: .9s; }

/* Prev/next arrows sit at the bottom of the heading column */
.benefits__nav { grid-area: 1 / 1; align-self: end; display: flex; gap: .375rem; }

.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__trigger:hover .acc__title { color: var(--core-green); }
.acc__item:not(.is-open) .acc__title { color: var(--color-muted); }
.acc__item:not(.is-open) .acc__trigger:hover .acc__title { color: var(--core-green); }
/* Divider doubles as a progress bar while the item is open (auto-advance) */
.acc__bar {
  position: relative;
  height: 1px;
  background: var(--color-line);
  overflow: hidden;
}
.acc__item:first-child { border-top: 1px solid var(--color-line); }   /* separator above the first item */

/* Height animates via grid rows 0fr -> 1fr */
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .8s cubic-bezier(.65, .05, .25, 1);
}
.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 .55s var(--ease), transform .7s var(--ease);
}
.acc__item.is-open .acc__content { opacity: 1; transform: none; transition-delay: .2s; }
.acc__line { 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);
}
/* Pause/play chip for auto-advancing media: 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: rgba(29, 31, 72, .45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color .25s var(--ease);
}
.media-toggle:hover { background: rgba(29, 31, 72, .7); }
.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; }


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

/* Large portrait on the left; people swap with the benefits wipe-up
   (the .bmedia stack and makeWipeSwap in script.js) */
/* Same column grid and image box as benefits, so the two images match in size */
.people__body.grid {
  grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr) minmax(0, 1fr);   /* image column matches the benefits image column */
  column-gap: clamp(2rem, 1rem + 3vw, 5rem);
}
.people__media {
  grid-column: 1;
  position: relative;
  width: 100%;
  max-height: calc(100svh - var(--nav-h) - 4rem);
  aspect-ratio: 350 / 530;
  justify-self: start;   /* keeps its left edge on the page margin */
  overflow: hidden;
  border-radius: 2px;
  background: var(--color-line);
}
.bmedia--plain::after { display: none; }   /* no navy wash on portraits */

/* Name, team (Raspberry pill CTA, benefits-pill shape) and location,
   sat along the bottom of each portrait; rides the wipe with its image */
.bmedia--plain::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  z-index: 1;
  background: linear-gradient(to top, rgba(29, 31, 72, .7), rgba(29, 31, 72, 0));
  pointer-events: none;
}
.person-tag {
  position: absolute;
  left: clamp(1rem, .75rem + 1vw, 1.5rem);
  right: clamp(1rem, .75rem + 1vw, 1.5rem);
  bottom: clamp(1rem, .75rem + 1vw, 1.5rem);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  color: var(--white);
}
.person-tag__name {
  flex-basis: 100%;
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
}
.person-tag__team {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--raspberry);
  color: var(--white);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: .01em;
  text-decoration: none;
  transition: background-color .25s var(--ease);
}
.person-tag__team:hover { background: color-mix(in srgb, var(--raspberry) 85%, black); }   /* same as .btn:hover */
.person-tag__team:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.person-tag__loc { font-size: .875rem; color: rgba(255, 255, 255, .85); }

/* Text column runs the full image height: eyebrow at the top, quote and
   name centred, controls and Up next along the bottom */
.people__content {
  grid-column: 2 / -1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.people__content .quote__eyebrow { margin-bottom: 0; }
.people__quotes { flex: 1; align-content: center; padding-block: 2rem; }
.people__content .people__controls { margin-top: 0; }
.quote__eyebrow { margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.people__quotes { display: grid; }
.quote { grid-area: 1 / 1; }
.quote[hidden] { display: none; }
.quote__text {
  font-size: var(--font-size-h2);
  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: 22em;
  text-wrap: pretty;
}
.quote.is-entering .quote__by { animation: rise .6s var(--ease) both; }
.quote.is-entering .quote__by { animation-delay: .35s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.quote__by {
  margin-top: 2rem;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--color-muted);
}
.quote__by strong { font-weight: var(--font-weight-medium); color: var(--color-heading); }

/* Arrows, then counter */
.people__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
/* Up next: the following three people, click to jump straight to one */
.upnext { display: flex; align-items: center; gap: 1rem; }
.upnext__list { position: relative; height: 64px; }
.upnext__btn {
  --x: 0px;
  position: absolute;
  left: 0; top: 0;
  width: 48px; height: 64px;
  overflow: hidden;
  background: var(--color-line);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--x)) scale(0);
  transition: transform .9s cubic-bezier(.65, .05, .25, 1), opacity .45s var(--ease);
}
.upnext__btn.is-shown { opacity: 1; pointer-events: auto; transform: translateX(var(--x)) scale(1); }
.upnext__btn.no-anim { transition: none; }
.upnext__btn img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.upnext__btn:hover img,
.upnext__btn:focus-visible img { transform: scale(1.08); }
.people__arrows { display: flex; gap: .375rem; }
/* Round control buttons. On hover a Raspberry 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(--navy) 25%, transparent);   /* 25% stroke */
  border-radius: 50%;
  color: var(--navy);
  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(--navy);
  transform: scale(0);
  transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}
.icon-btn:hover,
.icon-btn:focus-visible { color: var(--white); }
.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); }
/* Prev/next ring buttons (benefits + testimonials). The Next ring fills
   clockwise over the slide's dwell time; when it closes, the slide moves on. */
:root { --acc-dur: 4.9s; --people-dur: 8s; }
.ring-btn {
  position: relative;
  isolation: isolate;
  width: 72px; height: 72px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--navy);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  transition: color .2s var(--ease);
}
.ring-btn__fill {
  position: absolute; inset: 0; z-index: -1;
  border-radius: 50%;
  background: var(--navy);
  transform: scale(0);
  transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}
.ring-btn__ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);          /* start the fill at 12 o'clock */
  overflow: visible;
  pointer-events: none;
}
.ring-btn__ring circle { fill: none; transition: stroke .2s var(--ease); }
.ring-btn__track { stroke: color-mix(in srgb, var(--navy) 20%, transparent); stroke-width: 1.5; }
.ring-btn__progress {
  stroke: var(--navy);
  stroke-width: 2.5;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.ring-btn.is-running .ring-btn__progress { animation: ring-fill var(--ring-dur, 5s) linear forwards; }
.ring-btn.is-paused .ring-btn__progress { animation-play-state: paused; }
[data-acc-next] { --ring-dur: var(--acc-dur); }
[data-next] { --ring-dur: var(--people-dur); }
@keyframes ring-fill { to { stroke-dashoffset: 0; } }

.ring-btn:hover,
.ring-btn:focus-visible { color: var(--white); }
.ring-btn:hover .ring-btn__fill,
.ring-btn:focus-visible .ring-btn__fill { transform: scale(1); }
/* On hover the button is just solid navy: the rings fade out (the timer holds) */
.ring-btn__ring { transition: opacity .2s var(--ease); }
.ring-btn:hover .ring-btn__ring,
.ring-btn:focus-visible .ring-btn__ring { opacity: 0; }
.benefits__nav, .people__arrows { gap: .5rem; }
.acc-count { display: none; }   /* shown on mobile only */
.ring-btn__icon { display: none; }   /* arrow / pause icons: mobile only (desktop uses the text labels) */

/* ---------- Blur-in text: words sharpen from blurred Core Green to Navy ---------- */
.js .blur-in .bw {
  display: inline-block;
  text-indent: 0;            /* don't inherit the quote's hanging indent per word */
  opacity: 0;
  filter: blur(12px);
  color: var(--core-green);
  transform: translateY(.08em);
  --bw-delay: calc(var(--blur-base, 0ms) + var(--i, 0) * 55ms);   /* --blur-base staggers whole lines */
  /* Words sharpen while still green, hold the green for a beat, then ease to navy */
  transition:
    opacity .7s var(--ease) var(--bw-delay),
    filter .9s var(--ease) var(--bw-delay),
    transform .9s var(--ease) var(--bw-delay),
    color 1s cubic-bezier(.65, 0, .35, 1) calc(var(--bw-delay) + 500ms);
}
.js .blur-in.blur-reset .bw { transition: none; }
.js .blur-in.is-in .bw {
  opacity: 1;
  filter: blur(0);
  color: inherit;
  transform: none;
}

/* ---------- 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__actions { margin-left: auto; }
  .nav__burger { display: block; }
  /* Mobile menu: a full-height sheet below the bar that unrolls downwards to
     open and rolls back up to close */
  .nav__menu {
    display: block;
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 2;
    height: calc(100svh - var(--nav-h));   /* fills the screen below the bar */
    overflow-y: auto;
    padding: 1rem var(--gutter) 2rem;
    background: var(--white);
    border-top: 1px solid var(--color-line);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .5s cubic-bezier(.65, 0, .35, 1), visibility 0s linear .5s;
  }
  .nav.is-mobile-open .nav__menu {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path .5s cubic-bezier(.65, 0, .35, 1), visibility 0s;
  }
  .nav .nav__list { flex-direction: column; gap: 0; }
  .nav .nav__trigger::before { display: none; }
  .nav .nav__chev { width: 20px; height: 20px; stroke-width: 2.5; opacity: .85; }   /* bigger, bolder chevrons in the mobile menu */
  .nav .nav__trigger { width: 100%; justify-content: space-between; padding: 1rem 0; border-radius: 0; font-size: var(--font-size-h6); background: none; }
  .nav .nav__panel { position: static; box-shadow: none; border: 0; animation: none; }
  .nav .nav__panel-inner { min-height: 0; gap: 1.25rem; padding: .25rem 0 2rem; flex-direction: column; }   /* cards sit close to their links, with clear space before the next menu item */
  .nav .nav__cols { grid-template-columns: 1fr; gap: .875rem; }   /* columns run on as one list (same spacing as the links) */
  .nav .nav__col-title { display: none; }   /* no "Explore by team" / "Start your career" labels on mobile */
  /* Feature cards come along on mobile: live counts and stories full width,
     regions as a two-up grid of image cards */
  .nav .nav__features { grid-template-columns: 1fr; width: 100%; gap: .75rem; }
  .nav .nav__stat,
  .nav .nav__feature,
  .nav .nav__features > .nav__stat,
  .nav .nav__features > .nav__feature { flex: none; width: 100%; aspect-ratio: 16 / 10; }
  .nav #menu-teams .nav__stat { margin-top: .5rem; }
  .nav .nav__regions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; width: 100%; }
  .nav .nav__regions .nav__region { aspect-ratio: 4 / 5; }
  .nav .nav__go { width: 44px; height: 44px; right: 1rem; bottom: 1rem; }
  .nav .nav__go svg { width: 18px; height: 18px; }
  .nav .nav__region .nav__go { left: 1rem; }
  .nav .nav__region .nav__feature-text { left: 1rem; right: 1rem; bottom: calc(1rem + 44px + 12px); }
  .nav .nav__stat { padding: 1.25rem; }
  .nav .nav__stat-label { padding-right: 60px; }
  .section-head .eyebrow { grid-column: 1 / -1; padding-top: 0; }
  .section-head__title { grid-column: 1 / -1; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }

  /* Mid widths: heading across the top, image and accordion side by side */
  .benefits__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
  .benefits__lead { grid-area: 1 / 1 / 2 / -1; }
  .benefits__media { grid-area: 2 / 1; }
  .acc { grid-area: 2 / 2; }
  .benefits__nav { grid-area: 3 / 1; }

  .people__body.grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .people__media { grid-column: 1; }
  .people__content { grid-column: 2; }

}

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

/* Menu search (mobile): filters every link in the nav as you type.
   Not the careers search. */
.nav-search,
.nav-search__results { display: none; }
@media (max-width: 1100px) {
  .nav-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: .5rem 0 .75rem;
  }
  .nav-search__icon { position: absolute; left: 1rem; color: var(--color-muted); pointer-events: none; }
  .nav-search__input {
    width: 100%;
    height: 48px;
    padding: 0 2.75rem 0 2.75rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--white);
    color: var(--color-heading);
    font: inherit;
    font-size: 1rem;   /* 16px stops iOS zooming in on focus */
    text-overflow: ellipsis;   /* long queries/placeholder trail off instead of hard-cropping */
    transition: border-color .25s var(--ease);
    -webkit-appearance: none;
    appearance: none;
  }
  .nav-search__input::placeholder { color: var(--color-muted); }
  .nav-search__input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
  .nav-search__input:hover { border-color: color-mix(in srgb, var(--navy) 35%, white); }
  .nav-search__input:focus { outline: none; border-color: var(--navy); }
  .nav-search__input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
  .nav-search__clear {
    position: absolute;
    right: 6px;
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border: 0; border-radius: 50%;
    background: none;
    color: var(--color-heading);
    cursor: pointer;
  }
  .nav-search__clear[hidden] { display: none; }
  .nav-search__clear:hover { background: var(--gray); }

  .nav-search__results:not([hidden]) { display: block; }
  .nav-search__results:not([hidden]) ~ .nav__list { display: none; }   /* results replace the menu while searching */
  .nav-search__list { list-style: none; margin: 0; padding: 0; }
  .nav-search__hit {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: .875rem 0;
    border-bottom: 1px solid var(--color-line);
    color: var(--color-heading);
    text-decoration: none;
  }
  .nav-search__hit-title { font-size: var(--font-size-h6); }
  .nav-search__hit mark { background: none; color: inherit; font-weight: var(--font-weight-medium); text-decoration: underline; text-decoration-color: var(--core-green); text-decoration-thickness: 2px; text-underline-offset: .2em; }
  .nav-search__hit-section { font-size: .875rem; color: var(--color-muted); }
  .nav-search__hit:hover .nav-search__hit-title { text-decoration: underline; text-underline-offset: .2em; }
  .nav-search__empty { padding: .875rem 0 .25rem; color: var(--color-muted); }
}

/* Mobile nav CTA morph: while the hero's Search Careers is on screen the nav
   shows a small search circle; once the hero CTA scrolls away the circle
   stretches into the full pill (script.js toggles .is-compact) */
.nav__cta-icon { display: none; }
@media (max-width: 860px) {
  .nav__cta {
    position: relative;
    overflow: hidden;
    max-width: 12rem;
    transition: background-color .25s var(--ease), max-width .5s var(--ease), padding .5s var(--ease);
  }
  .nav__cta .btn__label { transition: opacity .25s var(--ease) .2s; }
  .nav__cta-icon {
    display: block;
    position: absolute;
    left: 16px; top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .2s var(--ease);
  }
  .nav__cta.is-compact { max-width: 32px; padding: 0 16px; }
  .nav__cta.is-compact .btn__label { opacity: 0; transition-delay: 0s; transition-duration: .15s; }
  .nav__cta.is-compact .nav__cta-icon { opacity: 1; transition-delay: .25s; }
  .nav.is-mobile-open .nav__cta.is-compact { max-width: 12rem; padding: 0 12px; }
  .nav.is-mobile-open .nav__cta.is-compact .btn__label { opacity: 1; transition: opacity .25s var(--ease) .2s; }
  .nav.is-mobile-open .nav__cta.is-compact .nav__cta-icon { opacity: 0; transition-delay: 0s; }
  .nav__cta.no-anim,
  .nav__cta.no-anim * { transition: none !important; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .nav__cta, .nav__cta * { transition-duration: 0s !important; transition-delay: 0s !important; }
}

@media (max-width: 860px) {
  :root { --gutter: 24px; }   /* page margins on mobile */

  /* Hero: eyebrow, headline, sentence, button, then the video filling the
     rest; drop the small image. The copy cell's contents join the grid so
     the eyebrow can sit above the headline. */
  .hero__sticky {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
  }
  .hero__cell--copy,
  .hero__copy { display: contents; }
  .hero__eyebrow { grid-area: 1 / 1; margin: 2rem var(--gutter) 24px; }
  .hero__cell--title {
    grid-area: 2 / 1;
    border-top: 0;
    padding: 0 var(--gutter) 24px;
  }
  .hero__msg { grid-area: 3 / 1; margin-inline: var(--gutter); font-size: var(--font-size-h6); }
  .hero__cta { grid-area: 4 / 1; justify-self: start; margin: 24px var(--gutter) 2rem; }
  .hero__cell--lg { grid-area: 5 / 1; position: relative; overflow: hidden; }
  .hero__video { clip-path: none; top: 0; height: 100%; }
  .hero__cell--lg::after { display: none; }
  .hero__cell--sm { display: none; }
  .media-toggle.hero__toggle { grid-area: 5 / 1 / 6 / 2; }
  .hero__title { font-size: clamp(2.5rem, 11vw, 4rem); }

  /* Benefits: heading, image, then accordion */
  .benefits__stage { grid-template-columns: 1fr; }
  .benefits__lead, .benefits__media, .benefits__nav, .acc { grid-area: auto; }
  .benefits__media { max-height: none; aspect-ratio: auto; height: 360px; width: 100%; }

  .people__body.grid { grid-template-columns: 1fr; row-gap: 0; }
  .people__media,
  .people__content { grid-column: 1 / -1; }
  .people__media { max-height: none; aspect-ratio: auto; height: 360px; }
  /* "Our people" eyebrow moves above the portrait */
  .people__content { display: contents; }
  .people__content .quote__eyebrow { order: -1; margin-bottom: 1.5rem; }
  .upnext { display: none; }   /* no Up next thumbnails on mobile */
  .ring-btn { width: 60px; height: 60px; font-size: 14px; }   /* carousel buttons, smaller on mobile */
  /* Order: eyebrow, portrait, controls, then the quote */
  .people__content .quote__eyebrow { grid-row: 1; grid-column: 1; }
  .people__media { grid-row: 2; grid-column: 1; }
  .people__content .people__controls { grid-row: 3; grid-column: 1; margin-top: 16px; }
  .people__quotes { grid-row: 4; grid-column: 1; padding-block: 24px 0; }
  .quote__text { font-size: 1.625rem; }   /* 26px on mobile (was 32px) */
  /* Carousel controls (testimonials and benefits): Pause and "1/N" on the
     left, 40px arrow rings on the right. Next's ring fills as the
     slideshow timer, like desktop. */
  .people__arrows,
  .benefits__nav { width: 100%; gap: .5rem; align-items: center; }
  .people__arrows .ring-btn,
  .benefits__nav .ring-btn { width: 40px; height: 40px; }
  .people__arrows .ring-btn__label,
  .benefits__nav .ring-btn__label { display: none; }
  .people__arrows .ring-btn__icon,
  .benefits__nav .ring-btn__icon { display: block; }
  [data-prev] .ring-btn__icon,
  [data-acc-prev] .ring-btn__icon { transform: scaleX(-1); }
  .ring-btn--toggle .ring-btn__icon--play,
  .ring-btn--toggle.is-paused .ring-btn__icon--pause { display: none; }
  .ring-btn--toggle.is-paused .ring-btn__icon--play { display: block; }
  /* Thicker strokes so the rings still read at 40px */
  .people__arrows .ring-btn__track,
  .benefits__nav .ring-btn__track { stroke-width: 3; }
  .people__arrows .ring-btn__progress,
  .benefits__nav .ring-btn__progress { stroke-width: 5; }
  .people__arrows [data-people-toggle],
  .benefits__nav [data-acc-toggle] { order: -1; margin-right: .25rem; }   /* Pause, left of the counter */
  /* Benefits: image 360px tall like testimonials; controls 16px under it, 24px above the accordion */
  .benefits__stage { row-gap: 0; }
  .benefits__lead { margin-bottom: 2rem; }
  .benefits__nav { margin: 16px 0; }   /* 16px under the image and above the benefit text */
  .benefits__opener { display: none; }   /* no "Your growth matters." opener on mobile */
  /* Benefits on mobile: no stacked list. Only the current benefit shows;
     it auto-advances with Next's ring, and Prev / Next change it too. */
  .people__arrows .people-count,
  .benefits__nav .acc-count {   /* "1/6", just right of Pause */
    display: block;
    margin-right: auto;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--navy);
    font-variant-numeric: tabular-nums;
  }
  .acc__item:not(.is-open) { display: none; }
  .acc__item:first-child { border-top: 0; }
  .acc__item .acc__trigger { pointer-events: none; padding-top: 0; }
  .acc__item .acc__bar { display: none; }
  .acc__item.is-open .acc__panel { transition: none; }
  .acc__item.is-open { animation: acc-swap .5s var(--ease); }
  .acc__item.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity .26s var(--ease), transform .26s var(--ease); animation: none; }
  @keyframes acc-swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* Touch screens: a tap leaves :hover stuck on, which would turn the button
   solid navy and hide Next's progress ring, so skip the hover look there */
@media (hover: none) {
  .ring-btn:hover:not(:focus-visible) { color: var(--navy); }
  .ring-btn:hover:not(:focus-visible) .ring-btn__fill { transform: scale(0); }
  .ring-btn:hover:not(:focus-visible) .ring-btn__ring { opacity: 1; }
}

@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; row-gap: 1.5rem; }   /* tighter stack on phones */
  .stat { padding-left: 0; border-left: 0; padding-block: 0; }
}

@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; }
  .js .blur-in .bw { opacity: 1; filter: none; color: inherit; transform: none; }
  .nav__stat-dot { animation: none; }
  .ring-btn__progress { animation: none !important; }
}