:root {
  color-scheme: light;
  --color-bg: #ffffff;
  --color-text: #1d1d1f;
  --color-body: #3a3a3c;
  --color-muted: #636466;
  --color-rule: #e7e7e8;
  --color-card: #f7f7f8;
  --color-brand: #b92b27;
  --color-link: #2e69ff;
  --color-pill: #000000;
  --color-pill-hover: #3a3a3b;
  --shadow-header: 0 1px 0 rgba(0, 0, 0, 0.06);
  --container: 1200px;
  --measure: 740px;
  --space-page: clamp(20px, 4vw, 32px);
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--color-bg);
  scroll-behavior: smooth;
}

@keyframes cityMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

body:has(.mobile-nav:not([hidden])) {
  overflow: hidden;
}

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: background-color 0.15s ease, color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--color-brand);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

.site-header {
  background: #ffffff;
  box-shadow: var(--shadow-header);
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateY(0);
  transition: transform 0.25s ease;
  z-index: 50;
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header__inner {
  align-items: center;
  display: flex;
  gap: 32px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--container);
  min-height: 76px;
  padding: 0 var(--space-page);
}

.site-logo {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 44px;
  text-decoration: none;
}

.site-logo img {
  height: 26px;
  width: auto;
}

.site-nav {
  align-items: center;
  display: flex;
  gap: clamp(14px, 3vw, 36px);
  white-space: nowrap;
}

.site-nav a,
.mobile-nav a {
  color: var(--color-muted);
  font-size: 15px;
  font-weight: 400;
  text-decoration-color: transparent;
}

.site-nav a[aria-current="page"],
.mobile-nav a[aria-current="page"] {
  color: var(--color-text);
  text-decoration-color: currentColor;
}

.button-pill,
.site-nav .button-pill,
.mobile-nav .button-pill {
  align-items: center;
  background: var(--color-pill);
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  min-height: 40px;
  padding: 9px 18px;
  text-decoration: none;
  white-space: nowrap;
}

.button-pill:hover,
.site-nav .button-pill:hover,
.mobile-nav .button-pill:hover {
  background: var(--color-pill-hover);
  color: #ffffff;
  text-decoration: none;
}

.button-pill--light,
.site-nav .button-pill--light,
.mobile-nav .button-pill--light {
  background: #ffffff;
  color: #111112;
}

.button-pill--light:hover {
  background: #e2e2e4;
  color: #111112;
}

.menu-toggle {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  display: none;
  flex-direction: column;
  gap: 5px;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 44px;
}

.menu-toggle span {
  background: var(--color-text);
  display: block;
  height: 2px;
  width: 22px;
}

.mobile-nav {
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  padding: 4px var(--space-page) 24px;
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav a:not(.button-pill) {
  border-bottom: 1px solid #f0f0f1;
  min-height: 48px;
  padding: 14px 0;
}

.mobile-nav .button-pill {
  align-self: flex-start;
  margin-top: 20px;
}

.site-main {
  margin: 0 auto;
  max-width: var(--container);
  min-height: calc(100vh - 360px);
  padding: 148px var(--space-page) 72px;
  width: 100%;
}

body[data-page-path="/"] .site-main {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  padding-top: 76px;
}

.site-main > section,
.site-main > article {
  margin-left: auto;
  margin-right: auto;
}

.legal-notice {
  max-width: 800px;
}

.doc-page {
  max-width: 800px;
}

.doc-page h1 {
  color: var(--color-text);
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.1;
  margin: 0 0 24px;
}

.doc-page p {
  color: var(--color-body);
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 32px;
}

.doc-page .doc-page__attribution {
  color: var(--color-secondary);
  font-size: 14px;
  margin-bottom: 0;
}

.table-wrap {
  overflow-x: auto;
}

.doc-page table {
  border-collapse: collapse;
  font-size: 17px;
  line-height: 1.65;
  min-width: 640px;
  width: 100%;
}

.doc-page th,
.doc-page td {
  border-bottom: 1px solid var(--color-rule);
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
}

.doc-page th {
  border-bottom-color: var(--color-text);
  border-bottom-width: 2px;
  color: var(--color-text);
  font-weight: 700;
}

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

.legal-notice h1,
.site-main h1 {
  color: var(--color-text);
  font-size: clamp(34px, 6vw, 64px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0 0 24px;
}

.legal-notice h1 {
  font-size: clamp(28px, 3.4vw, 38px);
}

.site-main h2 {
  color: var(--color-text);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 56px 0 20px;
}

.legal-notice h2 {
  font-size: 20px;
  margin: 40px 0 16px;
}

.site-main p {
  max-width: var(--measure);
}

.legal-notice p,
.legal-notice li {
  color: var(--color-body);
  font-size: 17px;
  line-height: 1.65;
}

.legal-notice ul {
  display: grid;
  gap: 8px;
  margin: 0 0 20px;
  padding-left: 24px;
}

/* The rounded top overlaps the element above by its own radius, so on pages
   ending in the dark CTA banner the corner notches reveal the banner behind
   them — the design's seam. The banner adds 24px of bleed to compensate. */
.site-footer {
  background: #ffffff;
  border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--color-rule);
  color: var(--color-muted);
  margin-top: -24px;
  position: relative;
}

.site-footer__inner {
  margin: 0 auto;
  max-width: var(--container);
  padding: 56px var(--space-page) 30px;
}

.site-footer__grid {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.site-footer section {
  display: grid;
  gap: 9px;
}

.site-footer h2 {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 4px;
}

.site-footer a {
  color: var(--color-muted);
  font-size: 15px;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-brand);
}

.site-footer__copyright {
  color: var(--color-muted);
  font-size: 14px;
  margin: 82px 0 0;
  text-align: center;
}

.accordion {
  border-top: 1px solid var(--color-rule);
}

.accordion__item {
  border-bottom: 1px solid var(--color-rule);
}

.accordion__button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 16px;
  grid-template-columns: auto 1fr auto;
  min-height: 72px;
  padding: 18px 0;
  text-align: left;
  width: 100%;
}

.accordion__num {
  color: var(--color-muted);
  font-size: 14px;
}

.accordion__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.accordion__icon {
  color: var(--color-brand);
  font-size: 24px;
  line-height: 1;
}

.accordion__panel[hidden] {
  display: none;
}

.accordion__panel {
  padding: 0 0 24px;
}

.stat-donut {
  align-items: center;
  display: grid;
  justify-items: center;
  position: relative;
}

.stat-donut img {
  grid-area: 1 / 1;
}

.stat-donut__value {
  color: var(--color-text);
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 700;
  grid-area: 1 / 1;
  line-height: 1;
}

.home-hero {
  align-items: center;
  background-image: linear-gradient(rgba(10, 10, 12, 0.4), rgba(10, 10, 12, 0.4)), url("hero-network.36e9830ff6d5.png");
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  min-height: clamp(440px, 55vw, 620px);
  padding: clamp(72px, 10vw, 96px) var(--space-page);
  text-align: center;
}

.home-hero__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 900px;
}

.home-hero h1 {
  color: #ffffff;
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

.content-band {
  padding: 0 var(--space-page) 56px;
  width: min(var(--container), 100%);
}

/* Sections carry their spacing on the bottom only, so a leading heading's top
   margin would otherwise collapse out of the section and double the gap. */
.content-band > :first-child,
.page-hero > :first-child,
.page-section > :first-child {
  margin-top: 0;
}

.page-section {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 56px;
  width: 100%;
}

.page-section--intro {
  padding-top: 0;
}

.page-hero {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  padding-bottom: 56px;
}

.page-hero--image {
  align-items: center;
  background-image: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), url("hero-engineering.771d2dd211e9.png");
  background-position: center;
  background-size: cover;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr);
  margin: -48px calc(var(--space-page) * -1) 0;
  padding: clamp(48px, 7vw, 96px) var(--space-page);
}

.page-hero--students {
  align-items: center;
  background-image: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), url("hero-students.542e50b9ce3b.png");
  background-position: center;
  background-size: cover;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr);
  margin: -48px calc(var(--space-page) * -1) 0;
  padding: clamp(48px, 7vw, 96px) var(--space-page);
}

.page-hero__copy {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.content-band--mission {
  display: grid;
  gap: 20px;
  padding-bottom: 64px;
  padding-top: clamp(56px, 7vw, 80px);
}

.eyebrow {
  color: var(--color-brand);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.4;
  margin: 0;
  text-transform: uppercase;
}

.lede {
  color: var(--color-text);
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.4;
  margin: 0;
  max-width: var(--measure);
}

.product-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  margin-top: 24px;
}

.product-card,
.benefit-card,
.quote-card {
  background: var(--color-card);
  border-radius: 20px;
}

.product-card {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 36px;
}

.product-card img {
  border-radius: 20px;
}

.product-card .button-pill {
  margin-top: auto;
}

.product-card p,
.stat-card p,
.benefit-card li {
  color: var(--color-body);
  font-size: 17px;
  line-height: 1.65;
}

.quote-card blockquote {
  color: var(--color-text);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.product-card p,
.stat-card p,
.quote-card blockquote,
.benefit-card ul,
.benefit-card h3 {
  margin: 0;
}

.stat-list {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  margin-top: 24px;
}

.stat-card {
  align-items: center;
  background: var(--color-card);
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  padding: 36px;
}

.quote-grid,
.benefit-grid {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}

.quote-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quote-card {
  display: flex;
  flex-direction: column;
  gap: 28px;
  justify-content: space-between;
  padding: 36px;
}

.quote-card figcaption {
  align-items: center;
  color: var(--color-muted);
  display: flex;
  font-size: 15px;
  gap: 14px;
}

.quote-card figcaption img {
  border-radius: 50%;
  flex: 0 0 auto;
}

.quote-card figcaption span {
  display: grid;
}

.quote-card strong {
  color: var(--color-text);
}

.benefit-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.value-grid {
  display: grid;
  gap: 48px 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.value-card {
  display: grid;
  gap: 14px;
  position: relative;
}

.value-card::before {
  background: var(--color-brand);
  border-radius: 999px;
  content: "";
  height: 8px;
  width: 48px;
}

.value-card h3 {
  color: var(--color-text);
  font-size: 20px;
  line-height: 1.4;
  margin: 0;
}

.value-card p {
  margin: 0;
}

.region-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.region-nav a {
  background: #f0f0f1;
  border-radius: 999px;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
  padding: 11px 22px;
  text-decoration: none;
}

.region-nav a:hover {
  background: #e2e2e4;
  color: var(--color-text);
}

.region-section {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: clamp(56px, 7vw, 72px);
  scroll-margin-top: 96px;
  width: 100%;
}

.region-section h2 {
  font-size: clamp(28px, 3.4vw, 38px);
}

.region-layout {
  align-items: start;
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
}

.region-stat {
  align-items: center;
  background: var(--color-card);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 36px;
  text-align: center;
}

.region-stat p,
.region-copy p {
  margin: 0;
}

.region-copy {
  display: grid;
  gap: 18px;
}

.engineering-values {
  align-items: center;
  text-align: center;
}

.engineering-values > p {
  color: var(--color-muted);
}

.engineering-values__list {
  background: var(--color-card);
  border-radius: 20px;
  column-count: 2;
  column-gap: 44px;
  list-style: none;
  margin: 0;
  padding: 36px;
  text-align: left;
}

.engineering-values__list li {
  break-inside: avoid;
  color: var(--color-text);
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 24px;
  padding-left: 32px;
  position: relative;
}

.engineering-values__list li::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="%231d1d1f"><path d="M12 2l2.9 6.2 6.6.8-4.9 4.6 1.3 6.6L12 16.9 6.1 20.2l1.3-6.6L2.5 9l6.6-.8z"/></svg>');
  left: 0;
  position: absolute;
  top: 4px;
}

.accordion__panel ul {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding-left: 24px;
}

.people-grid,
.tips-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.stepper {
  display: flex;
  flex-direction: column;
  max-width: 820px;
}

.stepper__step {
  display: flex;
  gap: 24px;
}

.stepper__rail {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.stepper__badge {
  align-items: center;
  border: 1.5px solid var(--color-text);
  border-radius: 50%;
  color: var(--color-brand);
  display: flex;
  font-size: 14px;
  font-weight: 700;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.stepper__line {
  background: #c9c9cc;
  flex: 1;
  margin: 8px 0;
  width: 1px;
}

.stepper__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 36px;
}

.stepper__step:last-child .stepper__body {
  padding-bottom: 0;
}

.stepper__body h3 {
  color: var(--color-text);
  font-size: 20px;
  font-weight: 700;
  margin: 4px 0 0;
}

.stepper__body h3 a {
  color: var(--color-text);
  text-decoration: none;
}

.stepper__body h3 a:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.person-card,
.tip-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.person-card img {
  aspect-ratio: 1;
  border-radius: 20px;
  object-fit: cover;
  width: 100%;
}

.person-card h3,
.person-card p,
.tip-card h3,
.tip-card p {
  margin: 0;
}

.person-card h3,
.tip-card h3 {
  color: var(--color-text);
  font-size: 20px;
}

.person-card p {
  color: var(--color-body);
  font-size: 14px;
  line-height: 1.4;
}

.person-card p:last-child {
  color: #8a8d91;
}

.tip-card {
  background: var(--color-card);
  border-radius: 20px;
  color: var(--color-body);
  padding: 28px;
  text-decoration: none;
}

.tip-card--dark {
  background: var(--color-text);
  color: rgba(255, 255, 255, 0.85);
}

.tip-card--dark h3,
.tip-card--dark:hover h3 {
  color: #ffffff;
}

.tip-card--dark:hover {
  background: var(--color-pill-hover);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.career-story-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
}

.career-story {
  background: var(--color-card);
  border-radius: 20px;
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  padding: 36px;
}

.career-story img {
  aspect-ratio: 1;
  border-radius: 20px;
  grid-row: span 2;
  object-fit: cover;
  width: 100%;
}

.career-story h3 {
  color: var(--color-text);
  font-size: 24px;
  margin: 0;
}

.career-story ol {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.career-story li {
  color: var(--color-body);
  font-size: 17px;
  line-height: 1.4;
  padding-left: 28px;
  position: relative;
}

.career-story li::before {
  color: var(--color-text);
  content: "^";
  font-weight: 700;
  left: 0;
  position: absolute;
}

.career-story li:first-child {
  color: var(--color-text);
  font-weight: 600;
}

.read-more {
  display: grid;
  gap: 16px;
}

.read-more summary {
  color: var(--color-text);
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  width: fit-content;
}

.read-more summary:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}

.benefit-card {
  padding: 36px;
}

.benefit-card__icon {
  display: block;
  margin-bottom: 24px;
}

.benefit-card h3 {
  color: var(--color-text);
  font-size: 24px;
  line-height: 1.4;
}

.benefit-card ul {
  display: grid;
  gap: 14px;
  list-style: none;
  padding: 24px 0 0;
}

.benefit-card li {
  color: var(--color-text);
  font-weight: 600;
  padding-left: 30px;
  position: relative;
}

.benefit-card li::before {
  border-bottom: 2px solid var(--color-text);
  border-left: 2px solid var(--color-text);
  content: "";
  height: 6px;
  left: 2px;
  position: absolute;
  top: 0.65em;
  transform: rotate(-45deg);
  width: 13px;
}

.location-strip {
  overflow: hidden;
  padding: 0 0 56px;
  width: 100%;
}

/* The -50% in cityMarquee is only seamless while the track is exactly two
   groups wide, so the track carries no horizontal padding and no flex gap:
   each group owns its own trailing 28px instead. Adding either back here makes
   half the track wider than one group, and the strip jumps at every loop. */
.location-strip__track {
  animation: cityMarquee 45s linear infinite;
  display: flex;
  gap: 0;
  padding: 0 0 12px;
  width: max-content;
}

.location-strip__group {
  display: flex;
  gap: 28px;
  padding-right: 28px;
}

/* Card width is set with `width`, not with a clamp() in the `flex` shorthand:
   WebKit mis-parses math functions in the shorthand's flex-basis slot and drops
   the whole declaration, which let each card fall back to its image's intrinsic
   width. That inflated cards to 896x2153, made the track 11082px, and ran the
   marquee 3.7x too fast, so iOS showed a huge zoomed crop instead of the strip
   while Android rendered it correctly. Keep `flex` free of math functions and
   keep the plain-length fallback ahead of the clamp. */
.location-card {
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  flex: 0 0 auto;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 220px;
  width: clamp(220px, 26vw, 300px);
}

.location-card img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.location-card figcaption {
  bottom: 20px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  left: 24px;
  position: absolute;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .location-strip {
    overflow-x: auto;
  }

  .location-strip__track {
    animation: none !important;
  }
}

/* Full-bleed from inside the constrained main column: the side margins pull
   the banner out to the viewport edges (they compute to 0 on the home page,
   whose main is already unconstrained). The -72px bottom cancels site-main's
   bottom padding so the banner meets the footer; the +24px bottom bleed is
   what the footer's rounded top overlaps into. */
.cta-banner {
  background-image: linear-gradient(rgba(10, 10, 12, 0.45), rgba(10, 10, 12, 0.45)), url("banner-mission.2e02b49bbfff.png");
  background-position: center;
  background-size: cover;
  color: #ffffff;
  padding: clamp(56px, 8vw, 96px) var(--space-page) calc(clamp(64px, 9vw, 104px) + 24px);
  text-align: center;
}

/* Outranks the .site-main > section auto-centering margins. */
.site-main > .cta-banner {
  margin: 0 calc(50% - 50vw) -72px;
}

.cta-banner__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0 auto;
  max-width: 740px;
}

.cta-banner h2 {
  color: #ffffff;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  margin: 0;
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 20px;
  line-height: 1.4;
  margin: 0;
}

.cta-banner .cta-banner__footnote {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.65;
  margin-top: 24px;
}

@media (max-width: 880px) {
  .site-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .site-header__inner {
    min-height: 68px;
  }

  .site-main {
    padding-top: 104px;
  }

  body[data-page-path="/"] .site-main {
    padding-top: 68px;
  }

  .quote-grid,
  .benefit-grid,
  .region-layout,
  .page-hero--image,
  .page-hero--students {
    grid-template-columns: 1fr;
  }

  .page-hero--image,
  .page-hero--students {
    margin-top: -36px;
  }

  .engineering-values__list {
    column-count: 1;
  }

  .stat-card {
    align-items: start;
  }

}

@media (max-width: 700px) {
  .doc-page table {
    font-size: 15px;
    min-width: 0;
  }

  .doc-page th,
  .doc-page td {
    padding: 12px 8px;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  body {
    font-size: 16px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .product-card,
  .benefit-card,
  .quote-card,
  .stat-card {
    padding: 24px;
  }

  .career-story {
    grid-template-columns: 1fr;
  }
}

/* Homepage product module: three equal cards, with shared responsive sizing. */
.home-products .product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 28px;
  margin-inline: auto;
}
.home-products .product-card {
  min-width: 0;
  gap: 20px;
  padding: 32px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 3%);
}
.home-products .product-card img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.home-products .product-card h3 {
  margin: 0;
  font-size: 26px;
  line-height: 1.3;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.home-products .product-card p {
  overflow-wrap: anywhere;
}
.home-products .product-card .button-pill {
  max-width: 100%;
  white-space: normal;
}
@media (max-width: 800px) {
  .home-products .product-grid {
    grid-template-columns: 1fr;
    max-width: 540px;
  }
  .home-products .product-card { padding: 24px; }
}