/* Highland Strategy Group — base styles + components */

/* ---------- Design tokens (from Figma) ---------- */
:root {
  --color-navy: #1d428a;
  --color-navy-dark: #071d49;
  --color-navy-mid: #20345b;
  --color-navy-09: rgba(7, 29, 73, 0.9);
  --color-navy-08: rgba(7, 29, 73, 0.8);
  --color-cyan: #0a77b7;
  --color-blue-200: rgba(29, 66, 138, 0.2);
  --color-bg-soft: #eaf2f5;
  --color-bg-soft-2: #f2f2f2;
  --color-text: #111111;
  --color-text-muted: #707372;
  --color-text-grey: #4e4e4e;
  --color-white: #ffffff;

  --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;

  --container-max: 1320px;
  --container-pad: 15px;

  --header-height: 90px;

  --shadow-card: 0 14px 37px rgba(0, 0, 0, 0.08);

  --radius-button: 4px;
  --radius-card: 16px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  line-height: 1.5;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--color-white);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

main { display: block; }

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  color: var(--color-text-muted);
  margin: 0;
}
.eyebrow--light { color: rgba(255, 255, 255, 0.85); }

.section-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 48px;
  line-height: 57.6px;
  color: var(--color-navy-dark);
  margin: 8px 0 0 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.section-title--light { color: var(--color-white); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  padding: 16px 28px;
  border-radius: var(--radius-button);
  white-space: nowrap;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  text-align: center;
}
.btn--primary {
  background: var(--color-navy-dark);
  color: var(--color-white);
  border: 1px solid var(--color-navy-dark);
}
.btn--primary:hover {
  background: var(--color-white);
  color: var(--color-navy-dark);
}
.btn--primary:hover .btn__icon path { stroke: var(--color-navy-dark); }

.btn--white {
  background: var(--color-white);
  color: var(--color-navy-08);
  border: 1px solid var(--color-white);
}
.btn--white:hover {
  background: var(--color-navy-dark);
  color: var(--color-white);
}
.btn--white:hover .btn__icon path { stroke: var(--color-white); stroke-opacity: 1; }

.btn__icon { display: block; flex-shrink: 0; }

/* ---------- Site header (Figma 330:141) ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-white);
  height: var(--header-height);
  width: 100%;
  transition: background-color 0.3s ease, color 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
  height: 70px;
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.site-header.is-scrolled .site-header__nav-link {
  color: #1D428A;
}
.site-header.is-scrolled.is-over-hero {
  background: #FFFFFF;
  backdrop-filter: none;
}
.site-header.is-scrolled.is-over-hero .site-header__nav-link {
  color: #1D428A;
}

/* Pages that don't lead with a hero need top padding so content isn't hidden under the fixed nav.
   The homepage has a hero that intentionally sits behind the transparent nav, so it doesn't get padding. */
body:not(.has-hero) main {
  padding-top: var(--header-height);
}

/* Transparent variant when over hero */
.site-header.is-over-hero {
  background: transparent;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
/* Sub-pages: no blur behind the transparent nav */
.is-subpage .site-header.is-over-hero {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header.is-over-hero .site-header__nav-link,
.site-header.is-over-hero .site-header__chevron path {
  color: var(--color-white);
  stroke: var(--color-white);
}
.site-header.is-over-hero .site-header__nav-link {
  color: var(--color-white);
}
/* Over-hero logo color is now handled by the two-variant img swap above
   (CD-1920); no filter trickery needed. */

.site-header__inner {
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  position: relative;
}

.site-header__logo {
  display: block;
  width: 241px;
  height: 45px;
  flex-shrink: 0;
  position: relative;
}
.site-header__logo img { width: 100%; height: 100%; object-fit: contain; }
/* Two-variant logo: dark default for white headers; blue-icon + white-text
   variant for the transparent over-hero header. Stack and toggle visibility
   so we don't rely on filter hacks against a single PNG (CD-1920). */
.site-header__logo-img--overhero {
  position: absolute;
  inset: 0;
  display: none;
}
.site-header.is-over-hero .site-header__logo-img--default { display: none; }
.site-header.is-over-hero .site-header__logo-img--overhero { display: block; }
/* When scrolled (header bg becomes white), revert to the default dark logo
   regardless of whether the user is technically still over the hero band. */
.site-header.is-scrolled .site-header__logo-img--default { display: block; }
.site-header.is-scrolled .site-header__logo-img--overhero { display: none; }

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
  margin-right: 26px;
}
.site-header__nav-link {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-navy);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  position: relative;
  padding-bottom: 2px;
}
.site-header__nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  bottom: 0;
  width: 24px;
  height: 2px;
  background: currentColor;
  transform-origin: center;
  transition: transform 0.3s ease;
}
.site-header__nav-link:hover::after,
.site-header__nav-link.is-active::after {
  transform: translateX(-50%) scaleX(1);
}
.site-header__nav-link.site-header__nav-link--has-menu:hover .site-header__chevron {
  transform: rotate(180deg);
}
.site-header__chevron {
  display: block;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.site-header__cta {
  background: var(--color-navy-dark);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  height: 48px;
  padding: 0 28px;
  border-radius: var(--radius-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: 1px solid var(--color-navy-dark);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.site-header__cta:hover {
  background: var(--color-white);
  color: var(--color-navy-dark);
}

.site-header__toggle {
  display: none;
  width: 42px;
  height: 42px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.site-header__toggle-bar {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--color-navy);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform-origin: center;
}

/* ---------- Hero (600:1425) ---------- */
.hero {
  position: relative;
  height: 931px;
  overflow: hidden;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  color: var(--color-white);
  /* Hero sits below the 90px sticky nav. The nav has its transparent
     "is-over-hero" state to visually overlap; no negative margin needed. */
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.hero__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 66px;
  line-height: 78px;
  color: var(--color-white);
  margin: 0;
  max-width: 879px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.hero__subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: var(--color-white);
  margin: 4px 0 0 0;
  max-width: 739px;
}

/* ---------- Philosophy (600:1430) ---------- */
.philosophy {
  background: var(--color-white);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
/* Decorative line vectors (Figma node 600:1442 — Group 42).
   Coordinates are taken directly from the Figma design context. The Philosophy
   section is 1440px wide; the line group sits in the top-right (807.5, -60).
   Each <img> is sized and positioned to its Figma rect. */
.philosophy__lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.philosophy__line {
  position: absolute;
  display: block;
}
/* Wrapper inner uses left:60 padding from container. Position lines from the
   right edge so they don't shift on smaller container widths. */
.philosophy__line--v6 {
  /* Vector 6: x=859, y=-60, w=581, h=313.6 — outermost top-right curve */
  right: 0;
  top: -60px;
  width: 581px;
  height: 313.6px;
}
.philosophy__line--v5 {
  /* Vector 5: x=856.5, y=-31.5, w=584.5, h=307.1 */
  right: 0;
  top: -31.5px;
  width: 584.5px;
  height: 307.1px;
}
.philosophy__line--v3 {
  /* Vector 3: x=807.5, y=48, w=632.5, h=135 */
  right: 0;
  top: 48px;
  width: 632.5px;
  height: 135px;
}
.philosophy__line--v4 {
  /* Vector 4: x=824.5, y=34.5, w=615.5, h=125.5 */
  right: 0;
  top: 34.5px;
  width: 615.5px;
  height: 125.5px;
}
.philosophy__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.philosophy__intro {
  max-width: 800px;
}
.philosophy__lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-muted);
  margin: 16px 0 0 0;
  max-width: 800px;
}
.philosophy__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.phil-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  height: 159px;
  filter: drop-shadow(var(--shadow-card));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  cursor: default;
  transition: background-color 0.3s ease;
  position: relative;
  overflow: hidden;
}
.phil-card__title,
.phil-card__hover {
  font-family: var(--font-sans);
  transition: opacity 0.3s ease;
}
.phil-card__title {
  display: block;
  max-width: 280px;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-text);
  text-wrap: balance;
}
.phil-card__hover {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-white);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  opacity: 0;
}
.phil-card:hover,
.phil-card:focus-visible {
  background: var(--color-navy);
}
.phil-card:hover .phil-card__title,
.phil-card:focus-visible .phil-card__title {
  opacity: 0;
}
.phil-card:hover .phil-card__hover,
.phil-card:focus-visible .phil-card__hover {
  opacity: 1;
}

/* ---------- What We Do (600:1449) ---------- */
.what-we-do {
  background: var(--color-white);
  padding: 100px 0 100px;
  position: relative;
  overflow: hidden;
  min-height: 697px;
}
.what-we-do::after {
  /* Real Figma vector — node 600:1460 — pale-blue area with mountain peaks on the right.
     Anchored to bottom so left edge stays below the intro/button regardless of section
     height. Figma source: 1440×705 viewBox. */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 705px;
  background-image: url('/images/services-bg-mountain.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}
.what-we-do__intro {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  position: relative;
  z-index: 1;
}
.what-we-do__intro .eyebrow { margin-bottom: 8px; }
.what-we-do__intro .section-title { max-width: 752px; }
.what-we-do__lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-muted);
  margin: 16px 0 32px 0;
  max-width: 752px;
}

.services-timeline {
  position: relative;
  z-index: 1;
  margin-top: 60px;
  max-width: var(--container-max);
  padding: 0 var(--container-pad);
  margin-left: auto;
  margin-right: auto;
}
.services-timeline__track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-top: 40px;
  scrollbar-width: none;
}
.services-timeline__track::-webkit-scrollbar { display: none; }

.service-step {
  flex: 0 0 416px;
  scroll-snap-align: start;
  padding: 0 24px 0 24px;
  border-left: 1px solid var(--color-blue-200);
  position: relative;
}
.service-step:first-child { border-left: 0; padding-left: 0; }
.service-step__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: var(--color-navy);
  margin: 0;
  text-transform: capitalize;
}
.service-step__title.is-active { font-weight: 700; }
.service-step__line {
  height: 1px;
  background: var(--color-blue-200);
  margin: 32px 0 32px 0;
  position: relative;
  width: 100%;
}
.service-step__dot {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background: linear-gradient(-50deg, var(--color-navy-dark) 0%, #5c88da 100%);
}
/* Right-end gradient dot — only used on mobile where the line is contained
   inside the card (between the two vertical edge lines). Hidden on desktop. */
.service-step__dot--end { display: none; }
/* Decorative SVG (zigzag/mountain) — mobile only. */
.services-timeline__decoration { display: none; }
.service-step__body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-navy);
  margin: 0;
  max-width: 327px;
}

.services-timeline__controls {
  position: absolute;
  top: -90px;
  right: var(--container-pad);
  display: flex;
  gap: 20px;
}
.timeline-btn {
  width: 60px;
  height: 60px;
  border-radius: 15px;
  background: var(--color-blue-200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.timeline-btn svg path { transition: stroke 0.2s ease; }
.timeline-btn:hover { background: var(--color-navy); }
.timeline-btn:hover svg path { stroke: #fff; }

/* ---------- Who We Serve (600:1685) ---------- */
.who-we-serve {
  background: var(--color-navy-mid);
  padding: 100px 110px;
  color: var(--color-white);
}
.who-we-serve__inner {
  max-width: 1320px;
  padding: var(--container-pad);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.who-we-serve__lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.9);
  margin: 16px 0 0 0;
}
.who-we-serve__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.serve-card {
  border-top: 1px solid var(--color-cyan);
  padding: 25px 14px 0;
  min-height: 217px;
  background-image: linear-gradient(to bottom, var(--color-cyan), var(--color-cyan));
  background-size: 100% 0%;
  background-repeat: no-repeat;
  background-position: top;
  transition: background-size 0.4s ease;
}
.serve-card:hover {
  background-size: 100% 100%;
}
.serve-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.serve-card__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-white);
  margin: 0;
}
.serve-card__icon { width: 18px; height: 18px; flex-shrink: 0; }
.serve-card__body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-white);
  margin: 0;
}

/* ---------- Industries (600:1473) ---------- */
.industries {
  background: var(--color-bg-soft);
  padding: 100px;
}
.industries__inner {
  max-width: 1320px;
  padding: var(--container-pad);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.industries__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.industries__intro .eyebrow { margin-bottom: 0; }
.industries__lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-grey);
  margin: 8px 0 22px 0;
  max-width: 800px;
}
.industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.industry-card {
  position: relative;
  height: 280px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-start;
  padding: 25px 20px;
  isolation: isolate;
}
.industry-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 29, 73, 0.8) 0%, rgba(7, 29, 73, 0.25) 100%);
  z-index: 0;
  transition: background 0.3s ease;
}
.industry-card:hover::before {
  background: linear-gradient(180deg, rgba(7, 29, 73, 0.55) 0%, rgba(7, 29, 73, 0.1) 100%);
}
.industry-card span {
  position: relative;
  z-index: 1;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 28px;
  line-height: 36.4px;
  color: var(--color-white);
  max-width: 338px;
}

/* ---------- CTA Band (1818:1404) ---------- */
.cta-band {
  position: relative;
  background: var(--color-navy-09);
  height: 237px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.cta-band::before,
.cta-band::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.cta-band::before {
  width: 1100px;
  height: 1100px;
  right: -200px;
  top: 24px;
}
.cta-band::after {
  width: 1756px;
  height: 1756px;
  left: -443px;
  top: -72px;
}
.cta-band__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--container-pad);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
}
.cta-band__text {
  flex: 1;
  max-width: 1008px;
  color: var(--color-white);
}
.cta-band__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 38.1px;
  line-height: 45.7px;
  color: var(--color-white);
  margin: 0;
}
.cta-band__sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-white);
  margin: 18px 0 0 0;
}

/* ---------- Site footer (1513:1725) ---------- */
/* The soft-grey background extends full viewport width. Inside it, the card content is
   constrained to 1440px and centered. Above 1440px the grey continues to the viewport
   edges instead of leaving white gutters. */
.site-footer {
  position: relative;
  background: var(--color-bg-soft-2);
}
.site-footer__card {
  padding: 40px 15px;
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.site-footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.site-footer__row--top {
  align-items: center;
}
.site-footer__row--bottom {
  align-items: flex-start;
}
.site-footer__logo { width: 241px; height: 45px; flex-shrink: 0; display: block; }
.site-footer__logo img { width: 100%; height: 100%; object-fit: contain; }
.site-footer__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  flex: 1;
  max-width: 940px;
  margin-left: 80px;
}
.site-footer__nav a {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-navy-dark);
  white-space: nowrap;
  position: relative;
  padding-bottom: 2px;
}
.site-footer__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.site-footer__nav a:hover::after { transform: scaleX(1); }

/* Mobile-only nav row — hidden on desktop. Activated inside the @media (max-width: 768px) block. */
.site-footer__nav--mobile { display: none; }

.site-footer__social { flex-shrink: 0; }
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--color-navy-dark);
  transition: opacity 0.2s ease;
}
.social-link:hover { opacity: 0.85; }
.social-link img { width: 24px; height: 24px; filter: brightness(0) invert(1); }

.site-footer__contact {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  flex: 1;
  justify-content: space-between;
  max-width: 951px;
}
.site-footer__contact-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--color-navy-dark);
  transition: opacity 0.2s ease;
}
a.site-footer__contact-item:hover { opacity: 0.7; }
.site-footer__contact-icon { width: 24px; height: 24px; flex-shrink: 0; }
.site-footer__contact-item span {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-navy-dark);
}

.site-footer__legal {
  background: var(--color-navy-dark);
  color: var(--color-white);
  padding: 28px 60px;
}
.site-footer__legal-inner {
  max-width: var(--container-max);
  padding: var(--container-pad);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.site-footer__legal p {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  margin: 0;
  color: var(--color-white);
}

/* ---------- About Us — Hero (2787:1119) ---------- */
.about-hero {
  position: relative;
  height: 423px;
  overflow: hidden;
  color: var(--color-white);
  isolation: isolate;
}
.about-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  z-index: 0;
}
.about-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%),
    linear-gradient(269.9999962692598deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 84.529%),
    linear-gradient(239.86182381941686deg, rgba(0, 0, 0, 0) 13.61%, rgba(0, 0, 0, 0.1) 92.235%);
  z-index: 1;
}
.about-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding: var(--container-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  /* Match Figma offset of +29.5 from center */
  padding-top: 59px;
}
.about-hero__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 66px;
  line-height: 78px;
  color: var(--color-white);
  margin: 0;
  max-width: 739px;
}
.about-hero__subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-white);
  margin: 0;
  max-width: 445px;
}

/* ---------- HSG At A Glance (2787:1125) ---------- */
.glance {
  background: var(--color-bg-soft);
  padding: 60px 0 100px;
}
.glance__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.glance__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 48px;
  line-height: 57.6px;
  color: var(--color-navy-dark);
  margin: 0;
  text-transform: capitalize;
}
.glance__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1255px;
  margin: 6px auto 0;
  width: 100%;
}
.glance-card {
  background: var(--color-navy-dark);
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  height: 183px;
  padding: 25px 25px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.glance-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(7, 29, 73, 0.18);
}
.glance-card__value {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 32px;
  line-height: 60px;
  color: var(--color-white);
  margin: 0;
}
.glance-card__label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* ---------- Approach (2787:1149) ---------- */
.approach {
  background: var(--color-white);
  padding: 80px 60px 100px;
}
.approach__inner {
  max-width: var(--container-max);
  padding: var(--container-pad);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.approach__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.approach__head .eyebrow { margin: 0; }
.approach__head .section-title { margin: 0; line-height: 1.1; }
.approach__cols {
  display: grid;
  /* Right column width matches the original 1fr/1fr layout (i.e. half of
     content minus half of the original 20px gap), so widening `gap` only
     pushes the text column's right border inward — the accordion list
     keeps its original width and right-aligned position. */
  grid-template-columns: 1fr calc((100% - 20px) / 2);
  gap: 80px;
  align-items: start;
}
.approach__copy p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-grey);
  margin: 0 0 24px 0;
}
.approach__copy p:last-child { margin-bottom: 0; }
.approach__copy strong {
  font-weight: 700;
  color: var(--color-text-grey);
}
.approach__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.approach-item {
  background: #f4f4f4;
  border-radius: 10px;
  overflow: hidden;
  transition: background-color 0.25s ease;
}
.approach-item:hover { background: #ececec; }
.approach-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.approach-item__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: #333333;
}
.approach-item__chevron {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.approach-item.is-open .approach-item__chevron {
  transform: rotate(180deg);
}
.approach-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  padding: 0 20px;
}
.approach-item.is-open .approach-item__body {
  grid-template-rows: 1fr;
  padding-bottom: 20px;
}
.approach-item__body > p {
  overflow: hidden;
}
.approach-item__body p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-grey);
  margin: 0;
}

/* ---------- Our Message (2787:1163) ---------- */
.message {
  position: relative;
  background: var(--color-bg-soft);
  padding: 100px 60px;
  overflow: hidden;
}
.message__lines {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
/* Group 41 — primary curving white lines top-right of section
   Figma: left=855, top=-85, w=584.5, h=335.6 within 1440-wide section. */
.message__lines--top {
  top: -85px;
  right: 0;
  width: 584.5px;
  height: 335.6px;
}
/* Group 40 — secondary diagonal lines just below Group 41
   Figma: left=806, top=9.5, w=632.5, h=148.5 within 1440-wide section. */
.message__lines--mid {
  top: 9.5px;
  right: 1.5px; /* 1440 - (806 + 632.5) */
  width: 632.5px;
  height: 148.5px;
}
/* 3-bar mountain mark — bottom-right of section
   Figma 2787:1164: left=1141, top=575, w=297.85, h=285.27 within 1440-wide section.
   Section is 860 tall so top=575 means bottom = 860 - 575 - 285.27 = -0.27 (≈ 0). */
.message__lines--bottom {
  bottom: 0;
  right: 1.15px; /* 1440 - (1141 + 297.85) */
  width: 297.85px;
  height: 285.27px;
  z-index: 0;
}
.message__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  padding: var(--container-pad);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 623px 647px;
  gap: 50px;
  align-items: center;
}
.message__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.message__head { display: flex; flex-direction: column; gap: 8px; }
.message__head .eyebrow { margin: 0; }
.message__head .section-title { margin: 0; line-height: 1.1; }
.message__body p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-grey);
  margin: 0 0 24px 0;
  text-wrap: pretty;
}
.message__body p:last-child { margin-bottom: 0; }
.message__sig {
  font-style: italic;
}
.message__photo {
  width: 647px;
  height: 558px;
  border-radius: 16px;
  overflow: hidden;
}
.message__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Meet our Team (2787:1183) ---------- */
.team {
  background: var(--color-white);
  padding: 80px 60px 100px;
}
.team__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.team__head {
  max-width: 1013px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.team__head .section-title { margin: 0; }
.team__lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-grey);
  margin: 0;
}
.team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* Team Card (Figma component 480:186) — 315×436
   Default state (Frame 1707479824, #ebebeb):
     - photo 284×355 centered horizontally at top:109 (clipped to card)
     - name (Manrope Medium 26px #525252) at top:14 left:14
     - title (Manrope Regular 14px #525252, text-center) just below name
   Hover state (Frame 1707479825):
     - card bg #eaf2f5
     - navy overlay rgba(7,29,73,0.8) covering whole card with 1.5px backdrop-blur
     - name + title rendered in white
     - "Read Full Bio →" CTA below title
*/
.team-card {
  position: relative;
  background: #ebebeb;
  border: 0;
  border-radius: 0;
  height: 436px;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  text-align: left;
  display: block;
  transition: background-color 0.3s ease;
}
.team-card__photo {
  position: absolute;
  top: 109px;
  left: 50%;
  transform: translateX(-50%);
  width: 284px;
  height: 355px;
  overflow: hidden;
  z-index: 1;
}
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.team-card__info {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 204px;
}
.team-card__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.1;
  color: #525252;
  margin: 0;
  text-transform: capitalize;
  text-wrap: balance;
}
.team-card__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: #525252;
  margin: 0;
  text-align: left;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Hover overlay — navy semi-transparent with backdrop blur, white text */
.team-card__hover {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(7, 29, 73, 0.8);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.team-card:hover .team-card__hover,
.team-card:focus-visible .team-card__hover {
  opacity: 1;
}
.team-card:hover { background: #eaf2f5; }
.team-card__hover-info {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 204px;
}
.team-card__hover-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.1;
  color: var(--color-white);
  margin: 0;
  text-transform: capitalize;
  text-wrap: balance;
}
.team-card__hover-title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-white);
  margin: 0;
  text-align: left;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
.team-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-white);
  text-transform: capitalize;
  margin-top: 4px;
}

/* ---------- Bio Modal (Figma 668:2752) ----------
   Modal frame: 1062×686, made of:
   - white card 1000×618 (radius 20px on TL, BL, BR; TR shared with controls)
   - control column 62×186 attached on right (TR, BR rounded 20px)
   Left panel: navy `#071d49` 404 wide full-height (extends below white card)
     - light-blue overlay #eaf2f5 covers top 473px (photo area)
     - photo (404×505) sits at top:16
     - Education block at left:28, top:493 — white text on navy bg
   Right panel: name, title, scrollable bio at left:454, vertically centered (h:550)
*/
.bio-modal[hidden] { display: none; }
.bio-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.bio-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 29, 73, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body.bio-modal-open { overflow: hidden; }

.bio-modal__shell {
  position: relative;
  width: 1062px;
  max-width: 100%;
  height: 686px;
  display: flex;
  align-items: flex-start;
}

/* White card 1000×618 with overflow-clip and TL/BL/BR radius */
.bio-modal__card {
  position: relative;
  width: 1000px;
  height: 618px;
  background: var(--color-white);
  border-radius: 20px 0 20px 20px;
  overflow: hidden;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.1);
}

/* Left panel: light-blue, sized to the photo */
.bio-modal__left {
  position: absolute;
  top: 0;
  left: 0;
  width: 404px;
  height: 100%;
  background: #eaf2f5;
}

/* Light-blue photo wrap fills the left panel */
.bio-modal__photo-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 404px;
  height: 100%;
  background: #eaf2f5;
  overflow: hidden;
}
.bio-modal__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}

/* Right panel: name + title + scrollable bio */
.bio-modal__right {
  position: absolute;
  left: 454px;
  top: 50%;
  transform: translateY(-50%);
  width: 478px;
  height: 550px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.bio-modal__heading { display: flex; flex-direction: column; gap: 6px; }
.bio-modal__name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 48px;
  line-height: 57.6px;
  color: var(--color-navy-dark);
  margin: 0;
  white-space: nowrap;
}
.bio-modal__role {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: #52525c;
  margin: 0;
}
.bio-modal__bio {
  flex: 1;
  overflow-y: auto;
  padding-right: 12px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #707372;
}
.bio-modal__bio p { margin: 0 0 16px 0; }
.bio-modal__bio p:last-child { margin-bottom: 0; }
/* Custom thin scrollbar to match Figma's 16px track at right edge */
.bio-modal__bio::-webkit-scrollbar { width: 16px; }
.bio-modal__bio::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); }
.bio-modal__bio::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.bio-modal__bio { scrollbar-color: rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.05); scrollbar-width: thin; }

/* Control column — 62 wide, attached right of card, rounded TR + BR */
.bio-modal__controls {
  width: 62px;
  display: flex;
  flex-direction: column;
  border-radius: 0 20px 20px 0;
  overflow: hidden;
  align-self: flex-start;
}
.bio-modal__btn {
  width: 62px;
  height: 62px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease;
}
.bio-modal__btn--close { background: #404040; }
.bio-modal__btn--close:hover { background: #2d2d23; }
.bio-modal__btn--prev,
.bio-modal__btn--next { background: #2d2d23; }
.bio-modal__btn--prev:hover,
.bio-modal__btn--next:hover { background: #1a1a14; }

/* ---------- About CTA Band overrides (eyebrow above title) ---------- */
.about-hero ~ * .cta-band__eyebrow,
.cta-band__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  color: var(--color-white);
  margin: 0 0 10px 0;
}

/* ---------- Industries — Hero (2316:1808) ---------- */
.industries-hero {
  position: relative;
  height: 423px;
  overflow: hidden;
  color: var(--color-white);
  isolation: isolate;
}
.industries-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.industries-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(269.9999962692598deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 84.529%),
    linear-gradient(239.86182381941686deg, rgba(0, 0, 0, 0) 13.61%, rgba(0, 0, 0, 0.2) 92.235%);
  z-index: 1;
}
.industries-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding: var(--container-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  padding-top: 59px;
}
.industries-hero__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 66px;
  line-height: 78px;
  color: var(--color-white);
  margin: 0;
  max-width: 739px;
}
.industries-hero__subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-white);
  margin: 0;
  max-width: 445px;
}

/* ---------- Industry Expertise (2717:2400) ---------- */
.expertise {
  background: var(--color-white);
  padding: 80px 60px;
}
.expertise__inner {
  max-width: var(--container-max);
  padding: var(--container-pad);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.expertise__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.expertise__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 48px;
  line-height: 57.6px;
  color: var(--color-navy-dark);
  margin: 0;
}
.expertise__lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #525252;
  margin: 0;
}

.expertise__tabs {
  display: flex;
  gap: 20px;
  height: 101px;
}
.expertise-tab {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  border-radius: 8px;
  border: 1px solid rgba(82, 82, 82, 0.2);
  background: var(--color-white);
  color: rgba(82, 82, 82, 0.8);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.expertise-tab:hover {
  background: var(--color-navy-dark);
  color: var(--color-white);
  border-color: var(--color-navy-dark);
}
.expertise-tab:hover .expertise-tab__label { font-weight: 700; }
.expertise-tab.is-active {
  background: var(--color-navy-dark);
  color: var(--color-white);
  border-color: var(--color-navy-dark);
}
.expertise-tab.is-active .expertise-tab__label { font-weight: 700; }
.expertise-tab__label {
  display: block;
  max-width: 175px;
}

.expertise__panels {
  position: relative;
}
.expertise-panel {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.expertise-panel[hidden] { display: none; }

.expertise-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 117px;
  align-items: start;
}
.expertise-row--wide {
  display: block;
}
.expertise-group {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.expertise-group__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: var(--color-navy-dark);
  margin: 0;
}
.expertise-group__list {
  list-style: disc;
  padding-left: 27px;
  margin: 0;
}
.expertise-group__list li {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: #525252;
}
.expertise-divider {
  height: 1px;
  background: rgba(82, 82, 82, 0.2);
  width: 100%;
}

/* ---------- Contact — Hero (1008:1328) ---------- */
.contact-hero {
  position: relative;
  height: 423px;
  overflow: hidden;
  color: var(--color-white);
  isolation: isolate;
}
.contact-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.contact-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding: var(--container-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  padding-top: 59px;
}
.contact-hero__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 66px;
  line-height: 78px;
  color: var(--color-white);
  margin: 0;
  max-width: 739px;
}
.contact-hero__subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-white);
  margin: 0;
  max-width: 445px;
}

/* ---------- Contact — Card (1012:1596) ---------- */
.contact-card-section {
  background: var(--color-white);
  padding: 80px 79px;
}
.contact-card {
  background: var(--color-bg-soft);
  border-radius: 10px;
  max-width: 1282px;
  height: 517px;
  margin: 0 auto;
  padding: 60px 91px;
  display: flex;
  align-items: center;
  gap: 40px;
  overflow: hidden;
}
.contact-card__info {
  width: 330px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
}
.contact-card__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}
.contact-card__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.contact-card__city {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  color: #525252;
  margin: 0;
}
.contact-card__address {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: #525252;
  margin: 0;
}
.contact-card__link {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: #525252;
  text-decoration: none;
  transition: color 0.2s ease;
}
.contact-card__link:hover {
  color: var(--color-navy-dark);
  text-decoration: underline;
}
.contact-card__btn {
  margin-top: 0;
}
.contact-card__photo {
  flex: 1;
  height: 397px;
  border-radius: 10px;
  overflow: hidden;
}
.contact-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Services — Hero (668:2780) ---------- */
.services-hero {
  position: relative;
  height: 423px;
  overflow: hidden;
  color: var(--color-white);
  isolation: isolate;
}
.services-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  z-index: 0;
}
.services-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(269.9999962692598deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 84.529%),
    linear-gradient(239.86182381941686deg, rgba(0, 0, 0, 0) 13.61%, rgba(0, 0, 0, 0.2) 92.235%);
  z-index: 1;
}
.services-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding: var(--container-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  padding-top: 59px;
}
.services-hero__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 66px;
  line-height: 78px;
  color: var(--color-white);
  margin: 0;
  max-width: 739px;
}
.services-hero__subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-white);
  margin: 0;
  max-width: 596px;
}

/* ---------- Transaction & Portfolio Services (1521:3553 — Component 82) ---------- */
.transaction {
  background: var(--color-white);
  padding: 100px 60px 0;
  display: flex;
  justify-content: center;
}
.transaction__card {
  background: var(--color-white);
  border-radius: 10px;
  width: 100%;
  max-width: var(--container-max);
  padding: 40px 15px 60px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
}
.transaction__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  max-width: 731px;
}
.transaction__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 48px;
  line-height: 57.6px;
  color: var(--color-navy-dark);
  margin: 0;
}
.transaction__sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #525252;
  margin: 0;
}
/* Desktop: staggered 2-col grid (cards) + side panel.
   Cards: 319×220 each, 19px col-gap → 657 wide block.
   Vertical stagger per Figma:
   - thesis (top-left):     top:   0
   - investment (top-right): top:  51px
   - value (bottom-left):    top: 244px
   - exit (bottom-right):    top: 295px
   Block height = 295 + 220 = 515. */
.transaction__grid {
  position: relative;
  display: grid;
  grid-template-columns: 657px 1fr;
  grid-template-rows: 515px;
  column-gap: 50px;
  width: 100%;
  align-items: start;
}
.tx-card {
  position: absolute;
  width: 319px;
  height: 220px;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tx-card[data-tx-target="thesis"]     { left: 0;     top: 0; }
.tx-card[data-tx-target="investment"] { left: 338px; top: 51px; }
.tx-card[data-tx-target="value"]      { left: 0;     top: 244px; }
.tx-card[data-tx-target="exit"]       { left: 338px; top: 295px; }
.tx-card__toggle { display: none; }

/* Navy fill — animates upward from the 10px bottom bar to fill the card on hover/active */
.tx-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background: var(--color-navy-dark);
  transition: height 0.35s ease;
  z-index: 0;
}
.tx-card.is-active::after,
.tx-card:hover::after {
  height: 100%;
}
.tx-card__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 270px;
  text-align: center;
}
.tx-card__icon {
  width: 50px;
  height: 50px;
  display: block;
  transition: filter 0.25s ease;
}
.tx-card__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  color: var(--color-navy-dark);
  transition: color 0.25s ease;
}
.tx-card.is-active .tx-card__icon,
.tx-card:hover .tx-card__icon {
  filter: brightness(0) invert(1);
}
.tx-card.is-active .tx-card__title,
.tx-card:hover .tx-card__title {
  color: var(--color-white);
}

.tx-panel {
  display: flex;
  flex-direction: column;
  gap: 30px;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  align-self: center;
}
.tx-panel[hidden] { display: none; }
.tx-panel__entry {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tx-panel__heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-navy-dark);
  margin: 0;
}
.tx-panel__body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #525252;
  margin: 0;
  text-wrap: pretty;
}

/* ---------- Lifecycle / What We Do (1965:2052) ---------- */
.lifecycle {
  position: relative;
  background: var(--color-bg-soft);
  padding: 100px 60px;
  overflow: hidden;
}
.lifecycle__lines {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.lifecycle__lines--top {
  top: -85px;
  right: 0.5px;
  width: 584.5px;
  height: 335.6px;
}
.lifecycle__lines--mid {
  top: 9.5px;
  right: 1.5px;
  width: 632.5px;
  height: 148.5px;
}
.lifecycle__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  padding: var(--container-pad);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.lifecycle__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 1013px;
}
.lifecycle__head .eyebrow {
  font-size: 24px;
  line-height: 36px;
  color: #525252;
  margin: 0;
}
.lifecycle__head .section-title {
  margin: 0;
  text-transform: capitalize;
}
.lifecycle__lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #525252;
  margin: 8px 0 0 0;
}
.lifecycle__groups {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.lifecycle-group {
  position: relative;
  display: flex;
  flex-direction: column;
}
/* Pill + frame container. Figma `Rectangle 3464244` is a real SVG path: an open-bottom
   rounded shape that wraps the navy pill at top-left and drops a stub down to the rule.
   Native height is 123–124px; pill sits at (10,10) inside the frame; frame width varies
   per group (Pre-Investment 186, Value Creation 177, Exit Support 158). */
.lifecycle-group__pill {
  position: relative;
  height: 123px;
  margin-left: 20px;
  align-self: flex-start;
  z-index: 2;
}
.lifecycle-group__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.lifecycle-group__label {
  position: absolute;
  /* Pill is centered inside the frame's pill-bay (top half of the 123px frame, ending at
     y=72 where the frame curves under). Pill is 52px tall with 10px gutter on all four
     sides — so top:10, bottom:61 (72 - 10 - 1 stroke) inside the bay, left:10, right:10. */
  top: 10px;
  left: 10px;
  right: 10px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy-dark);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 13.6px;
  color: var(--color-white);
  letter-spacing: -0.1px;
  white-space: nowrap;
  padding: 0 16px;
  box-sizing: border-box;
}
.lifecycle-group__rule {
  height: 1px;
  background: rgba(7, 29, 73, 0.4);
  /* The rule must START at the bottom-left tip of the SVG frame's stub (x=20, the frame's
     left edge) and extend rightward — not pass underneath the stub. Pill is at margin-left:20
     so its frame's left edge is x=20; the rule begins there. */
  margin-left: 20px;
  width: calc(100% - 20px);
  /* Pull rule up by 0.5px so it visually meets the bottom of the SVG frame's stub. */
  margin-top: -0.5px;
  position: relative;
  z-index: 1;
}
.lifecycle-group__cards {
  display: grid;
  gap: clamp(24px, 3vw, 50px);
  padding: 0 40px;
  position: relative;
  z-index: 2;
}
.lifecycle-group__cards--1 {
  grid-template-columns: 1fr;
  justify-items: center;
}
.lifecycle-group__cards--1 .lifecycle-card { max-width: 650px; }
.lifecycle-group__cards--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lifecycle-group__cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lifecycle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 0 17px;
}
.lifecycle-card__dot {
  width: 40px;
  height: 39.33px;
  display: block;
  /* Center the 39.33px dot vertically on the rule above by pulling its top up by half its height. */
  margin-top: -19.66px;
  transition: transform 0.25s ease;
}
@keyframes icon-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.lifecycle-card:hover .lifecycle-card__dot {
  animation: icon-pulse 1.6s ease-in-out infinite;
}
.lifecycle-card__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  line-height: 31.92px;
  color: var(--color-navy-dark);
  margin: 0;
  letter-spacing: -0.24px;
}
.lifecycle-card__body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #525252;
  margin: 0;
  text-wrap: pretty;
}

/* ---------- Capabilities — Common Engagement Components (1965:1977) ---------- */
.capabilities {
  background: var(--color-white);
  padding: 80px 60px;
}
.capabilities__inner {
  max-width: var(--container-max);
  padding: var(--container-pad);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.capabilities__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 1013px;
}
.capabilities__eyebrow {
  margin: 0;
}
.capabilities__head .section-title {
  margin: 0;
}
.capabilities__tabs {
  display: flex;
  gap: 20px;
  height: 101px;
}
.cap-tab {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  border-radius: 8px;
  border: 1px solid rgba(82, 82, 82, 0.2);
  background: var(--color-white);
  color: rgba(82, 82, 82, 0.8);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cap-tab:hover {
  background: var(--color-navy-dark);
  color: var(--color-white);
  border-color: var(--color-navy-dark);
}
.cap-tab:hover .cap-tab__label { font-weight: 700; }
.cap-tab.is-active {
  background: var(--color-navy-dark);
  color: var(--color-white);
  border-color: var(--color-navy-dark);
}
.cap-tab.is-active .cap-tab__label { font-weight: 700; }
.cap-tab__label {
  display: block;
  max-width: 175px;
}
.capabilities__divider {
  height: 1px;
  background: rgba(82, 82, 82, 0.2);
  width: 100%;
}
/* Stack every .cap-panel in the same grid cell so the panels container is
   always sized to the tallest panel. This keeps the page length stable when
   switching tabs — inactive panels stay in the layout but are hidden via
   visibility so they do not steal pointer/focus. Mobile re-overrides this to
   the accordion pattern below. */
.capabilities__panels {
  display: grid;
  grid-template-columns: 1fr;
}
.cap-panel {
  grid-area: 1 / 1;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.cap-panel[hidden] {
  display: flex;
  visibility: hidden;
  pointer-events: none;
}
.cap-panel__copy {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cap-panel__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  color: var(--color-navy-dark);
  margin: 0;
}
.cap-panel__body p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #525252;
  margin: 0 0 24px 0;
  text-wrap: pretty;
}
.cap-panel__body p:last-child { margin: 0; }
.cap-panel__qheading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #525252;
  margin: 0;
}
.cap-panel__qlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cap-panel__qitem {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.cap-panel__qicon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.cap-panel__qitem span {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 23px;
  color: #525252;
  text-wrap: pretty;
}
.cap-panel__media {
  flex-shrink: 0;
  width: 613px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cap-panel__media img {
  width: 100%;
  height: auto;
  display: block;
}
.cap-panel__placeholder {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #707372;
  font-style: italic;
  margin: 0;
}


/* ---------- Careers page (Figma 808:872) ---------- */

/* Careers Hero (808:873) */
.careers-hero {
  position: relative;
  height: 423px;
  overflow: hidden;
  color: var(--color-white);
  isolation: isolate;
}
.careers-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  z-index: 0;
}
.careers-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(269.9999962692598deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 84.529%),
    linear-gradient(239.86182381941686deg, rgba(0, 0, 0, 0) 13.61%, rgba(0, 0, 0, 0.2) 92.235%);
  z-index: 1;
}
.careers-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding: var(--container-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  padding-top: 59px;
}
.careers-hero__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 66px;
  line-height: 78px;
  color: var(--color-white);
  margin: 0;
  max-width: 739px;
}
.careers-hero__subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-white);
  margin: 0;
  max-width: 445px;
}

/* Our Core Tenets (1756:6398) */
.tenets {
  background: var(--color-white);
  padding: 41px 0 58px;
}
.tenets__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.tenets__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.tenets__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 48px;
  line-height: 57.6px;
  color: var(--color-navy-dark);
  margin: 0;
  text-align: center;
  letter-spacing: -0.01em;
}
.tenets__lede {
  margin: 0;
  max-width: 801px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #000;
  text-align: center;
}
.tenets__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 45px;
  align-items: stretch;
  width: 100%;
}
.tenet-card {
  flex: 1 0 0;
  min-width: 0;
  background: var(--color-white);
  border-radius: 10px;
  height: 152px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  filter: drop-shadow(0 4px 32px rgba(0, 0, 0, 0.06));
  transition: transform 0.25s ease, filter 0.25s ease;
}
.tenet-card:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 10px 28px rgba(7, 29, 73, 0.12));
}
.tenet-card__icon {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tenet-card__icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}
.tenet-card__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--color-navy-dark);
  margin: 0;
  text-align: center;
}

/* Why Join Us (1636:1720) */
.why-join {
  background: var(--color-bg-soft);
  padding: 80px 0;
}
.why-join__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.why-join__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.why-join__head .eyebrow {
  margin: 0;
  font-size: 24px;
  line-height: 36px;
  font-weight: 500;
  color: #525252;
}
.why-join__head .section-title {
  margin: 0;
  font-size: 48px;
  line-height: 57.6px;
  font-weight: 600;
  color: var(--color-navy-dark);
}
.why-join__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.benefit-card {
  position: relative;
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-navy-dark);
  height: 251px;
  padding: 25px 14px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  color: #1d428a;
  overflow: hidden;
  transition: color 0.25s ease, padding 0.25s ease;
}
.benefit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  background: var(--color-navy-dark);
  transition: height 0.35s ease;
  z-index: 0;
}
.benefit-card:hover::before {
  height: 100%;
}
.benefit-card__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.benefit-card__title {
  flex: 1;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  color: #1d428a;
  transition: color 0.25s ease;
}
.benefit-card__icon {
  flex-shrink: 0;
  display: block;
  width: 26px;
  height: 24.9015px;
  color: #35476b;
  transition: color 0.25s ease;
}
.benefit-card__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.benefit-card__body {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #525252;
  transition: color 0.25s ease;
  text-wrap: pretty;
}
.benefit-card:hover {
  border-top-color: var(--color-navy-dark);
}
.benefit-card:hover .benefit-card__title,
.benefit-card:hover .benefit-card__body {
  color: var(--color-white);
}
.benefit-card:hover .benefit-card__icon {
  color: var(--color-white);
}

/* Our Roles (2246:1916) */
.roles {
  background: var(--color-white);
  padding: 80px 0;
}
.roles__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.roles__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.roles__head .eyebrow {
  margin: 0;
  font-size: 24px;
  line-height: 36px;
  font-weight: 500;
  color: #525252;
}
.roles__head .section-title {
  margin: 0;
  font-size: 48px;
  line-height: 57.6px;
  font-weight: 600;
  color: var(--color-navy-dark);
}
.roles__groups {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}
.roles__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.roles__department {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 30px;
  line-height: 44.8px;
  color: #525252;
}
.roles__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.role-row {
  border-bottom: 1px solid rgba(82, 82, 82, 0.1);
  background: var(--color-white);
  transition: background 0.2s ease;
}
.role-row:hover {
  background: #f9f9f9;
}
.role-row__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  padding: 0 4px;
  text-decoration: none;
  color: #525252;
  gap: 24px;
}
.role-row__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: #525252;
}
.role-row__meta {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #525252;
  text-align: right;
  white-space: nowrap;
}
/* ---------- Nav + footer mobile breakpoint (1024px) — CD-1935
   The desktop nav + CTA overflow at iPad portrait (820px), and the desktop
   footer (logo + 5-link nav + 3 contact items in two horizontal rows) doesn't
   fit either. Switch to the hamburger drawer + stacked footer at 1024px so
   iPad portrait gets the mobile experience while iPad landscape (1180px)
   keeps the desktop layout. Typography rules stay on the 768px breakpoint. */
@media (max-width: 1024px) {
  .site-header__nav,
  .site-header__cta {
    display: none;
  }
  .site-header__toggle {
    display: inline-flex;
    margin-left: auto;
  }

  /* Footer: stack rows + show mobile bottom-nav so it fits at iPad portrait. */
  .site-footer__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .site-footer__row--top .site-footer__nav { display: none; }
  .site-footer__contact {
    flex-direction: column;
    gap: 14px;
    max-width: none;
  }
  .site-footer__nav--mobile {
    display: block;
    margin: 12px 0 0;
    padding-top: 25px;
    border-top: 1px solid rgba(80, 81, 86, 0.2);
    width: 100%;
    line-height: 27px;
  }
  .site-footer__nav--mobile a {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    color: #505156;
    line-height: 27px;
    padding-bottom: 0;
    margin-right: 9px;
  }
  .site-footer__nav--mobile a::after { display: none; }
  .site-footer__nav--mobile a + a {
    padding-left: 9px;
    border-left: 1px solid #505156;
  }

  /* Hamburger → X morph (mirrors the 768px rules). */
  body.nav-open .site-header__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  body.nav-open .site-header__toggle-bar:nth-child(2) {
    opacity: 0;
  }
  body.nav-open .site-header__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Drawer panel — full-viewport navy beneath the fixed header.
     When nav is open, lock the header to the navy chrome at the design
     header height so the drawer reads as one continuous panel. Without
     this lock the .is-scrolled rule shrinks the bar to 70px while the
     drawer is still pinned to var(--header-height) (88-90px) — the gap
     reveals page content peeking through (CD-1941 follow-up). */
  body.nav-open { overflow: hidden; }
  body.nav-open .site-header,
  body.nav-open .site-header.is-scrolled,
  body.nav-open .site-header.is-over-hero,
  body.nav-open .site-header.is-scrolled.is-over-hero {
    background: var(--color-navy-dark);
    height: var(--header-height);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.nav-open .site-header__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 12px 0 24px;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background: var(--color-navy-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    overflow-y: auto;
    z-index: 99;
  }
  /* Drawer is open over a navy locked header — show the blue-icon +
     white-text overhero variant and hide the dark default in every
     header state (CD-1920 + CD-1941). */
  body.nav-open .site-header__logo-img--default,
  body.nav-open .site-header.is-scrolled .site-header__logo-img--default,
  body.nav-open .site-header.is-over-hero .site-header__logo-img--default,
  body.nav-open .site-header.is-scrolled.is-over-hero .site-header__logo-img--default {
    display: none;
  }
  body.nav-open .site-header__logo-img--overhero,
  body.nav-open .site-header.is-scrolled .site-header__logo-img--overhero,
  body.nav-open .site-header.is-over-hero .site-header__logo-img--overhero,
  body.nav-open .site-header.is-scrolled.is-over-hero .site-header__logo-img--overhero {
    display: block;
  }
  /* Drawer link color stays white regardless of scroll/hero state.
     The desktop scroll-blue rule near line 137 ties on specificity with
     `body.nav-open .site-header__nav-link` and wins on source order at
     iPad widths without these explicit overrides (CD-1941 follow-up). */
  body.nav-open .site-header__nav-link,
  body.nav-open .site-header.is-scrolled .site-header__nav-link,
  body.nav-open .site-header.is-over-hero .site-header__nav-link,
  body.nav-open .site-header.is-scrolled.is-over-hero .site-header__nav-link {
    color: var(--color-white);
    padding: 16px 24px;
    font-size: 18px;
    width: 100%;
  }
  body.nav-open .site-header__nav-link::after { display: none; }
  body.nav-open .site-header__nav-link.is-active {
    border-left: 3px solid var(--color-cyan);
    padding-left: 21px;
  }
  body.nav-open .site-header__cta {
    display: inline-flex;
    position: fixed;
    top: calc(100vh - 72px);
    left: 24px;
    right: 24px;
    width: auto;
    height: 48px;
    padding: 0;
    margin: 0;
    background: var(--color-white);
    color: var(--color-navy-dark);
    border-radius: 4px;
    border: 0;
    z-index: 100;
  }
}

/* ---------- Tablet / laptop system (769px — 1199px)
   Bridges the gap between the 1440-design desktop and 768-design mobile.
   Goal: graceful degradation, not pixel-fidelity. Drop 3-up grids to 2-up,
   shrink container padding, let `text-wrap: pretty` rebalance copy. */
@media (max-width: 1199px) {
  :root {
    --container-pad: 32px;
  }

  /* Lifecycle 3-card row -> 2-up; 1-card and 2-card stay as is */
  .lifecycle-group__cards--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The Sell-Side single card already centers; nothing to change. */

  /* Why Join Us 3-up -> 2-up */
  .why-join__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Capabilities tabs row gets cramped; allow wrap to two rows */
  .capabilities__tabs {
    flex-wrap: wrap;
    height: auto;
  }
  .cap-tab {
    flex: 1 1 calc(33.333% - 14px);
    min-height: 80px;
  }

  /* Capabilities panel: image shrinks proportionally so copy keeps a workable width */
  .cap-panel__media {
    width: clamp(320px, 38vw, 613px);
  }

  /* Transaction & Portfolio: below the card-grid's natural 1240px width the side
     panel collapses to nothing. Stack the panel below the card grid instead so
     the body copy retains a readable width. */
  .transaction__grid {
    grid-template-columns: 657px;
    grid-template-rows: 515px auto;
    column-gap: 0;
    row-gap: 40px;
    justify-content: center;
  }
  .tx-panel {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    width: 100%;
    max-width: 657px;
    margin: 0 auto;
  }

  /* Footer nav: tighten gap so 5 links fit with logo + contact column */
  .site-footer__nav {
    gap: clamp(20px, 3vw, 60px);
  }

  /* About > Meet our Team: 4-up team cards become unreadably narrow below
     ~1240. Drop to 3-up so the 315x436 design intent stays close to honored. */
  .team__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* About > A Note from Highland: desktop is a 623px + 50 + 647px grid that
   needs the full 1320px container to fit. Below ~1380 viewport (1320 inner +
   2x30 padding buffer) the photo overflows. Stack to a single column so the
   photo can shrink to fit. This breakpoint is wider than the main 1199 tablet
   one because the message grid is unusually wide for desktop. */
@media (max-width: 1379px) {
  .message__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: stretch;
  }
  .message__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 647 / 558;
  }
}

/* ---------- Mobile system (Figma Home Mobile 2863:1320 — design system source of truth)
   Frame width: 428px, content width: 388px, gutters 20px
   Section vertical padding: 40px
   Eyebrow: 16px Manrope Medium #707372 leading 36
   Section title: 30px Manrope Bold #071d49
   Body: 16px Manrope Regular #525252 leading 24
*/
@media (max-width: 768px) {
  :root {
    --container-pad: 20px;
    --header-height: 88px;
  }

  /* Site header — navy on mobile, regardless of scroll/hero state.
     Locks colors so the hamburger never disappears (CD-1930) and drawer
     chrome stays consistent (CD-1941). */
  .site-header,
  .site-header.is-scrolled,
  .site-header.is-over-hero,
  .site-header.is-scrolled.is-over-hero {
    background: var(--color-navy-dark);
    height: var(--header-height);
    box-shadow: none;
  }
  .site-header__inner {
    padding: 0 16px;
  }
  .site-header__logo {
    width: 161px;
    height: 30px;
  }
  /* Mobile header is locked to navy in every state (CD-1930), so always
     show the blue-icon + white-text overhero logo variant and hide the
     dark default. (CD-1920 supersedes the old filter hack.) */
  .site-header__logo-img--default,
  .site-header.is-scrolled .site-header__logo-img--default,
  .site-header.is-over-hero .site-header__logo-img--default,
  .site-header.is-scrolled.is-over-hero .site-header__logo-img--default {
    display: none;
  }
  .site-header__logo-img--overhero,
  .site-header.is-scrolled .site-header__logo-img--overhero,
  .site-header.is-over-hero .site-header__logo-img--overhero,
  .site-header.is-scrolled.is-over-hero .site-header__logo-img--overhero {
    display: block;
  }
  .site-header__nav,
  .site-header__cta {
    display: none;
  }
  .site-header__toggle {
    display: inline-flex;
    margin-left: auto;
    width: 44px;
    height: 44px;
    gap: 5px;
    position: relative;
  }
  .site-header__toggle-bar,
  .site-header.is-scrolled .site-header__toggle-bar,
  .site-header.is-over-hero .site-header__toggle-bar {
    background: var(--color-white);
    width: 22px;
  }

  /* Hamburger → X morph when drawer is open (CD-1942).
     Bars 1 + 3 collapse to center and rotate; bar 2 fades out.
     Toggle has 44px height, 5px gap → outer bars sit 7px from center. */
  body.nav-open .site-header__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  body.nav-open .site-header__toggle-bar:nth-child(2) {
    opacity: 0;
  }
  body.nav-open .site-header__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Mobile drawer — full-viewport navy panel beneath the fixed header bar
     (CD-1941). Both nav and CTA become position:fixed children so they render
     inside the panel rather than inside the header bar row. Background scroll
     is locked while open. */
  body.nav-open {
    overflow: hidden;
  }
  body.nav-open .site-header__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 12px 0 24px;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background: var(--color-navy-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    overflow-y: auto;
    z-index: 99;
  }
  /* Drawer link color stays white regardless of scroll/hero state (CD-1941). */
  body.nav-open .site-header__nav-link,
  body.nav-open .site-header.is-scrolled .site-header__nav-link,
  body.nav-open .site-header.is-over-hero .site-header__nav-link {
    color: var(--color-white);
    padding: 16px 24px;
    font-size: 18px;
    width: 100%;
  }
  /* Kill the desktop sliding underline; replace with active-page indicator (CD-1943). */
  body.nav-open .site-header__nav-link::after { display: none; }
  body.nav-open .site-header__nav-link.is-active {
    border-left: 3px solid var(--color-cyan);
    padding-left: 21px;
  }
  /* CTA pinned at the bottom of the drawer panel.
     We anchor with top:calc(100vh - 72px) because `top:auto` would resolve to
     the static position inside the header row (~16px) and override bottom. */
  body.nav-open .site-header__cta {
    display: inline-flex;
    position: fixed;
    top: calc(100vh - 72px);
    left: 24px;
    right: 24px;
    width: auto;
    height: 48px;
    padding: 0;
    margin: 0;
    background: var(--color-white);
    color: var(--color-navy-dark);
    border-radius: 4px;
    border: 0;
    z-index: 100;
  }

  /* ============================================================
     HOMEPAGE (Figma 2863:1320)
     ============================================================ */

  /* Hero — 590px tall, 88px nav at top, content vertically centered */
  .hero {
    height: 590px;
    min-height: 590px;
  }
  .hero__overlay {
    background: rgba(0, 0, 0, 0.2);
  }
  .hero__content {
    padding: 0 28px;
    padding-top: 88px;
    justify-content: center;
  }
  .hero__title {
    font-size: 40px;
    line-height: 1.1;
    font-weight: 500;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    max-width: none;
  }
  .hero__subtitle {
    font-size: 16px;
    line-height: 20px;
    margin-top: 10px;
    max-width: none;
  }

  /* Philosophy — stacked white cards (no hover content reveal on mobile) */
  .philosophy {
    padding: 40px 0;
  }
  .philosophy__lines { display: none; }
  .philosophy__inner {
    padding: 0 20px;
    gap: 24px;
  }
  .philosophy__intro { max-width: none; }
  .philosophy .eyebrow {
    font-size: 16px;
    line-height: 36px;
  }
  .philosophy .section-title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .philosophy__lede {
    font-size: 16px;
    line-height: 24px;
    margin-top: 18px;
    color: #525252;
  }
  .philosophy__cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .phil-card {
    min-height: 120px;
    height: auto;
    border-radius: 16px;
    padding: 16px 20px;
  }
  /* Mobile shows the expanded "hover" body always (no tap to reveal). The short
     desktop title is dropped on mobile per CD-1923 — this is an intentional
     divergence from Figma to match the standard hover-on-mobile UX pattern. */
  .phil-card__title { display: none; }
  .phil-card__hover {
    position: static;
    inset: auto;
    opacity: 1;
    padding: 0;
    color: var(--color-text);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
  }
  .phil-card:hover { background: var(--color-white); }

  /* What We Do — stacked, carousel single visible card */
  .what-we-do {
    padding: 40px 0 0;
    min-height: auto;
  }
  .what-we-do::after {
    /* Keep the curved background but scale to mobile */
    height: 396px;
  }
  .what-we-do__intro {
    padding: 0 20px;
  }
  .what-we-do__intro .eyebrow {
    font-size: 16px;
    line-height: 36px;
  }
  .what-we-do__intro .section-title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    max-width: none;
  }
  .what-we-do__lede {
    font-size: 16px;
    line-height: 24px;
    margin: 18px 0 24px;
    max-width: none;
  }
  .what-we-do .btn { padding: 16px 28px; font-size: 14px; }

  /* Homepage What We Do timeline — mobile layout matches Figma 2863:1852.
     Decorative zigzag SVG fills the upper portion (right-aligned, overflows
     left edge intentionally to ~-401 in Figma). The carousel sits below it
     with prev/next controls absolutely positioned at the top-right. Each
     card is bounded by a 1px navy/0.2 vertical line on its left and right
     edges and has a horizontal divider directly below the title with
     gradient circle caps on each end (the "blue dots"). */
  .services-timeline {
    position: relative;
    padding: 0;
    margin-top: 0;
    background: var(--color-white);
    padding-top: 220px;
    padding-bottom: 24px;
  }
  /* Decorative SVG: anchored to the right edge with native ~829-wide path;
     the left side bleeds off-screen, leaving the zigzag mountain motif
     visible in the upper-right of the section per Figma layout. Override
     the global img { max-width: 100% } so the SVG can exceed viewport. */
  .services-timeline__decoration {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: 829px;
    max-width: none;
    height: 220px;
    pointer-events: none;
    z-index: 0;
  }
  .services-timeline__track {
    position: relative;
    z-index: 1;
    padding: 0 20px;
    padding-top: 0;
    gap: 0;
  }
  .service-step {
    flex: 0 0 calc(100vw - 40px);
    padding: 16px 19px 24px 19px;
    border-left: 1px solid rgba(29, 66, 138, 0.2);
    border-right: 1px solid rgba(29, 66, 138, 0.2);
    border-top: 0;
    border-bottom: 0;
    background: transparent;
    position: relative;
  }
  .service-step:first-child { padding-left: 19px; }
  .service-step__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    color: #1d428a;
    text-transform: capitalize;
  }
  .service-step__line {
    display: block;
    height: 1px;
    background: rgba(29, 66, 138, 0.2);
    margin: 12px 0 14px;
    position: relative;
    width: 100%;
  }
  .service-step__dot,
  .service-step__dot--end {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 12px;
    background: linear-gradient(-50deg, #071d49 0%, #5c88da 100%);
  }
  .service-step__dot { left: -6px; }
  .service-step__dot--end {
    display: block;
    left: auto;
    right: -6px;
  }
  .service-step__body {
    font-size: 16px;
    line-height: 24px;
    color: #1d428a;
    max-width: none;
    margin: 0;
  }
  /* Controls: absolutely-positioned at top-right of the timeline, ABOVE the
     card. Per Figma node 2863:1842 the buttons are at top:1911 of the
     section (which starts ~1739) — ~172px from the section top. */
  .services-timeline__controls {
    position: absolute;
    top: 172px;
    right: 20px;
    bottom: auto;
    left: auto;
    z-index: 2;
    padding: 0;
    margin: 0;
    justify-content: flex-end;
    gap: 14px;
  }
  .timeline-btn {
    width: 43px;
    height: 43px;
    border-radius: 11px;
    background: rgba(29, 66, 138, 0.2);
  }
  .timeline-btn svg { width: 16px; height: 16px; }

  /* Who We Serve — navy bg, stacked cards with cyan top border */
  .who-we-serve {
    padding: 40px 20px;
    background: var(--color-navy-mid);
  }
  .who-we-serve__inner {
    gap: 40px;
  }
  .who-we-serve__intro { max-width: none; }
  .who-we-serve .eyebrow {
    font-size: 16px;
    line-height: 36px;
    color: rgba(255, 255, 255, 0.85);
  }
  .who-we-serve .section-title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
  }
  .who-we-serve__lede {
    font-size: 16px;
    line-height: 24px;
    margin-top: 16px;
  }
  .who-we-serve__cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* Serve cards — anchor icon top-right of the card, not next to the title text.
     Without this, the icon migrates with the last line when the title wraps to
     multiple lines (e.g. "Corporate & PE-Backed Businesses"). Per Figma 2863:1891
     the arrow sits at the card's right edge, vertically aligned with the title row.
     CD-1931. */
  .serve-card {
    position: relative;
    border-top: 1px solid var(--color-cyan);
    padding: 16px 30px 16px 0;
    min-height: auto;
  }
  .serve-card__head {
    margin-bottom: 12px;
    display: block;
  }
  .serve-card__title {
    font-size: 16px;
    line-height: 28px;
    padding-right: 8px;
  }
  .serve-card__icon {
    position: absolute;
    top: 21px;
    right: 0;
    width: 18px;
    height: 17px;
  }
  .serve-card__body {
    font-size: 14px;
    line-height: 24px;
  }

  /* Industries — stacked image cards */
  .industries {
    padding: 40px 20px;
  }
  .industries__inner {
    gap: 30px;
  }
  .industries__intro { max-width: none; }
  .industries .eyebrow {
    font-size: 16px;
    line-height: 36px;
  }
  .industries .section-title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
  }
  .industries__lede {
    font-size: 16px;
    line-height: 24px;
    color: #707372;
    margin: 0 0 6px 0;
  }
  .industries .btn { padding: 16px 28px; font-size: 14px; }
  .industries__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .industry-card {
    height: 180px;
    padding: 16px 20px;
    border-radius: 16px;
  }
  .industry-card span {
    font-size: 20px;
    line-height: 36.4px;
    font-weight: 500;
  }

  /* CTA Band — stack vertically */
  .cta-band {
    height: auto;
    min-height: 285px;
    padding: 40px 0;
  }
  .cta-band::before { width: 1100px; height: 1100px; }
  .cta-band::after { width: 1756px; height: 1756px; left: -1087px; top: -72px; }
  .cta-band__inner {
    padding: 0 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .cta-band__text { max-width: none; }
  .cta-band__eyebrow {
    font-size: 16px;
    line-height: 36px;
    margin-bottom: 6px;
  }
  .cta-band__title {
    font-size: 30px;
    line-height: 1.2;
  }
  .cta-band__sub {
    font-size: 16px;
    line-height: 24px;
    margin-top: 18px;
  }
  .cta-band .btn--white {
    align-self: flex-start;
    padding: 16px 28px;
    font-size: 14px;
  }

  /* Site footer — Figma 2863:2314.
     Order: logo → contact info → divider → page links row at the bottom.
     The desktop nav is hidden on mobile; .site-footer__nav--mobile renders
     instead as the bottom pipe-separated link row (CD-1934). */
  .site-footer__card {
    padding: 40px 20px 24px;
    gap: 20px;
  }
  .site-footer__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .site-footer__row--top {
    align-items: flex-start;
  }
  /* Hide the desktop in-row nav on mobile — replaced by the bottom mobile nav. */
  .site-footer__row--top .site-footer__nav { display: none; }
  .site-footer__contact {
    flex-direction: column;
    gap: 14px;
    max-width: none;
  }
  .site-footer__contact-item span {
    font-size: 16px;
    line-height: 30px;
    font-weight: 600;
    color: #444;
  }
  .site-footer__social { display: none; }

  /* Mobile-only bottom nav — pipe-separated row, divider line above (Figma 2863:2332/2333).
     Each link + its leading divider form a single inline-block so the pipe never
     orphans at the start of a wrapped line. */
  .site-footer__nav--mobile {
    display: block;
    margin: 12px 0 0;
    padding-top: 25px;
    border-top: 1px solid rgba(80, 81, 86, 0.2);
    width: 100%;
    line-height: 27px;
  }
  .site-footer__nav--mobile a {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    color: #505156;
    line-height: 27px;
    padding-bottom: 0;
    margin-right: 9px;
  }
  .site-footer__nav--mobile a::after { display: none; }
  .site-footer__nav--mobile a + a {
    padding-left: 9px;
    border-left: 1px solid #505156;
  }

  .site-footer__legal {
    padding: 24px 20px;
    background: var(--color-navy-dark);
  }
  .site-footer__legal-inner {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }
  .site-footer__legal p {
    font-size: 14px;
    line-height: 27px;
    font-weight: 300;
  }

  /* ============================================================
     ABOUT US (Figma 2902:6005)
     ============================================================ */

  .about-hero { height: 329px; }
  .about-hero__content {
    padding: 0 28px;
    padding-top: 96px;
    gap: 10px;
  }
  .about-hero__title {
    font-size: 40px;
    line-height: 1.2;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  }
  .about-hero__subtitle {
    font-size: 16px;
    line-height: 20px;
    max-width: none;
  }

  /* HSG At A Glance — single column on mobile (matches Figma) */
  .glance {
    padding: 40px 0;
  }
  .glance__inner { padding: 0 20px; gap: 24px; }
  .glance__title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
  }
  .glance__grid {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: none;
  }
  .glance-card {
    height: auto;
    min-height: 120px;
    padding: 20px 24px;
  }
  .glance-card__value {
    font-size: 24px;
    line-height: 1.2;
  }
  .glance-card__label {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 4px;
  }

  /* Approach — stacked: copy then accordion */
  .approach {
    padding: 40px 20px;
  }
  .approach__inner { gap: 24px; }
  .approach__head { gap: 8px; }
  .approach .section-title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
  }
  .approach__cols {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .approach__copy p {
    font-size: 16px;
    line-height: 24px;
  }
  .approach-item__head {
    padding: 16px 18px;
  }
  .approach-item__title {
    font-size: 16px;
    line-height: 22px;
  }
  .approach-item__body {
    padding: 0 18px;
  }
  .approach-item.is-open .approach-item__body {
    padding-bottom: 16px;
  }
  .approach-item__body p {
    font-size: 14px;
    line-height: 22px;
  }

  /* Message — stacked: copy then photo */
  .message {
    padding: 40px 20px;
  }
  .message__lines--top,
  .message__lines--mid,
  .message__lines--bottom { display: none; }
  .message__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: stretch;
  }
  .message .section-title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
  }
  .message__body p {
    font-size: 14px;
    line-height: 22px;
  }
  .message__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
  }

  /* Team — 2-col grid on mobile */
  .team {
    padding: 40px 20px;
  }
  .team__inner { gap: 24px; }
  .team .section-title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
  }
  .team__head {
    align-items: center;
    text-align: center;
    max-width: none;
  }
  .team__lede {
    font-size: 14px;
    line-height: 22px;
    text-align: center;
  }
  .team__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .team-card {
    height: 224px;
  }
  .team-card__photo {
    top: 56px;
    width: 142px;
    height: 178px;
  }
  .team-card__info {
    top: 8px;
    left: 10px;
    width: calc(100% - 20px);
    gap: 4px;
  }
  .team-card__name {
    font-size: 16px;
    line-height: 1.1;
  }
  .team-card__title {
    font-size: 11px;
    line-height: 1.3;
  }
  .team-card__hover-info {
    top: 8px;
    left: 10px;
    width: calc(100% - 20px);
    gap: 4px;
  }
  .team-card__hover-name {
    font-size: 16px;
    line-height: 1.1;
  }
  .team-card__hover-title {
    font-size: 11px;
    line-height: 1.3;
  }
  .team-card__cta {
    font-size: 11px;
  }

  /* About CTA Band eyebrow */
  .cta-band__eyebrow {
    font-size: 16px;
    line-height: 36px;
  }

  /* ============================================================
     SERVICES (Figma 2869:4523)
     ============================================================ */

  .services-hero { height: 329px; }
  .services-hero__content {
    padding: 0 28px;
    padding-top: 96px;
    gap: 10px;
  }
  .services-hero__title {
    font-size: 40px;
    line-height: 1.2;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  }
  .services-hero__subtitle {
    font-size: 16px;
    line-height: 20px;
    max-width: none;
  }

  /* Transaction & Portfolio Services — accordion (CD-1947/48/49/50) */
  .transaction {
    padding: 40px 0 0;
  }
  .transaction__card {
    padding: 0 20px;
    gap: 30px;
    align-items: stretch;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
  }
  .transaction__head {
    text-align: left;
    max-width: none;
    gap: 12px;
  }
  .transaction__title {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 600;
  }
  .transaction__sub {
    font-size: 16px;
    line-height: 1.5;
  }
  /* Mobile: reset desktop's two-column grid → single column accordion. */
  .transaction__grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    column-gap: 0;
    row-gap: 0;
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: static;
  }
  .transaction__grid::before { display: none; }
  /* Cards become full-width accordion headers */
  .tx-card {
    position: static;
    grid-column: auto;
    grid-row: auto;
    left: auto !important;
    top: auto !important;
    width: 100%;
    height: auto;
    min-height: 60px;
    background: var(--color-white);
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid rgba(7, 29, 73, 0.1);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    gap: 16px;
    order: calc(var(--i, 0) * 2);
    transition: background-color 0.25s ease;
  }
  .tx-card:first-child,
  .tx-card[data-tx-target="thesis"] {
    border-top: 0;
  }
  /* Desktop's hover-fill pseudo: disable on mobile entirely */
  .tx-card::after {
    display: none;
  }
  /* Active state per Figma node 2869:5522: header stays WHITE with navy
     content; the navy panel below contains the body. Keeps title visible
     during the open/close transition (title color never has to swap). */
  .tx-card.is-active {
    background: var(--color-white);
  }
  .tx-card__inner {
    width: auto;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    text-align: left;
  }
  .tx-card__icon {
    display: none; /* mobile design omits the per-card icon */
  }
  .tx-card__title {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--color-navy-dark);
    transition: color 0.25s ease;
  }
  .tx-card.is-active .tx-card__title {
    color: var(--color-navy-dark);
  }
  /* Plus / minus toggle indicator on each accordion header */
  .tx-card__toggle {
    display: block;
    flex: 0 0 auto;
    position: relative;
    width: 24px;
    height: 24px;
    transition: transform 0.25s ease;
  }
  .tx-card__toggle::before,
  .tx-card__toggle::after {
    content: '';
    position: absolute;
    background: var(--color-navy-dark);
    border-radius: 1px;
    transition: background-color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
  }
  /* horizontal bar */
  .tx-card__toggle::before {
    left: 3px;
    right: 3px;
    top: calc(50% - 1px);
    height: 2px;
  }
  /* vertical bar (becomes hidden when active to render '−') */
  .tx-card__toggle::after {
    top: 3px;
    bottom: 3px;
    left: calc(50% - 1px);
    width: 2px;
  }
  .tx-card.is-active .tx-card__toggle::after {
    transform: scaleY(0);
  }
  /* Panels render directly under their card via flex `order`. Hidden when collapsed. */
  .tx-panel {
    grid-column: auto;
    grid-row: auto;
    order: calc(var(--i, 0) * 2 + 1);
    background: var(--color-navy-dark);
    color: var(--color-white);
    padding: 20px 20px 24px;
    gap: 18px;
    margin: 0;
  }
  .tx-panel[hidden] { display: none; }
  .tx-panel__heading {
    font-size: 18px;
    line-height: 1.3;
    color: var(--color-white);
    font-weight: 600;
  }
  .tx-panel__body {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
  }

  /* Lifecycle / What We Do (services) — CD-1951 */
  .lifecycle {
    padding: 40px 20px;
  }
  .lifecycle__lines--top,
  .lifecycle__lines--mid { display: none; }
  .lifecycle__inner { gap: 30px; }
  .lifecycle__head { max-width: none; gap: 8px; }
  .lifecycle__head .eyebrow {
    font-size: 16px;
    line-height: 36px;
  }
  .lifecycle__head .section-title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
  }
  .lifecycle__lede {
    font-size: 14px;
    line-height: 22px;
  }
  .lifecycle__groups { gap: 30px; }
  /* Each group: pill at top-left, vertical connecting line dropping through the cards.
     The line is centered on the dot icons (which are 27px → centered at x=13.5px from
     the group's content origin). */
  .lifecycle-group {
    position: relative;
    padding-left: 0;
  }
  .lifecycle-group__pill {
    height: auto;
    margin-left: 0;
    width: auto !important;
    align-self: flex-start;
  }
  .lifecycle-group__frame { display: none; }
  .lifecycle-group__label {
    position: static;
    height: 52px;
    font-size: 16px;
    padding: 0 16px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    width: auto;
  }
  /* The horizontal desktop rule is replaced by a vertical line drawn from the pill's
     bottom down through every dot in this group. */
  .lifecycle-group__rule {
    position: absolute;
    left: 13.5px;
    top: 52px; /* under the pill */
    bottom: 14px; /* stop centered on the last dot (27/2 ≈ 13.5) */
    width: 1px;
    height: auto;
    margin: 0;
    background: rgba(7, 29, 73, 0.4);
  }
  .lifecycle-group__cards {
    padding: 0;
    gap: 24px;
    margin-top: 18px;
  }
  .lifecycle-group__cards--1,
  .lifecycle-group__cards--2,
  .lifecycle-group__cards--3 {
    grid-template-columns: 1fr;
  }
  .lifecycle-group__cards--1 .lifecycle-card { max-width: none; }
  /* Cards: dot on left (27×27, centered on the vertical line), title + body stacked to the right */
  .lifecycle-card {
    display: grid;
    grid-template-columns: 27px 1fr;
    column-gap: 16px;
    row-gap: 6px;
    align-items: start;
    text-align: left;
    padding: 0;
    position: relative;
  }
  .lifecycle-card__dot {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 27px;
    height: 27px;
    margin-top: 0;
    background: var(--color-white);
    border-radius: 50%;
    z-index: 1; /* over the line */
  }
  .lifecycle-card__title {
    grid-column: 2;
    grid-row: 1;
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
  }
  .lifecycle-card__body {
    grid-column: 2;
    grid-row: 2;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
  }

  /* Capabilities — mobile accordion. The 6 desktop pill-tabs become
     accordion headers, with each panel rendering directly below its tab.
     Implementation: collapse .capabilities__tabs and .capabilities__panels
     into transparent wrappers via display: contents, so all 6 tabs and 6
     panels are direct children of .capabilities__inner. Use --i (set per
     tab/panel inline) with `order` to interleave them. The existing JS
     already toggles `is-active` on both tab and panel, and the panel's
     `hidden` attribute drives display:none for collapsed items. */
  .capabilities {
    padding: 40px 20px;
  }
  .capabilities__inner {
    gap: 0;
    display: flex;
    flex-direction: column;
  }
  .capabilities__head { max-width: none; gap: 8px; margin-bottom: 24px; }
  .capabilities__head .eyebrow {
    font-size: 16px;
    line-height: 36px;
  }
  .capabilities__head .section-title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
  }
  .capabilities__tabs,
  .capabilities__panels {
    display: contents;
  }
  .capabilities__divider { display: none; }
  .cap-tab {
    order: calc(var(--i, 0) * 2);
    width: 100%;
    height: auto;
    min-height: 56px;
    padding: 16px 20px;
    font-size: 14px;
    text-align: left;
    justify-content: space-between;
    border-radius: 0;
    border: 0;
    border-top: 1px solid rgba(7, 29, 73, 0.1);
    background: var(--color-white);
    color: var(--color-navy-dark);
    transition: background-color 0.25s ease, color 0.25s ease;
  }
  .cap-tab:first-of-type { border-top: 0; }
  /* :hover only applies on devices that actually have hover capability,
     otherwise it sticks after tap on touch devices. */
  @media (hover: hover) {
    .cap-tab:hover {
      background: var(--color-bg-soft);
    }
  }
  /* Active = white header with navy text (matches Figma 2869:5522 pattern,
     and matches the .tx-card mobile accordion on the same page). The navy
     panel below provides the visual "expanded" state. */
  .cap-tab.is-active {
    background: var(--color-white);
    color: var(--color-navy-dark);
    border-color: rgba(7, 29, 73, 0.1);
  }
  .cap-tab__label {
    max-width: none;
    flex: 1;
    text-align: left;
    font-weight: 600;
  }
  .cap-tab.is-active .cap-tab__label { font-weight: 700; }
  /* +/- toggle indicator generated via pseudo on the tab itself */
  .cap-tab::after {
    content: '';
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: linear-gradient(currentColor, currentColor) center/100% 2px no-repeat,
                linear-gradient(currentColor, currentColor) center/2px 100% no-repeat;
    transition: transform 0.25s ease;
  }
  .cap-tab.is-active::after {
    background: linear-gradient(currentColor, currentColor) center/100% 2px no-repeat;
  }

  .cap-panel {
    order: calc(var(--i, 0) * 2 + 1);
    grid-area: auto;
    flex-direction: column;
    gap: 16px;
    background: var(--color-navy-dark);
    color: var(--color-white);
    padding: 20px 20px 24px;
    margin: 0;
  }
  .cap-panel[hidden] {
    display: none;
    visibility: visible;
  }
  .cap-panel__copy { gap: 12px; }
  .cap-panel__title {
    font-size: 18px;
    line-height: 1.3;
    color: var(--color-white);
  }
  .cap-panel__body p {
    font-size: 14px;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.85);
  }
  .cap-panel__qheading {
    font-size: 14px;
    color: var(--color-white);
  }
  .cap-panel__qitem span {
    font-size: 13px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.85);
  }
  .cap-panel__qicon {
    filter: brightness(0) invert(1);
  }
  .cap-panel__media {
    width: 100%;
    margin-top: 4px;
  }
  .cap-panel__placeholder {
    color: rgba(255, 255, 255, 0.7);
  }

  /* ============================================================
     INDUSTRIES (Figma 2902:6583) — already mostly complete
     ============================================================ */

  .industries-hero { height: 329px; }
  .industries-hero__content {
    padding: 0 28px;
    padding-top: 96px;
    gap: 10px;
  }
  .industries-hero__title {
    font-size: 40px;
    line-height: 1.2;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  }
  .industries-hero__subtitle {
    font-size: 16px;
    line-height: 20px;
    max-width: none;
  }
  /* Expertise — mobile accordion, same flex-order pattern as capabilities. */
  .expertise {
    padding: 40px 20px;
  }
  .expertise__inner {
    gap: 0;
    display: flex;
    flex-direction: column;
  }
  .expertise__head { gap: 8px; margin-bottom: 24px; }
  .expertise__title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
  }
  .expertise__tabs,
  .expertise__panels {
    display: contents;
  }
  .expertise-tab {
    order: calc(var(--i, 0) * 2);
    width: 100%;
    height: auto;
    min-height: 56px;
    padding: 16px 20px;
    font-size: 14px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 0;
    border: 0;
    border-top: 1px solid rgba(7, 29, 73, 0.1);
    background: var(--color-white);
    color: var(--color-navy-dark);
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
  }
  .expertise-tab:first-of-type { border-top: 0; }
  @media (hover: hover) {
    .expertise-tab:hover {
      background: var(--color-bg-soft);
    }
  }
  .expertise-tab.is-active {
    background: var(--color-white);
    color: var(--color-navy-dark);
    border-color: rgba(7, 29, 73, 0.1);
  }
  .expertise-tab__label {
    max-width: none;
    flex: 1;
    text-align: left;
    font-weight: 600;
  }
  .expertise-tab.is-active .expertise-tab__label { font-weight: 700; }
  .expertise-tab::after {
    content: '';
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: linear-gradient(currentColor, currentColor) center/100% 2px no-repeat,
                linear-gradient(currentColor, currentColor) center/2px 100% no-repeat;
    transition: transform 0.25s ease;
  }
  .expertise-tab.is-active::after {
    background: linear-gradient(currentColor, currentColor) center/100% 2px no-repeat;
  }

  .expertise-panel {
    order: calc(var(--i, 0) * 2 + 1);
    background: var(--color-navy-dark);
    color: var(--color-white);
    padding: 20px 20px 24px;
    gap: 16px;
    margin: 0;
  }
  .expertise-panel[hidden] { display: none; }
  .expertise-divider { display: none; }
  .expertise-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .expertise-group { gap: 8px; }
  .expertise-group__title {
    color: var(--color-white);
    font-size: 16px;
  }
  .expertise-group__list { padding-left: 20px; }
  .expertise-group__list li {
    font-size: 14px;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.85);
  }

  /* ============================================================
     CAREERS (Figma 2905:6932)
     ============================================================ */

  .careers-hero { height: 329px; }
  .careers-hero__content {
    padding: 0 28px;
    padding-top: 96px;
    gap: 10px;
  }
  .careers-hero__title {
    font-size: 40px;
    line-height: 1.2;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  }
  .careers-hero__subtitle {
    font-size: 16px;
    line-height: 20px;
    max-width: none;
  }

  /* Tenets — 2-col grid on mobile, smaller cards */
  .tenets {
    padding: 40px 20px;
  }
  .tenets__inner {
    padding: 0;
    gap: 24px;
  }
  .tenets__head { gap: 16px; }
  .tenets__title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
  }
  .tenets__lede {
    font-size: 14px;
    line-height: 22px;
    max-width: none;
  }
  .tenets__grid {
    flex-wrap: wrap;
    gap: 16px;
  }
  .tenet-card {
    flex: 1 1 calc(50% - 8px);
    min-width: calc(50% - 8px);
    height: 130px;
    gap: 12px;
  }
  .tenet-card__icon {
    width: 56px;
    height: 56px;
  }
  .tenet-card__icon img {
    width: 32px;
    height: 32px;
  }
  .tenet-card__label {
    font-size: 13px;
  }

  /* Why Join — stacked benefit cards */
  .why-join {
    padding: 40px 20px;
  }
  .why-join__inner {
    padding: 0;
    gap: 24px;
  }
  .why-join__head { gap: 8px; }
  .why-join__head .eyebrow {
    font-size: 16px;
    line-height: 36px;
  }
  .why-join__head .section-title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
  }
  .why-join__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .benefit-card {
    height: auto;
    min-height: auto;
    padding: 20px 0 0 0;
    gap: 16px;
  }
  .benefit-card__title {
    font-size: 18px;
    line-height: 24px;
  }
  .benefit-card__body {
    font-size: 14px;
    line-height: 22px;
  }
  /* Disable hover invert on touch */
  .benefit-card:hover::before {
    height: 0;
  }
  .benefit-card:hover {
    background: transparent;
  }
  .benefit-card:hover .benefit-card__title { color: var(--color-navy); }
  .benefit-card:hover .benefit-card__body { color: #525252; }
  .benefit-card:hover .benefit-card__icon { color: #35476b; }

  /* Roles */
  .roles {
    padding: 40px 20px;
  }
  .roles__inner {
    padding: 0;
    gap: 24px;
  }
  .roles__head { gap: 8px; }
  .roles__head .eyebrow {
    font-size: 16px;
    line-height: 36px;
  }
  .roles__head .section-title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
  }
  .roles__groups { gap: 24px; }
  .roles__group { gap: 8px; }
  .roles__department {
    font-size: 22px;
    line-height: 1.3;
  }
  .role-row__link {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 14px 4px;
    gap: 4px;
  }
  .role-row__title {
    font-size: 16px;
    line-height: 22px;
  }
  .role-row__meta {
    font-size: 13px;
    line-height: 20px;
    text-align: left;
  }

  /* ============================================================
     CONTACT (already mostly built)
     ============================================================ */

  .contact-hero { height: 329px; }
  .contact-hero__content {
    padding: 0 20px;
    padding-top: 88px;
  }
  .contact-hero__title {
    font-size: 40px;
    line-height: 48px;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  }
  .contact-hero__subtitle {
    font-size: 16px;
    line-height: 24px;
  }
  .contact-card-section {
    padding: 40px 15px;
  }
  .contact-card {
    height: auto;
    padding: 30px 24px;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .contact-card__info {
    width: 100%;
    gap: 18px;
  }
  .contact-card__city {
    font-size: 20px;
    line-height: 28px;
  }
  .contact-card__address,
  .contact-card__link {
    font-size: 16px;
    line-height: 22px;
  }
  .contact-card__photo {
    width: 100%;
    height: 240px;
  }

  /* ============================================================
     BIO MODAL — full-screen on mobile (Figma 2913:8463)
     ============================================================ */

  .bio-modal {
    padding: 0;
    align-items: stretch;
    overflow-y: auto;
  }
  .bio-modal__shell {
    width: 100%;
    height: auto;
    min-height: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .bio-modal__card {
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    padding: 16px 20px 24px;
    background: var(--color-white);
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  /* Flatten __left so its child (photo) participates in __card flex.
     Order them: photo (0), name+bio (1). */
  .bio-modal__left {
    display: contents;
  }
  .bio-modal__photo-wrap {
    position: relative;
    width: 100%;
    height: 360px;
    max-height: 50vh;
    background: #eaf2f5;
    border-radius: 8px;
    overflow: hidden;
    order: 0;
    margin: 0;
  }
  .bio-modal__photo {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    height: calc(100% - 16px);
    object-fit: cover;
  }
  .bio-modal__right {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
    margin: 0;
    gap: 14px;
    order: 1;
  }
  .bio-modal__name {
    font-size: 26px;
    line-height: 1.15;
    white-space: normal;
  }
  .bio-modal__role {
    font-size: 14px;
    line-height: 22px;
  }
  .bio-modal__bio {
    overflow-y: visible;
    padding-right: 0;
    font-size: 14px;
    line-height: 22px;
  }
  /* Move bio modal controls to a horizontal row centered below content */
  .bio-modal__controls {
    width: auto;
    flex-direction: row;
    border-radius: 0;
    align-self: center;
    margin: 18px auto 24px;
    gap: 10px;
    overflow: visible;
  }
  .bio-modal__btn {
    width: 56px;
    height: 56px;
    border-radius: 8px;
  }
}