/*
  Highridge Search — site styles. Built section-by-section from Figma (fileKey P4SCiVWQii9OtrAgxUQJqv).

  1. Tokens
  2. Base / reset
  3. Shared components (container, eyebrow, section-title, btn, logo)
  4. Header / footer
  5. Homepage sections
  6. Inner pages (approach, solutions, team + bio modal, insights + detail, contact)
  7. Input / motion preferences
  8. Layout-transformation @media rules — MUST BE LAST

  Figma values are the design intent at 1440. Type and spacing are clamp()ed,
  cards use intrinsic sizing, text wraps `pretty`.
*/

:root {
  --navy: #1b415c;
  --navy-deep: #113752;
  --gold: #febb1f;
  --gold-soft: #ffe29d;
  --ice: #edf3ff;
  --ink: #404040;
  --teal: #6498a6;
  --paper: #f7f5f1;
  --white: #ffffff;
  --header-h: 88px;

  /* Every prototype hover is SMART_ANIMATE · EASE_OUT · 450ms. Hero rotator is 600ms. */
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --hover-ms: 450ms;

  /* 120px gutter at 1440 → 1200px content column; tightens quickly so tablets keep 3-up rows */
  --gutter: clamp(20px, -80px + 13.89vw, 120px);
  --section-y: clamp(64px, 8.333vw, 120px);
  --section-y-sm: clamp(56px, 6.944vw, 100px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

main { display: block; }

h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
/* Body + headings use greedy (default) wrapping: no `text-wrap: pretty` — it shortens lines to even
   them out (early wraps, blank right edge) and differs between Chrome and Safari. */
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* === Shared === */

.container {
  width: min(1200px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* Eyebrow — ridge icon (Figma 81:1359) + label */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  line-height: 28.8px;
  text-transform: capitalize;
  color: var(--ink);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 41px;
  height: 16.5px;
  background: url('/images/eyebrow-ridge.svg') center / 100% 100% no-repeat;
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--gold::before { background-image: url('/images/eyebrow-ridge-dark.svg'); }

.section-title {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.4px;
  color: var(--navy);
}
.section-title--light { color: var(--white); }

.section-head { max-width: 720px; }
.section-head .section-title { margin-top: 20px; }
.section-head__text {
  margin-top: 20px;
  max-width: 670px;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.6;
}
.section-head__text--light { color: var(--white); font-weight: 300; }

/* Button — Figma "Link" 45:698. Hover variant: gold fill + gold border, navy label + arrow */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16.5px 32px 16.88px;
  border: 1px solid currentColor;
  font-size: 12px;
  font-weight: 700;
  line-height: 19.38px;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--hover-ms) var(--ease-out),
              border-color var(--hover-ms) var(--ease-out),
              color var(--hover-ms) var(--ease-out);
}
.btn__arrow { flex: none; }
.btn--light { color: var(--white); border-color: var(--white); }
.btn--dark { color: var(--navy); border-color: var(--navy); }
.btn:hover,
.btn:focus-visible {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

/* Nav "Contact Us" — Figma 49:5551 (147×48, 16px medium, capitalized) */
.btn--nav {
  padding: 11px 18px;
  color: var(--white);
  border-color: var(--white);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: capitalize;
}

/* Logos ship from Figma as alpha masks tinted white */
.logo-mask {
  display: block;
  background: var(--white);
  -webkit-mask: var(--logo) center / 100% 100% no-repeat;
          mask: var(--logo) center / 100% 100% no-repeat;
}
.logo-mask--nav { --logo: url('/images/logo-mask.png'); width: 170px; aspect-ratio: 170 / 51; }
.logo-mask--footer { --logo: url('/images/logo-footer-mask.png'); width: 160px; aspect-ratio: 160 / 53.55; }

/* === Header — Figma 181:203 === */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.site-header.is-scrolled { background: var(--navy); border-bottom-color: rgba(255, 255, 255, 0.12); }
.nav-open .site-header { background: var(--navy); }
.site-header__inner {
  width: min(1200px, 100% - 2 * var(--gutter));
  min-height: 88px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header__nav ul { display: flex; align-items: center; gap: 34px; }
.site-header__nav a {
  font-size: 14px;
  line-height: 19.38px;
  letter-spacing: 0.75px;
  color: var(--white);
}
/* Active item — Figma 358:1164: bold label with a 1px gold underline the width of the label */
.site-header__nav a[aria-current="page"] { position: relative; font-weight: 700; }
.site-header__nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 1px;
  background: var(--gold);
}
.site-header__nav-contact { display: none; }
.site-header__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.site-header__toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  margin: 6px auto;
  background: var(--white);
  transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out);
}
.nav-open .site-header__toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-open .site-header__toggle span:nth-child(2) { opacity: 0; }
.nav-open .site-header__toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* === Footer — Figma 76:78 === */

.footer-cta {
  background: var(--navy);
  padding-block: clamp(56px, 5.556vw, 80px);
}
.footer-cta__inner,
.footer-bar__inner {
  /* Footer content sits 20px inside the page column in Figma (x=140) */
  padding-inline: clamp(0px, 1.389vw, 20px);
}
.footer-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.footer-cta__copy { flex: 1 1 320px; max-width: 560px; }
.footer-cta__title {
  margin-top: 12px;
  font-size: clamp(2rem, 1.35rem + 1.9vw, 2.875rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.46px;
  color: var(--white);
}
.footer-cta__text {
  margin-top: 12px;
  max-width: 482px;
  font-weight: 300;
  line-height: 28.8px;
  color: rgba(255, 255, 255, 0.75);
}
.footer-bar {
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-block: 30px;
}
.footer-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}
.footer-bar__links { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.footer-bar__links a {
  font-size: 12.5px;
  line-height: 19.38px;
  color: rgba(255, 255, 255, 0.62);
}
.footer-bar__copy {
  font-size: 11.8px;
  line-height: 18.6px;
  color: rgba(255, 255, 255, 0.42);
}

/* === Hero — Figma 181:200 === */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(640px, 58.333vw, 840px);
  background: var(--ice);
  color: var(--white);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 65, 92, 0.6) 0%, rgba(27, 65, 92, 0.45) 30%, rgba(0, 30, 65, 0.706) 50%, rgba(27, 65, 92, 0.8) 100%);
}
.hero__inner {
  position: relative;
  padding-top: clamp(150px, 18.125vw, 261px);
  padding-bottom: 120px;
  /* Hero copy sits 20px inside the page column in Figma (x=140) */
  padding-left: clamp(0px, 1.389vw, 20px);
}
.hero__sectors {
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 20.15px;
  letter-spacing: 0.26px;
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0, 30, 65, 0.6), 0 0 14px rgba(0, 30, 65, 0.5);
}
.hero__sectors li + li::before {
  content: "·";
  margin-inline: 10px;
  color: var(--gold);
}
.hero__title {
  margin-top: 16px;
  max-width: 858px;
  font-size: min(clamp(1.75rem, 0.9rem + 3.3vw, 3.45rem), 7.4vw);
  font-weight: 600;
  line-height: 1.1768;
  letter-spacing: -0.56px;
  text-transform: capitalize;
}
.hero__title-static { display: block; }
.hero__title-line {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.26em;
}
/* Rotator — Figma component set 138:2401. A one-line clipped window; the word
   stack translates up one line per step. Timing lives in js/main.js. */
.hero__rotator {
  display: block;
  flex: none;
  height: 1lh;
  overflow: hidden;
  color: var(--gold);
}
.hero__rotator-track {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--step, 0) * -1lh));
  transition: transform 600ms var(--ease-out);
}
.hero__rotator-word { display: block; white-space: nowrap; }
.hero__text {
  margin-top: 16px;
  max-width: 600px;
  line-height: 28.8px;
  color: rgba(255, 255, 255, 0.78);
}
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 29.5px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: calc(1 - var(--scroll-p, 0));
  font-size: 10px;
  font-weight: 500;
  line-height: 15.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.hero__scroll span { margin-right: -1.6px; }
.hero__scroll i {
  position: relative;
  overflow: hidden;
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.32);
}
.hero__scroll i::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40%;
  background: var(--gold);
  transform: translateY(calc(var(--scroll-p, 0) * 150%));
  transition: transform 120ms linear;
}

/* === About + metrics — Figma 81:1354 === */

.about { padding-block: var(--section-y-sm); background: var(--white); }
.about__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 0;
}
.about__lead {
  flex: 1 1 380px;
  max-width: 592px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
}
.about__title { max-width: 521px; }
.about__text {
  flex: 1 1 420px;
  max-width: 608px;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.4444;
}
.metrics {
  margin-top: clamp(40px, 4.167vw, 60px);
  display: grid;
  /* fixed 3-up so a row never strands an orphan card; collapses in the layout @media block */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
/* Metric card — Figma 81:1367 */
.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 20px;
  background: var(--white);
  box-shadow: 0 16px 72px rgba(0, 0, 0, 0.12);
  color: var(--navy);
  text-align: center;
}
/* Gold middle metric — Figma 81:1370: gradient + hex-dot pattern layer 81:1371 */
.metric--gold {
  /* Figma stroke is inside the frame */
  box-shadow: inset 0 0 0 2px var(--white), 0 16px 72px rgba(0, 0, 0, 0.12);
  background:
    url('/images/metric-gold-pattern.png') top center / 100% auto no-repeat,
    linear-gradient(180deg, var(--gold-soft) 0%, var(--white) 93.341%);
}
.metric__value {
  font-size: clamp(1.875rem, 1.4rem + 1.3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1.2px;
}
.metric__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
}
.metric__label span { display: block; }
.metrics__note {
  margin-top: 20px;
  font-size: 14px;
  font-style: italic;
  line-height: 26px;
  text-align: right;
}

/* === Why we're different — Figma 81:1398 === */

.different { padding-block: var(--section-y); background: var(--navy); }
.different .section-title { margin-top: 20px; }
.diff-grid {
  margin-top: 40px;
  display: grid;
  /* fixed 3-up so a row never strands an orphan card; collapses in the layout @media block */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
/* Card — default variant "1" → hover variant "2": icon 90→50 and rises,
   title 22→18, description fades in. SMART_ANIMATE ease-out 450ms. */
.diff-card {
  --t: var(--hover-ms) var(--ease-out);
  display: flex;
  flex-direction: column;
  align-items: center;
  height: max(288px, 468px - 12.5vw);
  padding: 87px clamp(20px, 2.778vw, 40px) 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  text-align: center;
  overflow: hidden;
  transition: padding-top var(--t);
}
.diff-card__icon {
  flex: none;
  width: 90px;
  height: 90px;
  background: var(--white);
  /* --icon comes from the card's CMS image field; with none set the mask is fully transparent (no white box) */
  -webkit-mask: var(--icon, linear-gradient(transparent, transparent)) center / contain no-repeat;
          mask: var(--icon, linear-gradient(transparent, transparent)) center / contain no-repeat;
  transition: width var(--t), height var(--t);
}
.diff-card__title {
  margin-top: 16px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.21;
  letter-spacing: -0.4px;
  color: var(--white);
  transition: font-size var(--t), line-height var(--t), letter-spacing var(--t);
}
.diff-card__text {
  max-height: 0;
  opacity: 0;
  font-size: 14px;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.68);
  transition: opacity var(--t), max-height var(--t), margin-top var(--t);
}
.diff-card:hover,
.diff-card:focus-within { padding-top: 30px; }
.diff-card:hover .diff-card__icon,
.diff-card:focus-within .diff-card__icon { width: 50px; height: 50px; }
.diff-card:hover .diff-card__title,
.diff-card:focus-within .diff-card__title { font-size: 18px; line-height: 25.65px; letter-spacing: -0.19px; }
.diff-card:hover .diff-card__text,
.diff-card:focus-within .diff-card__text { max-height: 12em; margin-top: 8px; opacity: 1; }

/* === Solutions — Figma 81:1377 === */

.solutions { padding-block: var(--section-y-sm); background: var(--ice); }
.solutions__inner {
  display: grid;
  grid-template-columns: minmax(0, 600fr) minmax(0, 540fr);
  gap: clamp(32px, 4.167vw, 60px);
}
.solutions__lead { display: flex; flex-direction: column; align-items: flex-start; }
.solutions__lead .section-title { margin-top: 15px; max-width: 577px; }
.solutions__text {
  margin-top: 40px;
  max-width: 540px;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.4444;
}
.solutions__lead .btn { margin-top: 40px; }
/* Large ridge vector — Figma 81:1397, pinned to the bottom of the column */
.solutions__ridge {
  /* SVG export includes the stroke overhang (Figma inset -0.73% / -3.9%) */
  width: 101.46%;
  max-width: none;
  margin: auto 0 -1.45% -0.73%;
  padding-top: 48px;
}
.solutions__cards { display: flex; flex-direction: column; gap: 20px; }
/* Card — Figma 81:196. Hover variant: #113752 fill, light text */
.solution-card {
  display: block;
  padding: 40px clamp(20px, 2.361vw, 34px);
  border: 1px solid rgba(27, 65, 92, 0.3);
  background: rgba(27, 65, 92, 0.01);
  transition: background-color var(--hover-ms) var(--ease-out), border-color var(--hover-ms) var(--ease-out);
}
.solution-card__title {
  font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.48px;
  color: var(--navy);
  transition: color var(--hover-ms) var(--ease-out);
}
.solution-card__text {
  margin-top: 20px;
  line-height: 26px;
  transition: color var(--hover-ms) var(--ease-out);
}
.solution-card:hover,
.solution-card:focus-visible { background-color: var(--navy-deep); border-color: rgba(222, 218, 210, 0.3); }
.solution-card:hover .solution-card__title,
.solution-card:focus-visible .solution-card__title { color: var(--white); }
.solution-card:hover .solution-card__text,
.solution-card:focus-visible .solution-card__text { color: rgba(255, 255, 255, 0.8); }

/* === Team — Figma 81:1416 === */

.team { padding-block: var(--section-y); background: var(--navy); }
.team .btn, .insights .btn { margin-top: 40px; }
.team-grid {
  margin-top: 40px;
  display: grid;
  /* fixed 3-up so a row never strands an orphan card; collapses in the layout @media block */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
/* Card — Figma 81:1686 / 81:1789 / 81:1792. Hover variant: white fill, navy name + chips */
.team-card {
  padding-bottom: 33px;
  background: var(--navy);
  transition: background-color var(--hover-ms) var(--ease-out);
}
.team-card__photo {
  position: relative;
  display: block;
  aspect-ratio: 393.33 / 443;
  overflow: hidden;
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__photo img.is-hover,
.team-page-card__photo img.is-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t);
}
.team-page-card:hover .team-page-card__photo img.is-hover,
.team-page-card:has(:focus-visible) .team-page-card__photo img.is-hover { opacity: 1; }
.team-card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 65, 92, 0) 55%, rgba(27, 65, 92, 0.5) 100%);
}
.team-card__body { padding: 26px clamp(20px, 2.361vw, 34px) 0; }
.team-card__name {
  font-size: 20px;
  font-weight: 500;
  line-height: 31px;
  letter-spacing: -0.2px;
  color: var(--white);
  transition: color var(--hover-ms) var(--ease-out);
}
.team-card__role {
  margin-top: 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 17.83px;
  letter-spacing: 1.035px;
  text-transform: uppercase;
  color: var(--gold);
}
.team-card__social { margin-top: 16px; display: flex; gap: 8px; }
.team-card__social a {
  display: block;
  padding: 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  transition: background-color var(--hover-ms) var(--ease-out);
}
.team-card__social span {
  display: block;
  width: 20px;
  height: 20px;
  background: var(--white);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
  transition: background-color var(--hover-ms) var(--ease-out);
}
/* Hover-capable pointers only: touch devices keep the tile static (no sticky tap/focus state) */
@media (hover: hover) {
  .team-card:hover .team-card__photo img.is-hover,
  .team-card__photo:focus-visible img.is-hover { opacity: 1; }
  .team-card:hover,
  .team-card:focus-within { background-color: var(--white); }
  .team-card:hover .team-card__name,
  .team-card:focus-within .team-card__name { color: var(--navy); }
  .team-card:hover .team-card__social a,
  .team-card:focus-within .team-card__social a { background-color: rgba(27, 65, 92, 0.1); }
  .team-card:hover .team-card__social span,
  .team-card:focus-within .team-card__social span { background-color: var(--navy); }
}

/* === Insights — Figma 81:1485 === */

.insights { padding-block: var(--section-y); background: var(--white); }
.insight-grid {
  margin-top: 40px;
  display: grid;
  /* fixed 3-up so a row never strands an orphan card; collapses in the layout @media block */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
/* Card — Figma 81:1872 / 81:1884 / 81:1915. Hover variant: navy fill, white title */
.insight-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(27, 65, 92, 0.16);
  transition: background-color var(--hover-ms) var(--ease-out),
              box-shadow var(--hover-ms) var(--ease-out),
              transform var(--hover-ms) var(--ease-out),
              border-color var(--hover-ms) var(--ease-out);
  will-change: transform;
}
.insight-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 364.67 / 223.33;
  background: var(--paper);
  overflow: hidden;
}
.insight-card__media img { width: 100%; height: 100%; object-fit: cover; }
.insight-card__category {
  padding-top: 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16.27px;
  letter-spacing: 1.05px;
  text-transform: uppercase;
  color: var(--teal);
  transition: color var(--hover-ms) var(--ease-out);
}
.insight-card__title {
  font-size: 18px;
  line-height: 25.2px;
  letter-spacing: -0.18px;
  color: var(--navy);
  transition: color var(--hover-ms) var(--ease-out);
}
.insight-card__more {
  margin-top: auto;
  padding-block: 2px;
  font-size: 12px;
  font-weight: 700;
  line-height: 18.6px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--gold);
  transition: color var(--hover-ms) var(--ease-out);
}
.insight-card:hover,
.insight-card:focus-visible {
  background-color: var(--navy);
  border-color: var(--navy);
  box-shadow: 0 18px 40px rgba(27, 65, 92, 0.22);
  transform: translateY(-4px);
}
.insight-card:hover .insight-card__category,
.insight-card:focus-visible .insight-card__category { color: rgba(255, 255, 255, 0.7); }
.insight-card:hover .insight-card__title,
.insight-card:focus-visible .insight-card__title { color: var(--white); }

/* ===================== Inner pages ===================== */

/* === Approach page — Figma 298:11701 === */

/* Navy eyebrow variant (ridge + label in #1b415c) */
.approach-eyebrow--navy { color: var(--navy); }
.approach-eyebrow--navy::before { background-image: url('/images/approach/eyebrow-ridge-navy.svg'); }

/* --- Page hero — Figma 298:11702 --- */
.approach-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(300px, 28.75vw, 414px);
  /* title centre sits 30.5px below the frame centre */
  padding-top: 61px;
  background: var(--ice);
  color: var(--white);
  overflow: hidden;
}
.approach-hero__media { position: absolute; inset: 0; }
.approach-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.approach-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 65, 92, 0.5) 0%, rgba(27, 65, 92, 0.4) 28%, rgba(27, 65, 92, 0.7) 61.376%, rgba(27, 65, 92, 0.8) 100%);
}
.approach-hero__inner {
  position: relative;
  /* copy sits 20px inside the page column in Figma (x=140) */
  padding-left: clamp(0px, 1.389vw, 20px);
}
.approach-hero__title {
  font-size: clamp(2rem, 0.9rem + 3.3vw, 3.45rem);
  font-weight: 600;
  line-height: 1.1768;
  letter-spacing: -0.56px;
  text-transform: capitalize;
}

/* --- The science — Figma 298:11718 --- */
.approach-science { padding-block: var(--section-y); background: var(--navy); }
.approach-science__title { margin-top: 20px; }
.approach-science__text {
  margin-top: 19.4px;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--white);
}
.approach-science__text p + p { margin-top: 1.6em; }
.approach-science__cards {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.approach-science-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30.13px 28px 27.99px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
}
.approach-science-card__icon { position: absolute; top: 16px; right: 15.67px; width: 30px; height: 30px; }
.approach-science-card__tag {
  min-width: 58px;
  padding: 3.87px 11.2px 5.13px;
  border-radius: 3px;
  background: var(--gold);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 20.25px;
  letter-spacing: 0.75px;
  text-align: center;
  color: var(--navy);
}
.approach-science-card__title {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 600;
  line-height: 22.62px;
  letter-spacing: -0.39px;
  color: var(--white);
}
.approach-science-card__text {
  margin-top: 9.3px;
  max-width: 285px;
  font-size: 15px;
  line-height: 24.18px;
  color: rgba(255, 255, 255, 0.68);
}

/* --- When you're hiring — Figma 298:11764 --- */
.approach-hiring { padding-block: var(--section-y-sm); background: var(--white); }
.approach-hiring__title { margin-top: 25px; }
.approach-hiring__intro {
  margin-top: 20px;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.66;
}
.approach-hiring__intro strong { font-weight: 700; color: var(--navy); }

/* Four lenses — component set 298:10886. Tab ON_CLICK → CHANGE_TO variant,
   SMART_ANIMATE · EASE_OUT · 450ms. Without JS every panel is shown in sequence. */
.approach-lenses {
  margin-top: 30px;
  /* Figma frame is 567.31 tall around 542.85 of content */
  padding-bottom: 24.46px;
  display: grid;
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr);
  gap: 36px;
}
.approach-lenses__side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.approach-lenses__tabs { display: flex; flex-direction: column; gap: 8px; max-width: 323.48px; }
.approach-lens-tab {
  --t: var(--hover-ms) var(--ease-out);
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  border: 1px solid #e1e7f0;
  border-left-width: 3px;
  border-radius: 3px;
  background: var(--white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t);
}
.approach-lens-tab__num {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.21;
  letter-spacing: 1.15px;
  color: #5c6470;
  transition: color var(--t);
}
.approach-lens-tab__copy { display: flex; flex-direction: column; gap: 2.97px; }
.approach-lens-tab__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 20.48px;
  letter-spacing: -0.192px;
  color: var(--navy);
  transition: color var(--t);
}
.approach-lens-tab__method {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: #5c6470;
  transition: color var(--t);
}
.approach-lens-tab[aria-selected="true"] { background-color: var(--navy); border-color: var(--gold); cursor: default; }
.approach-lens-tab[aria-selected="true"] .approach-lens-tab__num { color: var(--gold); }
.approach-lens-tab[aria-selected="true"] .approach-lens-tab__title { color: var(--white); }
.approach-lens-tab[aria-selected="true"] .approach-lens-tab__method { color: rgba(255, 255, 255, 0.6); }
.approach-lenses__note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 323.48px;
  padding: 16px;
  border-radius: 0 3px 3px 0;
  background: var(--ice);
  font-size: 14.5px;
  line-height: 21.75px;
  color: var(--navy);
}
.approach-lenses__note img { flex: none; margin-top: 1px; }
.approach-lenses__panels { display: grid; gap: 20px; }
.approach-lens-panel {
  min-height: 542.85px;
  padding: clamp(20px, 2.5vw, 36px);
  border: 1px solid #dce7f8;
  border-radius: 4px;
  background: var(--ice);
}
.approach-lenses.is-enhanced .approach-lenses__panels { gap: 0; }
.approach-lenses.is-enhanced .approach-lens-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hover-ms) var(--ease-out), visibility var(--hover-ms);
}
.approach-lenses.is-enhanced .approach-lens-panel.is-active { opacity: 1; visibility: visible; }
.approach-lens-panel__head { display: flex; align-items: flex-start; gap: 18px; }
.approach-lens-panel__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 4px;
  background: var(--white);
}
.approach-lens-panel__kicker {
  font-size: 10px;
  font-weight: 600;
  line-height: 18.63px;
  letter-spacing: 1.61px;
  text-transform: uppercase;
  color: #2a5878;
}
.approach-lens-panel__title {
  margin-top: 7px;
  font-size: clamp(1.375rem, 1.25rem + 0.4vw, 1.5625rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--navy);
}
.approach-lens-panel__text {
  margin-top: 15.5px;
  max-width: 640px;
  font-size: 17px;
  line-height: 27.99px;
}
.approach-lens-panel__points {
  margin-top: 15.5px;
  padding-top: 34.49px;
  border-top: 1px solid #dce7f8;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.approach-lens-panel__points li {
  position: relative;
  max-width: 670px;
  padding-left: 18px;
  line-height: 24.8px;
}
.approach-lens-panel__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--gold);
}

/* Shared block kicker / title inside the hiring section */
.approach-kicker {
  font-size: 12px;
  font-weight: 600;
  line-height: 20.25px;
  letter-spacing: 1.75px;
  text-transform: uppercase;
  color: var(--navy);
}
.approach-kicker--gold { color: var(--gold); }
.approach-block-title {
  margin-top: 16.16px;
  font-size: clamp(1.375rem, 1.25rem + 0.4vw, 1.5625rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--navy);
}
.approach-block-title--light { color: var(--white); }

/* Selection & onboarding — Figma 298:11788 */
.approach-selection {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: clamp(32px, 4.167vw, 60px);
  padding: clamp(24px, 2.778vw, 40px);
  border-radius: 4px;
  background: var(--navy);
}
.approach-selection__copy { flex: 1 1 0; min-width: 0; padding-top: 6px; }
.approach-selection__text {
  margin-top: 14px;
  max-width: 515px;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.76);
}
.approach-selection__list { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.approach-selection__list li {
  position: relative;
  padding: 0 0 13px 27px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  line-height: 25.92px;
  color: var(--white);
}
.approach-selection__list li:last-child { padding-bottom: 0; border-bottom: 0; max-width: 445px; }
.approach-selection__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 15px;
  height: 15px;
  background: url('/images/approach/check.svg') center / contain no-repeat;
}

/* Team builds — Figma 298:11780, ridge vector 298:11787 */
.approach-teambuilds {
  margin-top: 30px;
  display: grid;
  grid-template-columns: minmax(0, 639fr) minmax(0, 478fr);
  align-items: center;
  padding: clamp(24px, 2.778vw, 40px);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  background: var(--ice);
}
.approach-teambuilds__copy { padding-top: 6px; }
.approach-teambuilds .approach-block-title { margin-top: 16.15px; }
.approach-teambuilds__text {
  margin-top: 13.1px;
  max-width: 560px;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.66;
}
.approach-teambuilds__ridge { width: 102.5%; max-width: none; margin-right: -1%; }

/* --- When you're developing — Figma 298:11808 --- */
.approach-developing { padding-block: var(--section-y-sm); background: var(--ice); }
.approach-developing__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 0;
}
.approach-developing__lead { flex: 1 1 380px; max-width: 592px; }
.approach-developing__lead .section-title { margin-top: 25px; }
.approach-developing__text {
  flex: 1 1 420px;
  max-width: 608px;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.4444;
  color: var(--navy);
}
.approach-methods {
  margin-top: clamp(40px, 4.167vw, 60px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.approach-method {
  padding: clamp(20px, 2.083vw, 30px);
  border: 1px solid var(--white);
  border-radius: 4px;
  background: var(--white);
}
.approach-method__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 3px;
  background: var(--ice);
}
.approach-method__title {
  margin-top: 16px;
  font-size: 21px;
  font-weight: 600;
  line-height: 25.2px;
  letter-spacing: -0.42px;
  color: var(--navy);
}
.approach-method__text { margin-top: 10px; line-height: 26px; }
.approach-method__points {
  margin-top: 10px;
  padding-top: 24px;
  border-top: 1px solid #e1e7f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.approach-method__points li {
  position: relative;
  max-width: 470px;
  padding-left: 16px;
  font-size: 15px;
  line-height: 23.56px;
  color: #5c6470;
}
.approach-method__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 2.5px;
  background: var(--gold);
}
.approach-methods__summary {
  margin-top: 30px;
  padding: clamp(20px, 2.083vw, 30px);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
  background: var(--white);
  font-size: clamp(1.125rem, 0.9rem + 0.75vw, 1.5rem);
  font-weight: 500;
  line-height: 1.396;
  letter-spacing: -0.375px;
  text-align: center;
  text-wrap: balance;
  color: var(--navy);
}

/* === Solutions page — Figma 358:1150 === */

/* Page hero — Figma 358:1151 */
.sol-hero {
  position: relative;
  display: flex;
  min-height: clamp(300px, 28.75vw, 414px);
  background: var(--ice);
  color: var(--white);
  overflow: hidden;
}
.sol-hero__media { position: absolute; inset: 0; }
.sol-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.sol-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 65, 92, 0.5) 0%, rgba(27, 65, 92, 0.4) 28%, rgba(27, 65, 92, 0.7) 61.376%, rgba(27, 65, 92, 0.8) 100%);
}
.sol-hero__inner {
  position: relative;
  align-self: center;
  /* title centre sits 30.5px below the hero centre; copy sits 20px inside the page column in Figma (x=140) */
  padding-top: 61px;
  padding-left: clamp(0px, 1.389vw, 20px);
}
.sol-hero__title {
  font-size: clamp(2.25rem, 1.3rem + 2.95vw, 3.45rem);
  font-weight: 600;
  line-height: 1.1768;
  letter-spacing: -0.56px;
  text-transform: capitalize;
}

/* Three connected disciplines — Figma 358:1167 */
.sol-intro { padding-block: var(--section-y-sm); background: var(--navy); color: var(--white); }
.sol-intro__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 0;
}
.sol-intro__lead {
  flex: 1 1 380px;
  max-width: 592px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
}
.sol-intro__title { max-width: 521px; }
.sol-intro__text {
  flex: 1 1 420px;
  max-width: 608px;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.4444;
}
.sol-disciplines {
  margin-top: clamp(40px, 4.167vw, 60px);
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 0;
}
.sol-discipline { padding-right: 24px; display: flex; flex-direction: column; align-items: flex-start; }
.sol-discipline__label {
  font-size: 12px;
  font-weight: 600;
  line-height: 20.25px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}
.sol-discipline__title {
  margin-top: 9px;
  font-size: 20px;
  font-weight: 600;
  line-height: 31.2px;
  letter-spacing: -0.24px;
}
.sol-discipline__text {
  margin-top: 4px;
  margin-bottom: 20px;
  max-width: 325px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.8);
}
.sol-discipline__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.8;
  font-size: 12px;
  font-weight: 600;
  line-height: 19.44px;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--white);
  transition: opacity var(--hover-ms) var(--ease-out), color var(--hover-ms) var(--ease-out);
}
.sol-discipline__arrow {
  display: block;
  flex: none;
  width: 13px;
  height: 9px;
  background: currentColor;
  -webkit-mask: url('/images/solutions/explore-arrow.svg') center / contain no-repeat;
          mask: url('/images/solutions/explore-arrow.svg') center / contain no-repeat;
  transition: transform var(--hover-ms) var(--ease-out);
}
.sol-discipline__link:hover,
.sol-discipline__link:focus-visible { opacity: 1; color: var(--gold); }
.sol-discipline__link:hover .sol-discipline__arrow { transform: translateX(4px); }

/* Discipline detail sections — Figma 358:1214 (Find), 358:1301 (Confirm), 358:1343 (Plan) */
.sol-detail {
  padding-block: var(--section-y-sm);
  background: var(--white);
  scroll-margin-top: var(--header-h);
}

.sol-detail--ice { background: var(--ice); }
.sol-detail__inner {
  display: grid;
  grid-template-columns: minmax(0, 478.86fr) minmax(0, 721.14fr);
  align-items: start;
}
.sol-detail__aside { padding-right: 24px; }
.sol-detail__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border: 1px solid #dce7f8;
  border-radius: 4px;
  background: var(--ice);
}
.sol-detail--ice .sol-detail__icon { background: var(--white); border-color: var(--white); }
.sol-detail__label {
  margin-top: 21px;
  font-size: 13px;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: 2.08px;
  color: #5c6470;
}
.sol-detail__label--navy { color: var(--navy); }
.sol-detail__label::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 14px;
  background: var(--gold);
}
.sol-detail__title {
  margin-top: 16.8px;
  max-width: 258.58px;
  font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.56px;
  color: var(--navy);
}
.sol-detail__body { display: flex; flex-direction: column; gap: 37.99px; }
.sol-detail__body--plan { gap: 29.4px; }
.sol-detail__lede {
  max-width: 704px;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.66;
}

/* Find: tag groups */
.sol-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 48px;
}
.sol-tags__col { display: flex; flex-direction: column; gap: 32px; }
.sol-tags__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 19.44px;
  letter-spacing: 1.56px;
  text-transform: uppercase;
  color: var(--navy);
}
.sol-tags__label::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 2.5px;
  background: var(--gold);
}
.sol-tags__list {
  margin-top: 12.8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8.73px 11px;
}
.sol-tags__list li {
  padding: 6.88px 13px;
  border: 1px solid #e1e7f0;
  border-radius: 2px;
  background: var(--ice);
  font-size: 14px;
  line-height: 24px;
  color: var(--navy);
}

/* Shared small card type (Confirm rows + Plan cards) */
.sol-card-title {
  font-size: 19px;
  font-weight: 600;
  line-height: 25px;
  letter-spacing: -0.38px;
  color: var(--navy);
}
.sol-card-text { line-height: 25.28px; color: #5c6470; }

/* Confirm: rows */
.sol-rows { display: flex; flex-direction: column; gap: 14px; }
.sol-row {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 16px 34px;
  padding: 28px;
  border: 1px solid var(--white);
  border-radius: 4px;
  background: var(--white);
}
/* Figma rows with a two-line heading are 137.59 tall */
.sol-row:not(:first-child) { min-height: 137.59px; }
.sol-row__head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* Plan: pull quote + cards */
.sol-quote {
  margin: 0;
  padding: 29.08px clamp(20px, 2.361vw, 34px) 30px;
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
  background: var(--ice);
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.36px;
  color: var(--navy);
}
.sol-cards {
  padding-top: 8.6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.sol-card {
  padding: 28px;
  border: 1px solid #e1e7f0;
  border-radius: 4px;
  background: var(--white);
}
.sol-card .sol-card-title { margin-top: 14px; }
.sol-card .sol-card-text { margin-top: 8.3px; }

/* === Team page — Figma 306:12898 === */

/* Hero — Figma 306:12901 (414px, title baseline block at y=205) */
.team-page-hero {
  position: relative;
  min-height: clamp(300px, 28.75vw, 414px);
  display: flex;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}
.team-page-hero__media { position: absolute; inset: 0; }
.team-page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.team-page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 65, 92, 0.5) 0%, rgba(27, 65, 92, 0.4) 28%, rgba(27, 65, 92, 0.7) 61.38%, rgba(27, 65, 92, 0.8) 100%);
}
.team-page-hero__inner {
  position: relative;
  align-self: center;
  /* title centre sits 30.5px below the hero centre; copy sits 20px inside the page column in Figma (x=140) */
  padding-top: 61px;
  padding-left: clamp(0px, 1.389vw, 20px);
}
.team-page-hero__title {
  font-size: clamp(2.25rem, 1.3rem + 3vw, 3.45rem);
  font-weight: 600;
  line-height: 1.1768;
  letter-spacing: -0.56px;
  text-transform: capitalize;
}

/* Intro + roster — Figma 306:12917 */
.team-page-roster { padding-block: var(--section-y-sm); background: var(--white); }
.team-page-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 0;
}
.team-page-intro__lead { flex: 1 1 380px; max-width: 592px; }
.team-page-intro__eyebrow { color: var(--navy); }
.team-page-intro__title { margin-top: 25px; max-width: 320px; }
.team-page-intro__text {
  flex: 1 1 420px;
  max-width: 608px;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.4444;
  color: var(--navy);
}

.team-page-group { margin-top: clamp(40px, 4.167vw, 60px); }
.team-page-grid {
  display: grid;
  /* fixed 3-up so a row never strands an orphan card; collapses in team.media.css */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* Card — Figma set 306:13327. Default "1": white + #e1e7f0 border. Hover "2": navy fill,
   white name, light chips, "View bio →" appears. SMART_ANIMATE · EASE_OUT · 450ms. */
.team-page-card {
  --t: var(--hover-ms) var(--ease-out);
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #e1e7f0;
  background: var(--white);
  transition: background-color var(--t), border-color var(--t);
}
.team-page-card__photo {
  position: relative;
  display: block;
  aspect-ratio: 391.33 / 450;
  overflow: hidden;
}
.team-page-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-page-card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 65, 92, 0) 55%, rgba(27, 65, 92, 0.5) 100%);
}
.team-page-card__body {
  flex: 1;
  min-height: 151px;
  padding: 26px clamp(20px, 2.361vw, 34px) 25.4px;
}
.team-page-card__name {
  font-size: 20px;
  font-weight: 500;
  line-height: 31px;
  letter-spacing: -0.2px;
  color: var(--navy);
  transition: color var(--t);
}
/* Whole card opens the bio; social chips sit above the stretched link */
.team-page-card__name a::after { content: ""; position: absolute; inset: 0; }
.team-page-card__role {
  margin-top: 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 17.83px;
  letter-spacing: 1.035px;
  text-transform: uppercase;
  color: var(--gold);
}
.team-page-card__foot {
  margin-top: 16.8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.team-page-card__social { position: relative; z-index: 1; display: flex; gap: 8px; }
.team-page-card__social a {
  display: block;
  padding: 5px;
  border-radius: 4px;
  background: rgba(27, 65, 92, 0.1);
  transition: background-color var(--t);
}
.team-page-card__social span {
  display: block;
  width: 20px;
  height: 20px;
  background: var(--navy);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
  transition: background-color var(--t);
}
.team-page-card__view {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.38px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);
  opacity: 0;
  transition: opacity var(--t);
}
.team-page-card:hover,
.team-page-card:has(:focus-visible) { background-color: var(--navy); border-color: var(--navy); }
.team-page-card:hover .team-page-card__name,
.team-page-card:has(:focus-visible) .team-page-card__name { color: var(--white); }
.team-page-card:hover .team-page-card__social a,
.team-page-card:has(:focus-visible) .team-page-card__social a { background-color: rgba(255, 255, 255, 0.1); }
.team-page-card:hover .team-page-card__social span,
.team-page-card:has(:focus-visible) .team-page-card__social span { background-color: var(--white); }
.team-page-card:hover .team-page-card__view,
.team-page-card:has(:focus-visible) .team-page-card__view { opacity: 1; }

/* === Bio modal — Figma 261:8041. Pattern: docs/modals.md (full-screen mobile, centered desktop).
   Prototype: ON_CLICK → OVERLAY with no transition (instant), backdrop rgba(0,0,0,.75),
   CLOSE_ON_CLICK_OUTSIDE, Close button → CLOSE. === */

.bio-modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  inset: 0;
  color: var(--ink);
}
.bio-modal::backdrop { background: rgba(0, 0, 0, 0.75); }

/* Default: full-screen on mobile */
.bio-modal__panel {
  position: fixed;
  inset: 0;
  background: var(--white);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
.bio-modal__controls {
  /* mobile: a sticky bar so the buttons never sit on top of scrolling copy */
  position: sticky;
  top: 0;
  z-index: 2;
  flex: none;
  display: flex;
  justify-content: flex-end;
  gap: 5.9px;
  padding: 11.82px 11.84px;
  background: var(--ice);
}
.bio-modal__btn {
  display: grid;
  place-items: center;
  width: 37.43px;
  height: 37.43px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--navy);
  cursor: pointer;
}
.bio-modal__btn img { pointer-events: none; }
.bio-modal__aside {
  padding: clamp(20px, 5vw, 27.58px);
  padding-top: 8px;
  background: var(--ice);
  border-bottom: 1px solid #dce7f8;
}
.bio-modal__photo {
  aspect-ratio: 270 / 337.49;
  max-width: 270px;
  border-radius: 3px;
  overflow: hidden;
  background: linear-gradient(160deg, #ffffff 0%, #dce7f8 100%);
}
.bio-modal__photo img { width: 100%; height: 100%; object-fit: cover; }
.bio-modal__role {
  margin-top: 19px;
  font-size: 11.3px;
  font-weight: 600;
  line-height: 18.35px;
  letter-spacing: 1.4726px;
  text-transform: uppercase;
  color: #2a5878;
}
.bio-modal__name {
  margin-top: 12px;
  padding-bottom: 5.89px;
  font-size: 24px;
  font-weight: 600;
  line-height: 30.85px;
  letter-spacing: -0.6649px;
  color: var(--navy);
}
.bio-modal__rule { display: block; width: 41.37px; height: 1.97px; margin-top: 12px; background: var(--gold); }
.bio-modal__social { margin-top: 21.83px; display: flex; gap: 7.88px; }
.bio-modal__social a {
  display: grid;
  place-items: center;
  width: 35.46px;
  height: 35.46px;
  border: 1px solid #dce7f8;
  border-radius: 3px;
  background: var(--white);
}
.bio-modal__icon {
  display: block;
  width: 15px;
  height: 15px;
  background: var(--navy);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.bio-modal__content { padding: clamp(24px, 5vw, 34.82px) clamp(20px, 5vw, 35px); }
.bio-modal__label {
  font-size: 11.8px;
  font-weight: 600;
  line-height: 13.711px;
  letter-spacing: 1.5366px;
  text-transform: uppercase;
  color: var(--navy);
}
.bio-modal__text { margin-top: 13px; font-size: 14px; line-height: 22.901px; }
.bio-modal__text + .bio-modal__text { margin-top: 12px; }
.bio-modal__text a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.bio-modal__text a:hover { color: var(--gold); }
.bio-modal__quote { margin-top: 20px; font-size: 13px; line-height: 22.901px; }
.bio-modal__quote strong { font-weight: 600; }
.bio-modal__details {
  margin-top: 10.2px;
  padding-top: 19.82px;
  border-top: 1px solid #e1e7f0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.bio-modal__list { margin-top: 13.79px; display: flex; flex-direction: column; gap: 9.7px; }
.bio-modal__list li {
  position: relative;
  padding-left: 16.75px;
  font-size: 14px;
  line-height: 22.901px;
}
.bio-modal__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8.5px;
  width: 5.91px;
  height: 5.91px;
  border-radius: 50%;
  background: var(--gold);
}
.bio-modal__split { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 16px; }
.bio-modal__section--education { flex: 1 1 240px; max-width: 288.39px; }
.bio-modal__section--focus { flex: 1 1 260px; max-width: 304.22px; }
.bio-modal__tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px 2px; }
.bio-modal__tags li {
  flex: 1 1 auto;
  padding: 8.4px 9px;
  border: 1px solid #e1e7f0;
  border-radius: 2px;
  background: var(--ice);
  font-size: 14px;
  line-height: 1.21;
  text-align: center;
  white-space: nowrap;
}

/* When any modal is open, lock body scroll */
body.modal-open { overflow: hidden; }

/* === Insights listing — Figma 267:8320 === */

/* Page hero — Figma 267:8323 */
.insights-page-hero {
  position: relative;
  display: flex;
  min-height: clamp(300px, 28.75vw, 414px);
  background: var(--ice);
  color: var(--white);
  overflow: hidden;
}
.insights-page-hero__media { position: absolute; inset: 0; }
.insights-page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.insights-page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 65, 92, 0.5) 0%, rgba(27, 65, 92, 0.4) 28%, rgba(27, 65, 92, 0.7) 61.376%, rgba(27, 65, 92, 0.8) 100%);
}
.insights-page-hero__inner {
  position: relative;
  align-self: center;
  /* title centre sits 30.5px below the hero centre; copy is inset 20px like the homepage hero */
  padding-top: 61px;
  padding-left: clamp(0px, 1.389vw, 20px);
}
.insights-page-hero__title {
  font-size: min(clamp(2.25rem, 1.2rem + 3.1vw, 3.45rem), 11vw);
  font-weight: 600;
  line-height: 1.1768;
  letter-spacing: -0.56px;
  text-transform: capitalize;
}

/* Listing — Figma 267:8339 */
.insights-page-list { padding-block: var(--section-y-sm); background: var(--white); }
.insights-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 0;
  padding-bottom: clamp(40px, 4.167vw, 60px);
  border-bottom: 1px solid #e1e7f0;
}
.insights-page-head__lead {
  flex: 1 1 320px;
  max-width: 592px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
}
.insights-page-head__lead .section-title { text-transform: capitalize; }
.insights-page-eyebrow { color: var(--navy); }
.insights-page-head__text {
  max-width: 608px;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.4444;
  color: var(--navy);
}
.insights-page-grid {
  margin-top: 31.4px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 31.4px clamp(16px, 1.8vw, 25.9px);
}
.insights-page-grid > [hidden] { display: none; }
.insights-page-more {
  margin-top: clamp(40px, 4.167vw, 60px);
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.insights-page-more[hidden] { display: none; }

/* === Insight detail — Figma 408:524 === */

/* Dark nav variant — Figma 413:578 (white bar, navy logo/links/button, navy 20% rule) */
.nav-dark .site-header {
  position: sticky;
  top: 0;
  background: var(--white);
  border-bottom-color: rgba(27, 65, 92, 0.2);
}
.nav-dark .site-header.is-scrolled {
  background: var(--white);
  border-bottom-color: rgba(27, 65, 92, 0.2);
  box-shadow: 0 4px 24px rgba(27, 65, 92, 0.08);
}
.nav-dark .site-header .logo-mask { background: var(--navy); }
.nav-dark .site-header__nav a { color: var(--navy); }
.nav-dark .site-header .btn--nav { color: var(--navy); border-color: var(--navy); }
.nav-dark .site-header .btn--nav:hover,
.nav-dark .site-header .btn--nav:focus-visible { border-color: var(--gold); }
.nav-dark .site-header__toggle span { background: var(--navy); }

.insight-detail {
  padding-block: clamp(40px, 4.167vw, 60px) var(--section-y-sm);
  background: var(--white);
  color: var(--navy);
}
.insight-detail-head {
  max-width: 962px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.insight-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 26px;
}
.insight-detail-title {
  font-size: min(clamp(2rem, 1.1rem + 3.1vw, 3.45rem), 9vw);
  font-weight: 600;
  line-height: 1.1768;
  letter-spacing: -0.56px;
  text-transform: capitalize;
}
.insight-detail-meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }
.insight-detail-meta li {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 26px;
}
.insight-detail-meta li + li {
  margin-left: 20px;
  padding-left: 20px;
  background: linear-gradient(var(--navy), var(--navy)) left center / 1px 18px no-repeat;
}
.insight-detail-photo {
  margin: 32px 0 0;
  aspect-ratio: 1200 / 486;
  background: var(--paper);
  overflow: hidden;
}
.insight-detail-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Portrait source images (LinkedIn post graphics) are shown whole rather than cropped */
.insight-detail-photo--contain img { object-fit: contain; }

/* Article body — Figma text blocks 409:1506 / 409:1499: 18/26 navy, H2 40/50 title-case, run-in heads 18/26 bold */
.insight-detail-body {
  margin-top: 32px;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.4444;
}
.insight-detail-body > * { margin: 0; }
.insight-detail-body > * + * { margin-top: 26px; }
.insight-detail-body h2 {
  font-size: clamp(1.625rem, 1.1rem + 1.7vw, 2.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.4px;
  text-transform: capitalize;
}
.insight-detail-body > * + h2 { margin-top: 32px; }
.insight-detail-body h2 + *,
.insight-detail-body h3 + * { margin-top: 22px; }
.insight-detail-body h3 { font-size: inherit; font-weight: 700; line-height: inherit; }
.insight-detail-body > * + h3 { margin-top: 22px; }
.insight-detail-body ul,
.insight-detail-body ol { padding-left: 1.4em; list-style: revert; }
.insight-detail-body li + li { margin-top: 6px; }
/* The CMS editor stores list items as <li><p>…</p></li> — keep bullets tight after any save */
.insight-detail-body li > p { margin: 0 !important; }
.insight-detail-body a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.insight-detail-body a:hover { color: var(--teal); }
/* Portrait (9:16) social video shown above the article body (insights `video` field) */
.insight-video { margin: 32px auto 0; width: min(100%, 380px); }
.insight-video video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--navy);
  border-radius: 4px;
}
.insight-detail-body strong { font-weight: 700; }
.insight-detail-dek { font-weight: 500; }

.insight-detail-pager {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}
.insight-detail-pager__prev .btn__arrow { transform: scaleX(-1); }
.insight-detail-pager__next { margin-left: auto; }

/* === Contact — Figma 303:12018 === */

/* Hero — Figma 303:12021 (414px tall at 1440, photo anchored to its top edge) */
.contact-hero {
  position: relative;
  display: flex;
  min-height: clamp(300px, 28.75vw, 414px);
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}
.contact-hero__media { position: absolute; inset: 0; }
.contact-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.contact-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 65, 92, 0.1) 0%, rgba(27, 65, 92, 0.4) 28%, rgba(27, 65, 92, 0.6) 61.376%, rgba(27, 65, 92, 0.8) 100%);
}
.contact-hero__inner {
  position: relative;
  align-self: center;
  /* title centre sits 30.5px below the hero centre; copy sits 20px inside the page column in Figma (x=140) */
  padding-top: 61px;
  padding-left: clamp(0px, 1.389vw, 20px);
}
.contact-hero__title {
  font-size: clamp(2.25rem, 1.2rem + 3.1vw, 3.45rem);
  font-weight: 600;
  line-height: 1.1768;
  letter-spacing: -0.56px;
  text-transform: capitalize;
}

/* Body — Figma 303:12037 */
.contact-body { padding-block: var(--section-y-sm); background: var(--white); color: var(--navy); }
.contact-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 0;
}
.contact-intro__lead {
  flex: 1 1 380px;
  max-width: 592px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
}
.contact-eyebrow { color: var(--navy); }
.contact-intro__title { max-width: 521px; text-transform: capitalize; }
.contact-intro__text {
  flex: 1 1 420px;
  max-width: 608px;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.4444;
  color: var(--navy);
  /* Figma breaks this copy ~40px short of the 608px column */
  padding-right: clamp(0px, 2.778vw, 40px);
}
.contact-intro__text strong { font-weight: 700; }

.contact-main {
  margin-top: clamp(40px, 4.167vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, 532fr) minmax(0, 608fr);
  gap: clamp(32px, 4.167vw, 60px);
  align-items: start;
}

/* Get in touch — Figma 303:12664 */
.contact-touch::before {
  content: "";
  display: block;
  width: 56px;
  height: 6px;
  border-radius: 1px;
  background: var(--gold);
}
.contact-touch__title {
  margin-top: 20px;
  font-size: clamp(1.5rem, 1.3rem + 0.55vw, 1.75rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.56px;
}
.contact-touch__list {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-touch__item { display: flex; align-items: flex-start; gap: 14px; }
.contact-touch__item img { flex: none; width: 19px; height: 19px; margin-top: 3px; }
.contact-touch__label { font-weight: 500; line-height: 25.58px; }
.contact-touch__text {
  margin-top: 4px;
  max-width: 424px;
  font-size: 15px;
  line-height: 23.25px;
  color: rgba(27, 65, 92, 0.66);
}

/* Form — Figma 303:12622 */
.contact-form-wrap { padding-top: 6px; }
.contact-form__title {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.8px;
}
.contact-form__intro {
  margin-top: 12px;
  font-size: 15px;
  line-height: 23.25px;
  color: rgba(27, 65, 92, 0.66);
}
.contact-form {
  margin-top: 12px;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.contact-form__trap { position: absolute; left: -9999px; }
.contact-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 28px;
  padding-bottom: 32px;
}
/* Field: the Figma "placeholder" is the real <label>, floated over the input and
   hidden once the field has a value. No focus/filled/error variants exist in Figma. */
.contact-field { position: relative; }
.contact-field input,
.contact-field textarea {
  display: block;
  width: 100%;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid rgba(27, 65, 92, 0.32);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 19px;
  color: var(--navy);
  appearance: none;
}
.contact-field textarea {
  min-height: 88px;
  padding-top: 57px;
  /* grows with its content where field-sizing is supported; scrolls otherwise */
  resize: none;
  field-sizing: content;
  max-height: 320px;
}
.contact-field label {
  position: absolute;
  left: 2px;
  bottom: 11px;
  font-size: 16px;
  line-height: 19px;
  color: rgba(27, 65, 92, 0.6);
  pointer-events: none;
}
.contact-field input:not(:placeholder-shown) + label,
.contact-field textarea:not(:placeholder-shown) + label { visibility: hidden; }
.contact-field__req { margin-left: 8px; font-size: 22px; line-height: 0; font-weight: 700; color: var(--gold); vertical-align: -3px; }
.contact-field input:focus-visible,
.contact-field textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Submit — Figma 303:12658: a filled gold button unique to this form (not the shared outlined .btn).
   The prototype defines no hover state for it, so none is added. */
.contact-submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--gold);
  border-radius: 3px;
  background: var(--gold);
  color: var(--navy);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.contact-form__note { font-size: 12px; line-height: 20.25px; color: rgba(27, 65, 92, 0.45); }
.contact-form__note strong { font-weight: 700; }

/* Thanks page (no Figma design — shared components only) */
.contact-thanks { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }

/* === Input / motion preferences === */

/* Touch devices have no hover — show the "why different" descriptions permanently */
@media (hover: none) {
  .diff-card { padding-top: 30px; }
  .diff-card__icon { width: 50px; height: 50px; }
  .diff-card__title { font-size: 18px; line-height: 25.65px; letter-spacing: -0.19px; }
  .diff-card__text { max-height: none; margin-top: 8px; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .insight-card:hover { transform: none; }
}

/* === Layout transformations only — keep at end of file === */

@media (max-width: 900px) {
  /* Two-column lead/text intros stack here; drop the desktop column caps so copy fills the row */
  .hero__text,
  .section-head, .section-head__text,
  .about__lead, .about__title, .about__text,
  .solutions__lead .section-title, .solutions__text,
  .approach-developing__lead, .approach-developing__text,
  .approach-selection__text, .approach-selection__list li:last-child, .approach-teambuilds__text,
  .sol-intro__lead, .sol-intro__title, .sol-intro__text,
  .team-page-intro__lead, .team-page-intro__title, .team-page-intro__text,
  .insights-page-head__lead, .insights-page-head__text,
  .contact-intro__lead, .contact-intro__title, .contact-intro__text { max-width: none; }
  .metrics { grid-template-columns: minmax(0, 1fr); }
  .diff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diff-card { height: auto; min-height: 288px; }
  .solutions__inner { grid-template-columns: minmax(0, 1fr); }
  .solutions__ridge { display: none; }
  .nav-open .site-header { background: var(--navy); }

  /* Nav → dropdown drawer. Drawer direction is flagged for designer review. */
  .site-header__toggle { display: block; }
  .site-header .btn--nav { display: none; }
  .site-header__nav {
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--navy);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), visibility 300ms;
  }
  .nav-open .site-header__nav { visibility: visible; opacity: 1; transform: none; }
  .site-header__nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--gutter) 24px;
  }
  .site-header__nav a { display: block; padding-block: 14px; font-size: 16px; }
  .site-header__nav a[aria-current="page"]::after { display: none; }
  .site-header__nav a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
  .site-header__nav-contact { display: block; }
}

@media (max-width: 700px) {
  .team-grid, .insight-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .diff-grid { grid-template-columns: minmax(0, 1fr); }
  /* Footer links can't share a row on phones; 2-row columns (Contact alone in the 3rd) beat a ragged 4+1 wrap */
  .footer-bar__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer-bar__links { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: 12px 40px; }
}

@media (max-width: 480px) {
  /* Rotating word drops to its own line so the longest word always fits */
  .hero__title-line { flex-direction: column; }
}

/* === Inner-page layout transformations === */

/* --- approach --- */
/* Approach — layout transformations only */
@media (max-width: 900px) {
  .approach-lenses { grid-template-columns: minmax(0, 1fr); }
  .approach-lenses__tabs, .approach-lenses__note { max-width: none; }
  .approach-lens-panel { min-height: 0; }
  .approach-selection { flex-direction: column; align-items: stretch; }
  .approach-teambuilds { grid-template-columns: minmax(0, 1fr); }
  .approach-teambuilds__ridge { display: none; }
}

@media (max-width: 760px) {
  .approach-science__cards,
  .approach-methods { grid-template-columns: minmax(0, 1fr); }
}

/* --- solutions --- */
/* Solutions page — layout transformations only */
@media (max-width: 900px) {
  .sol-detail__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sol-detail__aside { padding-right: 0; }
  .sol-detail__title { max-width: none; }
}
@media (max-width: 700px) {
  .sol-disciplines { grid-template-columns: minmax(0, 1fr); }
  .sol-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sol-tags, .sol-cards { grid-template-columns: minmax(0, 1fr); }
}

/* --- team --- */
/* Team page — layout transformations only */

/* Bio modal: centered card on desktop with internal scroll (docs/modals.md) */
@media (min-width: 768px) {
  .bio-modal[open] { display: flex; align-items: center; justify-content: center; }
  .bio-modal__panel {
    position: relative;
    inset: auto;
    margin: auto;
    width: min(1004.7px, 92vw);
    min-height: min(573px, 90vh);
    max-height: 90vh;
    flex-direction: row;
    border-radius: 4px;
    box-shadow: 0 40px 90px -40px rgba(12, 29, 43, 0.6);
  }
  .bio-modal__controls { position: absolute; top: 0; right: 0; padding-bottom: 0; background: none; }
  .bio-modal__aside {
    flex: none;
    width: clamp(260px, 32.35%, 325px);
    padding-top: 27.58px;
    border-bottom: 0;
    border-right: 1px solid #dce7f8;
  }
  .bio-modal__content { flex: 1; min-width: 0; }
  .bio-modal__section--bio { padding-right: 0; }
}

/* Phones in landscape (full-screen layout, wide but short): the portrait sits centered on a
   faded band — same treatment as .insight-detail-photo — instead of hugging the left edge */
@media (max-width: 767px) and (orientation: landscape) {
  .bio-modal__photo {
    max-width: none;
    aspect-ratio: auto;
    height: clamp(220px, 70vh, 337.49px);
    display: flex;
    justify-content: center;
    background: linear-gradient(90deg, #ffffff 0%, #dce7f8 50%, #ffffff 100%);
  }
  .bio-modal__photo img {
    width: auto;
    aspect-ratio: 270 / 337.49;
    border-radius: 3px;
  }
}

/* Groups hold three people, so 3-up goes straight to 1-up (a 2-up row would strand an orphan) */
@media (max-width: 700px) {
  .team-page-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Touch devices have no hover — keep the "View bio" affordance visible */
@media (hover: none) {
  .team-page-card__view { opacity: 1; color: var(--navy); }
  .team-page-card__view img { filter: brightness(0) saturate(100%) invert(21%) sepia(28%) saturate(1096%) hue-rotate(164deg) brightness(93%) contrast(91%); }
}

/* --- insights --- */
/* Insights — layout transformations only */
@media (max-width: 900px) {
  .insights-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* drawer stays navy, so drawer links stay white on the dark-nav variant */
  .nav-dark .site-header__nav a { color: var(--white); }
}
@media (max-width: 600px) {
  .insights-page-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- contact --- */
/* Contact — layout transformations only */
@media (max-width: 900px) {
  .contact-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .contact-form__row { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
}