/* =========================================================
   Alveus — Components & layout
   (loaded after style.css which holds tokens + base)
   ========================================================= */

/* ---------------------------------------------------------
   Page transition overlay (Barba parallax)
   --------------------------------------------------------- */
.transition {
  z-index: 100;
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: clip;
}
.transition__dark {
  opacity: 0;
  background-color: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  will-change: opacity;
}

/* ---------------------------------------------------------
   Dynamic background canvas (driven by scroll-bg.js)
   --------------------------------------------------------- */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--bg);
  /* No CSS transition here: scroll-bg.js sets the colour every frame,
     so the smoothness comes from scroll position, not a timed tween. */
  pointer-events: none;
}

/* Fixed video background layer; opacity is scroll-driven (set by scroll-bg.js)
   so the change from blue -> video -> white is part of the background system. */
.bg-video {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: var(--bg-video-opacity, 0);
  pointer-events: none;
  will-change: opacity;
  transform: translateZ(0); /* own GPU layer -> stable, jank-free opacity blend */
  backface-visibility: hidden;
  isolation: isolate; /* contain the multiply blend to this layer only */
}
.bg-video__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Soft grade over the footage (matches Figma): the video stays natural and
   bright (greens stay green) with only a gentle cool wash + edge vignette, plus
   a subtle local scrim on the left so the white heading stays legible. The blue
   at the very top of the section comes from the scroll background blend, not
   from a heavy overlay here. */
.bg-video__tint {
  position: absolute;
  inset: 0;
  background: #c4cee0; /* light cool wash: cools/desaturates without going blue */
  mix-blend-mode: multiply;
}
.bg-video__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(98deg, rgba(0, 17, 76, 0.34) 0%, rgba(0, 17, 76, 0) 52%),
    radial-gradient(135% 115% at 50% 40%, rgba(0, 0, 0, 0) 50%, rgba(2, 14, 52, 0.55) 100%);
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  /* Figma: logo at x=80 (5%), top ~60px; side gutter 80px. */
  padding: clamp(1.5rem, 3.75vw, 3.75rem) clamp(1.25rem, 5.55vw, 80px);
  color: var(--text-on-dark);
  transition: color 0.4s linear, transform 0.4s var(--ease-osmo);
}
/* When over light background the header text flips to navy (set by JS via body class). */
body.header-dark .site-header { color: var(--text-on-light); }

.site-logo { display: inline-flex; align-items: center; }
.site-logo svg { height: 50px; width: auto; }
.site-logo img { height: 50px; width: auto; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 30px; /* Figma */
}
.nav-link {
  position: relative;
  font-size: 18px;      /* Figma: Body 18/28 */
  line-height: 28px;
  font-weight: 400;
  padding-bottom: 8px;  /* 6px gap + 2px underline */
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transition: right 0.35s var(--ease-osmo);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { right: 0; }

/* =========================================================
   HAMBURGER + MOBILE MENU  (ported from the original Alveus site)
   ========================================================= */
.hamburger {
  z-index: 10;
  display: none;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}
@media only screen and (max-width: 1024px) {
  .main-nav { display: none; }
  .hamburger { display: inline-block; }
}

.hamburger:hover { opacity: 1; }
.hamburger.is-active:hover { opacity: 1; }
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after { background-color: #1F0778; }

/* Menu open: the full-screen purple overlay takes over, so the pill returns to
   its white default with the dark X bars, even on light (header-dark) sections
   where the resting pill is navy. Without this the dark X sits on a navy pill. */
.hamburger.is-active .hamburger-box,
body.header-dark .hamburger.is-active .hamburger-box { background: #ffffff; }
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after,
body.header-dark .hamburger.is-active .hamburger-inner,
body.header-dark .hamburger.is-active .hamburger-inner::before,
body.header-dark .hamburger.is-active .hamburger-inner::after { background-color: #1F0778; }

.hamburger.is-active .hamburger-box { position: relative; }
.hamburger.is-active .hamburger-box:before {
  position: relative;
  z-index: -1;
  background-color: rgba(31, 7, 120, 0.9);
  background-image: radial-gradient(circle, rgba(0, 17, 76, 0.4) 0%, rgba(54, 0, 153, 0.4) 100%);
  transform: scale(60);
}

.hamburger-box {
  width: 50px;
  height: 50px;
  border-radius: 100px;
  position: relative;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.5s ease-in-out;
}
.hamburger-box:before {
  transition: all 0.5s ease-in-out;
  content: "";
  width: 50px;
  height: 50px;
  border-radius: 100px;
  position: relative;
  background: white;
}

/* Adaptive pill: like the logo, the hamburger follows the section background.
   Default (dark section) = white pill with navy bars. On light sections the
   header goes dark (body.header-dark), so flip to a navy pill with white bars.
   The .box transition (0.5s) makes the colour swap glide as you scroll. */
body.header-dark .hamburger-box,
body.header-dark .hamburger-box:before {
  background: var(--c-navy-dark, #00114c);
}
body.header-dark .hamburger-inner,
body.header-dark .hamburger-inner::before,
body.header-dark .hamburger-inner::after {
  background-color: #ffffff;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 24px;
  height: 2px;
  background-color: #1F0778;
  border-radius: 4px;
  position: absolute;
  transition-property: transform, background-color;
  transition-duration: 0.15s, 0.5s;
  transition-timing-function: ease, ease-in-out;
}
.hamburger-inner::before,
.hamburger-inner::after { content: ""; display: block; }
.hamburger-inner::before { top: -6px; }
.hamburger-inner::after { bottom: -6px; }

/* Spin. NB: each bar keeps a background-color transition so the navy<->white
   colour swap (driven by body.header-dark on scroll) glides on all three bars
   together, matching the pill box. Without it the ::before/::after shorthands
   would drop background-color and the top/bottom bars would snap. */
.hamburger--spin .hamburger-inner {
  transition-property: transform, background-color;
  transition-duration: 0.22s, 0.5s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19), ease-in-out;
}
.hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in, background-color 0.5s ease-in-out; }
.hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0.5s ease-in-out; }
.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--spin.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
.hamburger--spin.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

/* Mobile menu panel */
.mobile-menu {
  width: 100vw;
  height: calc(100dvh - 100px);
  background: transparent;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 100px;
  padding-inline: 20px;
  box-sizing: border-box;
  display: flex;
  visibility: hidden;
  align-items: center;
  opacity: 0;
  transition: visibility 0s 0.3s, opacity 0.3s;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.mobile-menu .links-wrapper {
  justify-content: flex-start;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 30px;
  width: 100vw;
  height: calc(100dvh - 100px);
  box-sizing: border-box;
  padding: 120px 20px;
}
.mobile-menu a {
  margin-left: -10px;
  font-size: 28px;
  color: white;
  text-decoration: none;
  border-bottom: 4px solid transparent;
  border-radius: 2px;
  opacity: 0;
  transform: translateY(30px);
}
.mobile-menu a.active {
  border-radius: 0;
  color: white;
  border-bottom: 2px solid #00FFEC;
}
.mobile-menu.is-active { visibility: visible; opacity: 1; }

@keyframes alveusFadeInUp { to { opacity: 1; transform: translateY(0); } }

.mobile-menu.is-active .links-wrapper a {
  animation-name: alveusFadeInUp;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}
.mobile-menu.is-active .links-wrapper a:nth-child(1) { animation-delay: 0.2s; }
.mobile-menu.is-active .links-wrapper a:nth-child(2) { animation-delay: 0.4s; }
.mobile-menu.is-active .links-wrapper a:nth-child(3) { animation-delay: 0.6s; }
.mobile-menu.is-active .links-wrapper a:nth-child(4) { animation-delay: 0.8s; }
.mobile-menu.is-active .links-wrapper a:nth-child(5) { animation-delay: 1s; }
.mobile-menu.is-active .links-wrapper a:nth-child(6) { animation-delay: 1.2s; }
.mobile-menu.is-active .links-wrapper a:nth-child(7) { animation-delay: 1.4s; }
.mobile-menu.is-active .links-wrapper a:nth-child(8) { animation-delay: 1.6s; }
.mobile-menu .links-wrapper a { transition: opacity 0.2s, transform 0.2s; }

body.overflow-hidden { overflow: hidden; }

/* The CookieYes consent banner (z-index 9999999) otherwise sits on top of the
   fullscreen menu (z-index 9999) and swallows taps on the menu links. Hide it
   while the menu is open; it returns as soon as the menu closes. */
body.overflow-hidden .cky-consent-container { visibility: hidden !important; }

/* =========================================================
   HERO (Figma node 1:190) — video + blue gradient overlay
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  /* Figma hero frame is 1600x900 — fixed 900px tall, content bottom-aligned.
     min-height (not height) so it can still grow if the content is ever taller. */
  min-height: 900px;
  display: flex;
  align-items: flex-end;
  padding-block: 0; /* override .section padding */
}
.hero__media,
.hero__media video,
.hero__media img,
.hero__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero__fallback {
  background: radial-gradient(120% 120% at 70% 20%, #09007b 0%, #02225e 45%, #00114c 100%);
}
/* Blue gradient OVER the video (not baked into the video) */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,17,76,0.55) 0%, rgba(0,17,76,0) 28%),
    linear-gradient(0deg, rgba(0,17,76,0.85) 0%, rgba(0,17,76,0) 45%),
    linear-gradient(120deg, rgba(9,0,123,0.45) 0%, rgba(4,46,123,0.25) 60%, rgba(0,255,236,0.05) 100%);
}
.hero__inner {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: clamp(3rem, 13vh, 7.5rem); /* ~120px bottom margin (Figma) */
}
/* Figma: eyebrow / title / text stacked with a 30px gap, bottom-left */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}
.eyebrow--hero { opacity: 0.6; }
.hero__title {
  font-size: var(--fs-h1);
  line-height: 1;          /* Figma: 60/60 */
  max-width: 16ch;
  margin: 0;
}
.hero__title strong { font-weight: 700; }
.hero__text {
  font-size: var(--fs-body);   /* 18/28 */
  line-height: 1.55;
  max-width: 626px;            /* Figma */
  margin: 0;
}
.hero__buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; }

/* ---- Legal / editor pages (the_content prose) ------------- */
.entry-content {
  max-width: 780px;
  color: #33405c;
  font-size: 1rem;
  line-height: 1.7;
}
/* Legal / plain content pages: centre the text column and align the heading to it. */
.entry-page .section__head,
.entry-page .entry-content {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.entry-content > :first-child { margin-top: 0; }
.entry-content h2 {
  margin: clamp(2rem, 4vw, 3rem) 0 0.75rem;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.25;
  color: #02225e;
}
.entry-content h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #02225e;
}
.entry-content p { margin: 0 0 1.1em; }
.entry-content ul, .entry-content ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin: 0 0 0.5em; }
.entry-content a {
  color: var(--c-action, #3660eb);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.entry-content a:hover { text-decoration: none; }
.entry-content strong { font-weight: 700; color: #02225e; }
.entry-content hr { border: 0; border-top: 1px solid #d9e2f4; margin: 2.5rem 0; }

/* ---- 404 -------------------------------------------------- */
.error-404 {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(6rem, 18vh, 11rem);
}
/* Optional editor-set photo/video takes over from the decorative swirl. */
.error-404--has-media .error-404__swirl { display: none; }
.error-404__swirl {
  position: absolute;
  top: 50%;
  left: 62%;
  transform: translate(-50%, -50%);
  width: clamp(720px, 118vw, 1600px);
  aspect-ratio: 1500 / 1493;
  background: url('../img/careers/hero-swirl.webp') center / contain no-repeat;
  opacity: 0.4;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(115deg, transparent 4%, rgba(0, 0, 0, 0.5) 34%, #000 68%);
          mask-image: linear-gradient(115deg, transparent 4%, rgba(0, 0, 0, 0.5) 34%, #000 68%);
}
.error-404__inner { position: relative; z-index: 1; max-width: 640px; }
.error-404__code {
  display: flex;
  align-items: center;
  gap: 0.04em;
  margin: clamp(1rem, 3vw, 1.75rem) 0 clamp(1rem, 2.5vw, 1.5rem);
  font-size: clamp(6rem, 21vw, 15rem);
  line-height: 0.82;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #fff;
}
.error-404__drop { display: inline-flex; width: 0.52em; }
.error-404__drop svg { width: 100%; height: auto; display: block; }
.error-404__drop svg path { fill: var(--accent, #00ffec); }
.error-404__title {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.12;
  font-weight: 400;
  margin: 0 0 1rem;
}
.error-404__text {
  font-size: var(--fs-body);
  line-height: 1.55;
  opacity: 0.82;
  max-width: 46ch;
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
}
.error-404__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Centre-aligned hero variant (Settings > Content alignment = Centre). */
.hero--center .hero__content { align-items: center; text-align: center; margin-inline: auto; }
.hero--center .hero__title,
.hero--center .hero__text { max-width: none; margin-inline: auto; }
.hero--center .hero__buttons { justify-content: center; }

/* =========================================================
   GENERIC SECTION HELPERS
   ========================================================= */
.section__head { max-width: 60ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section__head .eyebrow { margin-bottom: 1.25rem; }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,17,76,0.08);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  backdrop-filter: blur(4px);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(3.5rem, 7vw, 120px) clamp(1.75rem, 3vw, 40px);
  color: #fff;
  /* Gradient from the vibrant blue (matching the investors block above) down to
     the dark navy — painted on the footer so it blends out of the section above. */
  background: linear-gradient(to bottom, var(--c-blue-vibrant, #09007b) 0%, var(--c-blue-vibrant, #09007b) 42%, var(--brand-blue-dark, #00114c) 100%);
}
/* Faint droplet watermark, top-left (Figma logo mark). */
.site-footer__watermark {
  position: absolute;
  /* Sits behind the headline + logo mark in the brand column (Figma). */
  top: clamp(10px, 2vw, 36px);
  left: clamp(-30px, 0vw, 30px);
  width: clamp(300px, 28vw, 440px);
  aspect-ratio: 492 / 641;
  background: url('../img/footer/watermark.svg') no-repeat center / contain;
  /* The droplet SVG is white with a built-in fade-to-transparent gradient; this
     single opacity governs how present it reads (Figma watermark ~0.12-0.15). */
  opacity: 0.14;
  pointer-events: none;
  z-index: -1;
  /* Gently floats up and down so the brand mark feels alive. */
  animation: alveus-watermark-float 11s ease-in-out infinite;
  will-change: transform;
}
@keyframes alveus-watermark-float {
  0%, 100% { transform: translateY(-14px); }
  50%      { transform: translateY(14px); }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer__watermark { animation: none; transform: none; }
}

.site-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) repeat(4, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 2vw, 30px);
  row-gap: clamp(2.5rem, 4vw, 64px);
}
.site-footer__brand { grid-column: 1; grid-row: 1 / span 2; }
.site-footer__headline {
  margin: 0 0 clamp(1.75rem, 3vw, 40px);
  max-width: 470px;
  font-size: clamp(1.6rem, 2.3vw, 35px);
  line-height: 1.43;            /* 50 / 35 */
  font-weight: 400;
}
.site-footer__headline strong { font-weight: 700; }
.site-footer__brand .site-logo svg,
.site-footer__brand .site-logo img { height: 54px; }
/* Footer logo is always white — it never reacts to the header dark/light state. */
.site-footer .site-logo { color: #fff; }

.footer-col__title {
  margin: 0 0 18px;
  font-size: 19px;
  line-height: 1.37;
  font-weight: 600;
  color: #fff;
}
.footer-col__body {
  font-style: normal;
  font-size: 14px;
  line-height: 22px;
  color: #c9cbd1;
}
.footer-col__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.footer-col__links a {
  display: inline-block;
  padding: 0;
  font-size: 14px;
  line-height: 22px;
  color: #c9cbd1;
}
.footer-general { list-style: none; margin: 0; padding: 0; }
.footer-general__row { display: grid; grid-template-columns: minmax(56px, auto) 1fr; gap: 6px 16px; line-height: 22px; }
.footer-general__label { font-size: 14px; color: #c9cbd1; }
.footer-general__value { font-size: 14px; color: #fff; }
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transition: background 0.3s ease;
}
.footer-social:hover { background: rgba(255, 255, 255, 0.28); }

.site-footer a { transition: color 0.3s ease, opacity 0.3s ease; }
.footer-col__links a:hover,
.footer-general__value:hover { color: var(--accent, #00ffec); }

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(2.5rem, 6vw, 90px);
  font-size: 14px;
  line-height: 20px;
  color: #c9cbd1;
}
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem clamp(1.25rem, 2.5vw, 40px); }
.site-footer__legal a { color: #c9cbd1; }
.site-footer__legal a:hover { color: var(--accent, #00ffec); }
.site-footer__credit { color: #fff; opacity: 0.3; }
.site-footer__credit a { color: inherit; }

@media (max-width: 1000px) {
  .site-footer__main { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; grid-row: auto; margin-bottom: clamp(1rem, 3vw, 24px); }
}
@media (max-width: 560px) {
  .site-footer__main { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   BUTTON-040 (provided component, themed to Alveus turquoise)
   ========================================================= */
:root {
  --button-040-color: #00114c;
  --button-040-color-background: #00ffec;
  --button-040-color-arrow: #00114c;
  --button-040-color-arrow-background: #00ffec;
  --button-040-color-focus: #fff;
  --button-040-height: 3.125em;
  --button-040-padding-x: 1.25em;
  --button-040-border-radius: 2.5em;
  --button-040-gap: 0.375em;
  --button-040-focus-inset: -0.125em;
  --button-040-ease-hover: cubic-bezier(0.625, 0.05, 0, 1);
  --button-040-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);
}

.button-040 {
  color: var(--button-040-color);
  -webkit-user-select: none;
  user-select: none;
  height: var(--button-040-height);
  grid-column-gap: var(--button-040-gap);
  grid-row-gap: var(--button-040-gap);
  background-color: #0000;
  outline-style: none;
  justify-content: center;
  align-items: center;
  padding: 0;
  line-height: 1;
  font-size: var(--fs-btn);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  position: relative;
  --button-040-translate-x: calc((var(--button-040-height) + var(--button-040-gap, 0em)) * -1);
  -webkit-tap-highlight-color: transparent;
}
.button-040::after {
  content: '';
  display: block;
  position: absolute;
  inset: var(--button-040-focus-inset);
  border-radius: var(--button-040-border-radius);
  transition: box-shadow 0.3s var(--button-040-ease-focus);
  pointer-events: none;
  z-index: 1;
}
.button-040:is(:focus-visible)::after { box-shadow: 0 0 0 0.125em var(--button-040-color-focus); }
.button-040__icon-wrap {
  aspect-ratio: 1;
  background-color: var(--button-040-color-arrow-background);
  border-radius: var(--button-040-border-radius);
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
  will-change: transform;
  transform-origin: left center;
  scale: 0;
  transition: scale 0.6s var(--button-040-ease-hover);
}
.button-040__icon-wrap.is--duplicate {
  z-index: 1;
  position: absolute;
  right: 0;
  transform-origin: right center;
  scale: 1;
}
.button-040__icon {
  width: 1em;
  height: 1em;
  color: var(--button-040-color-arrow);
  transition: rotate 0.6s var(--button-040-ease-hover);
  rotate: 45deg;
}
.button-040__icon-wrap.is--duplicate .button-040__icon { rotate: 0deg; }
.button-040__text-wrap {
  height: 100%;
  padding: 0 var(--button-040-padding-x);
  background-color: var(--button-040-color-background);
  border-radius: var(--button-040-border-radius);
  justify-content: center;
  align-items: center;
  display: flex;
  translate: var(--button-040-translate-x) 0 0;
  transition: translate 0.6s var(--button-040-ease-hover);
}

/* Ghost variant (transparent, light outline) for the secondary hero button */
.button-040[data-theme="ghost"] {
  --button-040-color: #fff;
  --button-040-color-background: rgba(255,255,255,0.08);
  --button-040-color-arrow: #00114c;
  --button-040-color-arrow-background: #fff;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button-040:is(:hover, :focus-visible) .button-040__icon-wrap,
  [data-hover]:is(:hover, :focus-visible) .button-040 .button-040__icon-wrap {
    scale: 1;
    transition: scale 0.735s 0.05s var(--button-040-ease-hover);
  }
  .button-040:is(:hover, :focus-visible) .button-040__icon-wrap.is--duplicate,
  [data-hover]:is(:hover, :focus-visible) .button-040 .button-040__icon-wrap.is--duplicate {
    scale: 0;
    transition: scale 0.735s 0.05s var(--button-040-ease-hover);
  }
  .button-040:is(:hover, :focus-visible) .button-040__icon-wrap.is--duplicate .button-040__icon,
  [data-hover]:is(:hover, :focus-visible) .button-040 .button-040__icon-wrap.is--duplicate .button-040__icon {
    rotate: 45deg;
  }
  .button-040:is(:hover, :focus-visible) .button-040__icon,
  [data-hover]:is(:hover, :focus-visible) .button-040 .button-040__icon {
    rotate: 0deg;
    transition: rotate 0.735s 0.05s var(--button-040-ease-hover);
  }
  .button-040:is(:hover, :focus-visible) .button-040__text-wrap,
  [data-hover]:is(:hover, :focus-visible) .button-040 .button-040__text-wrap {
    translate: 0 0 0;
    transition: translate 0.735s 0.05s var(--button-040-ease-hover);
  }
}





/* =========================================================
   BLOCK: Key insights (Figma 1:630) — 1/3-2/3 intro + stat row
   Section sits directly under the hero on a vibrant-blue field.
   ========================================================= */
.section--insights {
  /* Figma: section starts at hero bottom; intro 130px in, cards 100px below. */
  padding-block: clamp(4rem, 8.13vw, 130px) clamp(4rem, 9vw, 150px);
  color: #fff;
}

/* Intro: heading ~391px (1/3) + lead ~844px (2/3), 45px gutter, top-aligned. */
.insights-intro {
  display: grid;
  grid-template-columns: 391fr 844fr;
  gap: clamp(1.5rem, 2.8vw, 45px);
  align-items: start;
}
.insights-intro__title {
  margin: 0;
  font-size: clamp(1.75rem, 2.13vw, 34px);
  line-height: 1.294; /* 44/34 */
  font-weight: 400;
  max-width: 16ch;
}
.insights-intro__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.556; /* 28/18 */
  max-width: 845px;
}
/* Anti-flash: GSAP loads from a CDN, so on tall screens where the intro is
   already in view the copy would paint fully-formed before insights.js primes
   it -- then hide and re-reveal (a visible flash). Hold it hidden until JS takes
   over (armReveals sets inline opacity and reveals it). Reduced motion / no-JS
   skips the reveal, so it must stay visible. */
html.js .insights-intro__text { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.js .insights-intro__text { opacity: 1 !important; }
}

/* Stat cards: 4 x 246px with 110px gutters = 1314px container. */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 6.88vw, 110px);
  margin-top: clamp(3rem, 6.25vw, 100px);
}
.insight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.insight__value {
  font-size: clamp(1.75rem, 2.13vw, 34px);
  line-height: 1.294;
  font-weight: 400;
}
.insight__line {
  width: 40px;
  height: 1px;
  background: var(--action, #3660eb);
}
.insight__label {
  font-size: 18px;
  line-height: 1.556;
  opacity: 0.7;
}

@media (max-width: 900px) {
  .insights-intro { grid-template-columns: 1fr; }
  .insights-grid { grid-template-columns: repeat(2, 1fr); row-gap: clamp(2.5rem, 7vw, 3.5rem); }
}
@media (max-width: 520px) {
  .insights-grid { grid-template-columns: 1fr; }
}

/* Premium reveal — added by insights.js (.is-armed). Without JS / with reduced
   motion the cards simply stay visible. */
.section--insights.is-armed .insight {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.section--insights.is-armed .insight.is-visible {
  opacity: 1;
  transform: none;
}
.section--insights.is-armed .insight__line {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.85s 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}
.section--insights.is-armed .insight.is-visible .insight__line {
  transform: scaleX(1);
}
/* The value resolves to its real text once visible; keep it crisp mid-count. */
.section--insights .insight__value .num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .section--insights.is-armed .insight,
  .section--insights.is-armed .insight__line { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   BLOCK: Science (Figma 1:182/1:515/1:518) — video background,
   white intro + three white cards. Video itself = .bg-video layer.
   ========================================================= */
.section--science {
  padding-block: clamp(5rem, 11.25vw, 180px) clamp(5rem, 10vw, 160px);
  color: #fff;
}
.section--science .eyebrow--science {
  opacity: 0.6;
  margin-bottom: clamp(1.25rem, 1.9vw, 30px);
}
.science__head { max-width: 760px; }
.science__title {
  margin: 0;
  font-size: clamp(2rem, 2.6vw, 42px);
  line-height: 1.19; /* 50/42 */
  font-weight: 400;
}

.science__cards {
  margin-top: clamp(2.5rem, 4.4vw, 70px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 1.9vw, 30px);
  align-items: stretch;
}
.science-card {
  background: #fff;
  border-radius: 8px;
  padding: clamp(1.75rem, 2vw, 32px) clamp(1.75rem, 2.5vw, 40px) clamp(2rem, 2.5vw, 40px);
  min-height: 346px;
  color: var(--brand-blue-raj, #042e7b);
}
.science-card__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 1.75vw, 28px);
  line-height: 1.43; /* 40/28 */
  font-weight: 400;
}
.science-card__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.556; /* 28/18 */
}

/* Staggered, reversible reveal (added by insights.js via .js-reveal).
   Enter: cards rise up 1-by-1 (left -> right).
   Exit (scroll up): cards fade out downward 1-by-1 in right -> left order
   (rightmost first). Asymmetric, so it uses keyframes rather than a single
   transition. Without JS / reduced motion the cards are simply visible. */
.science__cards.js-reveal .science-card {
  opacity: 0; /* hidden until first revealed */
  will-change: opacity, transform;
}
.science__cards.js-reveal .science-card.is-in {
  /* Slower, softer entrance for a more premium feel. */
  animation: sciCardIn 1.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.science__cards.js-reveal .science-card.is-out {
  animation: sciCardOut 0.6s cubic-bezier(0.7, 0, 0.84, 0) both;
}
/* enter stagger: left -> right (wider spacing so they arrive 1-by-1) */
.science__cards.js-reveal .science-card.is-in:nth-child(1) { animation-delay: 0s; }
.science__cards.js-reveal .science-card.is-in:nth-child(2) { animation-delay: 0.18s; }
.science__cards.js-reveal .science-card.is-in:nth-child(3) { animation-delay: 0.36s; }
/* exit stagger: right -> left (rightmost leaves first) */
.science__cards.js-reveal .science-card.is-out:nth-child(3) { animation-delay: 0s; }
.science__cards.js-reveal .science-card.is-out:nth-child(2) { animation-delay: 0.08s; }
.science__cards.js-reveal .science-card.is-out:nth-child(1) { animation-delay: 0.16s; }

@keyframes sciCardIn {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sciCardOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(60px); }
}

@media (prefers-reduced-motion: reduce) {
  .science__cards.js-reveal .science-card { opacity: 1; animation: none; transform: none; }
}

@media (max-width: 900px) {
  .science__cards { grid-template-columns: 1fr; }
  .science-card { min-height: 0; }
}

/* =========================================================
   BLOCK: Our treatments — patient-journey infographic
   Desktop: positioned over an aspect-ratio stage (cqw text scaling).
   Figures = silhouette mask (assets/img/figure.svg) + colour gradient.
   ========================================================= */
.section--treatments { padding-block: clamp(4rem, 8vw, 130px); color: var(--brand-blue, #00114c); }
.tx-heading {
  margin: 0 auto clamp(2.5rem, 5vw, 80px);
  max-width: 22ch;
  text-align: center;
  font-size: clamp(1.75rem, 2.6vw, 42px);
  line-height: 1.2;
  font-weight: 400;
  color: var(--brand-blue, #00114c);
}

/* Inlined diagram SVG: scales fluidly with the container. */
.tx-diagram { width: 100%; }
.tx-svg { display: block; width: 100%; height: auto; }
.tx-mobile { display: none; }

/* On phones the wide landscape diagram can't stay legible, so we hide it and
   show a purpose-built vertical retelling of the same journey (.tx-mobile).
   The desktop SVG stays in the DOM (display:none) because the mobile figures/
   icons reuse its exact artwork via <use href="#tx-art"> + a cropped viewBox. */
@media (max-width: 760px) {
  /* Visually hide the desktop diagram but keep it RENDERED (not display:none):
     the mobile crops <use> its gradient-filled figures, and gradient paint
     servers only resolve from a source that is still in the render tree. */
  .tx-svg {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
  }
  .tx-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 360px;
    margin-inline: auto;
    text-align: center;
    color: #042e7b;
  }

  /* Phase headings */
  .txm-phase { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 14px; }
  .txm-phase:first-child { margin-top: 0; }
  .txm-phase__num {
    font-size: 11px; font-weight: 700; line-height: 1;
    letter-spacing: 1.6px; text-transform: uppercase; color: #8aa0c9;
  }
  .txm-phase__name { font-size: 22px; line-height: 1.2; font-weight: 400; color: #042e7b; }

  /* Figure discs (cropped from the master art). Explicit width AND height
     (not aspect-ratio + height:auto) so the global `svg { max-width:100% }`
     can't collapse them to zero inside the shrink-to-fit flex column. */
  .txm-fig { display: block; width: 116px; }
  /* Clip each crop to the disc circle: removes stray fragments of neighbouring
     arrows/labels that fall in the rectangular window, and matches the round
     disc motif. Nudged up slightly so the figure's feet stay inside. */
  .txm-fig svg {
    display: block; width: 116px; height: 122px; max-width: none;
    overflow: hidden;
    clip-path: circle(50% at 50% 47%);
  }
  .txm-step { display: flex; flex-direction: column; align-items: center; }
  .txm-step--year .txm-step__body { margin-top: 6px; }
  .txm-step__year {
    display: block; font-size: 12px; font-weight: 700; line-height: 1;
    letter-spacing: 1.4px; text-transform: uppercase; color: #042e7b;
  }
  .txm-step__lead { margin: 6px auto 0; max-width: 240px; font-size: 14px; line-height: 1.5; color: #47566f; }

  /* Directional connectors between steps: a labelled chip + a down chevron,
     tinted per transition (navy = weight loss, red = regain, teal = stability). */
  .txm-flow { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-block: 12px; }
  .txm-flow__label {
    padding: 6px 16px; border: 1px solid currentColor; border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 1;
    letter-spacing: 1px; text-transform: uppercase; color: currentColor;
  }
  .txm-flow::after {
    content: ""; width: 9px; height: 9px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }
  .txm-flow--loss { color: #042e7b; }
  .txm-flow--risk { color: #d50306; }
  .txm-flow--stable { color: #04b3a6; } /* deepened from #00ffec so it reads on white */

  /* Supporting notes: icon chip + title + description */
  .txm-note {
    display: flex; align-items: flex-start; gap: 12px;
    max-width: 320px; margin-top: 4px; text-align: left;
  }
  .txm-ico { flex-shrink: 0; }
  .txm-ico svg { display: block; width: 34px; height: 34px; max-width: none; }
  .txm-note__title { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; color: #042e7b; }
  .txm-note__text { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: #47566f; }

  /* Each Phase 2 outcome as its own branch */
  .txm-branch { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; }
}

.tx-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1314 / 850;
  container-type: inline-size;
}
.tx-graphics { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tx-arrow-label {
  fill: #fff; font-family: inherit; font-size: 15px; font-weight: 400;
  letter-spacing: 0.02em; text-anchor: middle; opacity: 0.92;
}
.tx-arrow-label--dark { fill: #0c7a6e; }

/* ---- Figures in tinted circles ---- */
.tx-fig { position: absolute; transform: translate(-50%, -50%); width: 13.7%; aspect-ratio: 1; }
.tx-fig--year { width: 17.2%; }
.tx-fig--start    { left: 6.85%;  top: 28.7%; }
.tx-fig--year     { left: 50%;    top: 76.4%; }
.tx-fig--regain   { left: 93.15%; top: 28.7%; }
.tx-fig--maintain { left: 93.15%; top: 75.4%; }
.tx-circle { position: absolute; inset: 0; border-radius: 50%; }
.tx-circle--red  { background: #fae8e7; }
.tx-circle--blue { background: #e8f0ff; }
.tx-circle--teal { background: #d6f7f2; }
.tx-figure {
  position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%);
  height: 82%; aspect-ratio: 60 / 159;
  -webkit-mask: var(--fig) center / contain no-repeat;
          mask: var(--fig) center / contain no-repeat;
}
.tx-figure--red  { background: linear-gradient(180deg, #d50306 0%, #d50306 48%, #6f0203 100%); }
.tx-figure--blue { background: linear-gradient(180deg, #042e7b 0%, #042e7b 48%, #a9bddf 100%); }

/* ---- Phase labels (sit on the divider line) ---- */
.tx-phase {
  position: absolute; transform: translate(-50%, -55%);
  top: 9.3%; display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; background: #fff; padding: 0 18px;
}
.tx-phase--1 { left: 24%; }
.tx-phase--2 { left: 76.1%; }
.tx-phase__num {
  font-size: 0.84cqw; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: #9aa6c8;
}
.tx-phase__name { font-size: 1.67cqw; color: var(--brand-blue, #00114c); }

/* ---- Info labels (icon + title + text) ---- */
.tx-info {
  position: absolute; width: 16%;
  display: grid; grid-template-columns: 2.9cqw 1fr; column-gap: 0.9cqw; row-gap: 0.4cqw;
  color: var(--brand-blue-raj, #042e7b);
}
.tx-info__icon { grid-row: 1; color: var(--brand-blue, #00114c); }
.tx-info__icon svg { width: 100%; height: auto; display: block; }
.tx-info__icon--red  { color: #d50306; }
.tx-info__icon--teal { color: #0c9; }
.tx-info__title { align-self: center; font-size: 1.37cqw; font-weight: 700; line-height: 1.2; }
.tx-info__text  { grid-column: 2; font-size: 1.07cqw; line-height: 1.4; opacity: 0.85; }
.tx-info--caloric  { left: 5.3%;  top: 55%; }
.tx-info--energy   { left: 54.4%; top: 22.9%; }
.tx-info--maintain { left: 63.2%; top: 88.9%; }

/* ---- Legend (bottom-left) ---- */
.tx-legend { position: absolute; left: 0; top: 70%; width: 18%; }
.tx-legend__figs { display: flex; gap: 0.5cqw; height: 9cqw; }
.tx-legend__figs .tx-figure { position: static; transform: none; height: 100%; }
.tx-legend__row { display: grid; grid-template-columns: 2.9cqw 1fr; column-gap: 0.9cqw; align-items: center; margin-top: 1cqw; }
.tx-legend__dot { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #e8f0ff; }
.tx-legend__text { font-size: 1.07cqw; line-height: 1.4; color: var(--brand-blue-raj, #042e7b); opacity: 0.85; }

/* ---- Year marker ---- */
.tx-year {
  position: absolute; left: 50%; top: 97%; transform: translateX(-50%);
  font-size: 0.95cqw; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-blue, #00114c);
}

/* =========================================================
   BLOCK: Development pipeline (Figma 1:554) — animated table.
   Left intro (lead + button) + right table whose bars fill across
   the phase columns on scroll-in (insights.js -> armPipeline).
   ========================================================= */
.section--pipeline {
  padding-block: clamp(4.5rem, 9vw, 145px) clamp(6rem, 13vw, 200px);
  color: #fff;
  --pl-divider: #2a4a8f;          /* slightly lighter navy, visible on #00114c */
  --pl-fill: linear-gradient(90deg, #09007b 0%, #00ffec 100%);
}
.pl-head { max-width: 1281px; margin-bottom: clamp(2.5rem, 5vw, 70px); }
.pl-head .eyebrow--pipeline { opacity: 0.6; margin-bottom: clamp(1.25rem, 1.9vw, 30px); }
.pl-title {
  margin: 0;
  font-size: clamp(2rem, 2.6vw, 42px);
  line-height: 1.19;             /* 50/42 */
  font-weight: 400;
  max-width: 24ch;
}

/* Two-column body: intro (left) + table (right) */
.pl-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.pl-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  max-width: 417px;
}
.pl-lead { margin: 0; font-size: var(--fs-body); line-height: 1.556; opacity: 0.9; }

/* CTA: match Figma "Button Large" — 50px pill, 12px label, pill flush with
   the arrow circle (no gap), slightly wider padding. */
.button-040--large,
.button-040--pipeline {
  --button-040-height: 4.1667em;   /* 50px @ 12px (Figma "Button Large") */
  --button-040-gap: 0.166em;       /* ~2px: pill nearly flush with the arrow circle */
  --button-040-padding-x: 1.8em;   /* ~22px */
}

/* --- Table --- */
.pl-table { width: 100%; }
.pl-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.45fr) 1fr;   /* Figma ~260 : 605 */
  align-items: center;
  column-gap: clamp(1rem, 2vw, 2rem);
}
.pl-row + .pl-row { margin-top: clamp(1rem, 1.7vw, 22px); }

/* Header */
.pl-row--head { margin-bottom: clamp(1.25rem, 1.9vw, 25px); }
.pl-asset--head strong { font-size: 18px; }
.pl-cols {
  display: grid;
  grid-template-columns: repeat(var(--phases, 3), 1fr);
}
.pl-cols span {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

/* Program (left) cell */
.pl-asset { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-asset strong { font-size: 18px; font-weight: 700; line-height: 1.4; }
.pl-asset__desc { font-size: 14px; line-height: 1.43; opacity: 0.6; }

/* Bar track */
.pl-track {
  position: relative;
  height: 40px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.pl-track__dividers { position: absolute; inset: 0; z-index: 0; }
.pl-track__dividers i {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--pl-divider);
}
.pl-track__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  z-index: 1;
  width: 0;                       /* animated to var(--p) on .is-in */
  border-radius: 20px;
  background: var(--pl-fill);
  transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--row, 0) * 0.12s);
}
.pl-table.is-in .pl-track__fill { width: calc(var(--p, 0) * 1%); }

@media (prefers-reduced-motion: reduce) {
  .pl-track__fill { transition: none; }
}

/* --- Responsive --- */
@media (max-width: 1000px) {
  .pl-body { grid-template-columns: 1fr; }
  .pl-intro { max-width: none; }
}
@media (max-width: 600px) {
  .pl-row { grid-template-columns: 1fr; row-gap: 0.6rem; }
  .pl-row--head { display: none; }   /* phase headers don't fit; bars carry the scale */
  .pl-asset { gap: 1px; }
  .pl-track { height: 34px; border-radius: 17px; }
  .pl-track__fill { border-radius: 17px; }
}

/* =========================================================
   BLOCK: Team (Figma 1:531) — leadership cards.
   Intro + featured card on the blue background; the member-card row sits on a
   full-bleed white band (soft fade from the blue) so the dark-blue names read,
   matching the design's colour transition into the next (white) section. Each
   photo is two layers (backdrop zooms, cut-out person rises) and the bottom
   border fills with a gradient on hover — all CSS.
   ========================================================= */
.section--team {
  padding-block: clamp(4.5rem, 9vw, 145px) 0;
  color: #fff;
  overflow-x: clip;            /* contain the full-bleed white band */
}

/* Top: intro (left) + featured card (right) */
.team__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 487px);
  gap: clamp(2rem, 5vw, 80px);
  align-items: start;
}
.team__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.5rem, 2.6vw, 2.4rem);
  max-width: 536px;
}
.eyebrow--team { opacity: 0.5; }
.team__title {
  margin: 0;
  font-size: clamp(2rem, 2.6vw, 42px);
  line-height: 1.19;
  font-weight: 400;
  max-width: 16ch;
}
.team__lead { margin: 0; font-size: var(--fs-body); line-height: 1.556; }
.team__intro .button-040 { margin-top: clamp(0.5rem, 1vw, 1rem); }

/* --- Two-layer photo (shared by featured + member cards) --- */
.tc-photo { position: relative; border-radius: 8px; overflow: hidden; isolation: isolate; }
.tc-photo__bg,
.tc-photo__person {
  position: absolute; inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  will-change: transform;
  transition: transform 0.7s cubic-bezier(0.65, 0.05, 0, 1);
  backface-visibility: hidden;
}
.tc-photo__bg { background-color: #c9d4e8; }      /* placeholder until image set */
.tc-photo__person { background-position: center top; z-index: 2; }
/* Turquoise overlay that washes the backdrop layer on hover (sits behind the
   cut-out person, so only the background gets tinted) — Figma Card/People. */
.tc-photo__tint {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(0, 255, 236, 0.2);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.65, 0.05, 0, 1);
  pointer-events: none;
}
/* Hover: backdrop zooms in, person lifts up, turquoise wash fades in. */
.team-card:hover .tc-photo__bg,
.team-feature:hover .tc-photo__bg,
.people-card:hover .tc-photo__bg { transform: scale(1.08); }
.team-card:hover .tc-photo__person,
.team-feature:hover .tc-photo__person,
.people-card:hover .tc-photo__person { transform: translateY(-3.5%) scale(1.05); }
.team-card:hover .tc-photo__tint,
.team-feature:hover .tc-photo__tint,
.people-card:hover .tc-photo__tint,
.people-card:focus-visible .tc-photo__tint { opacity: 1; }

/* --- Featured card --- */
.team-feature { width: 100%; }
.team-feature .tc-photo { aspect-ratio: 487 / 408; }
.team-feature__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 17, 76, 0.6) 0%, rgba(0, 17, 76, 0) 42%);
}
.team-feature__info {
  position: absolute; left: clamp(20px, 2vw, 32px); bottom: clamp(18px, 2vw, 28px);
  z-index: 3; display: flex; flex-direction: column; gap: 2px; color: #fff;
}
.team-feature__name { font-size: clamp(1.25rem, 1.5vw, 22px); line-height: 1.18; }
.team-feature__role { font-size: 14px; line-height: 1.57; opacity: 0.85; }

/* --- Member grid: full-bleed white band with a soft fade from the blue --- */
.team__grid {
  position: relative;
  z-index: 1;
  margin-top: clamp(3rem, 6vw, 96px);
  /* No baked background: the scroll canvas resolves to white here (data-bg), so
     this just lays out the cards inside the container. */
  padding-block: clamp(3.5rem, 6vw, 96px) clamp(4rem, 8vw, 130px);
  --team-gap: clamp(1.25rem, 2vw, 30px);
  /* Right-aligned row: cards sit on a 4-up width and pack to the right edge,
     so three members hug the right under the featured card (matching Figma). */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(1.5rem, 2vw, 30px) var(--team-gap);
}

/* --- Member card --- */
.team-card {
  display: flex; flex-direction: column; gap: 20px;
  flex: 0 0 calc((100% - 3 * var(--team-gap)) / 4);
}
.team-card .tc-photo { aspect-ratio: 1 / 1; }
.team-card__info {
  display: flex; flex-direction: column; gap: 5px;
  padding-inline: 10px; color: var(--brand-blue-raj, #042e7b);
}
.team-card__name { font-size: 22px; line-height: 1.18; transition: color 0.4s ease; }
.team-card:hover .team-card__name { color: var(--c-action, #3660eb); }
.team-card__role { font-size: 14px; line-height: 1.57; opacity: 0.6; }
.team-card__border {
  position: relative; display: block; width: 100%; height: 2px;
  background: rgba(4, 46, 123, 0.3); overflow: hidden;
}
.team-card__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, #479ff3 0%, #00ffec 100%);
  transition: width 0.6s cubic-bezier(0.65, 0.05, 0, 1);
}
.team-card:hover .team-card__fill { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .tc-photo__bg, .tc-photo__person, .team-card__fill { transition: none; }
}

/* --- Responsive --- */
@media (max-width: 1000px) {
  .team__top { grid-template-columns: 1fr; }
  .team-feature { max-width: 487px; }
  .team__grid { justify-content: flex-start; }
  .team-card { flex: 0 0 calc((100% - var(--team-gap)) / 2); }
}
@media (max-width: 560px) {
  .team-feature { max-width: none; }
  .team-card { flex: 0 0 100%; }
}

/* =========================================================
   FEATURE STATEMENT (Figma 1:615 / 1:616)
   Big molecule render bleeding off the left edge, statement
   set on the right, vertically centred. Background is white
   (the scroll canvas has already resolved back to white).
   ========================================================= */
.section--feature {
  position: relative;
  overflow: clip;                 /* clip the molecule's left bleed */
  padding-block: clamp(2.5rem, 6vw, 96px);
}
/* Two zones: the molecule lives in the left column and the statement in the
   right (max 754px, as in Figma). The molecule is anchored to the RIGHT edge of
   its column and sized taller than wide, so it runs off the left of the page
   while its right edge never crosses into the text — no overlap at any width. */
.feature__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 754px);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  min-height: clamp(460px, 52vw, 800px);
}
.feature__media { position: relative; }   /* zero-height cell, centred in the row */
.feature__img {
  position: absolute;
  top: 50%;
  right: 0;                       /* molecule's right edge = end of the left column */
  /* --py is the scroll-linked parallax offset set by insights.js (armParallax). */
  transform: translate3d(0, calc(-50% + var(--py, 0px)), 0);
  height: clamp(420px, 50vw, 760px);
  width: auto;
  max-width: none;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.feature__statement {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--brand-blue-raj, #042e7b);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.625rem);   /* 42px at the 1600 frame */
  line-height: 1.19;                            /* 50 / 42 */
  letter-spacing: 0;
}

@media (max-width: 860px) {
  .section--feature { padding-block: clamp(2rem, 7vw, 64px); }
  .feature__inner { display: block; min-height: 0; }
  .feature__media {
    display: flex;
    justify-content: flex-start;
    /* Pull out of the container gutter so the molecule sits flush against the
       left edge of the viewport (mirrors the desktop left-bleed anchoring). */
    margin-left: calc(-1 * var(--gutter));
    margin-bottom: clamp(16px, 4vw, 36px);
  }
  .feature__img {
    position: static;
    transform: none;
    right: auto;
    height: auto;
    width: min(70vw, 360px);
  }
  .feature__statement {
    width: 100%;
    font-size: clamp(1.4rem, 5.4vw, 2rem);
  }
}

/* =========================================================
   USP CARDS (Figma 1:698) — "What separates Alveus from the rest"
   Four image cards on white. Reveal one by one on scroll-in
   (left -> right); fade out in reverse (right -> left) on the
   way out. The per-card stagger direction is set by insights.js
   (armUsp) via inline transition-delay; CSS owns the look.
   ========================================================= */
.section--usp {
  padding-block: clamp(3rem, 7vw, 130px) clamp(4rem, 9vw, 150px);
  color: var(--brand-blue-raj, #042e7b);
}
.usp__heading {
  margin: 0 0 clamp(2.5rem, 5vw, 80px);
  max-width: 18ch;
  font-size: var(--fs-h2);
  line-height: 1.19;
  font-weight: 400;
  color: var(--brand-blue-raj, #042e7b);
}
.usp__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2vw, 30px);
}
.usp-card { display: flex; flex-direction: column; }
.usp-card__media {
  position: relative;
  aspect-ratio: 306 / 393;
  border-radius: 8px;
  overflow: hidden;
  background: #cfe0f2;            /* placeholder tint while the image loads */
}
.usp-card__img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.75s cubic-bezier(0.65, 0.05, 0, 1);
  will-change: transform;
}
.usp-card:hover .usp-card__img,
.usp-card:focus-within .usp-card__img { transform: scale(1.06); }
/* 4px gradient bar pinned to the bottom of the image (Figma "Active" = hover
   state): hidden by default, fills left -> right on hover. clip-path reveals the
   full-width gradient progressively so the colours never squash. */
.usp-card__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--numab-blue, #479ff3) 0%, var(--ice, #00ffec) 100%);
  border-radius: 0 0 4px 4px;
  clip-path: inset(0 100% 0 0);   /* fully clipped from the right => 0 width, anchored left */
  transition: clip-path 0.55s var(--ease-osmo, cubic-bezier(0.65, 0.05, 0, 1));
}
.usp-card:hover .usp-card__bar,
.usp-card:focus-within .usp-card__bar { clip-path: inset(0 0 0 0); }
.usp-card__body {
  display: flex; flex-direction: column; gap: 20px;
  margin-top: clamp(1.25rem, 1.8vw, 30px);
}
.usp-card__title {
  margin: 0;
  font-size: 28px; line-height: 1.43;   /* 40 / 28 */
  font-weight: 400;
  color: var(--brand-blue-raj, #042e7b);
  transition: transform 0.55s cubic-bezier(0.65, 0.05, 0, 1);
}
.usp-card:hover .usp-card__title,
.usp-card:focus-within .usp-card__title { transform: translateX(8px); }
.usp-card__text {
  margin: 0;
  font-size: 18px; line-height: 1.56;    /* 28 / 18 */
  color: var(--brand-blue-raj, #042e7b);
}

/* --- Reveal: hidden start, rise + fade; stagger via inline --d delay --- */
.usp__grid.js-reveal .usp-card {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 0.7s var(--ease-osmo, cubic-bezier(0.65, 0.05, 0, 1)),
              transform 0.7s var(--ease-osmo, cubic-bezier(0.65, 0.05, 0, 1));
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.usp__grid.js-reveal .usp-card.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .usp__grid.js-reveal .usp-card { transition: none; opacity: 1; transform: none; }
  .usp-card__bar,
  .usp-card__img,
  .usp-card__title { transition: none; }
  .usp-card:hover .usp-card__img,
  .usp-card:hover .usp-card__title { transform: none; }
}

/* --- Responsive --- */
@media (max-width: 1000px) {
  .usp__grid { grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 36px) clamp(1.25rem, 2vw, 30px); }
}
@media (max-width: 560px) {
  .usp__grid { grid-template-columns: 1fr; max-width: 420px; }
  .usp-card__title { font-size: 24px; }
}

/* =========================================================
   LATEST NEWS (Figma 1:645 / 1:648-650) + NOTICE PILL (1:691)
   Heading + "See all" link, then real WP posts as text cards.
   ========================================================= */
.section--news {
  padding-block: clamp(3rem, 7vw, 130px) clamp(3.5rem, 8vw, 140px);
  color: var(--brand-blue-raj, #042e7b);
}
.news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 85px);
}
.news__head-text { display: flex; flex-direction: column; align-items: flex-start; }
.news__head-text .eyebrow { margin-bottom: clamp(20px, 2.2vw, 30px); }   /* Figma: eyebrow -> title = 30px */
.news__heading {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.05;
  font-weight: 400;
  color: var(--brand-blue-raj, #042e7b);
}
.news__seeall {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-blue-raj, #042e7b);
  white-space: nowrap;
}
.news__seeall svg { color: var(--ice, #00ffec); transition: transform 0.4s var(--ease-osmo, cubic-bezier(0.65, 0.05, 0, 1)); }
.news__seeall:hover svg { transform: translateX(5px); }

.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 31px;
  min-height: 310px;
  padding: 40px 30px 41px;
  border-radius: 8px;
  background: var(--blue-10, #e8f0ff);
  color: var(--brand-blue-raj, #042e7b);
  text-decoration: none;
  transition: transform 0.5s var(--ease-osmo, cubic-bezier(0.65, 0.05, 0, 1)),
              box-shadow 0.5s var(--ease-osmo, cubic-bezier(0.65, 0.05, 0, 1));
}
/* Bottom accent bar (blue -> turquoise) that wipes in on hover (Figma 20:648). */
.news-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, var(--c-action, #3660eb) 0%, var(--accent, #00ffec) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease-osmo, cubic-bezier(0.65, 0.05, 0, 1));
}
.news-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 40px 0 rgba(2, 34, 94, 0.3);
}
.news-card:hover::after { transform: scaleX(1); }
.news-card__meta { display: flex; align-items: center; gap: 20px; }
.news-card__tag {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 22px;
  border-radius: 505px;
  background: var(--brand-blue-raj, #042e7b);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.4s ease, color 0.4s ease;
}
/* Hover: the category tag flips to turquoise with navy text. */
.news-card:hover .news-card__tag {
  background: var(--accent, #00ffec);
  color: var(--brand-blue-raj, #042e7b);
}
.news-card__date { font-size: 14px; line-height: 1.57; color: var(--brand-blue-raj, #042e7b); }
.news-card__title {
  margin: 0;
  font-size: 18px;
  line-height: 1.56;            /* 28 / 18 */
  font-weight: 400;
  color: var(--brand-blue-raj, #042e7b);
  /* keep cards uniform: clamp long headlines */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.news__empty { color: var(--brand-blue-raj, #042e7b); opacity: 0.7; }

/* --- Notice pill (managed in Theme Settings; reusable) --- */
.notice-pill {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 80px;
  margin-top: clamp(2.5rem, 5vw, 70px);
  padding: 14px clamp(24px, 4.5vw, 60px);
  border-radius: 40px;
  background: var(--blue-10, #e8f0ff);
  color: var(--brand-blue-raj, #042e7b);
}
.notice-pill__label { font-size: 18px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.notice-pill__arrow { display: inline-flex; flex-shrink: 0; color: var(--brand-blue-raj, #042e7b); }
.notice-pill__text { margin: 0; font-size: 18px; line-height: 1.56; }
.notice-pill__link { color: var(--action-raj, #3660eb); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .news-card, .news__seeall svg { transition: none; }
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .news__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .news__head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .news__grid { grid-template-columns: 1fr; }
  .news-card { min-height: 0; }
  .notice-pill { flex-wrap: wrap; gap: 12px 18px; border-radius: 24px; padding: 22px clamp(20px, 5vw, 32px); }
  .notice-pill__arrow { display: none; }
}

/* =========================================================
   INVESTORS / PARTNERS (Figma 1:238) — white logo wall on blue
   ========================================================= */
.section--investors {
  padding-block: clamp(3.5rem, 8vw, 150px);
  color: #fff;
}
.investors__head { display: flex; flex-direction: column; align-items: flex-start; }
.investors__head .eyebrow { margin-bottom: clamp(20px, 2.2vw, 30px); opacity: 0.6; }
.investors__title {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.19;
  font-weight: 400;
  color: #fff;
}
.investors__subhead {
  margin: clamp(18px, 2.2vw, 30px) 0 0;
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);   /* 28px */
  line-height: 1.43;
  color: #fff;
}
.investors__grid {
  list-style: none;
  margin: clamp(2.75rem, 6vw, 96px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2.5rem, 6vw, 88px) clamp(1.5rem, 3vw, 40px);
  align-items: center;
}
.investors__item { display: flex; align-items: center; min-height: 84px; }
.investors__link { display: inline-flex; align-items: center; transition: opacity 0.3s ease; }
.investors__link:hover { opacity: 0.7; }
.investors__logo {
  display: block;
  width: auto;
  height: auto;
  max-height: clamp(40px, 4.4vw, 64px);
  max-width: min(100%, 180px);
  object-fit: contain;
}

@media (max-width: 860px) {
  .investors__grid { grid-template-columns: repeat(2, 1fr); gap: clamp(2.25rem, 7vw, 56px) clamp(1.5rem, 4vw, 32px); }
}
@media (max-width: 420px) {
  .investors__logo { max-height: 44px; }
}

/* --- Reveal: logos rise + fade in one-by-one; stagger via inline --d delay
   (added by insights.js via .js-reveal). Reversible on scroll out. --- */
.investors__grid.js-reveal .investors__item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s var(--ease-osmo, cubic-bezier(0.65, 0.05, 0, 1)),
              transform 0.6s var(--ease-osmo, cubic-bezier(0.65, 0.05, 0, 1));
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.investors__grid.js-reveal .investors__item.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .investors__grid.js-reveal .investors__item {
    transition: none; opacity: 1; transform: none;
  }
}

/* =========================================================
   ABOUT US — hero / team directory / resume / mission
   (Figma 16:400 + 16:789). Pages are block-driven, so these
   blocks can be used on any page.
   ========================================================= */

/* ---- Eyebrow on dark photo backgrounds ------------------ */
.eyebrow--light { opacity: 0.7; }

/* ---- About hero: compact banner that scales with content - */
.about-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  overflow: clip;
  min-height: clamp(360px, 40vw, 540px);
  padding-top: clamp(160px, 22vh, 260px);
  padding-bottom: clamp(48px, 8vw, 96px);
  color: #fff;
}
.about-hero__bg { position: absolute; inset: 0; z-index: -1; }
.about-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-hero__overlay {
  position: absolute;
  inset: 0;
  /* Figma: #042e7b(.8) top -> #00114c(.85) bottom, plus a little extra
     darkening lower-left so the title stays crisp. */
  background:
    linear-gradient(180deg, rgba(4, 46, 123, 0.82) 0%, rgba(4, 46, 123, 0.8) 42%, rgba(0, 17, 76, 0.9) 100%),
    linear-gradient(75deg, rgba(0, 17, 76, 0.35) 0%, rgba(0, 17, 76, 0) 48%);
}
.about-hero__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.about-hero__inner .eyebrow { margin-bottom: clamp(14px, 1.8vw, 22px); }
.about-hero__title {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2.4rem, 5.2vw, 60px);
  line-height: 1.02;
  font-weight: 400;
  color: #fff;
}

/* ---- Meet the team -------------------------------------- */
/* No baked background here: the About hero keeps the scroll-bg canvas white
   (data-bg #fff), so this section is white at scroll-top AND can blend smoothly
   into the blue mission section below via the scroll background. */
.about-team__head {
  display: grid;
  grid-template-columns: minmax(0, 530px) minmax(0, 642px);
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.about-team__heading { margin: 0; font-size: var(--fs-h2); line-height: 1.19; font-weight: 400; }
.about-team__intro {
  margin: 0;
  font-size: clamp(1.125rem, 1.6vw, 24px);
  line-height: 1.34;
}

/* ---- Tab switcher: bordered track with a teal pill sliding INSIDE it ----
   (Figma 16:431 — Filter Pill: the active pill sits within a rounded, blue-
   bordered track and slides between options). */
.about-tabs {
  position: relative;
  display: inline-flex;
  padding: 5px;
  border: 1px solid rgba(54, 96, 235, 0.2);
  border-radius: 999px;
  margin-top: clamp(2.25rem, 5vw, 4.5rem);
}
.about-tabs__indicator {
  position: absolute;
  top: 50%;
  left: 0;
  height: calc(100% - 10px);
  border-radius: 999px;
  background: var(--accent, #00ffec);
  z-index: 0;
  transform: translate(5px, -50%); /* sits over the first tab until JS measures */
  transition: transform 0.55s var(--ease-osmo, cubic-bezier(0.65, 0.05, 0, 1)),
              width 0.55s var(--ease-osmo, cubic-bezier(0.65, 0.05, 0, 1));
  will-change: transform, width;
}
.about-tab {
  position: relative;
  z-index: 1;
  appearance: none;
  margin: 0;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 11px 30px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-brand, #042e7b);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.4s ease;
}
/* On phones the two default labels ("EXECUTIVE TEAM" / "BOARD OF DIRECTORS")
   run past the viewport at the desktop padding + letter-spacing. Let the pill
   span the row and shrink the type so both tabs fit without a horizontal
   scroll. Tabs share the width evenly (min-width:0 lets long labels ellipsize
   rather than force overflow). */
@media (max-width: 600px) {
  .about-tabs {
    display: flex;
    width: 100%;
    max-width: 420px;
    margin-top: clamp(1.75rem, 6vw, 2.5rem);
  }
  .about-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px clamp(10px, 3vw, 18px);
    font-size: clamp(10px, 2.8vw, 12px);
    letter-spacing: 0.4px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

/* ---- Team grid + cards (Card/People) -------------------- */
.about-team__panels { position: relative; margin-top: clamp(2rem, 4.5vw, 3.75rem); }
.about-team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2.5rem, 4vw, 3.75rem) clamp(1.5rem, 2.3vw, 30px);
  transition: opacity 0.4s ease, transform 0.45s var(--ease-osmo, cubic-bezier(0.16, 1, 0.3, 1));
}
.about-team__grid[hidden] { display: none; }

.people-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  color: var(--c-brand, #042e7b);
  cursor: pointer;
}
.people-card .tc-photo { width: 100%; aspect-ratio: 306 / 300; }
.people-card__info { display: flex; flex-direction: column; gap: 5px; padding: 0 10px; }
.people-card__name { font-size: 22px; line-height: 26px; transition: color 0.35s ease; }
.people-card:hover .people-card__name,
.people-card:focus-visible .people-card__name { color: var(--c-action, #3660eb); }
.people-card__role { font-size: 14px; line-height: 22px; opacity: 0.6; }
.people-card__border {
  position: relative; display: block; width: 100%; height: 2px;
  background: rgba(4, 46, 123, 0.3); overflow: hidden;
}
.people-card__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, #479ff3 0%, #00ffec 100%);
  transition: width 0.6s var(--ease-osmo, cubic-bezier(0.65, 0.05, 0, 1));
}
.people-card:hover .people-card__fill,
.people-card:focus-visible .people-card__fill { width: 100%; }

/* ---- Resume pop-up -------------------------------------- */
.resume {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
}
.resume[hidden] { display: none; }
.resume__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 0, 123, 0.95) 0%, rgba(0, 17, 76, 0.97) 100%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.5s ease;
  cursor: pointer;
}
.resume__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 100dvh;
  overflow-y: auto;
  display: flex;
  align-items: center;
  /* premium "veeg in": fade + rise + a touch of scale */
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 0.55s ease, transform 0.65s var(--ease-osmo, cubic-bezier(0.16, 1, 0.3, 1));
}
.resume.is-open .resume__overlay { opacity: 1; }
.resume.is-open .resume__dialog { opacity: 1; transform: none; }

.resume__layout {
  display: grid;
  grid-template-columns: minmax(0, 418px) minmax(0, 1fr);
  column-gap: clamp(2rem, 3.4vw, 48px);
  align-items: center;
  padding-block: clamp(96px, 14vh, 140px);
}
.resume__media {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
}
.resume__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.resume__body { color: #fff; }
.resume__name { margin: 0; font-size: clamp(1.5rem, 2.4vw, 28px); line-height: 1.43; font-weight: 400; }
.resume__role { margin: 4px 0 0; font-size: 18px; line-height: 28px; opacity: 0.6; }
.resume__bio { margin-top: clamp(20px, 2.4vw, 30px); font-size: 18px; line-height: 28px; }
.resume__bio p { margin: 0 0 1em; }
.resume__bio p:last-child { margin-bottom: 0; }

.resume__close {
  position: fixed;
  top: clamp(20px, 4vw, 62px);
  right: clamp(20px, 5vw, 80px);
  z-index: 2;
  width: 51px;
  height: 51px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background 0.35s ease, transform 0.55s var(--ease-osmo, cubic-bezier(0.65, 0.05, 0, 1));
}
.resume__close:hover { background: rgba(255, 255, 255, 0.18); transform: rotate(90deg); }
.resume__close-x { position: relative; width: 27px; height: 27px; display: block; }
.resume__close-x::before,
.resume__close-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent, #00ffec);
  border-radius: 2px;
}
.resume__close-x::before { transform: translateY(-50%) rotate(45deg); }
.resume__close-x::after { transform: translateY(-50%) rotate(-45deg); }

/* ---- Mission (floating brand mark) ---------------------- */
.section--mission {
  position: relative;
  overflow: clip;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(560px, 56vw, 860px);
  padding-block: clamp(4rem, 9vw, 140px);
}
.about-mission__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Figma Image Mark (16:404): 341.605 x 445.063, white droplet whose own
     gradient + this opacity render as the lighter blue-purple over the navy. */
  width: clamp(220px, 21vw, 342px);
  aspect-ratio: 341.605 / 445.063;
  background: url('../img/about/mission-mark.svg') no-repeat center / contain;
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: alveus-mission-float 11s ease-in-out infinite;
  will-change: transform;
}
@keyframes alveus-mission-float {
  0%, 100% { transform: translate(-50%, calc(-50% - 16px)); }
  50%      { transform: translate(-50%, calc(-50% + 16px)); }
}
@media (prefers-reduced-motion: reduce) {
  .about-mission__mark { animation: none; }
}
.about-mission__inner {
  position: relative;
  z-index: 1;
  max-width: 866px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vw, 20px);
}
.about-mission__heading { margin: 0; font-size: var(--fs-h2); line-height: 1.19; font-weight: 400; }
.about-mission__text { margin: 0; font-size: clamp(1.25rem, 2.2vw, 28px); line-height: 1.43; }

/* ---- Responsive ----------------------------------------- */
@media (max-width: 1024px) {
  .about-team__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .about-team__head { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .about-team__grid { grid-template-columns: repeat(2, 1fr); }
  .resume__layout { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: clamp(1.5rem, 6vw, 2.25rem); }
  .resume__media { max-width: 320px; }
  .resume__role { font-size: 16px; }
}
@media (max-width: 460px) {
  .about-team__grid { grid-template-columns: 1fr; }
}

/* Lock background scroll while the resume pop-up is open */
body.resume-open { overflow: hidden; }

/* =========================================================
   SCIENCE PAGE  (Figma 23:963)
   Reusable inner-page blocks: page banner, program rows,
   mechanisms list, "why it matters" statement, notice.
   ========================================================= */

/* ---- Page banner (compact hero) ------------------------- */
.page-banner {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  align-items: center;
  min-height: clamp(520px, 44vw, 668px);
  padding-top: clamp(150px, 17vh, 210px);   /* clear the fixed header */
  padding-bottom: clamp(48px, 7vw, 100px);
  color: #fff;
  /* Navy base behind the molecule image (Figma reads navy with faint blobs). */
  background: radial-gradient(125% 120% at 58% 22%, #0a3f93 0%, #02256a 42%, #00114c 100%);
}
.page-banner__bg { position: absolute; inset: 0; z-index: -2; }
.page-banner__bg img,
.page-banner__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.page-banner__bg img { opacity: 0.5; }
/* The banner video autoplays and loops (like the homepage hero). The poster is
   shown until the first frames decode, then it eases in. (If a data-scroll-video
   is ever used here again, scroll-video.js still toggles .is-ready the same way.) */
.page-banner__bg video { opacity: 0.5; transition: opacity 0.7s ease; }
.page-banner__bg video[data-scroll-video] { opacity: 0; }
.page-banner__bg video[data-scroll-video].is-ready { opacity: 0.5; }
.page-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Darken left (behind the text) and the bottom edge; let the centre show. */
  background:
    linear-gradient(90deg, rgba(0, 17, 76, 0.92) 0%, rgba(0, 17, 76, 0.55) 34%, rgba(0, 17, 76, 0) 62%),
    linear-gradient(0deg, rgba(0, 17, 76, 0.65) 0%, rgba(0, 17, 76, 0) 42%);
}
.page-banner__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}
.page-banner__inner .eyebrow { margin: 0; }
.page-banner__title {
  margin: 0;
  max-width: 16ch;
  font-size: var(--fs-h1);
  line-height: 1;            /* Figma 60/60 */
  font-weight: 400;
  color: #fff;
}
.page-banner__title strong { font-weight: 700; }
.page-banner__text {
  margin: 0;
  max-width: 626px;          /* Figma */
  font-size: var(--fs-body);
  line-height: 1.55;
}
.page-banner__text p { margin: 0 0 0.8em; }
.page-banner__text p:last-child { margin-bottom: 0; }
.page-banner__text a { color: inherit; text-decoration: underline; text-underline-position: from-font; }
.page-banner__cta { margin: 0; }

/* ---- Program rows: alternating media / text ------------- */
.section--programs .container {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 7vw, 100px);
}
.program-row {
  display: grid;
  /* DOM order is media-first, so the default is media-left / text-right. */
  grid-template-columns: minmax(0, 642px) minmax(0, 530px);
  gap: clamp(40px, 8vw, 142px);
  align-items: center;
  justify-content: space-between;
}
.program-row--text-left { grid-template-columns: minmax(0, 530px) minmax(0, 642px); }
.program-row--text-left .program-row__media { order: 1; }   /* push media into the right column */
.program-row__media {
  aspect-ratio: 1;                 /* Figma media tile is square (1:1) */
  border-radius: 8px;             /* real CSS radius, not baked into the image */
  overflow: hidden;               /* clips any uploaded image to the rounded tile */
  background: var(--accent, #00ffec);   /* flat turquoise when no image is set */
}
/* Any uploaded image fills the square tile and is centre-cropped, whatever its
   own dimensions/ratio. */
.program-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.program-row__title {
  margin: 0 0 20px;
  font-size: clamp(1.75rem, 3vw, 34px);
  line-height: 1.29;          /* 34/44 */
  font-weight: 400;
  color: var(--c-brand, #042e7b);
}
.program-row__lead {
  margin: 0 0 20px;
  font-size: clamp(1.3rem, 2vw, 24px);
  line-height: 1.33;          /* 24/32 */
  color: var(--c-brand, #042e7b);
}
.program-row__body p {
  margin: 0 0 1em;
  font-size: var(--fs-body);
  line-height: 1.55;          /* 18/28 */
  color: var(--c-brand, #042e7b);
}
.program-row__body p:last-child { margin-bottom: 0; }

/* ---- Mechanisms: divided two-column list ---------------- */
.mechanisms { border-top: 1px solid rgba(4, 46, 123, 0.16); }
.mechanism {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 2.4vw, 30px);
  align-items: start;
  padding-block: clamp(28px, 3.4vw, 40px);
  border-bottom: 1px solid rgba(4, 46, 123, 0.16);
}
.mechanism__heading {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 34px);
  line-height: 1.29;
  font-weight: 400;
  color: var(--c-brand, #042e7b);
}
.mechanism__text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--c-brand, #042e7b);
}

/* ---- Why it matters: centred statement + droplet -------- */
.section--why .why {
  display: flex;
  justify-content: center;
  padding-block: clamp(64px, 10vw, 130px);
}
.why__inner {
  position: relative;
  max-width: 866px;
  text-align: center;
  color: var(--c-brand, #042e7b);
}
.why__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(220px, 23vw, 341px);
  aspect-ratio: 341.605 / 445.063;
  background: url('../img/science/why-mark.svg') center / contain no-repeat;
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
  animation: alveus-why-float 11s ease-in-out infinite;
  will-change: transform;
}
@keyframes alveus-why-float {
  0%, 100% { transform: translate(-50%, calc(-50% - 14px)); }
  50%      { transform: translate(-50%, calc(-50% + 14px)); }
}
@media (prefers-reduced-motion: reduce) {
  .why__mark { animation: none; }
}
.why__subtitle,
.why__title,
.why__text { position: relative; z-index: 1; }
.why__subtitle {
  margin: 0 0 20px;
  font-size: 22px;
  line-height: 1.18;          /* 22/26 */
}
.why__title {
  margin: 0 0 20px;
  font-size: clamp(2rem, 4vw, 42px);
  line-height: 1.19;          /* 42/50 */
  font-weight: 400;
}
.why__text {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 28px);
  line-height: 1.43;          /* 28/40 */
}

/* ---- Notice placement ----------------------------------- */
.section--notice { padding-block: clamp(24px, 4vw, 48px); }

/* The whole page below the navy banner is white, with no blue section to blend
   into. Each of these blocks now paints its own solid background (from its ACF
   "Background colour" field, default white) via an inline style, so the short
   banner never bleeds the navy scroll-bg canvas down into them ("page begins
   blue") AND the colour stays editor-managed. */

/* ---- Science responsive --------------------------------- */
@media (max-width: 900px) {
  .program-row,
  .program-row--media-left { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
  .program-row__media { order: -1; max-width: 520px; }       /* media always on top */
  .mechanism { grid-template-columns: 1fr; gap: 12px; }
}

/* =========================================================
   PIPELINE PAGE  (Figma 27:900)
   Reuses page_banner (video) + a content/media block that
   scroll-blends from blue into the white pipeline table.
   ========================================================= */

/* ---- Content + media (text + landscape photo) ----------- */
.section--content-media { color: #fff; }
.section--content-media--light { color: var(--c-brand, #042e7b); }
.section--content-media .content-media {
  display: grid;
  grid-template-columns: minmax(0, 754px) minmax(0, 530px);
  gap: clamp(2rem, 3vw, 40px);
  align-items: center;
  justify-content: space-between;
}
.section--content-media--left .content-media { grid-template-columns: minmax(0, 530px) minmax(0, 754px); }
.section--content-media--left .content-media__media { order: -1; }
.content-media__text { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.content-media__text .eyebrow { margin: 0; }
.content-media__title {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 34px);
  line-height: 1.29;          /* 34/44 */
  font-weight: 400;
}
.content-media__lead {
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 24px);
  line-height: 1.33;          /* 24/32 */
}
.content-media__body { display: flex; flex-direction: column; gap: 1em; }
.content-media__body p { margin: 0; font-size: var(--fs-body); line-height: 1.556; }
/* Photo: real CSS radius + object-fit so any upload fits the landscape tile. */
.content-media__media {
  aspect-ratio: 530 / 348;
  border-radius: 8px;
  overflow: hidden;
}
.content-media__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* ---- Pipeline table: light (white background) variant ---- */
.section--pipeline--light {
  color: var(--c-brand, #042e7b);
  --pl-divider: #ffffff;      /* white ticks over the light track + fill */
  --pl-fill: linear-gradient(90deg, #09007b 0%, #00ffec 100%);
}
/* This page's title is short — let it sit on one line (Figma), not the wrapped
   width the longer homepage headline needs. */
.section--pipeline--light .pl-title { max-width: none; }
.section--pipeline--light .pl-track {
  background: linear-gradient(90deg, rgba(4, 46, 123, 0.18) 0%, rgba(4, 46, 123, 0.06) 100%);
}
/* In the design the white phase dividers sit ON TOP of the coloured fill. */
.section--pipeline--light .pl-track__dividers { z-index: 2; }

/* ---- Pipeline page responsive --------------------------- */
@media (max-width: 900px) {
  .section--content-media .content-media,
  .section--content-media--left .content-media { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 36px); }
  .content-media__media { order: -1; max-width: 560px; }     /* photo on top */
}

/* =========================================================
   NEWS ARCHIVE + SINGLE ARTICLE  (Figma 27:1215 / 27:1238)
   ========================================================= */

/* ---- Archive: filter bar (tabs + stay informed) --------- */
.section--news-archive {
  /* Solid background is painted inline from the block's "Background colour"
     field (default white), so the short banner never bleeds navy down. */
  padding-block: clamp(3rem, 6vw, 90px) clamp(4rem, 9vw, 130px);
}
.news-archive__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 54px);
}

/* tabs (mirror .about-tabs) */
.news-tabs {
  position: relative;
  display: inline-flex;
  padding: 5px;
  border: 1px solid rgba(54, 96, 235, 0.2);
  border-radius: 999px;
}
.news-tabs__indicator {
  position: absolute;
  top: 50%;
  left: 0;
  height: calc(100% - 10px);
  border-radius: 999px;
  background: var(--accent, #00ffec);
  z-index: 0;
  transform: translate(5px, -50%);
  transition: transform 0.55s var(--ease-osmo, cubic-bezier(0.65, 0.05, 0, 1)),
              width 0.55s var(--ease-osmo, cubic-bezier(0.65, 0.05, 0, 1));
  will-change: transform, width;
}
.news-tab {
  position: relative;
  z-index: 1;
  appearance: none;
  margin: 0;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 11px 30px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-brand, #042e7b);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.4s ease;
}

/* stay informed on LinkedIn */
.news-archive__stay {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--c-brand, #042e7b);
  font-size: 18px;
  line-height: 1.5;
}
.news-archive__stay-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-brand, #042e7b);
  color: #fff;
  transition: background 0.3s ease;
}
.news-archive__stay:hover .news-archive__stay-icon { background: var(--c-action, #3660eb); }

/* ---- Archive: two-column post list ---------------------- */
.news-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.5rem, 2.3vw, 30px);
  row-gap: clamp(1.25rem, 1.7vw, 20px);
}
.news-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.5rem, 2.5vw, 34px);
  min-height: 192px;
  text-decoration: none;
  color: var(--c-brand, #042e7b);
}
.news-item.is-hidden { display: none; }
/* Anti-flash: when JS is on, hide the archive cards before first paint so the
   one-by-one entrance (news.js) never shows them, hides them, then re-shows.
   Lifted the instant news.js marks the list ready (or immediately if reduced-
   motion). No-JS users never get .js, so they always see the cards. */
html.js .news-list:not(.is-ready) .news-item:not(.is-hidden) {
  opacity: 0;
  transform: translateY(26px);
}
@media (prefers-reduced-motion: reduce) {
  /* Reduced-motion must always show the cards, even if JS never runs, so this
     overrides the pre-hide gate regardless of specificity. */
  html.js .news-list .news-item { opacity: 1 !important; transform: none !important; }
}
.news-item__title {
  margin: 0;
  font-size: clamp(1.25rem, 1.7vw, 24px);
  line-height: 1.33;              /* 32/24 */
  color: var(--c-brand, #042e7b);
  transition: color 0.3s ease;
}
.news-item:hover .news-item__title { color: var(--c-action, #3660eb); }
.news-item__meta { display: flex; flex-direction: column; gap: 20px; }
.news-item__line { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1.57; }
.news-item__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--c-action, #3660eb); flex-shrink: 0; }
/* Arrow sits at -45deg (points up-right) at rest and rotates back to 0deg
   (points right) on hover — per Figma 27:1762. Colour never changes. */
.news-item__arrow {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--c-action, #3660eb);
  transform: rotate(-45deg);
  transition: transform 0.4s var(--ease-osmo, cubic-bezier(0.625, 0.05, 0, 1));
}
.news-item__arrow svg { width: 100%; height: 100%; }
.news-item:hover .news-item__arrow { transform: rotate(0deg); }
/* Divider: a faint blue track that a blue-to-turquoise gradient sweeps across
   from left to right on hover (scaleX from origin left). */
.news-item__divider {
  position: relative;
  height: 2px;
  width: 100%;
  overflow: hidden;
}
.news-item__divider::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-action, #3660eb);
  opacity: 0.3;
}
.news-item__divider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--c-action, #3660eb), var(--accent, #00ffec));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-osmo, cubic-bezier(0.625, 0.05, 0, 1));
}
.news-item:hover .news-item__divider::after { transform: scaleX(1); }

/* ---- Single post: dark hero (title + tag + date) -------- */
.post-hero {
  min-height: clamp(440px, 39vw, 622px);
  padding-top: clamp(150px, 17vh, 232px);
  padding-bottom: clamp(48px, 7vw, 96px);
  align-items: flex-end;
}
.post-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.post-hero__title {
  margin: 0;
  max-width: 1314px;
  font-size: clamp(1.9rem, 3.4vw, 42px);
  line-height: 1.19;             /* 50/42 */
  font-weight: 400;
  color: #fff;
}
.post-hero__meta { display: flex; align-items: center; gap: 20px; }
.post-hero__tag {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 22px;
  border-radius: 505px;
  background: rgba(255, 255, 255, 0.6);
  color: #02225e;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 18px;
  white-space: nowrap;
}
.post-hero__date { font-size: 14px; color: #fff; opacity: 0.9; }

/* ---- Single post: centred article body ------------------ */
.section--article {
  background-color: #fff;
  padding-block: clamp(3rem, 6vw, 84px) clamp(4rem, 9vw, 130px);
}
.article {
  max-width: 866px;
  margin-inline: auto;
  color: var(--c-brand, #042e7b);
  font-size: var(--fs-body);
  line-height: 1.556;            /* 28/18 */
}
.article__text { margin: 0 0 1.556em; }
.article__text p { margin: 0 0 1.556em; }
.article__text p:last-child { margin-bottom: 0; }
.article__text strong { font-weight: 700; }
.article__text em { font-style: italic; }
/* Inline article links get the blue underline — but not component buttons
   (e.g. the "Apply now" button-040) that happen to sit inside the article. */
.article a:not(.button-040),
.article__text a:not(.button-040),
.article__list a:not(.button-040) { color: var(--c-action, #3660eb); text-decoration: underline; text-underline-position: from-font; }
.article .button-040,
.article .button-040:hover { text-decoration: none; }
.article__heading {
  margin: clamp(1.75rem, 3vw, 40px) 0 clamp(0.75rem, 1.4vw, 20px);
  font-size: clamp(1.4rem, 2vw, 28px);   /* H4 28/40 */
  line-height: 1.43;
  font-weight: 400;
  color: var(--c-brand, #042e7b);
}
.article__list { margin: 0 0 1.556em; padding-left: 1.4em; }
.article__list li { margin: 0 0 0.5em; }
.article__list li:last-child { margin-bottom: 0; }
.article__list--ol { list-style: decimal; }
.article__list--ul { list-style: disc; }

/* WYSIWYG article body: headings, lists, quotes and inline images now live
   inside .article__text (one rich editor), so mirror the standalone styles. */
.article__text h2 { margin: clamp(1.75rem, 3vw, 40px) 0 clamp(0.75rem, 1.4vw, 20px); font-size: clamp(1.5rem, 2.4vw, 32px); line-height: 1.3; font-weight: 400; color: var(--c-brand, #042e7b); }
.article__text h3 { margin: clamp(1.5rem, 2.4vw, 32px) 0 clamp(0.6rem, 1.2vw, 16px); font-size: clamp(1.25rem, 1.8vw, 24px); line-height: 1.35; font-weight: 500; color: var(--c-brand, #042e7b); }
.article__text h2:first-child, .article__text h3:first-child { margin-top: 0; }
.article__text ul, .article__text ol { margin: 0 0 1.556em; padding-left: 1.4em; }
.article__text li { margin: 0 0 0.5em; }
.article__text ul { list-style: disc; }
.article__text ol { list-style: decimal; }
.article__text blockquote { margin: clamp(1.5rem, 2.4vw, 32px) 0; padding-left: 1.1em; border-left: 3px solid var(--c-action, #3660eb); font-style: italic; color: var(--c-navy, #02225e); }
.article__text img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: clamp(1.5rem, 2.4vw, 32px) 0; }
.article__button { margin: clamp(1.75rem, 3vw, 40px) 0; }

.article__figure { margin: clamp(1.75rem, 3vw, 40px) 0; }
.article__figure img,
.article__figure video { width: 100%; height: auto; border-radius: 8px; display: block; }
.article__figure figcaption { margin-top: 12px; font-size: 14px; opacity: 0.6; }

/* ---- News responsive ------------------------------------ */
@media (max-width: 720px) {
  .news-list { grid-template-columns: 1fr; }
  .news-archive__bar { align-items: flex-start; }
  .news-tab { padding: 11px 22px; }
}

/* =====================================================================
   CAREERS (Figma 28:1807 landing, 28:1918 single, 28:1966 apply form)
   ===================================================================== */

/* ---- Career hero (single + apply): blue gradient banner ------------- */
.career-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 42vw, 620px);
  padding-block: clamp(150px, 20vh, 232px) clamp(2.5rem, 5vw, 80px);
  color: #fff;
}
.career-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 120% at 85% 0%, #123a9e 0%, rgba(18,58,158,0) 55%),
    radial-gradient(120% 130% at 0% 100%, #0a1f6b 0%, rgba(10,31,107,0) 60%),
    linear-gradient(120deg, #08205f 0%, #041a52 45%, #00114c 100%);
}
/* Large brand swirl (Figma "BANNER SMALL" hero visual). It bleeds off the top,
   right and bottom edges (the hero is clipped) and fades out toward the left via
   a mask so the heading stays clean and legible. */
.career-hero__mark {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  width: clamp(900px, 128vw, 1900px);
  aspect-ratio: 1500 / 1493;
  background: url('../img/careers/hero-swirl.webp') no-repeat center / contain;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(100deg, transparent 2%, rgba(0, 0, 0, 0.45) 26%, #000 55%);
          mask-image: linear-gradient(100deg, transparent 2%, rgba(0, 0, 0, 0.45) 26%, #000 55%);
  pointer-events: none;
}
@media (max-width: 767px) {
  .career-hero__mark { left: 62%; width: 175vw; opacity: 0.42; }
}
/* When an editor sets a hero photo/video (Theme Settings > Template heroes or a
   per-position override), the shared .page-banner__bg + .page-banner__overlay
   take over and the decorative brand gradient + swirl step aside. */
.career-hero--has-media .career-hero__bg,
.career-hero--has-media .career-hero__mark { display: none; }
.career-hero__inner { position: relative; z-index: 1; }
.career-hero__title {
  margin: 0.35em 0 0;
  max-width: 14ch;
  font-size: var(--fs-h1);
  line-height: 1;
  color: #fff;
}
.career-hero--apply .career-hero__title { max-width: 20ch; }
.career-hero__cta { margin-top: clamp(1.5rem, 2.5vw, 34px); }
.career-hero__meta {
  margin: clamp(1rem, 1.6vw, 22px) 0 0;
  font-size: 14px;
  line-height: 1.57;
  color: rgba(255, 255, 255, 0.75);
}
.career-hero__subtitle {
  margin: clamp(0.75rem, 1.4vw, 18px) 0 0;
  font-size: var(--fs-body);
  line-height: 1.556;
  color: rgba(255, 255, 255, 0.85);
}

/* ---- Career single body -------------------------------------------- */
.section--career-body { }
.article--career .lead {
  font-size: clamp(1.25rem, 1.7vw, 24px);
  line-height: 1.333;
  color: var(--c-action, #3660eb);
  margin-bottom: 1.4em;
}
.article--career .article__list--ul { list-style: none; padding-left: 0; }
.article--career .article__list--ul li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 0.55em;
}
.article--career .article__list--ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 14px;
  height: 19px;
  background: url('../img/icons/droplet-mark.svg') no-repeat center / contain;
}
.career-body__apply {
  margin-top: clamp(2.5rem, 5vw, 72px);
  padding: clamp(1.75rem, 3vw, 40px) clamp(1.75rem, 3vw, 44px);
  background: var(--blue-10-fresh, #e8f0ff);
  border-radius: clamp(20px, 3vw, 40px);
}

/* ---- Perks tabs: "Built by people who care" (dark blue) ------------- */
.section--perks { padding-block: clamp(4rem, 8vw, 130px); color: #fff; }
.perks__intro {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 60px);
  justify-content: space-between;
  margin-bottom: clamp(2.5rem, 5vw, 72px);
}
.perks__heading {
  flex: 1 1 340px;
  max-width: 526px;
  margin: 0;
  font-size: clamp(2rem, 3.3vw, 42px);
  line-height: 1.19;
  color: #fff;
}
.perks__lead {
  flex: 1 1 340px;
  max-width: 530px;
  margin: 0;
  font-size: clamp(1.125rem, 1.7vw, 24px);
  line-height: 1.333;
  color: rgba(255, 255, 255, 0.82);
}
.perks-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 4vw, 64px);
  align-items: center;
}
.perks-tabs__col { flex: 1 1 380px; min-width: 0; }
.perks-tabs__title {
  margin: 0 0 clamp(1.5rem, 2.5vw, 34px);
  font-size: clamp(1.75rem, 2.6vw, 34px);
  line-height: 1.1;
  color: #fff;
}
.perks-tabs__list { display: flex; flex-direction: column; }
.perks-tab {
  position: relative;
  display: block;
  padding-block: clamp(1.25rem, 2vw, 28px);
  color: #fff;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.perks-tab.is-active { opacity: 1; }
.perks-tab__main {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.6vw, 24px);
}
.perks-tab__nr {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--accent, #00ffec);
  color: var(--accent, #00ffec);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: background-color 0.4s var(--ease-osmo, cubic-bezier(0.625, 0.05, 0, 1)), color 0.4s var(--ease-osmo, cubic-bezier(0.625, 0.05, 0, 1));
}
.perks-tab.is-active .perks-tab__nr {
  background: var(--accent, #00ffec);
  color: var(--brand-blue-dark, #00114c);
}
.perks-tab__heading {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 28px);
  line-height: 1.1;
  color: #fff;
}
.perks-tab__detail {
  height: 0;
  overflow: hidden;
  padding-left: calc(46px + clamp(1rem, 1.6vw, 24px));
}
.perks-tab__spacer { padding-top: 0.9em; }
.perks-tab__desc {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.556;
  color: rgba(255, 255, 255, 0.78);
}
.perks-tab__bottom {
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
}
.perks-tab__progress {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent, #00ffec);
  transform: scaleX(0);
  transform-origin: left center;
}
.perks-visual { position: relative; width: 100%; }
.perks-visual__frame {
  position: relative;
  aspect-ratio: 1.3;
  width: 100%;
}
.perks-visual__item {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}
.perks-visual__item.is-active { opacity: 1; visibility: visible; }
.perks-visual__inner {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
}
.perks-visual__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* ---- Development & Benefits: sticky title + soft-blue cards --------- */
.section--benefits { padding-block: clamp(4rem, 8vw, 130px); }
.benefits__heading {
  margin: 0 0 clamp(3rem, 6vw, 90px);
  text-align: center;
  font-size: var(--fs-h1);
  line-height: 1.1;
  color: var(--c-brand, #042e7b);
}
.benefits {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3vw, 44px);
  align-items: start;
}
.benefits__aside {
  position: sticky;
  top: clamp(110px, 15vh, 170px);
  align-self: start;
}
.benefits__titles { display: grid; }
.benefits__title {
  grid-area: 1 / 1;
  margin: 0;
  font-size: clamp(1.75rem, 3.3vw, 42px);
  line-height: 1.19;
  color: var(--c-brand, #042e7b);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-osmo, cubic-bezier(0.625, 0.05, 0, 1)), transform 0.5s var(--ease-osmo, cubic-bezier(0.625, 0.05, 0, 1));
  pointer-events: none;
}
.benefits__title.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.benefits__steps { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 72px); }
/* Cards sit at natural spacing (just the gap between them). The sticky title
   swaps when a card crosses the viewport centre line, so it stays deliberate
   without needing large empty blocks. */
.benefits__step { display: flex; }
.benefits__card {
  width: 100%;
  padding: clamp(1.75rem, 2.6vw, 40px);
  background: var(--blue-10-fresh, #e8f0ff);
  border-radius: clamp(16px, 2vw, 26px);
  color: var(--c-brand, #042e7b);
}
.benefits__card > *:first-child { margin-top: 0; }
.benefits__card > *:last-child { margin-bottom: 0; }
.benefits__card p {
  margin: 0 0 1.1em;
  font-size: var(--fs-body);
  line-height: 1.556;
}
.benefits__card .lead {
  font-size: clamp(1.25rem, 1.7vw, 24px);
  line-height: 1.333;
  margin-bottom: 1.1em;
}
.benefits__card .sub {
  font-size: clamp(1.125rem, 1.5vw, 22px);
  line-height: 1.18;
  margin-bottom: 0.9em;
}
.benefits__card ul { list-style: none; margin: 0; padding: 0; }
.benefits__card ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 0.5em;
  font-size: var(--fs-body);
  line-height: 1.556;
}
.benefits__card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 14px;
  height: 19px;
  /* The brand droplet mark (already #042E7B). */
  background: url('../img/icons/droplet-mark.svg') no-repeat center / contain;
}
.benefits__quote {
  position: relative;
  max-width: 866px;
  margin: clamp(4rem, 9vw, 150px) auto 0;
  padding-block: clamp(2rem, 4vw, 60px);
  text-align: center;
}
.benefits__quote-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(200px, 22vw, 300px);
  aspect-ratio: 14 / 19;
  z-index: 0;
  pointer-events: none;
  /* The brand droplet logomark, faint and gently floating behind the statement. */
  background: url('../img/icons/droplet-mark.svg') no-repeat center / contain;
  opacity: 0.1;
  animation: benefits-float 7s ease-in-out infinite;
}
@keyframes benefits-float {
  0%, 100% { transform: translate(-50%, -54%); }
  50% { transform: translate(-50%, -46%); }
}
@media (prefers-reduced-motion: reduce) {
  .benefits__quote-mark { animation: none; transform: translate(-50%, -50%); }
}
.benefits__quote-text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(1.25rem, 1.7vw, 24px);
  line-height: 1.333;
  color: var(--c-brand, #042e7b);
}

/* ---- Open positions: dynamic table --------------------------------- */
.section--positions { padding-block: clamp(3rem, 6vw, 90px); scroll-margin-top: clamp(90px, 12vh, 150px); }
.positions__heading {
  margin: 0 0 clamp(1.5rem, 2.5vw, 34px);
  font-size: clamp(1.75rem, 2.6vw, 34px);
  line-height: 1.1;
  color: var(--c-brand, #042e7b);
}
.positions__head,
.position {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(120px, auto);
  column-gap: clamp(1rem, 3vw, 48px);
  align-items: center;
}
.positions__head { padding-bottom: 12px; }
.positions__col {
  font-size: var(--fs-body);
  line-height: 1.556;
  color: var(--c-brand, #042e7b);
}
.positions__col--date { grid-column: 2; text-align: right; }
.position {
  position: relative;
  min-height: 101px;
  padding-block: 12px;
}
/* Top + bottom dividers as pseudo-elements: a faint track that a blue-to-
   turquoise gradient sweeps across left-to-right on hover (Figma 28:2617). */
.position::before,
.position::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background:
    linear-gradient(to right, var(--c-action, #3660eb), var(--accent, #00ffec)) left / 0% 100% no-repeat,
    var(--brand-30-fresh, #a9bddf);
  transition: background-size 0.5s var(--ease-osmo, cubic-bezier(0.625, 0.05, 0, 1));
}
.position::before { top: 0; }
.position::after { bottom: 0; }
.position:hover::before,
.position:hover::after { background-size: 100% 100%; }
/* The whole row is a link target: hovering the title still lights the row. */
.position:hover .position__title,
.position:hover .position__date { color: var(--c-action, #3660eb); }
.position__title {
  margin: 0;
  font-size: clamp(1.25rem, 1.9vw, 28px);
  line-height: 1.43;
  color: var(--c-brand, #042e7b);
  text-decoration: none;
  transition: color 0.3s ease;
}
.position__title:hover { color: var(--c-action, #3660eb); }
.position__date {
  font-size: var(--fs-body);
  line-height: 1.556;
  color: var(--c-brand, #042e7b);
  text-align: right;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.position__cta { justify-self: end; }
.positions__spec { margin-top: clamp(2.5rem, 5vw, 72px); }
.positions__spec-heading {
  margin: 0 0 0.5em;
  font-size: clamp(1.25rem, 1.7vw, 24px);
  line-height: 1.333;
  color: var(--c-action, #3660eb);
}
.positions__spec-text,
.positions__spec-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.57;
  color: var(--c-action, #3660eb);
}

/* ---- Apply form (28:1966) ------------------------------------------ */
.form-section { padding-block: clamp(3rem, 6vw, 100px); }
.apply-form { max-width: 866px; margin-inline: auto; }
.apply-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.apply-form__alert {
  margin: 0 0 1rem;
  padding: 12px 16px;
  border-radius: 8px;
  background: #fbe9e2;
  color: #c1512a;
  font-size: 14px;
}
/* Fields — Figma 28:1966: 60px tall, 8px radius, 30px inset, Blue 10 Fresh @50%
   fill with a Brand 30 Fresh border; active = white + action-blue border;
   error = white + #ff4000 border. Placeholder is brand blue at 30% opacity. */
.apply-field { margin-bottom: 20px; }
.apply-field input,
.apply-field select,
.apply-field textarea {
  width: 100%;
  padding: 15px 30px;
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 28px;
  color: var(--c-brand, #042e7b);
  background: rgba(232, 240, 255, 0.5);
  border: 1px solid var(--brand-30-fresh, #a9bddf);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.apply-field input::placeholder,
.apply-field textarea::placeholder { color: var(--c-brand, #042e7b); opacity: 0.3; }
.apply-field select:invalid { color: rgba(4, 46, 123, 0.3); }
.apply-field input:focus,
.apply-field select:focus,
.apply-field textarea:focus {
  background: #fff;
  border-color: var(--c-action, #3660eb);
}
.apply-field.is-error input,
.apply-field.is-error select,
.apply-field.is-error textarea {
  background: #fff;
  border-color: #ff4000;
}
.apply-field__error { display: block; margin-top: 6px; font-size: 13px; color: #ff4000; }
.apply-field--select { position: relative; }
.apply-field--select select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23042e7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 28px center;
  padding-right: 58px;
}
.apply-field--message textarea { min-height: 202px; line-height: 1.556; resize: vertical; }
/* Upload — Figma "Button/Upload": compact dark-blue 40px button, no helper text
   until a file is chosen (then the file name shows beside it). */
.apply-upload { display: inline-flex; align-items: center; gap: 16px; margin-bottom: 30px; cursor: pointer; }
.apply-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.apply-upload__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--c-brand, #042e7b);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}
.apply-upload:hover .apply-upload__btn { background: #06246a; }
.apply-upload__plus { font-size: 20px; line-height: 1; margin-top: -2px; }
.apply-upload__name { font-size: 15px; color: var(--c-brand, #042e7b); opacity: 0.7; }
.apply-upload__name:empty { display: none; }
/* Consent — Figma 28:1987: 16px box, 2px radius, brand-blue border + 12px text. */
.apply-consent { display: flex; gap: 10px; margin-bottom: 30px; cursor: pointer; max-width: 866px; }
.apply-consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.apply-consent__box {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid var(--c-brand, #042e7b);
  border-radius: 2px;
  background: #fff;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.apply-consent input:checked + .apply-consent__box {
  background: var(--c-brand, #042e7b);
  border-color: var(--c-brand, #042e7b);
}
.apply-consent input:checked + .apply-consent__box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.apply-consent input:focus-visible + .apply-consent__box { box-shadow: 0 0 0 3px rgba(54, 96, 235, 0.4); }
.apply-consent.is-error .apply-consent__box { border-color: #ff4000; }
.apply-consent__text { font-size: 12px; line-height: 19px; color: var(--c-brand, #042e7b); }
/* The submit reuses the button-040 look on a real <button>; strip UA chrome.
   NB: keep the button-040's own font-size (var(--fs-btn) = 12px) — a blanket
   `font: inherit` here would inherit 18px and blow the 50px pill up to ~75px. */
button.button-040.apply-form__submit {
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.apply-form__actions { margin-top: 0; }
.apply-thanks { max-width: 866px; margin-inline: auto; text-align: center; padding-block: clamp(2rem, 5vw, 60px); }
.apply-thanks__title { margin: 0 0 0.5em; font-size: clamp(1.75rem, 2.6vw, 34px); color: var(--c-brand, #042e7b); }
.apply-thanks__text { margin: 0 0 1.5em; font-size: var(--fs-body); line-height: 1.556; color: var(--c-brand, #042e7b); }
.apply-thanks__back { color: var(--c-action, #3660eb); text-decoration: none; font-weight: 600; }

/* ---- Gravity Forms shared form styling (Figma 28:1966 / 28:2648) -----
   Used by the careers apply form and the contact form. Gravity Forms' own CSS
   is disabled (see inc/gravity-forms.php); the theme styles the markup to match
   the design. Scoped to .form-section so no other Gravity Forms elsewhere on the
   site is affected. */
/* Contact page: "Get in touch with us" heading above the form. */
.form-section__inner { max-width: 866px; margin-inline: auto; }
.form-section__inner .gform_wrapper { max-width: none; }
.form-section__title {
  margin: 0 0 clamp(1.5rem, 3vw, 40px);
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 42px);
  line-height: 1.19;
  color: #02225e;
}
.form-section .gform_wrapper { max-width: 866px; margin-inline: auto; }
.form-section .gform_required_legend { display: none; }
.form-section .gfield--type-honeypot,
.form-section .gform_validation_container { display: none !important; }
.form-section .gform_fields { display: block; margin: 0; padding: 0; }
.form-section .gfield { margin: 0 0 20px; }
/* The checkbox field is a <fieldset> — strip its default border/padding. */
.form-section fieldset.gfield { border: 0; padding: 0; min-width: 0; }
/* Labels are visually hidden — the design uses placeholders (kept for a11y). */
.form-section .gfield_label,
.form-section legend.gfield_label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.form-section .ginput_container input:not([type="checkbox"]):not([type="file"]),
.form-section .ginput_container textarea,
.form-section .ginput_container select {
  width: 100%;
  padding: 15px 30px;
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 28px;
  color: var(--c-brand, #042e7b);
  background-color: rgba(232, 240, 255, 0.5);
  border: 1px solid var(--brand-30-fresh, #a9bddf);
  border-radius: 8px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.form-section .ginput_container input::placeholder,
.form-section .ginput_container textarea::placeholder { color: var(--c-brand, #042e7b); opacity: 0.3; }
.form-section .ginput_container input:not([type="checkbox"]):not([type="file"]):focus,
.form-section .ginput_container textarea:focus,
.form-section .ginput_container select:focus { background-color: #fff; border-color: var(--c-action, #3660eb); }
.form-section .gfield_error .ginput_container input:not([type="checkbox"]):not([type="file"]),
.form-section .gfield_error .ginput_container textarea,
.form-section .gfield_error .ginput_container select { background-color: #fff; border-color: #ff4000; }
.form-section .ginput_container_textarea textarea { min-height: 202px; line-height: 1.556; resize: vertical; }
/* Position dropdown — lists every open vacancy; styled as the design's
   "Dropdown" with a chevron on the right (Figma 28:1966). */
.form-section .ginput_container_select { position: relative; }
.form-section .ginput_container select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 58px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23042e7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 28px center;
}
/* Field spacing accents from the design (message / upload / consent). */
.form-section .gfield--type-textarea,
.form-section .gfield--type-fileupload,
.form-section .gfield--type-checkbox { margin-bottom: 30px; }
.form-section .apply-upload { margin-bottom: 0; }
/* Validation feedback */
.form-section .gform_validation_errors {
  margin: 0 0 24px; padding: 12px 16px; border: 0; border-radius: 8px;
  background: #fbe9e2; color: #c1512a; box-shadow: none;
}
.form-section .gform_validation_errors > h2,
.form-section .gform_submission_error { margin: 0; font-size: 14px; font-weight: 600; color: #c1512a; }
.form-section .gfield_validation_message,
.form-section .validation_message { margin-top: 6px; padding: 0; border: 0; background: none; font-size: 13px; color: #ff4000; }
/* Consent checkbox (single required choice) */
.form-section .ginput_container_checkbox .gfield_checkbox { display: block; }
.form-section .gchoice { display: flex; align-items: flex-start; gap: 10px; }
.form-section .gchoice input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 16px; height: 16px; margin: 2px 0 0; padding: 0; box-sizing: border-box;
  border: 1px solid var(--c-brand, #042e7b); border-radius: 2px; background: #fff;
  cursor: pointer; position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.form-section .gchoice input[type="checkbox"]:checked { background: var(--c-brand, #042e7b); border-color: var(--c-brand, #042e7b); }
.form-section .gchoice input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.form-section .gchoice input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 3px rgba(54, 96, 235, 0.4); }
.form-section .gchoice label { font-size: 12px; line-height: 19px; color: var(--c-brand, #042e7b); cursor: pointer; }
.form-section .gfield_error.gfield--type-checkbox .gchoice input[type="checkbox"] { border-color: #ff4000; }
/* Footer / submit button (button-040 injected via gform_submit_button) */
.form-section .gform_footer { margin: 0; padding: 0; display: flex; }
.form-section .gform_ajax_spinner { margin-left: 14px; }

/* ---- Careers responsive -------------------------------------------- */
@media (max-width: 900px) {
  .benefits { grid-template-columns: 1fr; row-gap: clamp(1.5rem, 4vw, 32px); }
  .benefits__aside { position: static; }
  .benefits__titles { display: block; }
  .benefits__title { position: static; opacity: 1; transform: none; margin-bottom: 0.4em; }
  .benefits__title:not(.is-active) { display: none; }
  .perks-tabs { flex-direction: column-reverse; }
  .perks-tabs__col { flex: 1 1 100%; width: 100%; }
}
@media (max-width: 720px) {
  .positions__head,
  .position { grid-template-columns: 1fr auto; row-gap: 10px; }
  .position__title { grid-column: 1 / -1; }
  .position__date { grid-column: 1; text-align: left; }
  .position__cta { grid-column: 2; grid-row: 2; }
  .positions__head { display: none; }
}