:root {
  color-scheme: light;
  --navy: #0165a7;
  --navy-dark: #014e82;
  --navy-darker: #0b2540;
  --sky: #1ca3d7;
  --sky-light: #e3f4fb;
  --ink: #0b2540;
  --offwhite: #f6f8fa;
  --navy-tint: #eaf4fb;
}

/* ---------- Page transitions (native View Transitions API) ---------- */
/* Opts every same-origin navigation into a cross-document view transition.
   Unsupported browsers (Safari/Firefox as of writing) simply navigate normally —
   this is pure progressive enhancement, no fallback JS required. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: tmpi-page-out 0.5s cubic-bezier(0.6, 0, 0.8, 0.2) both;
  }
  ::view-transition-new(root) {
    animation: tmpi-page-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

@keyframes tmpi-page-out {
  to {
    opacity: 0;
    transform: scale(0.985);
  }
}
@keyframes tmpi-page-in {
  from {
    opacity: 0;
    transform: scale(1.015);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

body {
  position: relative;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Page grid (every page) ---------- */
/* One layer the full height of the page, behind all content: a faint
   cool-grey 72px line grid at an even strength everywhere, with no patches
   or haze, so it reads as one continuous surface from the header to the
   footer. Sections are transparent and cards are opaque, so the grid lives
   in the white space around the cards. */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(11, 37, 64, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 37, 64, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center top;
}

/* ---------- Grid softened behind text ---------- */
/* Text on the white page carries a soft white halo, so the grid fades out
   around the letters instead of running through them. Anything with its own
   background switches the halo off (--text-halo: none), and controls never
   carry it. */
:root {
  --text-halo: 0 0 4px #ffffff, 0 0 10px #ffffff, 0 0 18px #ffffff, 0 0 28px #ffffff;
  --text-halo-glow: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 10px #ffffff) drop-shadow(0 0 18px #ffffff);
}
main :is(h1, h2, h3, h4, p, li, label, blockquote, figcaption) {
  text-shadow: var(--text-halo);
}
main :is(a, button, input, select, textarea, .pill-btn) {
  text-shadow: none;
}
/* Gradient text is painted by its clipped background, which a text shadow
   would cover, so it gets the same halo as a glow behind it instead. */
main :is(.text-gradient, .chapter__fact) {
  text-shadow: none;
  filter: var(--text-halo-glow);
}
.hero-card,
.page-hero__card,
.solution-card,
.cta-row,
.offer-svc,
.apply-card,
.portal-card--cta,
.engage__step,
.journey .root-cards li,
.journey .industry-grid li,
.journey .people-steps li,
.journey .purpose-card,
.journey .cert-card,
.why-card,
.svc-panel {
  --text-halo: none;
  --text-halo-glow: none;
}

/* ---------- Heading weight & tracking system ---------- */
/* The site's own bespoke headline classes (.industries-title,
   .two-paths-headline, .offer-headline, and card-title classes like
   .offer-card__title / .industry-card__label) already carry consistent
   weight + negative tracking in their own rules below — none of them use
   the Tailwind "font-display" utility class, so these selectors only
   normalize the *other* headings sitewide that were styled ad hoc with
   plain Tailwind classes (font-bold/font-extrabold, no tracking-* at all),
   which had drifted into a mix of weights with zero letter-spacing. */
h1.font-display {
  letter-spacing: -0.02em;
}
h2.font-display {
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}
h3.font-display {
  letter-spacing: -0.01em;
}

::selection {
  background-color: var(--sky);
  color: #ffffff;
}

:focus-visible {
  outline: 2.5px solid var(--navy);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Icons: self-contained sizing, independent of parent display context ---------- */
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
[data-icon] svg {
  width: 100%;
  height: 100%;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
}

/* ---------- Header: floating capsule nav ----------
   The header itself is a transparent, fixed strip; the nav inside it is a
   glass bar that hangs from the top of the screen (square top, rounded
   bottom corners), inset to the same margins (12 / 20 / 32px) and max width
   (1376px) as the hero cards, so the two line up edge to edge. Its bottom
   edge sits where the floating capsule's did (72 / 76px), keeping the gap
   above the hero card. The
   logo is tmpi-logo-solid.svg (the logo on a white plate) so the glass never
   shows through its white areas. */
[data-site-header] {
  padding: 0 12px;
  pointer-events: none;
}
.site-nav,
.site-menu {
  pointer-events: auto;
}
.site-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1376px;
  height: 72px;
  margin: 0 auto;
  padding: 0 9px 0 16px;
  border-radius: 0 0 18px 18px;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(11, 37, 64, 0.07);
  border-top: 0;
  box-shadow: 0 1px 2px rgba(11, 37, 64, 0.04), 0 14px 34px -22px rgba(11, 37, 64, 0.3);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
[data-site-header].is-scrolled .site-nav {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(11, 37, 64, 0.05), 0 20px 44px -20px rgba(11, 37, 64, 0.38);
}
[data-site-header].is-menu-open .site-nav {
  background: #ffffff;
}
@media (min-width: 640px) {
  [data-site-header] { padding: 0 20px; }
  .site-nav { height: 76px; }
}
@media (min-width: 1024px) {
  [data-site-header] { padding: 0 32px; }
  .site-nav { padding: 0 10px 0 20px; border-radius: 0 0 20px 20px; }
}

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-shrink: 1;
}
.site-nav__brand img {
  flex: none;
  height: 28px;
  width: auto;
}
.site-nav__divider {
  flex: none;
  width: 1px;
  height: 28px;
  background: rgba(11, 37, 64, 0.14);
}
.site-nav__name {
  max-width: 8.5rem;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(11, 37, 64, 0.7);
}
@media (max-width: 359px) {
  .site-nav__divider,
  .site-nav__name { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-nav__divider,
  .site-nav__name { display: none; }
}

/* Links: current page and hover use the same sky-light pill as the
   dropdown rows and the Careers role list. */
.site-nav__links {
  display: none;
  align-items: center;
  gap: 2px;
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(11, 37, 64, 0.78);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.site-nav__link:hover,
.site-nav__item:hover > .site-nav__link,
.site-nav__item:focus-within > .site-nav__link {
  background: rgba(227, 244, 251, 0.75);
  color: var(--navy);
}
.site-nav__link.is-active {
  background: var(--sky-light);
  color: var(--navy);
  font-weight: 600;
}
.site-nav__chev {
  display: inline-flex;
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}
.site-nav__chev svg { width: 100%; height: 100%; }
.site-nav__item:hover .site-nav__chev,
.site-nav__item:focus-within .site-nav__chev { transform: rotate(180deg); }

/* Dropdowns. The panel's top padding bridges the gap to the link, so the
   pointer can travel down without the menu closing. */
.site-nav__item { position: relative; }
.site-nav__panel {
  position: absolute;
  top: 100%;
  left: 50%;
  padding-top: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav__item:hover .site-nav__panel,
.site-nav__item:focus-within .site-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.site-nav__item.is-dismissed .site-nav__panel {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
}
.site-nav__item.is-dismissed .site-nav__chev { transform: none; }
.site-nav__card {
  padding: 8px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(11, 37, 64, 0.06), 0 28px 60px -28px rgba(11, 37, 64, 0.4);
}
.site-nav__card--list { width: 300px; }
.site-nav__card--mega { width: 700px; }
.site-nav__row,
.site-nav__svc {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 13px;
  transition: background-color 0.2s ease;
}
.site-nav__row {
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy-darker);
}
.site-nav__svc { padding: 11px 12px; border-radius: 14px; }
.site-nav__row:hover,
.site-nav__svc:hover,
.site-nav__row:focus-visible,
.site-nav__svc:focus-visible { background: var(--sky-light); }
.site-nav__tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--sky-light);
  color: var(--navy);
  transition: background-color 0.2s ease;
}
.site-nav__tile [data-icon] { display: grid; width: 18px; height: 18px; }
.site-nav__tile--lg { width: 40px; height: 40px; border-radius: 12px; }
.site-nav__tile--lg svg { width: 20px; height: 20px; }
.site-nav__row:hover .site-nav__tile,
.site-nav__svc:hover .site-nav__tile,
.site-nav__row:focus-visible .site-nav__tile,
.site-nav__svc:focus-visible .site-nav__tile { background: #ffffff; }
.site-nav__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.site-nav__svc-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy-darker);
}
.site-nav__svc-fit {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(11, 37, 64, 0.58);
}
.site-nav__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f2f9fd;
  font-size: 13.5px;
  color: rgba(11, 37, 64, 0.75);
}
.site-nav__foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}
.site-nav__foot a:hover { color: var(--navy-dark); }
.site-nav__foot [data-icon] { display: inline-flex; width: 15px; height: 15px; transition: transform 0.2s ease; }
.site-nav__foot a:hover [data-icon] { transform: translateX(2px); }

/* CTAs */
.site-nav__cta {
  display: none;
  align-items: center;
  gap: 8px;
  flex: none;
}
.site-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.site-nav__btn--ghost {
  color: var(--navy);
  background: #ffffff;
  border: 1px solid rgba(1, 101, 167, 0.22);
}
.site-nav__btn--ghost:hover { background: var(--sky-light); }
.site-nav__btn--solid {
  color: #ffffff;
  background: var(--navy);
  box-shadow: 0 8px 20px -10px rgba(1, 101, 167, 0.7);
}
.site-nav__btn--solid:hover { background: var(--navy-dark); }

.site-nav__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--navy-darker);
  background: #f2f9fd;
  transition: background-color 0.2s ease;
}
.site-nav__toggle:hover { background: var(--sky-light); }
.site-nav__toggle [data-icon] { display: grid; width: 22px; height: 22px; }
.site-nav__toggle [data-icon].hidden { display: none; }

@media (min-width: 1024px) {
  .site-nav__links,
  .site-nav__cta { display: flex; }
  .site-nav__toggle { display: none; }
}

/* Mobile menu: a floating sheet under the capsule, with the sub-pages as
   expandable groups and both CTAs pinned at the bottom. */
.site-menu {
  display: none;
  position: fixed;
  top: 80px;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(11, 37, 64, 0.07);
  box-shadow: 0 30px 60px -30px rgba(11, 37, 64, 0.45);
}
@media (min-width: 640px) {
  .site-menu { top: 84px; left: 20px; right: 20px; }
}
@media (max-width: 1023px) {
  .site-menu:not(.hidden) { display: flex; }
}
.site-menu__scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
}
.site-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-darker);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.2s ease;
}
.site-menu__link::-webkit-details-marker { display: none; }
@media (hover: hover) {
  .site-menu__link:hover { background: #f2f9fd; }
}
.site-menu__link.is-active {
  background: var(--sky-light);
  color: var(--navy);
}
.site-menu__group[open] .site-nav__chev { transform: rotate(180deg); }
/* The thin sky guide line nods to the site's tree motif. */
.site-menu__sub {
  display: flex;
  flex-direction: column;
  margin: 0 0 6px 24px;
  padding-left: 14px;
  border-left: 1.5px solid rgba(28, 163, 215, 0.35);
}
.site-menu__sub a {
  padding: 9px 6px;
  font-size: 14.5px;
  color: rgba(11, 37, 64, 0.75);
}
.site-menu__sub a:hover { color: var(--navy); }
.site-menu__foot {
  padding: 14px;
  border-top: 1px solid rgba(11, 37, 64, 0.07);
}
.site-menu__ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.site-menu__ctas .site-nav__btn { height: 48px; padding: 0 10px; }
.site-menu__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-top: 12px;
  font-size: 13px;
  color: rgba(11, 37, 64, 0.65);
}
.site-menu__contact a { display: inline-flex; align-items: center; gap: 6px; }
.site-menu__contact a:hover { color: var(--navy); }
.site-menu__contact [data-icon] { display: inline-flex; width: 15px; height: 15px; color: var(--sky); }

@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .site-nav__panel,
  .site-nav__chev { transition: none; }
}

/* ---------- Reveal-on-scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Carousel ---------- */
[data-carousel-track] {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
[data-carousel-track] > * {
  flex: 0 0 100%;
  width: 100%;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: #cbd7e2;
  transition: background-color 0.2s ease, width 0.2s ease;
}
.carousel-dot.is-active {
  background-color: var(--navy);
  width: 22px;
}

/* ---------- Logo marquee ---------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee-track,
.marquee.is-paused .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Accordion ---------- */
[data-accordion-panel] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
[data-accordion-item] [data-accordion-chevron] {
  transition: transform 0.3s ease;
}
[data-accordion-item].is-open [data-accordion-chevron] {
  transform: rotate(180deg);
}

/* ---------- Hero (homepage): framed brand-gradient card ---------- */
/* Layout adapted from the "Adapta" landing-page reference: a rounded navy
   card inset in a gutter that shows the page grid, the same
   surface as every .site-section below it. */
.hero-section {
  position: relative;
  padding: 92px 12px 12px;
}
@media (min-width: 640px) {
  .hero-section {
    padding: 96px 20px 20px;
  }
}
@media (min-width: 1024px) {
  .hero-section {
    padding: 96px 32px 24px;
  }
}
/* 1376px = the header's max-w-8xl (1440px) minus its px-8 padding, so the
   card's edges line up with the logo and the header CTAs. */
.hero-shell {
  max-width: 1376px;
  margin: 0 auto;
}

.hero-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "blurb" "cta" "visual" "process";
  row-gap: 24px;
  padding: 30px 22px 28px;
  border-radius: 24px;
  color: #ffffff;
  /* Deep navy like the original full-bleed hero, with a faint lift toward
     the top-right corner (no central glow/spotlight). */
  background:
    radial-gradient(55% 60% at 100% 0%, rgba(1, 101, 167, 0.3) 0%, rgba(1, 101, 167, 0) 70%),
    linear-gradient(140deg, #0b2540 0%, #0b2a49 52%, #0d3357 100%);
  box-shadow: 0 30px 60px -40px rgba(11, 37, 64, 0.75);
}
@media (min-width: 1024px) {
  .hero-card {
    /* Largest square the right column can hold without making the card
       taller than the viewport (212px = header + gutters + card padding). */
    --stage: clamp(420px, calc(100vh - 212px), 800px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
    /* Text block centred in the left column; the People in Motion card
       floats on the map (see .hero-process). */
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas:
      ".     visual"
      "head  visual"
      "blurb visual"
      "cta   visual"
      ".     visual";
    column-gap: 24px;
    row-gap: 24px;
    min-height: clamp(640px, calc(100vh - 124px), 880px);
    --card-pad: clamp(30px, 3vw, 44px);
    padding: var(--card-pad);
    border-radius: 28px;
  }
}

/* The site's constellation (tsParticles, via main.js's shared
   [data-constellation] loader), toned down so it stays behind the map. */
.hero-card__constellation {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.7;
  pointer-events: none;
}
.hero-card__constellation canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Faint grid on the lower half of the card, faded in with a mask. */
.hero-card__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 76px 64px;
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 38%, #000 78%);
  mask-image: linear-gradient(to bottom, transparent 38%, #000 78%);
}
/* Every other navy card fades its grid in toward the bottom, like the hero,
   but fainter: inner page banners, Two Paths cards, the Solutions panel and
   the credentials card use this layer; the smaller navy cards get the same
   grid from a ::before (see "Navy card grid" below); the footer has none. The
   homepage hero keeps its own grid above. */
:not(.hero-card) > .hero-card__grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 85%);
  mask-image: linear-gradient(to bottom, transparent 30%, #000 85%);
}
/* ---------- Navy card grid ---------- */
/* Navy cards without a grid layer of their own get the same fading grid,
   at a finer 36px on the small cards so it still reads as a grid. The What
   We Offer service cards and the Who We Are cards have no grid (the larger ones carry a constellation instead). */
.journey .root-cards li,
.journey .industry-grid li,
.journey .people-steps li,
.journey .purpose-card,
.offer-svc,
.why-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.why-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 15%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 15%, #000 100%);
}

.hero-card__head {
  grid-area: head;
  position: relative;
  z-index: 1;
}
.hero-card__title {
  margin: 0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(2.35rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #ffffff;
}
/* Key words: they gather from dust on load (main.js draws the dust on a
   .hero-dust canvas while the words are hidden), then shine like the Two
   Paths cards' words: a white glint sweeps across as the gradient's end
   warms from sky to white (the shared accent-glint keyframes). At rest they
   look exactly as before. */
.hero-card__title {
  position: relative;
}
.hero-card__title .accent-serif {
  background-image:
    linear-gradient(105deg, rgba(255, 255, 255, 0) 15%, #ffffff 50%, rgba(255, 255, 255, 0) 85%),
    linear-gradient(100deg, var(--sky) 10%, var(--accent-end) 90%);
  background-size: 45% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -90% 0, 0 0;
  transition: opacity 0.45s ease;
}
.hero-card__title.is-dusting .accent-serif {
  opacity: 0;
}
.hero-card__title .accent-serif.is-shining {
  animation: accent-glint 1.4s ease-in-out both;
}
.hero-dust {
  position: absolute;
  pointer-events: none;
}
/* Phones: sized to the screen so each phrase stays on one line
   ("Empowering Careers," / "Elevating Businesses."), as on desktop. The
   longer line is about 9.1em wide; 68px = the section's and card's side
   padding. */
@media (max-width: 639px) {
  .hero-card__title {
    font-size: clamp(1.6rem, calc((100vw - 68px) / 9.5), 2.35rem);
  }
}
@media (min-width: 1024px) {
  .hero-card__title {
    font-size: clamp(2.35rem, 3.6vw, 3.75rem);
  }
}

/* Italic serif accent word (Instrument Serif), the reference's signature
   touch. Sized up a little because the serif's x-height runs smaller than
   Manrope's. */
.accent-serif {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.12em;
  line-height: 0.9;
  letter-spacing: -0.01em;
}

/* Sky-to-white gradient text (the original hero's treatment of "Elevating
   Businesses"). background-clip: text only paints inside the element's box,
   and italic glyphs lean past it, so a little padding (cancelled by an equal
   negative margin) keeps the last letter and the period from being clipped. */
.text-gradient {
  background-image: linear-gradient(100deg, var(--sky) 10%, #ffffff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.12em 0.04em 0.02em;
  margin: 0 -0.12em 0 -0.02em;
}

/* Two lines on tablet/desktop: balanced wrapping below lg, and on lg+ a
   break at the clause ("...capabilities, / and put them...") with the size
   scaled so the first clause fits the text column. */
.hero-card__blurb {
  grid-area: blurb;
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 40ch;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.94);
  text-wrap: balance;
}
@media (min-width: 640px) {
  .hero-card__blurb {
    max-width: 52ch;
    font-size: 19px;
  }
}
@media (min-width: 1024px) {
  .hero-card__blurb {
    max-width: none;
    font-size: clamp(17px, 1.38vw, 20.5px);
    text-wrap: wrap;
  }
}
.accent-pill {
  display: inline-block;
  padding: 0 11px 2px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.18em;
  line-height: 1.25;
}

.hero-card__cta {
  grid-area: cta;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
@media (min-width: 1024px) {
  .hero-card__cta {
    margin-top: 14px;
  }
}
.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pill-btn--primary {
  padding: 6px 6px 6px 22px;
  background: var(--navy);
  color: #ffffff;
  box-shadow: 0 16px 30px -16px rgba(1, 101, 167, 0.9);
}
.pill-btn--primary:hover {
  background: #0b78c0;
}
.pill-btn__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--navy-darker);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.pill-btn__icon [data-icon] {
  width: 16px;
  height: 16px;
}
/* The icon circle turns to point up-right on hover, on every pill button
   and on buttons drawn inside a larger card link. */
.pill-btn:hover .pill-btn__icon,
a:hover > .pill-btn .pill-btn__icon,
a:hover .solution-card__cta .pill-btn__icon {
  transform: rotate(-45deg);
}
.pill-btn--ghost {
  padding: 13px 20px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.pill-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.7);
}
.pill-btn--light {
  padding: 13px 22px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid rgba(11, 37, 64, 0.16);
}
.pill-btn--light:hover {
  border-color: rgba(11, 37, 64, 0.34);
}
.pill-btn__ghost-icon {
  width: 16px;
  height: 16px;
}
@media (max-width: 479px) {
  .pill-btn {
    width: 100%;
    justify-content: space-between;
  }
}
/* The sitewide navy focus ring disappears on the navy card. */
.hero-card :focus-visible {
  outline-color: #ffffff;
  outline-offset: 3px;
}

/* ---------- Hero orbit visual ---------- */
/* A square stage over the 3D map: the TMPI logo sits on Metro Manila at the
   top, a "People in Motion" card cycles through TMPI's service pipeline in
   the middle (main.js ticker), and stat chips float at the left, right, and
   bottom edges (icon centres at 4% / 96% in from the stage edges). */
.hero-orbit {
  grid-area: visual;
  position: relative;
  justify-self: center;
  width: min(100%, 360px);
}
@media (min-width: 640px) {
  .hero-orbit {
    width: min(100%, 560px);
  }
}
@media (min-width: 1024px) {
  .hero-orbit {
    align-self: center;
    justify-self: end;
    width: min(100%, var(--stage));
  }
}
.hero-orbit__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  container-type: size;
}
/* TMPI HQ on Metro Manila, the hub the routes radiate from: an isometric
   office tower (the camera's 36deg tilt is close to true isometric) whose
   ground point, 93.8% down its box, sits on the anchor. Position = Manila's
   projected spot in the stage (see .ph-map); hero-map-3d.js overrides
   left/top in WebGL mode. On desktop it scales with the map (cqw of the
   stage) so it never towers over northern Luzon's callout. */
.hero-orbit__logo {
  position: absolute;
  left: 31.2%;
  top: 38.8%;
  z-index: 2;
  width: 44px;
  transform: translate(-50%, -93.8%);
  transform-origin: 50% 93.8%;
  filter: drop-shadow(0 10px 12px rgba(3, 15, 30, 0.45));
}
@media (min-width: 640px) {
  .hero-orbit__logo {
    width: 60px;
  }
}
@media (min-width: 1024px) {
  .hero-orbit__logo {
    width: clamp(54px, 9.5cqw, 76px);
  }
}
/* Dashed leader line from the HQ tower to the People in Motion card
   (its active step; drawn by hero-map-3d.js, lg+ only). It sits under the tower and the
   card, fades in once the tower has landed, and its dashes flow toward the
   card like the map's routes. */
.hero-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease 1.1s;
}
.hero-orbit.is-visible .hero-link {
  opacity: 1;
}
.hero-link__path {
  fill: none;
  stroke: rgba(168, 224, 248, 0.8);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 5 6;
  animation: hero-link-flow 1.1s linear infinite;
}
@keyframes hero-link-flow {
  to { stroke-dashoffset: -11; }
}
.hero-link__end {
  fill: #bfeaff;
  stroke: rgba(28, 163, 215, 0.35);
  stroke-width: 4;
}
.hero-link__pulse {
  fill: #ffffff;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(28, 163, 215, 0.95));
}
@media (prefers-reduced-motion: reduce) {
  .hero-link__path {
    animation: none;
  }
}
/* HQ lights up while the map shows screening and training happening
   there (steps 2 and 3 of the People in Motion card). */
.hero-orbit__logo {
  transition: filter 0.6s ease;
}
.hero-orbit[data-map-step="1"] .hero-orbit__logo,
.hero-orbit[data-map-step="2"] .hero-orbit__logo {
  filter: drop-shadow(0 10px 12px rgba(3, 15, 30, 0.45)) drop-shadow(0 0 14px rgba(28, 163, 215, 0.75));
}
.hq__building {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
/* Small sign on the tower's front, just above the podium, like entrance
   signage; nothing sticks up above the roof. */
.hq__sign {
  position: absolute;
  left: 50%;
  top: 71%;
  display: flex;
  padding: 3px 6px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(1, 101, 167, 0.18), 0 6px 14px -6px rgba(3, 15, 30, 0.7);
  transform: translate(-50%, -50%);
}
.hq__sign img {
  display: block;
  width: auto;
  height: 8px;
}
@media (min-width: 640px) {
  .hq__sign img {
    height: 9px;
  }
}
@media (min-width: 1024px) {
  .hq__sign {
    padding: 4px 7px;
  }
  .hq__sign img {
    height: clamp(9px, 1.55cqw, 12px);
  }
}

/* ---------- 3D Philippines map (hero right column) ---------- */
/* Lives inside the square .hero-orbit__stage and fits entirely within it,
   so the same geometry works at every breakpoint. The stage is a size
   container: perspective is set in cqw, so the projection scales with the
   stage and the %-positioned logo (on Manila) and stat callouts stay on
   their spots at any size. --map-tilt / --map-turn drive the 3D angle;
   pins and wall offsets counter those same angles. */
.ph-map {
  --map-tilt: 55deg;
  --map-turn: -12deg;
  position: absolute;
  left: -1.5%;
  top: -27%;
  z-index: 0;
  width: 84%;
  aspect-ratio: 1000 / 1745.5;
  pointer-events: none;
}
.ph-map__plane {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transform: perspective(420cqw) rotateX(var(--map-tilt)) rotateZ(var(--map-turn));
  transform-style: preserve-3d;
}
.ph-map__land,
.ph-map__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Extrusion: offset copies under the top face read as island thickness on
   the south-facing coasts once the plane is tilted. */
.ph-map__walls use {
  fill: #06182b;
}
.ph-map__walls use:last-child {
  fill: #0a2744;
}
.ph-map__coast-glow {
  fill: none;
  stroke: rgba(28, 163, 215, 0.28);
  stroke-width: 7;
  stroke-linejoin: round;
}
.ph-map__top {
  fill: url(#ph-land-fill);
  stroke: rgba(142, 214, 244, 0.75);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.ph-map__texture {
  fill: url(#ph-land-dots);
}

/* Routes: a dashed line from Manila to each island group, with a light
   pulse travelling out along it and a ripple at the node when it lands.
   Pulse, glow, and ripple share one period and one per-route delay (--d),
   and the ripple keyframe starts at 60% = the pulse's arrival. */
.ph-map__route {
  fill: none;
  stroke: rgba(162, 222, 247, 0.78);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 7 8;
  animation: ph-route-flow 1.4s linear infinite;
}
/* Dashes march from the hub outward (paths start at Manila), one full
   7 + 8 dash period per loop so the motion is seamless. */
@keyframes ph-route-flow {
  to { stroke-dashoffset: -15; }
}
.ph-map__pulse,
.ph-map__pulse-glow {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 13 100;
  stroke-dashoffset: 14;
  animation: ph-pulse 5s cubic-bezier(0.45, 0, 0.35, 1) var(--d, 0s) infinite;
}
.ph-map__pulse {
  stroke: #f2fbff;
  stroke-width: 3.8;
}
.ph-map__pulse-glow {
  stroke: rgba(28, 163, 215, 0.6);
  stroke-width: 13;
}
@keyframes ph-pulse {
  0% { stroke-dashoffset: 14; opacity: 0; }
  6% { opacity: 1; }
  60% { stroke-dashoffset: -100; opacity: 1; }
  66%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
.ph-map__node-dot {
  fill: #bfeaff;
  stroke: #0b2540;
  stroke-width: 2.5;
}
.ph-map__node-ring {
  fill: none;
  stroke: #8ed6f4;
  stroke-width: 2.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ph-ripple 5s ease-out var(--d, 0s) infinite;
}
@keyframes ph-ripple {
  0%, 58% { transform: scale(1); opacity: 0; }
  60% { transform: scale(1); opacity: 0.95; }
  82%, 100% { transform: scale(3.6); opacity: 0; }
}

/* Hub: TMPI HQ, Metro Manila. Its ripples spread out from under the logo. */
.ph-map__hub-core {
  fill: #1ca3d7;
  stroke: #e9f8ff;
  stroke-width: 3;
}
.ph-map__hub-ring {
  fill: none;
  stroke: rgba(142, 214, 244, 0.85);
  stroke-width: 2.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: ph-hub-ring 2.8s ease-out infinite;
}
.ph-map__hub-ring--late {
  animation-delay: 1.4s;
}
@keyframes ph-hub-ring {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(7); opacity: 0; }
}

/* Upright pins: counter-rotated so they stand up off the tilted plane. */
.ph-map__pin {
  position: absolute;
  width: 3%;
  aspect-ratio: 24 / 30;
  transform: translate(-50%, -100%) rotateZ(calc(-1 * var(--map-turn))) rotateX(calc(-1 * var(--map-tilt)));
  transform-origin: 50% 100%;
}
.ph-map__pin svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 6px 6px rgba(3, 14, 28, 0.55));
}
.ph-map__pin path {
  fill: #ffffff;
}
.ph-map__pin circle {
  fill: var(--navy);
}

/* Entrance with the rest of the orbit. */
.ph-map {
  opacity: 0;
}
.hero-orbit.is-visible .ph-map {
  animation: ph-map-in 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ph-map-in {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-map__pulse,
  .ph-map__pulse-glow,
  .ph-map__node-ring,
  .ph-map__hub-ring {
    display: none;
  }
  .ph-map__route {
    animation: none;
  }
}

/* ---------- Three.js map (progressive enhancement) ---------- */
/* hero-map-3d.bundle.js adds .is-webgl to .hero-orbit once WebGL is up:
   the SVG map above is hidden and the canvas takes over. On lg+ the stage
   then stops being a square and fills the whole right column, and the
   script positions the logo and stat callouts from projected 3D points
   (inline left/top), overriding the SVG-map percentages. */
.ph-3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ph-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-orbit.is-webgl .ph-map {
  display: none;
}
@media (min-width: 1024px) {
  .hero-orbit.is-webgl {
    align-self: stretch;
    justify-self: stretch;
    width: auto;
  }
  .hero-orbit.is-webgl .hero-orbit__stage {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
  /* Give the map more room: bleed into the card's right and bottom padding
     (the card's rounded overflow clips it) and a little into the column
     gap on the left, where nothing sits at the map's height. */
  .hero-orbit.is-webgl .ph-3d {
    left: -40px;
    right: calc(-1 * var(--card-pad));
    bottom: calc(-1 * var(--card-pad));
  }
}

/* Process card + step list: part of the map. Stacked layouts dock it right
   under the map; on lg+ it floats over the open sea in the map's top-right
   corner. The map acts out whichever step is showing (hero-map-3d.js). */
.hero-process {
  grid-area: process;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-self: center;
  width: min(100%, 420px);
  /* Tucked up toward the map's open lower edge so the two read as one. */
  margin-top: -10px;
  color: var(--ink);
}
@media (min-width: 1024px) {
  .hero-process {
    grid-area: visual;
    z-index: 4;
    margin-top: 0;
    align-self: start;
    justify-self: end;
    /* Narrower on small laptops so it clears the 20+ callout over Laoag. */
    width: clamp(250px, 23vw, 300px);
  }
  .hero-process .hero-step {
    font-size: clamp(12.5px, 1.05vw, 13.5px);
  }
}
.hero-process__card {
  padding: 12px 14px 13px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 36px -20px rgba(11, 37, 64, 0.6);
}
.hero-process__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-process__badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--sky));
  color: #ffffff;
}
.hero-process__badge svg {
  width: 15px;
  height: 15px;
}
.hero-process__title {
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hero-process__count {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(11, 37, 64, 0.45);
  font-variant-numeric: tabular-nums;
}
.hero-process__progress {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}
.hero-process__seg {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hero-process__bar {
  position: relative;
  flex: 1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6edf4;
}
.hero-process__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s ease;
}
.hero-process__seg.is-done .hero-process__bar::before {
  transform: scaleX(1);
}
.hero-process__seg.is-active .hero-process__bar::before {
  background: var(--sky);
  transform: scaleX(0.55);
  transition: none;
}
.hero-process.is-running .hero-process__seg.is-active .hero-process__bar::before {
  animation: hero-seg-fill var(--hero-step-ms, 2800ms) linear forwards;
}
@keyframes hero-seg-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.hero-process__tick {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #e6edf4;
  color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.hero-process__tick svg {
  width: 8px;
  height: 8px;
  stroke-width: 3.2;
}
.hero-process__seg.is-done .hero-process__tick {
  background: var(--navy);
  color: #ffffff;
}

/* Step list: two visible slots (current on top, previous below). Items
   move between slots by class so CSS transitions do the motion. */
.hero-process__list {
  position: relative;
  height: 96px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Clip only the top edge so incoming steps emerge from the gap under the
     progress card instead of sliding over it; sides/bottom keep shadows. */
  clip-path: inset(-3px -48px -56px -48px);
}
.hero-step {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 12px 0 8px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 14px 30px -20px rgba(11, 37, 64, 0.6);
  font-size: 13.5px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(-26px) scale(0.97);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, box-shadow 0.4s ease;
}
.hero-step.is-slot-0 {
  opacity: 1;
  transform: none;
  box-shadow: 0 0 0 1.5px rgba(28, 163, 215, 0.55), 0 14px 30px -18px rgba(11, 37, 64, 0.6);
}
.hero-step.is-slot-1 {
  opacity: 1;
  transform: translateY(52px);
}
.hero-step.is-exit {
  opacity: 0;
  transform: translateY(84px) scale(0.95);
}
.hero-step__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--sky-light);
  color: var(--navy);
}
.hero-step__icon svg {
  width: 15px;
  height: 15px;
}
.hero-step__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 479px) {
  .hero-step {
    gap: 8px;
    padding: 0 10px 0 7px;
    font-size: 12.5px;
  }
}
.hero-step__status {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: auto;
}
.hero-step__status svg {
  width: 14px;
  height: 14px;
  color: var(--navy);
  stroke-width: 2.6;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hero-step.is-slot-1 .hero-step__status svg,
.hero-step.is-exit .hero-step__status svg {
  opacity: 1;
}
.hero-step__pulse {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sky);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hero-step.is-slot-0 .hero-step__pulse {
  opacity: 1;
  animation: hero-pulse 1.4s ease-out infinite;
}
@keyframes hero-pulse {
  0% { box-shadow: 0 0 0 0 rgba(28, 163, 215, 0.55); }
  100% { box-shadow: 0 0 0 8px rgba(28, 163, 215, 0); }
}

/* ---------- Hero stat counters ---------- */
/* White callouts standing on Luzon, the Visayas and Mindanao at every
   size, each floating above its anchor point (--x/--y, % of the square
   stage; hero-map-3d.js overrides left/top with the projected point in
   WebGL mode) on a stem that ends in a glowing dot on the map. --shift
   slides a callout sideways off its stem where it would crowd an edge or
   the HQ tower. Phones get a compact pill without the icon. */
.hero-stats {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.hero-stat {
  --stem: 14px;
  --shift: 0px;
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 16px 32px -18px rgba(3, 14, 28, 0.8);
  color: var(--ink);
  white-space: nowrap;
  transform: translate(calc(-50% + var(--shift)), calc(-100% - var(--stem)));
  pointer-events: auto;
}
.hero-stat__icon {
  display: none;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sky-light);
  color: var(--navy);
}
.hero-stat__icon svg {
  width: 17px;
  height: 17px;
}
.hero-stat__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-stat__value {
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.hero-stat__plus {
  color: var(--sky);
}
.hero-stat__label {
  margin-top: 1px;
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.25;
  color: rgba(11, 37, 64, 0.62);
}
@media (min-width: 640px) {
  .hero-stat {
    --stem: clamp(24px, 6cqw, 44px);
    padding: 6px 18px 6px 6px;
  }
  .hero-stat__icon {
    display: grid;
  }
  .hero-stat__value {
    font-size: 19px;
  }
  .hero-stat__label {
    margin-top: 2px;
    font-size: 11.5px;
  }
}
/* Stem down to the anchor, and the glowing dot on the map itself. */
.hero-stat::before,
.hero-stat::after {
  content: "";
  position: absolute;
  left: calc(50% - var(--shift));
  pointer-events: none;
}
.hero-stat::before {
  top: 100%;
  width: 1.5px;
  height: var(--stem);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(142, 214, 244, 0.35));
  transform: translateX(-50%);
}
.hero-stat::after {
  top: calc(100% + var(--stem));
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d6f1ff;
  box-shadow: 0 0 0 3px rgba(28, 163, 215, 0.3), 0 0 12px rgba(28, 163, 215, 0.9);
  transform: translate(-50%, -50%);
}
@media (min-width: 640px) {
  .hero-stat::after {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 4px rgba(28, 163, 215, 0.3), 0 0 16px rgba(28, 163, 215, 0.9);
  }
}
/* Phones: the map is small, so the callouts are re-seated. Luzon's gets a
   longer stem and slides left, off the HQ tower; the Visayas one nudges
   right, clear of the tower's podium; Mindanao's hangs below its anchor
   (stem pointing up) so it doesn't sit on the Visayas dot. */
@media (max-width: 639px) {
  .hero-stat--luzon {
    --stem: 24px;
    --shift: -24px;
  }
  .hero-stat--visayas {
    --shift: 8px;
  }
  .hero-stat--mindanao {
    --shift: -8px;
    transform: translate(calc(-50% + var(--shift)), var(--stem));
  }
  .hero-stat--mindanao::before {
    top: auto;
    bottom: 100%;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(142, 214, 244, 0.35));
  }
  .hero-stat--mindanao::after {
    top: auto;
    bottom: calc(100% + var(--stem));
    transform: translate(-50%, 50%);
  }
}
/* Anchor points (% of the stage) for the SVG fallback map: north Luzon,
   Cebu, and southern Mindanao. Re-measure if the map's position, size, or
   angles change. */
.hero-stat--luzon {
  --x: 26.4%;
  --y: 20.9%;
}
.hero-stat--visayas {
  --x: 64%;
  --y: 57.4%;
}
.hero-stat--mindanao {
  --x: 82.4%;
  --y: 77.3%;
}

/* Entrance, triggered when the reveal system adds .is-visible to
   .hero-orbit. Uses the individual `scale`/`translate`
   properties so the positioning `transform`s above stay intact. */
.hero-orbit__logo,
.hero-stat {
  opacity: 0;
}
.hero-orbit.is-visible .hero-orbit__logo {
  animation: hero-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}
.hero-orbit.is-visible .hero-stat {
  animation: hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-orbit.is-visible .hero-stat:nth-child(1) { animation-delay: 0.8s; }
.hero-orbit.is-visible .hero-stat:nth-child(2) { animation-delay: 0.92s; }
.hero-orbit.is-visible .hero-stat:nth-child(3) { animation-delay: 1.04s; }
@keyframes hero-pop {
  from { opacity: 0; scale: 0.7; }
  to { opacity: 1; scale: 1; }
}
@keyframes hero-rise {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

/* ---------- Soft gradient blobs ---------- */
.bg-blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
}

/* ---------- CTA arrow nudge ---------- */
.arrow-nudge {
  animation: arrow-nudge 2s ease-in-out infinite;
}
@keyframes arrow-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(4px); }
  75% { transform: translateX(-4px); }
}

/* ---------- Industry icon hover animations (SVG "loop" motion in place of video) ---------- */
.icon-anim-group {
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes icon-dash-flow {
  from { stroke-dashoffset: 40; }
  to { stroke-dashoffset: 0; }
}
.icon-pulse-line {
  stroke-dasharray: 6 4;
}
.group:hover .icon-pulse-line {
  animation: icon-dash-flow 1s linear infinite;
}
.group:hover .icon-chart-line {
  animation: icon-dash-flow 1.4s linear infinite;
}
@keyframes icon-box-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(-2deg); }
}
.group:hover .icon-box-bounce {
  animation: icon-box-bounce 1.3s ease-in-out infinite;
}
@keyframes icon-shine-sweep {
  0% { transform: translateX(-16px); opacity: 0; }
  35% { opacity: 0.9; }
  70% { opacity: 0; }
  100% { transform: translateX(16px); opacity: 0; }
}
.icon-shine {
  transform-box: fill-box;
  transform-origin: center;
}
.group:hover .icon-shine {
  animation: icon-shine-sweep 1.6s ease-in-out infinite;
}
@keyframes icon-bubble-rise {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  90% { opacity: 0; }
  100% { transform: translateY(-20px); opacity: 0; }
}
.icon-bubble {
  transform-box: fill-box;
  transform-origin: center;
}
.group:hover .icon-bubble {
  animation: icon-bubble-rise 1.8s ease-in infinite;
}
@keyframes icon-sway {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
.icon-sway {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.group:hover .icon-sway {
  animation: icon-sway 1.6s ease-in-out infinite;
}
.icon-sway-top {
  transform-box: fill-box;
  transform-origin: 50% 0%;
}
.group:hover .icon-sway-top {
  animation: icon-sway 1.6s ease-in-out infinite;
}
@keyframes icon-ripple {
  0% { transform: scale(0.6); opacity: 0.9; }
  70% { opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
.icon-ripple {
  transform-box: fill-box;
  transform-origin: center;
}
.group:hover .icon-ripple {
  animation: icon-ripple 1.6s ease-out infinite;
}
@keyframes icon-knob-slide {
  0%, 100% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
}
.icon-knob {
  transform-box: fill-box;
  transform-origin: center;
}
.group:hover .icon-knob {
  animation: icon-knob-slide 1.4s ease-in-out infinite;
}

/* ---------- Card hover (zoom, not lift) ---------- */
/* No transform on the card itself — see .two-paths-card__frame for why:
   moving the same box :hover is keyed off of shrinks its hit area during
   the transition and can shake. The zoom happens on the icon badge inside
   instead. */
.card-lift {
  transition: box-shadow 0.35s ease;
}
.card-lift:hover {
  box-shadow: 0 20px 40px -18px rgba(11, 37, 64, 0.25);
}
.card-lift > [data-icon] {
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card-lift:hover > [data-icon] {
  transform: scale(1.1);
}

/* ---------- Button press feedback ---------- */
.btn-press {
  transition-property: color, background-color, border-color, box-shadow, transform !important;
  transition-duration: 0.15s !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-press:active {
  transform: scale(0.97);
}

/* ---------- Sitewide embossed pill shadow ---------- */
/* Applied to every pill-shaped element (Tailwind's rounded-full) — CTA
   buttons, header/footer buttons, marquee pause toggle, carousel arrows.
   A top inset highlight + bottom inset shadow on top of the outer lift so
   the pill reads as a raised/embossed surface rather than a flat shape with
   a shadow underneath it (tried first on the Hero, now sitewide). !important
   because the Tailwind CDN script injects its own stylesheet at runtime, so
   load order relative to this file isn't guaranteed; matches the same
   override approach .btn-press already uses above. */
.rounded-full {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -2px 3px rgba(1, 37, 64, 0.25),
    0 6px 16px -6px rgba(1, 101, 167, 0.35) !important;
}

/* ---------- Live pulse dot ---------- */
.pulse-dot {
  position: relative;
  display: inline-flex;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: currentColor;
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: currentColor;
  animation: pulse-dot-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pulse-dot-ping {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  75%, 100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* ---------- Count-up stat ---------- */
[data-count-to] {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Industries Served section
   Ported from design handoff "Industries Served v3".
   Per-card variables (motif offsets, animation delays) are set in the markup;
   everything else lives here.
   ========================================================================== */

@keyframes ind-rise-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ind-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ind-draw-line {
  from {
    stroke-dashoffset: 640;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes ind-sweep {
  0% {
    transform: translateX(-120%);
  }
  55%, 100% {
    transform: translateX(220%);
  }
}
/* Keeps the CTA gloss skewed while it travels — a bare translate would drop the skew. */
@keyframes ind-gloss-sweep {
  0% {
    transform: translateX(-120%) skewX(-18deg);
  }
  55%, 100% {
    transform: translateX(220%) skewX(-18deg);
  }
}
@keyframes ind-pulse-dot {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}
@keyframes ind-arrow-nudge {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(6px);
  }
}

.industries-section {
  position: relative;
  overflow: hidden;
  background: transparent;
  padding: clamp(56px, 7vw, 104px) clamp(20px, 4vw, 76px) clamp(64px, 8vw, 116px);
}
.industries-section__inner {
  position: relative;
  max-width: 1560px;
  margin: 0 auto;
}

/* Entrance: replace the site-wide transition-based reveal with the spec's
   riseIn animation. `backwards` (not `both`) so the finished animation does not
   pin `transform` and block the card hover lift. */
.industries-section [data-reveal] {
  opacity: 0;
  transform: none;
  transition: none;
}
.industries-section [data-reveal].is-visible {
  opacity: 1;
  animation: ind-rise-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) var(--ind-delay, 0s) backwards;
}
.industries-section .eyebrow-badge[data-reveal].is-visible {
  animation-name: ind-fade-in;
}
.industries-section .industries-title[data-reveal].is-visible,
.industries-section .industries-subhead[data-reveal].is-visible {
  animation-duration: 1s;
}

.eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 8px 16px 8px 12px;
  border: 1px solid rgba(28, 163, 215, 0.32);
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -2px 3px rgba(1, 37, 64, 0.25),
    0 6px 16px -6px rgba(1, 101, 167, 0.35);
}
.eyebrow-badge__dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sky);
}
.eyebrow-badge.is-visible .eyebrow-badge__dot {
  animation: ind-pulse-dot 2.6s ease-in-out infinite;
}
.eyebrow-badge__text {
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}

.industries-title {
  margin: 0 0 18px;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-wrap: pretty;
}
.industries-subhead {
  margin: 0 0 clamp(40px, 5vw, 68px);
  max-width: 560px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

/* 1240px cap holds the track count at 4 so the CTA lands as the 7th cell of a
   4 x 2 grid; without it auto-fit reaches 5 tracks on wide screens. */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 20px;
  max-width: 1240px;
}

.industry-card,
.industries-cta {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  padding: 28px 26px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 44px;
}
.industry-card {
  background: #ffffff;
  border: 1px solid #e4ebf2;
  box-shadow: 0 14px 32px -20px rgba(1, 101, 167, 0.45);
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.industry-card:hover {
  border-color: var(--sky);
  box-shadow: 0 26px 46px -24px rgba(1, 101, 167, 0.4);
}

.industry-card__sweep {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sky), transparent);
}
.industry-card.is-visible .industry-card__sweep {
  animation: ind-sweep 6s ease-in-out var(--sweep-delay, 0.4s) infinite;
}

.industry-card__motif {
  position: absolute;
  right: var(--motif-right, -16px);
  bottom: var(--motif-bottom, -10px);
  width: var(--motif-width, 200px);
  height: var(--motif-height, 140px);
  color: rgba(1, 101, 167, 0.12);
  pointer-events: none;
}
.industry-card.is-visible .industry-card__draw {
  animation: ind-draw-line 2.6s ease-out var(--draw-delay, 0.5s) both;
}
.industry-card.is-visible .industry-card__pulse {
  animation: ind-pulse-dot var(--pulse-duration, 3s) ease-in-out var(--pulse-delay, 1.6s) infinite;
}
.industry-card.is-visible .industry-card__window {
  animation: ind-fade-in 1s ease var(--window-delay, 2s) both;
}

.industry-card__tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 10px;
  background: #edf3f9;
  border: 1px solid #e0e9f2;
  flex: none;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.4s ease,
    border-color 0.4s ease;
}
.industry-card:hover .industry-card__tile {
  transform: scale(1.08);
  background: var(--sky-light);
  border-color: var(--sky);
}
.industry-card__tile svg {
  width: 26px;
  height: 26px;
}
.industry-card__label {
  position: relative;
  margin: 0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
  transition: color 0.4s ease;
}
.industry-card:hover .industry-card__label {
  color: var(--sky);
}

.industries-cta {
  background: linear-gradient(128deg, #0165a7 0%, #1077b8 50%, #1ca3d7 100%);
  box-shadow: 0 20px 44px -24px rgba(1, 101, 167, 0.6);
  transition: box-shadow 0.5s ease;
}
.industries-cta:hover {
  box-shadow: 0 34px 60px -26px rgba(1, 101, 167, 0.65);
}
.industries-cta__title {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.industries-cta:hover .industries-cta__title {
  transform: scale(1.04);
}
.industries-cta__gloss {
  position: absolute;
  top: -30%;
  left: -20%;
  width: 40%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-18deg);
}
.industries-cta.is-visible .industries-cta__gloss {
  animation: ind-gloss-sweep 5.5s ease-in-out 1.2s infinite;
}
.industries-cta__title {
  position: relative;
  margin: 0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.industries-cta__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
}
.industries-cta__link svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.industries-cta.is-visible .industries-cta__link svg {
  animation: ind-arrow-nudge 2.4s ease-in-out infinite;
}

/* Section-scoped reduced-motion guard (the site-wide one still applies too). */
@media (prefers-reduced-motion: reduce) {
  .industries-section *,
  .industries-section *::before,
  .industries-section *::after {
    animation: none !important;
    transition: none !important;
  }
  .industries-section [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   White-section grid background
   Same masked line-grid texture as the Industries Served section, applied
   only to plain white-background sections (not the hero, not offwhite/navy
   sections, and not Industries Served itself, which has its own).
   ========================================================================== */
.section-grid-bg {
  position: absolute;
  inset: 0;
  /* Negative so it sits behind this section's own in-flow content. Relies on
     the :has() rule below to give the parent section its own stacking
     context — otherwise a bare `position:relative` parent doesn't contain
     z-index:-1, and it falls all the way back to the root stacking context,
     landing underneath the sitewide fixed .smoke-bg layer and disappearing
     completely (found while making this section's grid more visible: it was
     actually invisible everywhere, not just faint). */
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(1, 101, 167, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1, 101, 167, 0.08) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(65% 55% at 50% 15%, #000 0%, transparent 76%);
  mask-image: radial-gradient(65% 55% at 50% 15%, #000 0%, transparent 76%);
}
/* Contains the negative z-index above to this section instead of the root
   stacking context. Fixes every current and future .section-grid-bg use in
   one place, with no markup changes required. */
section:has(> .section-grid-bg) {
  isolation: isolate;
}

/* ==========================================================================
   Sitewide ambient smoke wash
   A single fixed layer of soft brand-color gradients, pinned to the viewport
   rather than the page. Sections scroll past/through it, so the atmosphere
   reads as one continuous thing instead of resetting at each page break.
   Placed as the last element in <body> with no z-index: it naturally paints
   above normal in-flow content but stays under anything with an explicit
   z-index (the fixed header, hero controls, mobile nav), so it never
   competes with a click target — pointer-events is also off as a backstop.
   ========================================================================== */
.smoke-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(50% 40% at 12% 12%, rgba(1, 101, 167, 0.45) 0%, transparent 70%),
    radial-gradient(55% 45% at 88% 28%, rgba(28, 163, 215, 0.4) 0%, transparent 70%),
    radial-gradient(60% 50% at 50% 95%, rgba(1, 101, 167, 0.35) 0%, transparent 70%);
}

/* ==========================================================================
   Site sections (Adapta system)
   Every section below a hero, on every page, shares one white surface, one shell whose
   edges line up with the hero card, one heading style carrying a single
   italic serif accent word, and the hero's pill buttons. Light panels use
   --offwhite; brand-blue cards are reserved for the moments that should
   stand out (the lead service and the testimonials).
   ========================================================================== */
/* No background of its own (the body is white), so a card's shadow can
   spill into the next section instead of being painted over by it. */
.site-section {
  position: relative;
  padding: clamp(36px, 4.6vw, 64px) 20px;
}
@media (min-width: 1024px) {
  .site-section {
    padding-inline: 32px;
  }
}
.site-shell {
  max-width: 1376px;
  margin: 0 auto;
}

.section-title {
  margin: 0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 1.25rem + 2.3vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}
/* Navy-to-sky version of the hero's gradient accent, for white sections. */
.text-gradient--ink {
  background-image: linear-gradient(100deg, var(--navy) 5%, var(--sky) 95%);
}

/* The section right after the homepage hero gets extra room above it. */
.hero-section + .site-section {
  padding-top: clamp(64px, 8vw, 112px);
}

/* ---------- Two Paths ---------- */
.two-paths-headline {
  max-width: 17ch;
  margin-bottom: clamp(32px, 4vw, 56px);
}
/* Side by side at every width, so both paths show at once (phones get
   compact tiles; see the end of the Solution card block). */
.two-paths-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 768px) {
  .two-paths-grid {
    gap: 16px;
  }
}
/* Framed photo on top, content below, on the hero card's deep navy with
   its faint lower grid and a contained constellation (the same
   .hero-card__constellation / .hero-card__grid layers, so the two stay in
   step). isolation keeps those z-index:-1 layers above the card's own
   background. */
.solution-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 24px;
  color: #ffffff;
  background:
    radial-gradient(55% 60% at 100% 0%, rgba(1, 101, 167, 0.3) 0%, rgba(1, 101, 167, 0) 70%),
    linear-gradient(140deg, #0b2540 0%, #0b2a49 52%, #0d3357 100%);
  box-shadow: 0 30px 60px -40px rgba(11, 37, 64, 0.75);
  transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.solution-card:hover {
  box-shadow: 0 40px 70px -36px rgba(11, 37, 64, 0.85);
}
.solution-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--sky) 100%);
}
.solution-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.solution-card__photo--candidate {
  object-position: center 20%;
}
.solution-card__photo--corporate {
  object-position: center 15%;
}
.solution-card:hover .solution-card__photo {
  transform: scale(1.05);
}
.solution-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px -10px rgba(11, 37, 64, 0.5);
}
.solution-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 14px 14px;
}
@media (min-width: 1024px) {
  .solution-card__body {
    gap: 20px;
    padding: 28px 22px 22px;
  }
}
.solution-card__title {
  margin: 0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 1.1rem + 0.7vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #ffffff;
}
/* The key word ("Career", "Business") reads as plain title text at rest and,
   while the card is hovered or focused, shatters into particles that re-form
   as the italic serif gradient word, then back when it's left. main.js
   samples both copies of the word into particles and animates them on a
   canvas (.morph-word__canvas) that only shows while they move, and glides
   the word's width, so " in Motion" moves smoothly. Once the serif word
   settles, a white glint sweeps across it and its end colour warms from sky
   to white (--accent-end, animatable via @property). */
@property --accent-end {
  syntax: "<color>";
  inherits: false;
  initial-value: #ffffff;
}
.morph-word {
  position: relative;
  display: inline-grid;
  font-style: normal;
  white-space: nowrap;
}
.morph-word__canvas {
  position: absolute;
  left: -48px; /* PAD in main.js */
  top: -48px;
  visibility: hidden;
  pointer-events: none;
}
.morph-word__from,
.morph-word__to {
  grid-area: 1 / 1;
  justify-self: start;
  align-self: baseline;
  width: max-content;
}
.morph-word__to {
  --accent-end: #1ca3d7;
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.12em;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: transparent;
  background-image:
    linear-gradient(105deg, rgba(255, 255, 255, 0) 15%, #ffffff 50%, rgba(255, 255, 255, 0) 85%),
    linear-gradient(100deg, var(--sky) 10%, var(--accent-end) 90%);
  background-size: 45% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -90% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  /* Room for the italic's overhang, cancelled by an equal negative margin. */
  padding: 0 0.12em 0.04em 0.02em;
  margin: 0 -0.12em 0 -0.02em;
  opacity: 0;
}
.morph-word.is-lit .morph-word__to {
  animation: accent-glint 1.3s ease-in-out both;
}
/* Without main.js: a plain swap on hover. */
.solution-card:hover .morph-word:not(.is-ready) .morph-word__from,
.solution-card:focus-visible .morph-word:not(.is-ready) .morph-word__from {
  opacity: 0;
}
.solution-card:hover .morph-word:not(.is-ready) .morph-word__to,
.solution-card:focus-visible .morph-word:not(.is-ready) .morph-word__to {
  opacity: 1;
}
@keyframes accent-glint {
  0% {
    background-position: -90% 0, 0 0;
    --accent-end: #1ca3d7;
  }
  60% {
    --accent-end: #1ca3d7;
  }
  75% {
    background-position: 190% 0, 0 0;
  }
  100% {
    background-position: 190% 0, 0 0;
    --accent-end: #ffffff;
  }
}
@media (prefers-reduced-motion: reduce) {
  .morph-word__to {
    --accent-end: #ffffff;
  }
  .morph-word.is-lit .morph-word__to {
    animation: none;
  }
}
/* One check item per line, left-aligned (Two Paths cards and What We
   Offer's service rows). */
.solution-card__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.solution-card__list-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(11, 37, 64, 0.08);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.solution-card__check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sky-light);
  color: var(--navy);
}
.solution-card__check [data-icon] {
  width: 12px;
  height: 12px;
}
.solution-card__check svg {
  stroke-width: 2.4;
}
.solution-card__cta {
  margin-top: auto;
}
/* On the dark cards the checklist chips are glass, and invert to solid
   white with ink text and a navy check while the card is hovered or
   focused, one chip after another. Scoped to the card because What We
   Offer's light service rows reuse the same chips. */
.solution-card .solution-card__list-item {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
.solution-card .solution-card__check {
  background: rgba(28, 163, 215, 0.2);
  color: var(--sky);
  transition: background-color 0.35s ease, color 0.35s ease;
}
.solution-card .solution-card__list-item:nth-child(2),
.solution-card .solution-card__list-item:nth-child(2) .solution-card__check {
  transition-delay: 60ms;
}
.solution-card .solution-card__list-item:nth-child(3),
.solution-card .solution-card__list-item:nth-child(3) .solution-card__check {
  transition-delay: 120ms;
}
.solution-card:hover .solution-card__list-item,
.solution-card:focus-visible .solution-card__list-item {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--ink);
  box-shadow: 0 10px 22px -16px rgba(3, 14, 28, 0.9);
}
.solution-card:hover .solution-card__check,
.solution-card:focus-visible .solution-card__check {
  background: var(--navy);
  color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
  .solution-card .solution-card__list-item,
  .solution-card .solution-card__check {
    transition: none;
  }
}
.solution-card__media,
.solution-card__body {
  position: relative;
  z-index: 1;
}
/* Below 768px the two cards share the row, so the button goes full width
   and its label may wrap (the arrow circle drops out; the whole card is
   the tap target). */
@media (max-width: 767px) {
  .solution-card__cta.pill-btn {
    align-self: stretch;
    justify-content: center;
    min-height: 44px;
    padding: 7px 12px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
  .solution-card__cta .pill-btn__icon {
    display: none;
  }
}
/* Phones: compact tiles that fit a ~150px column: squarer photo, smaller
   badge and title, and full-width chips whose text may wrap. */
@media (max-width: 639px) {
  .solution-card {
    padding: 6px;
    border-radius: 18px;
  }
  .solution-card__media {
    aspect-ratio: 1;
    border-radius: 13px;
  }
  .solution-card__badge {
    top: 7px;
    left: 7px;
    padding: 5px 8px;
    font-size: 10px;
  }
  .solution-card__body {
    gap: 12px;
    padding: 14px 4px 4px;
  }
  .solution-card__title {
    font-size: clamp(13.5px, 3.6vw, 18px);
    line-height: 1.25;
  }
  .solution-card__list {
    align-self: stretch;
    align-items: stretch;
    gap: 6px;
  }
  .solution-card .solution-card__list-item {
    align-items: flex-start;
    gap: 6px;
    padding: 5px 9px 5px 5px;
    border-radius: 12px;
    font-size: 11.5px;
    line-height: 1.3;
  }
  .solution-card .solution-card__check {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
  }
  .solution-card .solution-card__check [data-icon] {
    width: 9px;
    height: 9px;
  }
  .solution-card__cta.pill-btn {
    padding: 7px 8px;
    font-size: 12px;
  }
}
.solution-card:hover .pill-btn--primary {
  background: #0b78c0;
}

/* ---------- What We Offer: bento grid ---------- */
/* Wide desktop (1200px+) is 4 columns x 3 rows: the blue feature card
   takes the top-left 2x2, six service cards fill the rest, and the dark
   "See all services" card closes the bottom-right. Below that it is 2
   columns with the feature and closing cards spanning the full width (4
   columns get too narrow for the descriptions), and phones get 1 column. */
.svc-title {
  max-width: 22ch;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.svc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
@media (min-width: 640px) {
  .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .svc-card--feature,
  .svc-card--cta {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1200px) {
  .svc-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(232px, auto);
    gap: 16px;
  }
  .svc-card--feature {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
  }
  .svc-card--cta {
    grid-column: 3 / span 2;
  }
}
.svc-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: 22px;
  border-radius: 24px;
  background-color: var(--offwhite);
  border: 1px solid rgba(11, 37, 64, 0.06);
  color: var(--ink);
  transition: background-color 0.35s ease, border-color 0.35s ease,
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 640px) {
  .svc-card {
    gap: 32px;
    min-height: 210px;
  }
}
.svc-card:hover {
  background-color: #ffffff;
  border-color: rgba(1, 101, 167, 0.16);
  box-shadow: 0 26px 50px -34px rgba(1, 101, 167, 0.55);
}
.svc-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(11, 37, 64, 0.04), 0 10px 20px -14px rgba(11, 37, 64, 0.45);
}
.svc-card__icon svg {
  width: 24px;
  height: 24px;
}
/* AI CERTs: wordmark over the partner badge instead of a square icon. */
.svc-card__icon--logos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: auto;
  height: auto;
  align-self: flex-start;
  padding: 10px 12px;
  border-radius: 14px;
}
.svc-card__icon--logos .offer-card__partner-logo {
  display: block;
  width: auto;
  height: 14px;
}
.svc-card__icon--logos .offer-card__partner-badge {
  display: block;
  width: auto;
  height: 34px;
}
.svc-card__arrow {
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(11, 37, 64, 0.14);
  color: var(--ink);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.svc-card__arrow [data-icon] {
  width: 16px;
  height: 16px;
}
.svc-card:hover .svc-card__arrow {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
}
.svc-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.svc-card__title {
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.svc-card__desc {
  max-width: 44ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(11, 37, 64, 0.66);
}

/* Lead service: brand-blue card with its megaphone redrawn as line art. */
.svc-card--feature {
  min-height: 280px;
  padding: 26px;
  border-color: transparent;
  color: #ffffff;
  background-image:
    radial-gradient(80% 70% at 100% 0%, rgba(28, 163, 215, 0.6) 0%, rgba(28, 163, 215, 0) 70%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
}
.svc-card--feature:hover {
  border-color: transparent;
  box-shadow: 0 34px 64px -34px rgba(1, 101, 167, 0.85);
}
@media (min-width: 1024px) {
  .svc-card--feature {
    padding: 32px;
  }
}
/* Sits in the upper right, clear of the title (bottom left) and the arrow
   button (top right corner). */
.svc-card__art {
  position: absolute;
  z-index: -1;
  top: 12%;
  right: 11%;
  width: min(50%, 340px);
  height: auto;
  color: rgba(255, 255, 255, 0.13);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc-card--feature:hover .svc-card__art {
  transform: translate(-6px, -6px) scale(1.03);
}
.svc-card--feature .svc-card__title {
  max-width: 16ch;
  font-size: clamp(24px, 1.1rem + 1.2vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #ffffff;
}
.svc-card--feature .svc-card__desc {
  max-width: 34ch;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
}
.svc-card--feature .svc-card__arrow {
  top: 26px;
  right: 26px;
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}
@media (min-width: 1024px) {
  .svc-card--feature .svc-card__arrow {
    top: 32px;
    right: 32px;
  }
}
.svc-card--feature:hover .svc-card__arrow {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--navy);
}

/* Closing card: dark navy, text left and a sky arrow button right. */
.svc-card--cta {
  flex-direction: row;
  align-items: flex-end;
  gap: 20px;
  min-height: 0;
  border-color: transparent;
  background-color: var(--navy-darker);
  color: #ffffff;
}
.svc-card--cta:hover {
  border-color: transparent;
  background-color: #0e3052;
  box-shadow: 0 26px 50px -30px rgba(11, 37, 64, 0.8);
}
.svc-card--cta .svc-card__title {
  font-size: clamp(22px, 1.05rem + 0.8vw, 30px);
  letter-spacing: -0.03em;
  color: #ffffff;
}
.svc-card--cta .svc-card__desc {
  color: rgba(255, 255, 255, 0.62);
}
.svc-card__go {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sky);
  color: #ffffff;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}
.svc-card__go [data-icon] {
  width: 20px;
  height: 20px;
}
.svc-card--cta:hover .svc-card__go {
  background: #37b3e2;
  transform: rotate(-45deg);
}
.svc-card:focus-visible,
.solution-card:focus-visible {
  outline-offset: 4px;
  border-radius: 24px;
}

/* Navy panel: the section sits on the hero card's deep navy (faint grid,
   contained constellation). Every service card, the larger Medical
   Marketing card included, turns to glass and flips to white on hover;
   the closing card turns white so the call to action still stands out. */
.svc-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 30px 14px 14px;
  border-radius: 24px;
  color: #ffffff;
  background:
    radial-gradient(55% 60% at 100% 0%, rgba(1, 101, 167, 0.3) 0%, rgba(1, 101, 167, 0) 70%),
    linear-gradient(140deg, #0b2540 0%, #0b2a49 52%, #0d3357 100%);
  box-shadow: 0 30px 60px -40px rgba(11, 37, 64, 0.75);
}
@media (min-width: 640px) {
  .svc-panel {
    padding: 40px 24px 24px;
  }
}
@media (min-width: 1024px) {
  .svc-panel {
    padding: clamp(40px, 4vw, 56px);
    border-radius: 28px;
  }
}
.svc-panel .svc-title {
  position: relative;
  z-index: 1;
  padding: 0 8px;
  color: #ffffff;
}
@media (min-width: 640px) {
  .svc-panel .svc-title {
    padding: 0;
  }
}
.svc-panel .svc-grid {
  position: relative;
  z-index: 1;
}
.svc-panel .svc-card:not(.svc-card--cta) {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.svc-panel .svc-card:not(.svc-card--cta) .svc-card__title {
  color: #ffffff;
  transition: color 0.35s ease;
}
.svc-panel .svc-card:not(.svc-card--cta) .svc-card__desc {
  color: rgba(255, 255, 255, 0.68);
  transition: color 0.35s ease;
}
.svc-panel .svc-card:not(.svc-card--cta) .svc-card__arrow {
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}
.svc-panel .svc-card:not(.svc-card--cta):hover,
.svc-panel .svc-card:not(.svc-card--cta):focus-visible {
  background-color: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 26px 50px -30px rgba(3, 14, 28, 0.8);
}
.svc-panel .svc-card:not(.svc-card--cta):hover .svc-card__title,
.svc-panel .svc-card:not(.svc-card--cta):focus-visible .svc-card__title {
  color: var(--ink);
}
.svc-panel .svc-card:not(.svc-card--cta):hover .svc-card__desc,
.svc-panel .svc-card:not(.svc-card--cta):focus-visible .svc-card__desc {
  color: rgba(11, 37, 64, 0.66);
}
.svc-panel .svc-card:not(.svc-card--cta):hover .svc-card__arrow,
.svc-panel .svc-card:not(.svc-card--cta):focus-visible .svc-card__arrow {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
}
.svc-panel .svc-card--feature {
  background-image: none;
}
.svc-panel .svc-card--feature:hover .svc-card__art,
.svc-panel .svc-card--feature:focus-visible .svc-card__art {
  color: rgba(1, 101, 167, 0.1);
}
.svc-panel .svc-card__art {
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease;
}
.svc-panel .svc-card--cta {
  background-color: #ffffff;
  color: var(--ink);
}
.svc-panel .svc-card--cta:hover {
  background-color: var(--sky-light);
  box-shadow: 0 26px 50px -30px rgba(3, 14, 28, 0.8);
}
.svc-panel .svc-card--cta .svc-card__title {
  color: var(--ink);
}
.svc-panel .svc-card--cta .svc-card__desc {
  color: rgba(11, 37, 64, 0.6);
}
.svc-panel .svc-card--cta .svc-card__go {
  background: var(--navy);
}
.svc-panel .svc-card--cta:hover .svc-card__go {
  background: #0b78c0;
}
.svc-panel :focus-visible {
  outline-color: #ffffff;
}

/* ---------- Client roster: scrolling brand tiles ---------- */
/* Headline and intro above a static white band; inside it the brand tiles
   (name + industry tag) scroll as a carousel, split by hairlines. Each tile
   carries its own right-hand hairline so the spacing repeats evenly across
   the seam between the two copies. Hover pauses the band (.marquee) and
   lights the tile. */
.trust-head {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
@media (min-width: 1024px) {
  .trust-head {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: end;
  }
}
.trust-head__sub {
  margin: 0;
  max-width: 42ch;
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(11, 37, 64, 0.7);
}
.trust-band {
  overflow: hidden;
  border: 1px solid rgba(11, 37, 64, 0.08);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 30px 60px -45px rgba(11, 37, 64, 0.45);
}
.trust-band__track {
  animation-duration: 45s;
}
.trust-band__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-band__cell {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: clamp(160px, 16vw, 240px);
  min-height: 124px;
  padding: 22px 16px;
  border-right: 1px solid rgba(11, 37, 64, 0.08);
  text-align: center;
  transition: background-color 0.3s ease;
}
.trust-band__name {
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 0.8rem + 0.6vw, 21px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: rgba(11, 37, 64, 0.62);
  transition: color 0.3s ease;
}
.trust-band__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11, 37, 64, 0.38);
  transition: color 0.3s ease;
}
.trust-band__cell:hover {
  background: var(--sky-light);
}
.trust-band__cell:hover .trust-band__name {
  color: var(--navy);
}
.trust-band__cell:hover .trust-band__tag {
  color: var(--sky);
}
@media (max-width: 639px) {
  .trust-band {
    border-radius: 18px;
  }
  /* Narrower tiles so two and a half show, hinting at the scroll. */
  .trust-band__cell {
    width: 136px;
    min-height: 104px;
    padding: 18px 10px;
    gap: 6px;
  }
  .trust-band__tag {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
}
/* Reduced motion: the band settles into a static grid of every brand. */
@media (prefers-reduced-motion: reduce) {
  .trust-band__marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .trust-band__track {
    width: auto;
    animation: none;
  }
  .trust-band__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .trust-band__cell {
    width: auto;
    border-bottom: 1px solid rgba(11, 37, 64, 0.08);
  }
  .trust-band__list[aria-hidden="true"] {
    display: none;
  }
}

/* ---------- Testimonials: large blue card ---------- */
.voices-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "quote" "controls";
  padding: 30px 22px 22px;
  border-radius: 24px;
  color: #ffffff;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(28, 163, 215, 0.55) 0%, rgba(28, 163, 215, 0) 65%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
  box-shadow: 0 40px 80px -50px rgba(1, 101, 167, 0.8);
}
@media (min-width: 1024px) {
  .voices-card {
    padding: clamp(40px, 4vw, 56px);
    border-radius: 28px;
  }
}
@media (min-width: 1200px) {
  .voices-card {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "head     quote"
      "controls quote";
    column-gap: clamp(48px, 5vw, 88px);
  }
}
.voices-card__head {
  grid-area: head;
}
.voices-card__title {
  max-width: 13ch;
  color: #ffffff;
}
.voices-card__note {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
}
.voices-card__viewport {
  grid-area: quote;
  overflow: hidden;
  margin-top: 36px;
}
@media (min-width: 1200px) {
  .voices-card__viewport {
    align-self: center;
    margin-top: 0;
  }
}
.voices-slide {
  margin: 0;
}
.voices-slide__mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.voices-slide__mark [data-icon] {
  width: 22px;
  height: 22px;
}
.voices-slide__quote {
  margin: 22px 0 0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 0.95rem + 1.25vw, 32px);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-wrap: pretty;
}
.voices-slide__by {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px;
}
.voices-slide__role {
  font-size: 15px;
  font-weight: 600;
}
.voices-slide__meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}
.voices-card__controls {
  grid-area: controls;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
@media (min-width: 1200px) {
  .voices-card__controls {
    align-self: end;
    margin-top: 40px;
  }
}
.voices-card__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.voices-card .carousel-dot {
  background-color: rgba(255, 255, 255, 0.35);
}
.voices-card .carousel-dot.is-active {
  background-color: #ffffff;
}
.voices-card__arrows {
  display: flex;
  gap: 10px;
}
.voices-card__arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.voices-card__arrow:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--navy);
}
.voices-card__arrow [data-icon] {
  width: 18px;
  height: 18px;
}
.voices-card :focus-visible {
  outline-color: #ffffff;
  outline-offset: 3px;
}

/* ---------- Closing CTA: light row ---------- */
.cta-row-section {
  padding-bottom: clamp(48px, 6vw, 88px);
}
.cta-row {
  display: grid;
  gap: 18px;
  padding: 30px 22px 22px;
  border-radius: 24px;
  background: var(--sky-light);
}
@media (min-width: 640px) {
  .cta-row {
    padding: 40px;
    border-radius: 28px;
  }
}
@media (min-width: 1200px) {
  .cta-row {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(32px, 3.5vw, 56px);
    padding: 48px;
  }
}
.cta-row__title {
  font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.75rem);
}
.cta-row__text {
  margin: 0;
  max-width: 44ch;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(11, 37, 64, 0.72);
}
.cta-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
@media (min-width: 1200px) {
  .cta-row__actions {
    margin-top: 0;
  }
}

/* ---------- Footer as a rounded navy card (every page) ---------- */
.site-footer--card {
  padding: 0 12px 12px;
}
@media (min-width: 640px) {
  .site-footer--card {
    padding: 0 20px 20px;
  }
}
@media (min-width: 1024px) {
  .site-footer--card {
    padding: 0 32px 24px;
  }
}
.footer-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1376px;
  margin: 0 auto;
  border-radius: 24px;
  background:
    radial-gradient(60% 70% at 0% 0%, rgba(1, 101, 167, 0.32) 0%, rgba(1, 101, 167, 0) 70%),
    linear-gradient(160deg, #0b2540 0%, #0a2139 100%);
}
@media (min-width: 1024px) {
  .footer-card {
    border-radius: 28px;
  }
}
/* ---------- Footer content (compact layout) ----------
   Phones: stacked, with the two link lists side by side. Tablets: brand and
   links side by side, contact across the full width in two columns.
   Desktop: brand, links and contact in one row; from 1280px the contact
   details split into two short columns (address and phone, then the
   inboxes). One bottom bar holds the copyright and Privacy Policy. */
.footer-card {
  color: rgba(255, 255, 255, 0.7);
}
.footer-main {
  display: grid;
  gap: 26px;
  padding: 30px 22px 24px;
}
.footer-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.footer-card a {
  transition: color 0.2s ease;
}
.footer-card a:hover {
  color: #ffffff;
}

.footer-brand__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
.footer-brand__logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-brand__logo img {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
}
.footer-brand__divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
}
.footer-brand__name {
  max-width: 8.5rem;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.7);
}
.footer-brand__text {
  max-width: 24rem;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
}
.footer-social {
  display: flex;
  gap: 8px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s ease;
}
.footer-social a:hover {
  background: rgba(255, 255, 255, 0.2);
}
.footer-social [data-icon] {
  display: inline-flex;
  width: 16px;
  height: 16px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.footer-links ul {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  font-size: 14px;
}

.footer-contact ul {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.45;
}
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.footer-contact li > [data-icon] {
  flex: none;
  display: inline-flex;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--sky);
}
.footer-contact small {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.42);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 14px 22px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}
.footer-bottom .consent-settings {
  color: inherit;
}
.footer-bottom .consent-settings:hover {
  color: #ffffff;
}
/* Phones: the eight links flow as one wrapped cluster instead of two tall
   lists (the header menu already lists every page). */
@media (max-width: 639px) {
  .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    font-size: 14px;
  }
  .footer-links > div,
  .footer-links ul {
    display: contents;
  }
  .footer-links .footer-heading {
    display: none;
  }
}

@media (min-width: 640px) {
  .footer-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
    padding: 36px 32px 28px;
  }
  .footer-contact {
    grid-column: 1 / -1;
  }
  .footer-bottom {
    padding: 14px 32px 16px;
  }
}
@media (min-width: 1024px) {
  .footer-main {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1.3fr);
    column-gap: 40px;
    padding: 40px 40px 32px;
  }
  .footer-contact {
    grid-column: auto;
  }
  .footer-brand__top {
    justify-content: flex-start;
  }
  .footer-bottom {
    padding: 16px 40px 18px;
  }
}
@media (min-width: 1280px) {
  .footer-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.8fr);
  }
}
/* Two contact columns wherever the block is wide enough. */
@media (min-width: 640px) and (max-width: 1023px), (min-width: 1280px) {
  .footer-contact ul {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: 28px;
  }
  .footer-contact__address { grid-column: 1; grid-row: 1 / span 2; }
  .footer-contact__phone { grid-column: 1; grid-row: 3; }
  .footer-contact__email { grid-column: 2; }
  .footer-contact__email--1 { grid-row: 1; }
  .footer-contact__email--2 { grid-row: 2; }
  .footer-contact__email--3 { grid-row: 3; }
}

/* ==========================================================================
   Inner pages (Adapta system)
   Who We Are, What We Offer, Careers and Contact reuse the homepage's
   section shell, headings, pill buttons, CTA row and footer card; the
   pieces below are the page-specific components built from the same parts.
   ========================================================================== */

/* ---------- Page hero: the homepage hero card, sized for a title ---------- */
.page-hero {
  position: relative;
  padding: 92px 12px 0;
}
@media (min-width: 640px) {
  .page-hero {
    padding: 96px 20px 0;
  }
}
@media (min-width: 1024px) {
  .page-hero {
    padding: 96px 32px 0;
  }
}
.page-hero .site-shell {
  max-width: 1376px;
}
.page-hero__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
  min-height: 300px;
  padding: 36px 22px 30px;
  border-radius: 24px;
  color: #ffffff;
  background:
    radial-gradient(55% 80% at 100% 0%, rgba(1, 101, 167, 0.34) 0%, rgba(1, 101, 167, 0) 70%),
    linear-gradient(140deg, #0b2540 0%, #0b2a49 52%, #0d3357 100%);
  box-shadow: 0 30px 60px -40px rgba(11, 37, 64, 0.75);
}
@media (min-width: 1024px) {
  .page-hero__card {
    min-height: 400px;
    gap: 22px;
    padding: clamp(40px, 4vw, 56px);
    border-radius: 28px;
  }
}
.page-hero__title {
  position: relative;
  z-index: 1;
  max-width: 28ch;
  margin: 0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 1.3rem + 2.3vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #ffffff;
  text-wrap: balance;
}
.page-hero__blurb {
  position: relative;
  z-index: 1;
  max-width: 56ch;
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
@media (min-width: 640px) {
  .page-hero__blurb {
    font-size: 18.5px;
  }
}
.page-hero__cta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.page-hero__card :focus-visible {
  outline-color: #ffffff;
  outline-offset: 3px;
}

/* Privacy Policy: a shorter title card, then the notice set for reading. */
.page-hero__card--short {
  min-height: 240px;
}
@media (min-width: 1024px) {
  .page-hero__card--short {
    min-height: 300px;
  }
}
.policy {
  max-width: 760px;
  margin: 0 auto;
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(11, 37, 64, 0.82);
}
.policy h2 {
  margin: 52px 0 14px;
  scroll-margin-top: 110px;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--navy-darker, #0b2540);
}
.policy h2:first-child {
  margin-top: 0;
}
.policy h3 {
  margin: 28px 0 8px;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #0b2540;
}
.policy p,
.policy address {
  margin: 0 0 14px;
  font-style: normal;
}
.policy ul {
  margin: 0 0 16px;
  padding-left: 1.3em;
  list-style: disc;
}
.policy li {
  margin-bottom: 8px;
}
.policy li::marker {
  color: var(--sky);
}
.policy strong {
  font-weight: 600;
  color: #0b2540;
}
.policy a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.policy a:hover {
  color: var(--navy-dark, #014e82);
}
.policy__short {
  --text-halo: none;
  padding: 12px 16px;
  border-left: 3px solid var(--sky);
  border-radius: 0 12px 12px 0;
  background: var(--sky-light);
}
.policy__toc {
  margin: 0 0 8px;
  padding-left: 1.5em;
  list-style: decimal;
}
.policy__toc li::marker {
  color: var(--navy);
  font-weight: 600;
}
.policy__toc a {
  text-decoration: none;
}
.policy__toc a:hover {
  text-decoration: underline;
}

/* 404: the page hero on its own, tall enough to fill the screen above the
   footer, with a faint "404" set large in the card's top right. */
.page-hero--404 {
  padding-bottom: clamp(48px, 6vw, 88px);
}
.page-hero--404 .page-hero__card {
  min-height: clamp(460px, calc(100svh - 190px), 640px);
}
.page-hero__code {
  position: absolute;
  top: -0.14em;
  right: 0.12em;
  z-index: 0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(8rem, 5rem + 16vw, 20rem);
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  user-select: none;
}

/* First section under a page hero gets the same breathing room the
   homepage's first section has. */
.site-section--first {
  padding-top: clamp(56px, 7vw, 96px);
}

/* ---------- Section heading helpers ---------- */
.section-head {
  max-width: 22ch;
  margin-bottom: clamp(28px, 3.6vw, 48px);
}
.section-head--split {
  display: grid;
  gap: 16px;
  max-width: none;
}
@media (min-width: 1024px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    align-items: end;
    gap: 48px;
  }
}
.section-head--split .section-title {
  max-width: 18ch;
}
.section-lead {
  margin: 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(11, 37, 64, 0.68);
}

/* ---------- Info cards (static light panels) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
@media (min-width: 640px) {
  .card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .card-grid--why {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .card-grid--why .info-card--feature {
    grid-column: 1 / -1;
  }
}
/* Why TMPI on desktop: three cards, then one card beside the wide blue
   compliance card. */
@media (min-width: 1024px) {
  .card-grid--why {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .card-grid--why .info-card--feature {
    grid-column: span 2;
  }
}
@media (min-width: 640px) and (max-width: 767px) {
  .card-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.info-card {
  position: relative;
  padding: 24px;
  border-radius: 24px;
  background: var(--offwhite);
  border: 1px solid rgba(11, 37, 64, 0.06);
  color: var(--ink);
}
@media (min-width: 1024px) {
  .info-card {
    padding: 28px;
  }
}
.info-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #ffffff;
  color: var(--navy);
  box-shadow: 0 1px 0 rgba(11, 37, 64, 0.04), 0 10px 20px -14px rgba(11, 37, 64, 0.45);
}
.info-card__icon [data-icon],
.info-card__icon svg {
  width: 22px;
  height: 22px;
}
.info-card__title {
  margin: 22px 0 0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.info-card__text {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(11, 37, 64, 0.66);
}
.info-card__note {
  margin: 6px 0 0;
  font-size: 12px;
  color: rgba(11, 37, 64, 0.42);
}
/* Wide brand-blue variant (the bento's highlight card). */
.info-card--feature {
  border-color: transparent;
  color: #ffffff;
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(28, 163, 215, 0.6) 0%, rgba(28, 163, 215, 0) 70%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
}
.info-card--feature .info-card__title {
  font-size: clamp(20px, 1rem + 0.8vw, 26px);
  color: #ffffff;
}
.info-card--feature .info-card__text {
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.8);
}
/* Icon beside the text instead of above it. */
.info-card--row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.info-card--row .info-card__title {
  margin-top: 2px;
  font-size: 17px;
}
/* Phones: icon beside the text on every info card, so stacked cards stay
   short. */
@media (max-width: 639px) {
  .info-card:not(.info-card--row) {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }
  .info-card:not(.info-card--row) .info-card__icon {
    grid-row: span 2;
  }
  .info-card:not(.info-card--row) .info-card__title {
    margin-top: 2px;
    font-size: 18px;
  }
}
.nowrap {
  white-space: nowrap;
}

/* ---------- Who We Are: Our Story ---------- */
.story {
  display: grid;
  gap: 28px;
}
@media (min-width: 1024px) {
  .story {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
  }
}
.story__title {
  max-width: 16ch;
}
.story__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(11, 37, 64, 0.74);
}
.story__body p {
  margin: 0;
}
.story__body strong {
  color: var(--ink);
}
.story__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.stat-tile {
  padding: 18px 16px;
  border-radius: 20px;
  background: var(--offwhite);
  border: 1px solid rgba(11, 37, 64, 0.06);
}
.stat-tile__value {
  margin: 0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 1.2rem + 1.2vw, 38px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.stat-tile__label {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(11, 37, 64, 0.6);
}

/* ---------- Homepage: Who We Are (brief) ---------- */
/* Reuses the Our Story split (.story): the headline on the left,
   a two-paragraph intro, stat tiles and a link to the full page on the
   right. White tiles so they lift off the page grid. */
/* Tree constellation sprawling across the section background (built by
   main.js from the live layout): a root at the bottom (TMPI's 2003 roots),
   a trunk, and limbs whose branches reach the three stat cards. Each of
   those branches runs to the card's centre underneath the opaque card, so
   it meets the card's edge exactly, where a contact star sits; faint twigs
   and stars fill the rest. The first time the section scrolls into view it
   grows from the root (each path's pathLength is 1, so a dash offset of 1
   hides it; --d and --dur time each segment by its distance from the
   root), then the stars twinkle. */
.about-brief-section {
  isolation: isolate;
}
/* Homepage brief: a white veil over the page grid so the tree reads first.
   It fades in and out over the section's top and bottom 96px, so the grid
   eases down and back up with no visible seam. */
.about-brief-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.6);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 96px, #000 calc(100% - 96px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 96px, #000 calc(100% - 96px), transparent);
}
/* Room at the foot for the tree's roots and the limb under the button. */
@media (min-width: 1024px) {
  .about-brief-section {
    padding-bottom: clamp(64px, 6vw, 90px);
  }
}
.about-brief {
  position: relative;
  z-index: 1;
}
.about-tree {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.about-tree__seg {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.about-tree__seg--limb {
  stroke: rgba(1, 101, 167, 0.4);
  stroke-width: 1.6;
}
/* Crown and twigs: fainter the further out, since they may run behind
   the text. */
.about-tree__seg--t1 {
  stroke: rgba(1, 101, 167, 0.24);
  stroke-width: 1.2;
}
.about-tree__seg--t2 {
  stroke: rgba(1, 101, 167, 0.17);
  stroke-width: 1;
}
.about-tree__seg--t3 {
  stroke: rgba(28, 163, 215, 0.2);
  stroke-width: 0.9;
}
/* Stacked layouts put the crown behind denser, smaller text: fainter. */
@media (max-width: 1023px) {
  .about-tree__seg--t1 {
    stroke: rgba(1, 101, 167, 0.17);
  }
  .about-tree__seg--t2,
  .about-tree__seg--t3 {
    stroke: rgba(1, 101, 167, 0.12);
  }
}
.about-tree__dot,
.about-tree__halo {
  transform-box: fill-box;
  transform-origin: center;
  scale: 0;
}
.about-tree__dot--root {
  fill: var(--navy-darker);
}
.about-tree__dot--rootlet {
  fill: rgba(1, 101, 167, 0.45);
}
.about-tree__dot--joint {
  fill: var(--navy);
}
.about-tree__dot--leaf {
  fill: var(--sky);
  opacity: 0.75;
}
.about-tree__dot--contact {
  fill: var(--sky);
}
.about-tree__halo {
  fill: var(--sky);
  opacity: 0.18;
}
.about-tree__star {
  fill: rgba(1, 101, 167, 0.3);
  opacity: 0;
}
.about-tree.is-grown .about-tree__seg {
  animation: tree-draw var(--dur) linear var(--d) forwards;
}
.about-tree.is-grown .about-tree__dot {
  animation: tree-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d) forwards;
}
.about-tree.is-grown .about-tree__halo {
  animation:
    tree-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d) forwards,
    tree-twinkle 3.2s ease-in-out calc(var(--d) + 0.4s + var(--t)) infinite;
}
.about-tree.is-grown .about-tree__star {
  animation: tree-star 4s ease-in-out calc(1.2s + var(--t)) infinite;
}
/* Rebuilt after resizing (or reduced motion): show the finished tree. */
.about-tree.is-static .about-tree__seg {
  animation: none;
  stroke-dashoffset: 0;
}
.about-tree.is-static .about-tree__dot {
  animation: none;
  scale: 1;
}
.about-tree.is-static .about-tree__halo {
  animation: tree-twinkle 3.2s ease-in-out var(--t) infinite;
  scale: 1;
}
.about-tree.is-static .about-tree__star {
  animation: tree-star 4s ease-in-out var(--t) infinite;
}
@keyframes tree-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes tree-pop {
  to { scale: 1; }
}
@keyframes tree-twinkle {
  0%, 100% { scale: 1; opacity: 0.18; }
  50% { scale: 1.6; opacity: 0.05; }
}
@keyframes tree-star {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .about-tree .about-tree__halo,
  .about-tree .about-tree__star {
    animation: none !important;
    opacity: 0.4;
  }
}
.about-brief .stat-tile {
  background: #ffffff;
  box-shadow: 0 18px 36px -30px rgba(11, 37, 64, 0.5);
}
/* Phones: three tiles share ~330px, so "6,000+" needs tighter padding and
   a number size that scales with the screen. */
@media (max-width: 639px) {
  .about-brief .stat-tile {
    padding: 16px 12px;
  }
  .about-brief .stat-tile__value {
    font-size: clamp(20px, 5.8vw, 26px);
  }
  /* "Professionals" and "Incorporated" can't wrap, so the label scales
     with the screen to stay inside the tile. */
  .about-brief .stat-tile__label {
    font-size: clamp(10.5px, 3.2vw, 13px);
  }
}
/* The smallest phones (320–374px): tighter gaps and padding, fixed 18px. */
@media (max-width: 374px) {
  .about-brief .story__stats {
    gap: 6px;
  }
  .about-brief .stat-tile {
    padding: 14px 8px;
  }
  .about-brief .stat-tile__value {
    font-size: 18px;
  }
}
.about-brief__cta {
  align-self: flex-start;
  margin-top: 22px;
}
@media (min-width: 1024px) {
  .about-brief {
    align-items: center;
  }
  .about-brief .story__title {
    max-width: 17ch;
  }
}

/* ---------- White-on-navy panel content (Who We Are Purpose cards) ---------- */
.glass-panel__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #ffffff;
  color: var(--navy);
}
.glass-panel__icon [data-icon] {
  width: 22px;
  height: 22px;
}
.glass-panel__title {
  margin: 22px 0 0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.glass-panel__text {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.84);
}
.glass-panel__text--lead {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
}
.glass-panel__text strong {
  font-weight: 700;
  color: #ffffff;
}
.glass-panel__list {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.glass-panel__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.84);
}
.glass-panel__check {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.glass-panel__check [data-icon] {
  width: 12px;
  height: 12px;
}
.glass-panel__check svg {
  stroke-width: 2.4;
}
.glass-panel__note {
  margin: 14px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- Title-left / content-right split (Certifications) ---------- */
.split {
  display: grid;
  gap: 28px;
}
@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
  }
}
.split__title {
  max-width: 18ch;
}
.cert-list {
  margin: 0;
  padding: 0 22px;
  list-style: none;
  border-radius: 24px;
  background: var(--offwhite);
  border: 1px solid rgba(11, 37, 64, 0.06);
}
@media (min-width: 1024px) {
  .cert-list {
    padding: 0 32px;
  }
}
.cert-list__row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 0;
}
.cert-list__row + .cert-list__row {
  border-top: 1px solid rgba(11, 37, 64, 0.08);
}
.cert-list__title {
  margin: 2px 0 0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.cert-list__text {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(11, 37, 64, 0.66);
}

/* ---------- Who We Are: the story in chapters ---------- */
/* The page reads as one journey: an index of chapters in the opening card,
   then Roots, Growth, People, Purpose and Proof, joined by a spine (the
   homepage tree's trunk) that main.js stretches from the first chapter's
   node to the last and fills as the reader scrolls; each node lights up once
   passed and grows that chapter's branches, which hang its label and reach
   its cards. Phones stack the marker above the body beside the spine. Each
   stat appears once, in the chapter that explains it. */
.journey-index {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  align-self: stretch;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.journey-index a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.74);
  transition: color 0.3s ease;
}
.journey-index a span {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--sky);
}
.journey-index a:hover {
  color: #ffffff;
}

.journey {
  padding-top: clamp(20px, 3vw, 40px);
}
.journey__shell {
  position: relative;
}
.journey__spine {
  position: absolute;
  left: 13px;
  top: 0;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: rgba(1, 101, 167, 0.12);
  pointer-events: none;
}
/* The tree's branches (built by main.js), behind the chapters: opaque cards
   cover the ends that run to their centres. */
.journey-tree {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.journey__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(var(--navy), var(--sky));
  transform: scaleY(0);
  transform-origin: top;
}
@media (min-width: 1024px) {
  .journey__spine {
    left: 23px;
  }
}

.chapter {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 22px;
  padding-block: clamp(36px, 5vw, 72px);
  scroll-margin-top: 96px;
}
.chapter__node {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(1, 101, 167, 0.3);
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.chapter.is-reached .chapter__node {
  background: var(--sky);
  border-color: var(--navy);
  box-shadow: 0 0 0 7px rgba(28, 163, 215, 0.18);
}
.chapter__marker,
.chapter__body {
  grid-column: 2;
}
@media (min-width: 1024px) {
  .chapter {
    grid-template-columns: 48px minmax(0, 4fr) minmax(0, 7fr);
    column-gap: 40px;
  }
  .chapter__marker {
    grid-row: 1;
    align-self: start;
  }
  .chapter__body {
    grid-column: 3;
    grid-row: 1;
  }
}
.chapter__num {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(11, 37, 64, 0.55);
}
.chapter__num span {
  margin-right: 8px;
  color: var(--navy);
}
.chapter__fact {
  margin: 18px 0 0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(52px, 2.6rem + 3vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  background: linear-gradient(135deg, var(--navy) 0%, var(--sky) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.chapter__fact-label {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(11, 37, 64, 0.6);
}
.chapter__body .section-title {
  max-width: 18ch;
}
.chapter__text {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(11, 37, 64, 0.74);
}
/* Chapter buttons: the homepage's pill button ("More About TMPI"). */
.chapter__cta {
  margin-top: 26px;
}

/* 01 Roots: the three roots as small navy cards, icon above the label
   (one per row, icon beside the label, on the narrowest phones). */
.root-cards {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.root-cards li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}
@media (min-width: 520px) {
  .root-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .root-cards li {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }
}

/* 02 Growth */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .industry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Small laptops: the body column beside the pinned marker is narrow. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .industry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.industry-grid li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(11, 37, 64, 0.08);
  box-shadow: 0 18px 36px -32px rgba(11, 37, 64, 0.5);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
/* Phones: icon above the label so long names like "Chemical Manufacturing"
   fit two to a row; the smallest phones go back to one wide row each. */
@media (max-width: 639px) {
  .industry-grid li {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    font-size: 14px;
  }
}
@media (max-width: 374px) {
  .industry-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .industry-grid li {
    flex-direction: row;
    align-items: center;
  }
}
.industry-grid__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--sky-light);
  color: var(--navy);
}
.industry-grid__icon [data-icon] {
  width: 19px;
  height: 19px;
}

/* 03 People */
.people-steps {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .people-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.people-steps li {
  padding: 20px;
  border-radius: 18px;
  background: var(--offwhite);
  border: 1px solid rgba(11, 37, 64, 0.06);
}
.people-steps__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #ffffff;
  color: var(--navy);
}
.people-steps__icon [data-icon] {
  width: 20px;
  height: 20px;
}
.people-steps h3 {
  margin: 16px 0 0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.people-steps p {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(11, 37, 64, 0.66);
}

/* 04 Purpose: Mission and Vision side by side. */
.purpose-grid {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
}
@media (min-width: 640px) {
  .purpose-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Small laptops: the body column is too narrow for two text cards. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .purpose-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.purpose-card {
  padding: 24px;
  border-radius: 20px;
}
.purpose-card .glass-panel__title {
  margin-top: 18px;
}
.purpose-card .glass-panel__text--lead {
  font-size: 17px;
}

/* 05 Proof */
.cert-list__logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #ffffff;
}
.cert-list__logo img {
  width: 34px;
  height: auto;
}

/* Next chapter */
.chapter--next .chapter__node {
  margin-top: 44px;
}
@media (min-width: 1024px) {
  .chapter--next .chapter__body {
    grid-column: 2 / 4;
  }
}

/* Chapter cards in the brand's dark navy (the same gradient and glow as the
   page hero): the root and industry tiles, the Recruit / Train / Retain cards, the
   Mission and Vision cards, and the credentials card, which also
   carries the constellation and faint grid. White icon squares, as on the navy
   Solutions panel. */
.journey .root-cards li,
.journey .industry-grid li,
.journey .people-steps li,
.journey .purpose-card,
.journey .cert-card {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(90% 100% at 100% 0%, rgba(1, 101, 167, 0.34) 0%, rgba(1, 101, 167, 0) 70%),
    linear-gradient(140deg, #0b2540 0%, #0b2a49 52%, #0d3357 100%);
  box-shadow: 0 26px 50px -36px rgba(11, 37, 64, 0.8);
}
.journey .root-cards li,
.journey .industry-grid li {
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.journey .root-cards li:hover,
.journey .industry-grid li:hover {
  transform: translateY(-2px);
  border-color: rgba(28, 163, 215, 0.45);
}
.journey .industry-grid__icon {
  background: #ffffff;
}
.journey .people-steps h3 {
  color: #ffffff;
}
.journey .people-steps p {
  color: rgba(255, 255, 255, 0.7);
}
.journey .cert-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 26px;
  border-radius: 24px;
}
.journey .cert-card .cert-list {
  margin: 0;
  background: none;
  border: 0;
}
.journey .cert-list__row + .cert-list__row {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.journey .cert-list__title {
  color: #ffffff;
}
.journey .cert-list__text {
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- What We Offer: services grouped by need ---------- */
/* Three groups (sales & marketing teams, operations & support, training &
   development), each a heading and short intro over navy service cards in
   the Who We Are card navy. A card says what the service covers, who it
   suits (from its own description) and links to the contact form with the
   service preselected; it outlines itself when reached by its anchor. "How
   an engagement works" closes with four steps. */
.offer-group {
  padding-block: clamp(28px, 3.6vw, 52px);
}
.offer-group__head {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(22px, 3vw, 32px);
}
@media (min-width: 1024px) {
  .offer-group__head {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: end;
  }
}
.offer-group__intro {
  margin: 0;
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(11, 37, 64, 0.7);
}
.offer-svcs {
  display: grid;
  gap: 12px;
}
@media (min-width: 640px) {
  .offer-svcs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Tablets: a three-card group's last card takes the whole second row. */
@media (min-width: 640px) and (max-width: 1023px) {
  .offer-svcs > .offer-svc:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1024px) {
  .offer-svcs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .offer-svcs--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* A one-card group (Training & Development while On Demand Training is
     hidden): the card sits under the intro, in the head's right column. */
  .offer-svcs--1 {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 64px;
  }
  .offer-svcs--1 > .offer-svc {
    grid-column: 2;
  }
}
.offer-svc {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border-radius: 22px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(90% 100% at 100% 0%, rgba(1, 101, 167, 0.34) 0%, rgba(1, 101, 167, 0) 70%),
    linear-gradient(140deg, #0b2540 0%, #0b2a49 52%, #0d3357 100%);
  box-shadow: 0 26px 50px -36px rgba(11, 37, 64, 0.8);
  scroll-margin-top: 110px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
@media (min-width: 1024px) {
  .offer-svc {
    padding: 30px 28px 26px;
  }
}
.offer-svc:hover {
  transform: translateY(-3px);
  border-color: rgba(28, 163, 215, 0.45);
}
.offer-svc:target {
  border-color: rgba(28, 163, 215, 0.75);
  box-shadow: 0 0 0 4px rgba(28, 163, 215, 0.22), 0 26px 50px -36px rgba(11, 37, 64, 0.8);
}
.offer-svc__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #ffffff;
}
.offer-svc__icon svg {
  width: 26px;
  height: 26px;
}
.offer-svc__icon--logo img {
  width: 38px;
  height: auto;
}
.offer-svc__title {
  margin: 22px 0 0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #ffffff;
}
.offer-svc__text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
}
.offer-svc__list {
  margin: 18px 0 22px;
}
.offer-svc__list li {
  font-size: 14.5px;
}
/* Who it suits, then the inquiry link, pinned to the card's foot so they
   line up across a row. */
.offer-svc__fit {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}
.offer-svc__fit span {
  display: block;
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky);
}
/* The inquiry button: the site's primary pill, left-aligned at the foot. */
.offer-svc__cta {
  align-self: flex-start;
  margin-top: 20px;
}

/* How an engagement works: four numbered steps; on desktop a faint line
   runs behind them from the first number to the last. */
.engage {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .engage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .engage {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  .engage::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 46px;
    height: 2px;
    background: linear-gradient(90deg, var(--navy), var(--sky));
    opacity: 0.35;
  }
}
.engage__step {
  position: relative;
  padding: 24px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(11, 37, 64, 0.08);
  box-shadow: 0 24px 48px -40px rgba(11, 37, 64, 0.5);
}
.engage__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--sky) 100%);
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: #ffffff;
}
.engage__title {
  margin: 18px 0 0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.engage__text {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(11, 37, 64, 0.66);
}

/* ---------- Careers: job portal ---------- */
/* The openings open the page (generated from content/openings.json by
   scripts/build-openings.mjs): a compact navy header with the title, search
   and team filters, then the list, with "How applying works" and the
   general application beside it on wide screens (below it on phones). A
   role with details opens them in a side panel (a bottom sheet on phones). */
.page-hero--portal .page-hero__card {
  min-height: 0;
  justify-content: flex-start;
  gap: 0;
  padding: 24px 18px 18px;
}
@media (min-width: 1024px) {
  .page-hero--portal .page-hero__card {
    padding: 34px 40px 30px;
  }
}
.portal-top__row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
}
.page-hero--portal .portal-top__title {
  max-width: none;
  font-size: clamp(1.9rem, 1.2rem + 1.9vw, 2.9rem);
}
.portal-top__sub {
  margin: 8px 0 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.76);
}
.portal-search {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
@media (min-width: 1024px) {
  .portal-search {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin-top: 22px;
  }
  .portal-search:has(.portal-field--select) {
    grid-template-columns: minmax(0, 1fr) 220px auto;
  }
}
.portal-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  background: #ffffff;
  color: var(--navy-darker);
}
.portal-field [data-icon] {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--navy);
}
.portal-field input,
.portal-field select {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: inherit;
  appearance: none;
}
.portal-field input::placeholder {
  color: rgba(11, 37, 64, 0.5);
}
.portal-field:focus-within {
  box-shadow: 0 0 0 3px rgba(28, 163, 215, 0.55);
}
.portal-field--select {
  position: relative;
}
.portal-field--select [data-icon] {
  pointer-events: none;
}
.portal-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.portal-chips::-webkit-scrollbar {
  display: none;
}
.portal-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.portal-chip b {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 12px;
}
.portal-chip:hover {
  background: rgba(255, 255, 255, 0.1);
}
.portal-chip.is-active {
  border-color: #ffffff;
  background: #ffffff;
  color: var(--navy);
}
.portal-chip.is-active b {
  background: var(--sky-light);
}
/* The list and the side column, with the application form close below
   (room left under them for the page tree's limb). */
.portal-section {
  padding-top: 16px;
  padding-bottom: 20px;
}
@media (min-width: 1024px) {
  .portal-section {
    padding-top: 20px;
    padding-bottom: 30px;
  }
}
.portal-section ~ #application-form {
  padding-top: 8px;
}
@media (min-width: 1024px) {
  .portal-section ~ #application-form {
    padding-top: 10px;
  }
}
.portal-body {
  display: grid;
  gap: 16px;
}
@media (min-width: 1024px) {
  .portal-body {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 24px;
  }
}
@media (min-width: 1024px) and (min-height: 900px) {
  .portal-side {
    position: sticky;
    top: 100px;
  }
}
.job-list {
  overflow: hidden;
  border: 1px solid rgba(11, 37, 64, 0.09);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 24px 50px -40px rgba(11, 37, 64, 0.45);
}
.job-list__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(11, 37, 64, 0.09);
  font-size: 13px;
  color: rgba(11, 37, 64, 0.6);
}
.job-list__head b {
  color: var(--navy-darker);
}
.job-list__items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.job {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(11, 37, 64, 0.09);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.job:last-child {
  border-bottom: 0;
}
/* Hover and a shared link's role: the sky tint of the closing CTA row
   ("Let's discuss your workforce needs"); the icon tile and tags turn white
   so they still stand out on it. */
.job:hover,
.job.is-picked {
  background: var(--sky-light);
}
.job.is-picked {
  box-shadow: inset 3px 0 0 var(--sky);
}
.job:hover .job__icon,
.job.is-picked .job__icon {
  background: #ffffff;
}
.job__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--sky-light);
  color: var(--navy);
}
.job__icon [data-icon] {
  width: 19px;
  height: 19px;
}
.job__title {
  margin: 0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.job__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--navy-darker);
  text-align: left;
  cursor: pointer;
}
.job__link:hover {
  color: var(--navy);
}
.job__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 3px 0 0;
}
.job__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(11, 37, 64, 0.62);
}
.job__chip + .job__chip::before {
  content: "\00b7";
  margin: 0 7px;
  color: rgba(11, 37, 64, 0.35);
}
.job__chip [data-icon] {
  display: none;
}
.job__chip--team {
  font-weight: 600;
  color: var(--navy);
}
.job__actions {
  display: none;
  align-items: center;
  gap: 14px;
}
.job__view {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}
.job__view:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.job__apply {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.job__apply:hover {
  background: var(--navy-dark);
}
.job__apply [data-icon] {
  width: 15px;
  height: 15px;
}
.job__chev {
  color: rgba(11, 37, 64, 0.35);
}
.job__chev [data-icon] {
  display: block;
  width: 18px;
  height: 18px;
}
/* Phones and tablets: roles with details show a "View role" pill on the
   right, beside the arrow (desktop shows it beside Apply). The whole row
   still opens the role too. */
@media (max-width: 1023px) {
  /* The meta line flows as text, so when it wraps the "·" stays attached
     to its neighbours instead of starting a line. */
  .job__meta {
    display: block;
    font-size: 12.5px;
    line-height: 1.45;
  }
  /* Each part (team, location, setup) stays whole; the line can only
     break just after a "·" (the zero-width space in the separator). */
  .job__chip {
    display: inline;
    white-space: nowrap;
  }
  .job__chip + .job__chip::before {
    content: "\00b7\200b";
    white-space: normal;
  }
  .job--detailed {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }
  .job--detailed .job__actions {
    display: flex;
  }
  .job--detailed .job__apply {
    display: none;
  }
  .job--detailed .job__chev {
    margin-left: -4px;
  }
  .job--detailed .job__view {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--sky-light);
    font-size: 13px;
    white-space: nowrap;
    transition: background-color 0.2s ease;
  }
  .job--detailed .job__view:hover {
    text-decoration: none;
  }
  .job--detailed:hover .job__view,
  .job--detailed.is-picked .job__view {
    background: #ffffff;
  }
}
/* Narrow phones: the pill and arrow sit level with the title, and the meta
   line runs the full width underneath so it stays on one or two lines. */
@media (max-width: 479px) {
  .job--detailed {
    row-gap: 4px;
  }
  .job--detailed .job__main {
    display: contents;
  }
  .job--detailed .job__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .job--detailed .job__title {
    grid-column: 2;
    grid-row: 1;
  }
  .job--detailed .job__actions {
    grid-column: 3;
    grid-row: 1;
  }
  .job--detailed .job__chev {
    grid-column: 4;
    grid-row: 1;
  }
  .job--detailed .job__meta {
    grid-column: 2 / -1;
    grid-row: 2;
    margin-top: 0;
  }
}
@media (min-width: 1024px) {
  .job-list__head {
    padding: 14px 20px;
  }
  .job {
    gap: 14px;
    padding: 14px 20px;
  }
  .job__icon {
    width: 42px;
    height: 42px;
  }
  .job__title {
    font-size: 16px;
  }
  .job__meta {
    gap: 6px;
    margin-top: 6px;
  }
  .job__chip {
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(11, 37, 64, 0.05);
    font-size: 12px;
    font-weight: 600;
    color: rgba(11, 37, 64, 0.7);
  }
  .job__chip + .job__chip::before {
    content: none;
  }
  .job__chip [data-icon] {
    display: block;
    width: 13px;
    height: 13px;
  }
  .job__chip--team {
    background: var(--sky-light);
    color: var(--navy);
  }
  .job:hover .job__chip,
  .job.is-picked .job__chip {
    background: #ffffff;
  }
  .job__actions {
    display: flex;
  }
  .job__chev {
    display: none;
  }
}
.job-list__empty {
  padding: 28px 20px;
  text-align: center;
  font-size: 15px;
  color: rgba(11, 37, 64, 0.65);
}
.job-list__empty p {
  margin: 0 0 8px;
}
.portal-side {
  display: grid;
  gap: 14px;
}
.portal-card {
  padding: 20px;
  border: 1px solid rgba(11, 37, 64, 0.09);
  border-radius: 20px;
  background: #ffffff;
}
.portal-card__title {
  margin: 0 0 12px;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy-darker);
}
/* "What happens after you apply": the step cards (see "Engagement steps"
   below) stacked in the side column, number beside the text, with room on
   the left for the tree's trunk. */
.portal-steps__title {
  margin: 2px 0 14px;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--navy-darker);
}
/* Two classes, to beat the row layout's room for a tree beneath the cards. */
.engage-wrap.engage-wrap--side {
  padding: 0 0 0 22px;
}
.engage--side {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}
.engage--side::before {
  display: none;
}
.engage--side .engage__step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  padding: 15px 16px;
  border-radius: 18px;
}
.engage--side .engage__num {
  grid-row: span 2;
  width: 36px;
  height: 36px;
  font-size: 12.5px;
}
.engage--side .engage__title {
  margin: 0;
  font-size: 15.5px;
}
.engage--side .engage__text {
  grid-column: 2;
  margin: 3px 0 0;
  font-size: 13.5px;
}
.engage-wrap--side .engage__step.is-active {
  transform: translateY(-4px);
}
.portal-card--cta {
  border: 0;
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(28, 163, 215, 0.5) 0%, rgba(28, 163, 215, 0) 70%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
}
.portal-card--cta .portal-card__title {
  color: #ffffff;
}
.portal-card--cta p {
  margin: 0 0 14px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.82);
}
.portal-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}
.portal-card__btn [data-icon] {
  width: 15px;
  height: 15px;
}
.portal-card--cta :focus-visible {
  outline-color: #ffffff;
}
/* Role details: a side panel on wide screens, a bottom sheet on phones */
html.has-role-panel {
  overflow: hidden;
}
.role-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
}
.role-panel__veil {
  position: absolute;
  inset: 0;
  background: rgba(11, 37, 64, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.role-panel__sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  padding: 24px 20px 0;
  border-radius: 22px 22px 0 0;
  background: #ffffff;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (min-width: 768px) {
  .role-panel__sheet {
    top: 0;
    left: auto;
    width: min(560px, 100%);
    max-height: none;
    padding: 30px 32px 0;
    border-radius: 0;
    transform: translateX(100%);
    box-shadow: -30px 0 60px -30px rgba(11, 37, 64, 0.5);
  }
}
.role-panel.is-open .role-panel__veil {
  opacity: 1;
}
.role-panel.is-open .role-panel__sheet {
  transform: none;
}
.role-panel__close {
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: rgba(11, 37, 64, 0.06);
  color: var(--navy-darker);
  cursor: pointer;
}
.role-panel__close [data-icon] {
  width: 18px;
  height: 18px;
}
.role-panel__title {
  margin: 6px 0 8px;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(22px, 1rem + 1.4vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--navy-darker);
}
.role-panel__body {
  padding-bottom: 12px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(11, 37, 64, 0.78);
}
.role-panel__body h3 {
  margin: 22px 0 8px;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy-darker);
}
.role-panel__body ul {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}
.role-panel__body > p:first-child {
  margin-top: 14px;
}
.role-panel__body li + li {
  margin-top: 4px;
}
.job__posted {
  margin-top: 20px;
  font-size: 13px;
  color: rgba(11, 37, 64, 0.5);
}
.role-panel__foot {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: auto -20px 0;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(11, 37, 64, 0.09);
  background: #ffffff;
}
@media (min-width: 768px) {
  .role-panel__foot {
    margin: auto -32px 0;
    padding: 16px 32px 22px;
  }
}
.job__apply--lg {
  height: 46px;
  padding: 0 22px;
  font-size: 15px;
}
.role-panel__copied {
  font-size: 13px;
  font-weight: 600;
  color: var(--sky);
}
@media (prefers-reduced-motion: reduce) {
  .role-panel__veil,
  .role-panel__sheet {
    transition: none;
  }
}

/* ---------- Page tree (Careers, What We Offer) ---------- */
/* One faint tree down the whole page (main.js [data-page-tree]), behind the
   sections; cards cover the ends of the branches that reach them. */
main[data-page-tree] {
  position: relative;
  isolation: isolate;
}
.page-tree {
  opacity: 0.72;
}
.page-tree .about-tree__seg--limb {
  stroke: rgba(1, 101, 167, 0.32);
  stroke-width: 1.3;
}

/* ---------- Engagement steps: subtle tree + sequence (Careers, What We Offer) ---------- */
/* The tree (main.js [data-engage-tree]) sits behind the cards, fainter than
   the homepage's; in one row it runs beneath them, so the row gets room
   below. The active card lifts and fades to navy while its branch lights. */
.engage-wrap {
  position: relative;
  isolation: isolate;
}
@media (min-width: 1024px) {
  .engage-wrap {
    padding-bottom: 76px;
  }
}
.engage-wrap .engage {
  position: relative;
  z-index: 1;
}
.engage-wrap .engage::before {
  display: none;
}
.engage-tree {
  opacity: 0.7;
}
.engage-tree .about-tree__seg--limb {
  stroke: rgba(1, 101, 167, 0.3);
  stroke-width: 1.3;
}
.engage-tree .about-tree__seg,
.engage-tree .about-tree__dot {
  transition: stroke 1.4s ease-in-out, stroke-width 1.4s ease-in-out, fill 1.4s ease-in-out;
}
.engage-tree .about-tree__seg.is-lit {
  stroke: rgba(28, 163, 215, 0.9);
  stroke-width: 1.8;
}
.engage-tree .about-tree__dot.is-lit {
  fill: var(--sky);
}
/* Slow, eased hand-offs: the outgoing card settles while the next lifts. */
.engage-wrap .engage__step {
  isolation: isolate;
  transition: transform 1.4s cubic-bezier(0.45, 0, 0.25, 1), box-shadow 1.4s ease-in-out, border-color 1.4s ease-in-out;
}
.engage-wrap .engage__step::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(90% 100% at 100% 0%, rgba(1, 101, 167, 0.34) 0%, rgba(1, 101, 167, 0) 70%),
    linear-gradient(140deg, #0b2540 0%, #0b2a49 52%, #0d3357 100%);
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.engage-wrap .engage__title,
.engage-wrap .engage__text,
.engage-wrap .engage__num {
  transition: color 1.2s ease-in-out, background-color 1.2s ease-in-out;
}
.engage-wrap .engage__step.is-active {
  transform: translateY(-10px);
  border-color: transparent;
  box-shadow: 0 32px 54px -30px rgba(11, 37, 64, 0.6);
}
.engage-wrap .engage__step.is-active::after {
  opacity: 1;
}
.engage-wrap .engage__step.is-active .engage__title {
  color: #ffffff;
}
.engage-wrap .engage__step.is-active .engage__text {
  color: rgba(255, 255, 255, 0.78);
}
.engage-wrap .engage__step.is-active .engage__num {
  background: #ffffff;
  color: var(--navy);
}

/* ---------- Careers: why join (navy cards) ---------- */
.why-grid {
  display: grid;
  gap: 12px;
}
@media (min-width: 768px) {
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}
.why-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border-radius: 22px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(90% 100% at 100% 0%, rgba(1, 101, 167, 0.34) 0%, rgba(1, 101, 167, 0) 70%),
    linear-gradient(140deg, #0b2540 0%, #0b2a49 52%, #0d3357 100%);
  box-shadow: 0 26px 50px -36px rgba(11, 37, 64, 0.8);
}
@media (min-width: 1024px) {
  .why-card {
    padding: 30px 30px 28px;
  }
}
.why-card .glass-panel__title {
  margin-top: 20px;
}
.why-card .glass-panel__text {
  max-width: 46ch;
}
.why-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
  font-size: 14.5px;
  font-weight: 600;
  color: #ffffff;
}
.why-card__link [data-icon] {
  width: 16px;
  height: 16px;
  color: var(--sky);
  transition: transform 0.3s ease;
}
.why-card__link:hover [data-icon] {
  transform: translateX(3px);
}
/* Growth: the career ladder, left to right, the top rung lit. */
.why-ladder {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;
  padding: 22px 0 0;
  list-style: none;
}
.why-ladder li {
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.why-ladder li:last-child {
  border-color: transparent;
  background: linear-gradient(100deg, var(--navy), var(--sky));
  color: #ffffff;
}

/* ---------- Forms (Careers application, Contact inquiry) ---------- */
.form-error {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #9b1c1c;
  background: #fdecec;
}
.form-error a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}
/* Turnstile spam check (main.js): takes no room unless it needs a click. */
.form-panel > .form-turnstile:not(.is-visible) {
  margin-top: 0 !important;
}
.form-turnstile.is-visible {
  display: flex;
  justify-content: center;
}
/* The Contact form's button sits on the left, so the check does too. */
[data-form="contact"] .form-turnstile.is-visible {
  justify-content: flex-start;
}
/* Honeypot field for bots; people never see or reach it. */
.form-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Cookie consent: a small card at the bottom of the screen (analytics.js
   decides when it shows; main.js builds it). */
.consent-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  display: grid;
  gap: 14px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(11, 37, 64, 0.08);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 60px -24px rgba(11, 37, 64, 0.45);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.consent-banner.is-open {
  opacity: 1;
  transform: none;
}
@media (min-width: 640px) {
  .consent-banner {
    right: auto;
    left: 24px;
    bottom: 24px;
    max-width: 440px;
  }
}
.consent-banner__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(11, 37, 64, 0.82);
}
.consent-banner__text a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consent-banner__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.consent-banner__btn {
  min-width: 104px;
  justify-content: center;
  padding: 10px 20px;
  font-size: 14px;
}
/* Declining is as easy to see as accepting. */
.consent-banner .pill-btn--ghost {
  color: var(--navy);
  background: #ffffff;
  border-color: rgba(1, 101, 167, 0.35);
}
.consent-banner .pill-btn--ghost:hover {
  background: var(--sky-light);
  border-color: var(--navy);
}
.consent-settings {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.form-notice {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(11, 37, 64, 0.65);
}
.form-notice a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(11, 37, 64, 0.75);
  cursor: pointer;
}
.form-consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--navy);
}
.form-section__head {
  max-width: 640px;
  margin: 0 auto clamp(28px, 3.6vw, 44px);
  text-align: center;
}
.form-section__head .section-lead {
  margin: 14px auto 0;
}
.form-section__body {
  max-width: 880px;
  margin: 0 auto;
}
.form-panel {
  padding: 24px 20px;
  border-radius: 24px;
  background: var(--offwhite);
  border: 1px solid rgba(11, 37, 64, 0.06);
}
@media (min-width: 640px) {
  .form-panel {
    padding: 36px;
    border-radius: 28px;
  }
}
.form-panel input:not([type="radio"]):not([type="file"]),
.form-panel textarea,
.form-panel [data-file-label] {
  background-color: #ffffff;
}
.form-panel--success {
  text-align: center;
}
.form-panel--success h3 {
  font-weight: 600;
}
/* Careers: the application form on a navy card, the same treatment as the
   Contact page's inquiry form (white panel on navy). */
.apply-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 40px 16px 16px;
  border-radius: 24px;
  color: #ffffff;
  background:
    radial-gradient(55% 60% at 100% 0%, rgba(1, 101, 167, 0.34) 0%, rgba(1, 101, 167, 0) 70%),
    linear-gradient(140deg, #0b2540 0%, #0b2a49 52%, #0d3357 100%);
  box-shadow: 0 30px 60px -40px rgba(11, 37, 64, 0.75);
}
@media (min-width: 640px) {
  .apply-card {
    padding: 52px 32px 32px;
  }
}
@media (min-width: 1024px) {
  .apply-card {
    padding: clamp(48px, 5vw, 72px) clamp(40px, 5vw, 72px);
    border-radius: 28px;
  }
}
.apply-card .section-title {
  color: #ffffff;
}
.apply-card .section-lead {
  color: rgba(255, 255, 255, 0.78);
}
.apply-card .form-panel {
  border-color: transparent;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 30px 60px -36px rgba(3, 14, 28, 0.8);
}
/* Text-only pill for submit buttons (main.js swaps their text while
   sending, so they carry no icon element). */
.pill-btn--solid {
  justify-content: center;
  padding: 16px 30px;
}
.pill-btn--solid:disabled {
  opacity: 0.6;
}

/* ---------- Contact: one navy hero card ---------- */
/* "Let's start the conversation" holds the whole page: the title and blurb
   on top, then Get In Touch as glass panels on the navy (left on desktop)
   and the Inquiry Form as a crisp white panel (right), so the form is the
   clearest thing to act on. */
/* The same gap before the footer as the other pages' last section. */
.page-hero--contact {
  padding-bottom: clamp(36px, 4.6vw, 64px);
}
/* Joined footer (Privacy): no gap, the footer's top meets the section
   above square, divided by a hairline, and takes the hero's side gutters. */
.site-footer--joined {
  padding-left: 12px;
  padding-right: 12px;
}
@media (min-width: 640px) {
  .site-footer--joined {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (min-width: 1024px) {
  .site-footer--joined {
    padding-left: 32px;
    padding-right: 32px;
  }
}
.site-footer--joined .footer-card {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.contact-hero {
  justify-content: flex-start;
  gap: 32px;
}
@media (min-width: 1024px) {
  .contact-hero {
    gap: 44px;
  }
}
.contact-hero__intro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-hero__body {
  position: relative;
  z-index: 1;
}
/* Links to contact.html#inquiry-form land on the form's title, clear of
   the fixed header (with room for the column's 18px reveal lift). */
#inquiry-form {
  scroll-margin-top: 104px;
}
.contact-hero .contact-layout__title {
  color: #ffffff;
}
.contact-hero .contact-person {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(90% 100% at 100% 0%, rgba(28, 163, 215, 0.32) 0%, rgba(28, 163, 215, 0) 70%),
    rgba(255, 255, 255, 0.06);
}
.contact-hero .info-card {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}
.contact-hero .info-card__title {
  color: #ffffff;
}
.contact-hero .info-card__text {
  color: rgba(255, 255, 255, 0.74);
}
.contact-hero .info-card__note {
  color: rgba(255, 255, 255, 0.48);
}
.contact-hero .contact-map {
  border-color: rgba(255, 255, 255, 0.14);
}
.contact-hero .form-panel {
  border-color: transparent;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 30px 60px -36px rgba(3, 14, 28, 0.8);
}

/* ---------- Contact ---------- */
.contact-layout {
  display: grid;
  gap: 36px;
}
@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 24px;
    align-items: start;
  }
}
.contact-layout__side,
.contact-layout__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-layout__title {
  margin: 0 0 6px;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(24px, 1.2rem + 0.8vw, 30px);
  letter-spacing: -0.03em;
  color: var(--ink);
}
/* Who to contact (Jed de Guzman for clients, the recruitment team for
   candidates, following the form's Inquiry Type) as a brand-blue card,
   since reaching the right person is the page's main job. */
.contact-person[hidden] {
  display: none !important;
}
.contact-person {
  padding: 24px;
  border-radius: 24px;
  color: #ffffff;
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(28, 163, 215, 0.6) 0%, rgba(28, 163, 215, 0) 70%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
}
.contact-person__who {
  display: flex;
  align-items: center;
  gap: 14px;
}
.contact-person__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #ffffff;
  color: var(--navy);
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
}
.contact-person__avatar [data-icon] {
  width: 26px;
  height: 26px;
}
.contact-person__name {
  margin: 0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.contact-person__role {
  margin: 2px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}
.contact-person__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.contact-person__links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
}
/* A link with a short note under it ("Team inbox"), like the footer's. */
.contact-person__links a.has-note {
  align-items: flex-start;
}
.contact-person__links a.has-note [data-icon] {
  margin-top: 4px;
}
.contact-person__note {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.6);
}
.contact-person__links a.has-note:hover {
  text-decoration: none;
}
.contact-person__links a.has-note:hover .contact-person__email {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-person__links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-person__links [data-icon] {
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.8);
}
.contact-person :focus-visible {
  outline-color: #ffffff;
}
.contact-map {
  overflow: hidden;
  height: 260px;
  border-radius: 24px;
  border: 1px solid rgba(11, 37, 64, 0.06);
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Contact: the two inquiry-type buttons wrap their labels when side by side
   on small phones, so they stack there. */
@media (max-width: 479px) {
  .form-panel fieldset .grid {
    grid-template-columns: minmax(0, 1fr);
  }
}