/**
 * About page — responsive layer (Apple-inspired editorial rhythm, dark cinematic).
 *
 * Layering contract:
 *   pages/about.html <style>  →  design tokens + mobile-first component styling.
 *   this file                 →  every breakpoint, and nothing else.
 *
 * Breakpoints are mutually exclusive so no viewport ever matches two of them:
 *   ≤767px   phone
 *   768–1023 tablet
 *   ≥1024px  desktop
 * (The previous split used max-width:1024px against min-width:1024px, so a
 *  viewport of exactly 1024px matched the tablet *and* desktop rules at once.)
 */

.cv-about-page {
  /* Widths own this layer; the spacing scale lives with the tokens in about.html. */
  --cv-about-content: min(1068px, 100%);
  --cv-about-copy: min(692px, 100%);
  /* Comfortable reading measure — WCAG 1.4.8 keeps prose under ~80 characters. */
  --cv-about-measure: 68ch;
}

/* ── Section shell: one gutter and one vertical rhythm everywhere ── */
.cv-about-page .cv-about-hero-wrap {
  padding-inline: var(--cv-about-gutter);
}

.cv-about-page .cv-about-goal,
.cv-about-page .cv-about-office,
.cv-about-page .cv-about-careers,
.cv-about-page .cv-about-partners {
  padding-block: var(--cv-about-section-y);
  padding-inline: var(--cv-about-gutter);
}

.cv-about-page .cv-about-careers {
  background: none;
}

/* Internship and career descriptions only. Last line stays ragged (no text-align-last). */
.cv-about-page .cv-about-careers .cv-job-card p {
  text-align: justify;
}

.cv-about-page .cv-about-careers-layout,
.cv-about-page .cv-about-partners {
  gap: var(--cv-about-block-gap);
}

.cv-about-page .cv-about-careers-copy,
.cv-about-page .cv-about-careers-list,
.cv-about-page .cv-about-partners-copy {
  margin-right: 0;
  margin-left: 0;
}

.cv-about-page .cv-about-goal-row {
  margin-bottom: var(--cv-about-block-gap);
  align-items: center;
  text-align: center;
}

.cv-about-page .cv-about-goal-text,
.cv-about-page .cv-about-goal-text p {
  text-align: center;
}

/* This sentence's own break. A phone rule that hides br must not collapse it. */
.cv-about-page .cv-about-goal-text p br {
  display: revert;
}

.cv-about-page .cv-about-goal-text {
  padding-bottom: 0;
}

.cv-about-page .cv-about-goal-text p + p {
  margin-top: var(--cv-about-goal-para-gap);
}

.cv-about-page .cv-about-pillars {
  margin-top: var(--cv-about-block-gap);
  gap: var(--cv-about-grid-gap);
}

.cv-about-page .cv-about-office-head {
  margin-bottom: var(--cv-about-block-gap);
}

.cv-about-page .cv-about-office-grid {
  gap: var(--cv-about-grid-gap);
}

.cv-about-page .cv-about-office-item {
  gap: var(--cv-about-text-gap-sm);
}

.cv-about-page .cv-about-team-wrap {
  padding: var(--cv-about-section-y) var(--cv-about-gutter);
}

.cv-about-page .cv-about-team-layout {
  gap: var(--cv-about-block-gap);
}

.cv-about-page .cv-about-team-list {
  gap: var(--cv-about-grid-gap);
}

/* Employer badges use the bio column. A full row meets both text edges;
   a short last row keeps that same gap instead of stretching open. */
.cv-about-page .cv-team-info {
  container-type: inline-size;
  container-name: cv-team-info;
}

.cv-about-page .cv-team-logos {
  --cv-team-logo-w: clamp(48px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--cv-team-logo-w));
  justify-content: space-between;
  width: 100%;
  column-gap: 8px;
  row-gap: 8px;
}

/* Two badges never fill a row — center them so the side insets match. */
.cv-about-page .cv-team-logos:not(:has(img:nth-child(3))) {
  grid-template-columns: repeat(2, var(--cv-team-logo-w));
  justify-content: center;
}

/* Three badges fill a narrow phone row. On a wider column, centering
   keeps the gap from turning into a hole between the outer badges. */
.cv-about-page .cv-team-logos:has(img:nth-child(3)):not(:has(img:nth-child(4))) {
  grid-template-columns: repeat(3, var(--cv-team-logo-w));
  justify-content: center;
}

@container cv-team-info (max-width: 370px) {
  .cv-about-page .cv-team-logos:has(img:nth-child(3)):not(:has(img:nth-child(4))) {
    justify-content: space-between;
  }
}

.cv-about-page .cv-job-card .cv-btn--apply {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: auto;
  margin-top: var(--cv-about-text-gap);
  padding: 14px 28px;
  gap: 10px;
}

/* Bottom of the hero card dissolves into the page so the headline reads on it. */
.cv-about-hero-overlay {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 40%,
    color-mix(in srgb, var(--cv-bg) 42%, transparent) 62%,
    color-mix(in srgb, var(--cv-bg) 86%, transparent) 82%,
    var(--cv-bg) 100%
  );
}

.cv-about-page .cv-reveal,
.cv-about-page .cv-reveal-left,
.cv-about-page .cv-reveal-right {
  filter: none;
  transform: translate3d(0, 22px, 0);
}

.cv-about-page .cv-reveal.is-visible,
.cv-about-page .cv-reveal-left.is-visible,
.cv-about-page .cv-reveal-right.is-visible {
  transform: translate3d(0, 0, 0);
}

/* ─────────────────────────────────────────────────────────────
   Desktop — ≥1024px
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .cv-about-page {
    --cv-about-section-y: clamp(40px, 4.5vh, 56px);
    --cv-about-block-gap: clamp(24px, 3vh, 36px);
  }

  /* Hero ------------------------------------------------------ */
  .cv-about-hero-wrap {
    max-width: none;
    /* Clears the fixed header; cervento-header.js keeps --cv-header-offset current. */
    padding-top: calc(8px + var(--cv-header-offset, 112px));
    padding-bottom: var(--cv-about-text-gap-sm);
  }

  .cv-about-hero {
    max-width: var(--cv-about-content);
    margin-inline: auto;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(400px, 54svh, 580px);
    max-height: none;
    overflow: hidden;
    padding: 0 clamp(32px, 3vw, 48px) clamp(28px, 3.6vh, 48px);
  }

  .cv-about-hero-content {
    max-width: none;
    margin-inline: auto;
  }

  .cv-about-hero h1 {
    font-size: clamp(44px, 5vw, 64px);
    letter-spacing: -0.03em;
    line-height: 1.05;
  }

  .cv-about-hero-video-motion video {
    object-position: 50% 82%;
  }

  /* Goal + stats ---------------------------------------------- */
  .cv-about-goal-inner {
    max-width: var(--cv-about-content);
    margin-inline: auto;
  }

  .cv-about-goal-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(28px, 3vh, 40px);
  }

  .cv-about-goal-text {
    width: 100%;
    max-width: var(--cv-about-copy);
    margin-right: 0;
  }

  .cv-about-goal-text p {
    font-size: clamp(17px, 1.25vw, 19px);
    line-height: 1.588;
    color: rgba(227, 244, 248, 0.78);
  }

  .cv-about-pillars .cv-pillar-card {
    flex: 1 1 calc(25% - var(--cv-about-grid-gap));
    padding: 16px 18px 22px 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: background 0.35s ease, border-color 0.35s ease;
  }

  .cv-about-pillars .cv-pillar-card:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.065);
  }

  .cv-about-pillars .cv-pillar-card--accent {
    background: rgba(87, 94, 254, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .cv-about-pillars .cv-pillar-card--accent:hover {
    background: rgba(87, 94, 254, 1);
  }

  .cv-about-pillars .cv-pillar-name {
    margin-bottom: 8px;
    font-size: clamp(16px, 1.35vw, 19px);
  }

  .cv-about-pillars .cv-pillar-desc {
    font-size: 13px;
    line-height: 1.45;
  }

  /* Office — centered intro, then the bento gallery ------------ */
  .cv-about-apple-office .cv-about-office-inner {
    display: block;
    grid-template-columns: none;
    max-width: var(--cv-about-content);
    margin-inline: auto;
  }

  .cv-about-apple-office .cv-about-office-head {
    position: static;
    grid-column: auto;
    grid-row: auto;
    max-width: var(--cv-about-copy);
    margin-inline: auto;
    text-align: center;
  }

  .cv-about-apple-office .cv-about-office-grid {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
  }

  .cv-about-apple-office .cv-about-office-head h2 {
    margin: 0 0 var(--cv-about-text-gap-sm);
    font-family: "Unbounded", "Syne", sans-serif;
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 600;
    letter-spacing: -0.038em;
    line-height: 1.05;
    text-transform: none;
    color: var(--cv-text);
  }

  .cv-about-apple-office .cv-about-office-motto {
    margin: 0 0 var(--cv-about-text-gap-sm);
    font-family: "Syne", sans-serif;
    font-size: clamp(16px, 1.3vw, 18px);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: rgba(227, 244, 248, 0.92);
  }

  .cv-about-apple-office .cv-about-office-lead {
    margin: 0 auto;
    max-width: 36em;
    font-size: 15px;
    line-height: 1.47;
    letter-spacing: -0.011em;
    color: rgba(227, 244, 248, 0.68);
  }

  .cv-about-apple-office .cv-about-office-lead .cv-about-facilities {
    color: var(--cv-cyan);
  }

  /* The lead frame reads as a cinematic banner instead of an 800px-tall wall. */
  .cv-about-apple-office .cv-about-office-item--wide .cv-about-office-figure {
    aspect-ratio: 16 / 9;
  }

  .cv-about-apple-office .cv-about-office-figure {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    overflow: visible;
    border: none;
    background: transparent;
    border-radius: 0;
    min-height: 0;
    box-shadow: none;
    transition: none;
  }

  .cv-about-apple-office .cv-about-office-figure img {
    border-radius: 22px;
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.35);
  }

  /* Coworking and recreation: the frame follows the photo, so the caption
     sits under the picture instead of in an empty band. */
  .cv-about-apple-office .cv-about-office-item:not(.cv-about-office-item--wide) .cv-about-office-figure {
    aspect-ratio: auto;
    height: auto;
  }

  .cv-about-apple-office .cv-about-office-item:not(.cv-about-office-item--wide) .cv-about-office-figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    max-height: none;
    object-fit: cover;
  }

  .cv-about-apple-office .cv-about-office-figure:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
  }

  .cv-about-apple-office .cv-about-office-figure:hover img {
    transform: scale(1.015);
  }

  .cv-about-apple-office .cv-about-office-figure figcaption {
    position: static;
    order: 2;
    margin: 0;
    padding: 10px 4px 0;
    background: none;
    text-shadow: none;
    font-family: "Syne", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /* 0.45 alpha measured 3.97:1 against --cv-bg and failed AA for 12px text. */
    color: rgba(227, 244, 248, 0.62);
  }

  .cv-about-apple-office .cv-about-office-note {
    /* The full-bleed lead note ran the whole 1068px column (~130 characters). */
    max-width: var(--cv-about-measure);
    padding-inline: 4px;
    font-size: 14px;
    line-height: 1.47;
    letter-spacing: -0.011em;
    text-align: left;
    color: rgba(227, 244, 248, 0.65);
  }

  .cv-about-apple-office .cv-about-office-note .cv-accent {
    display: block;
    margin-bottom: 0.35em;
    font-family: "Syne", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.25;
    color: var(--cv-text);
  }

  /* Staged headline (parent gets .is-visible from the IntersectionObserver) */
  .cv-about-apple-head > * {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
      opacity 0.85s cubic-bezier(0.25, 0.1, 0.25, 1),
      transform 0.85s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  .cv-about-apple-head.is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.02s; }
  .cv-about-apple-head.is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.12s; }
  .cv-about-apple-head.is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.22s; }

  /* Team ------------------------------------------------------- */
  .cv-about-page .cv-team-card {
    padding: 20px 16px 0;
  }

  .cv-about-page .cv-team-photo img {
    max-height: 460px;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
  }

  /* Careers — centered intro, then two-column job cards --------- */
  .cv-about-page .cv-about-careers-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-template-columns: none;
    max-width: var(--cv-about-content);
    margin-inline: auto;
    gap: var(--cv-about-block-gap);
  }

  .cv-about-page .cv-about-careers-copy {
    width: 100%;
    max-width: var(--cv-about-copy);
    margin: 0 auto;
    text-align: center;
  }

  .cv-about-page .cv-about-careers-copy h2 {
    margin: 0 0 var(--cv-about-text-gap-sm);
  }

  .cv-about-page .cv-about-careers-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
    gap: var(--cv-about-grid-gap);
  }

  /* Job body text used to run the full 1068px card (~110 characters a line).
     The card now splits: title + action in a fixed rail, prose at a readable
     measure beside it. */
  .cv-about-page .cv-about-careers .cv-job-card {
    display: grid;
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 56px);
    align-items: start;
    width: 100%;
    margin: 0;
    padding: 32px clamp(32px, 3vw, 40px);
  }

  .cv-about-page .cv-about-careers .cv-job-card h3 {
    grid-column: 1;
    font-size: clamp(18px, 1.4vw, 22px);
    line-height: 1.25;
    letter-spacing: -0.02em;
  }

  .cv-about-page .cv-about-careers .cv-job-card .cv-divider {
    grid-column: 1;
    margin: 16px 0 0;
  }

  .cv-about-page .cv-about-careers .cv-job-card p {
    grid-column: 2;
    max-width: var(--cv-about-measure);
    font-size: 16px;
    line-height: 1.6;
  }

  /* First paragraph pulls level with the title rail. */
  .cv-about-page .cv-about-careers .cv-job-card h3 + .cv-divider + p {
    margin-top: -2px;
  }

  /* Every card's action fills the title rail, so the three buttons are the
     same width whatever their label says. */
  .cv-about-page .cv-about-careers .cv-job-card .cv-btn--apply {
    grid-column: 1;
    grid-row: 3;
    display: inline-flex;
    width: 100%;
    max-width: none;
    padding-inline: 20px;
    align-self: start;
    justify-self: stretch;
    margin: var(--cv-about-text-gap) 0 0;
  }

  .cv-job-card {
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(37, 40, 76, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .cv-job-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
  }

  /* Partners --------------------------------------------------- */
  .cv-about-partners {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1fr);
    align-items: center;
    max-width: var(--cv-about-content);
    margin-inline: auto;
    margin-bottom: var(--cv-about-section-y);
    border-radius: 28px;
    background:
      linear-gradient(180deg, rgba(27, 30, 61, 0.15), rgba(27, 30, 61, 0.72)),
      url("/assets/backgrounds/home-impact.webp") center / cover no-repeat;
  }

  .cv-about-partners-copy,
  .cv-logo-grid {
    width: auto;
    margin: 0;
  }

  .cv-about-partners-copy p {
    max-width: var(--cv-about-measure);
    margin-inline: auto;
    text-align: center;
  }

  /* Scroll-linked reveal for the gallery frames. */
  @supports (animation-timeline: view()) {
    .cv-about-apple-office .cv-about-office-figure img {
      animation: cv-about-figure-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 42%;
    }

    @keyframes cv-about-figure-in {
      from { opacity: 0.55; transform: scale(0.96) translate3d(0, 12px, 0); }
      to   { opacity: 1; transform: scale(1) translate3d(0, 0, 0); }
    }
  }
}

/* ─────────────────────────────────────────────────────────────
   Tablet + phone — ≤1023px: one-column rhythm
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .cv-about-page {
    --cv-about-gutter: 24px;
    --cv-about-section-y: 64px;
    --cv-about-block-gap: 40px;
  }

  .cv-about-hero-wrap {
    padding-top: calc(var(--cv-header-offset, 72px) + 8px);
    padding-bottom: var(--cv-about-text-gap-sm);
    padding-inline: var(--cv-about-gutter);
  }

  .cv-about-hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: min(40svh, 360px);
    max-height: none;
    padding: 16px 20px 18px;
    border-radius: 24px;
  }

  .cv-about-hero-video-motion video {
    object-position: 50% 36%;
  }

  .cv-about-hero-overlay {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 34%,
      color-mix(in srgb, var(--cv-bg) 55%, transparent) 54%,
      color-mix(in srgb, var(--cv-bg) 88%, transparent) 72%,
      var(--cv-bg) 88%
    );
  }

  .cv-about-hero h1 {
    font-size: clamp(34px, 5.6vw, 48px);
    line-height: 1.08;
  }

  .cv-about-goal-row {
    flex-direction: column;
    gap: var(--cv-about-block-gap);
  }

  .cv-about-goal-text {
    width: 100%;
    max-width: none;
    margin-right: 0;
  }

  .cv-about-goal-inner,
  .cv-about-office-inner {
    display: block;
    max-width: var(--cv-about-content);
    margin-inline: auto;
  }

  .cv-about-careers-layout,
  .cv-about-team-layout {
    display: flex;
    flex-direction: column;
    max-width: var(--cv-about-content);
    margin-inline: auto;
  }

  .cv-about-office-head,
  .cv-about-office-grid {
    grid-column: auto;
    grid-row: auto;
  }

  .cv-about-apple-office .cv-about-office-head,
  .cv-about-office-head {
    max-width: var(--cv-about-copy);
    margin-inline: auto;
    margin-bottom: var(--cv-about-block-gap);
    text-align: center;
  }

  .cv-about-apple-office .cv-about-office-head h2 {
    font-size: clamp(28px, 6vw, 40px);
  }

  .cv-about-office-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .cv-about-careers-layout,
  .cv-about-partners {
    flex-direction: column;
  }

  .cv-about-careers-copy,
  .cv-about-careers-list,
  .cv-about-partners-copy,
  .cv-logo-grid {
    width: 100%;
    margin: 0;
  }

  .cv-about-careers-list {
    margin-top: var(--cv-about-text-gap);
  }

  .cv-about-partners {
    padding: var(--cv-about-section-y) var(--cv-about-gutter);
    border-radius: 24px;
  }

  .cv-about-partners-copy {
    margin-bottom: var(--cv-about-text-gap);
  }

  .cv-pillar-card,
  .cv-about-pillars .cv-pillar-card {
    flex: 1 1 calc(50% - var(--cv-about-grid-gap));
    padding: 20px 20px 28px 24px;
  }

  .cv-job-card {
    padding: 32px 24px;
  }

  .cv-job-card p {
    max-width: var(--cv-about-measure);
  }

  .cv-logo-grid {
    max-width: min(560px, 100%);
    margin-inline: auto;
  }

  .cv-btn {
    padding: 16px 32px;
  }

  .cv-btn--apply {
    padding: 16px 64px;
  }
}

/* ── Tablet only — 768–1023px ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .cv-about-hero {
    min-height: min(36svh, 340px);
  }

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

  .cv-about-office-item--wide {
    grid-column: 1 / -1;
  }

  .cv-about-apple-office .cv-about-office-item:not(.cv-about-office-item--wide) .cv-about-office-figure {
    aspect-ratio: auto;
    height: auto;
  }

  .cv-about-apple-office .cv-about-office-item:not(.cv-about-office-item--wide) .cv-about-office-figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    max-height: none;
    object-fit: cover;
  }
}

/* ── Phone — ≤767px ── */
@media (max-width: 767px) {
  .cv-about-page {
    --cv-about-gutter: 20px;
    --cv-about-section-y: 56px;
    --cv-about-block-gap: 32px;
    --cv-about-grid-gap: 12px;
  }

  /* The title stays pinned in the card. Only the button stack moves:
     down by this bottom padding plus half the stack's own height, so the
     group's midpoint sits on the hero's bottom edge. The video still clips
     to the card radius. Goal padding clears the hanging half, including the
     wrap's 8px, so the discovery sentence is not covered. */
  .cv-about-hero-wrap {
    padding-bottom: 8px;
  }

  .cv-about-hero {
    --cv-about-hero-pad-b: 14px;
    min-height: min(calc(46svh + 22px), 422px);
    padding: 16px 20px var(--cv-about-hero-pad-b);
    overflow: visible;
  }

  .cv-about-hero-video,
  .cv-about-hero-overlay {
    border-radius: inherit;
  }

  .cv-about-hero-actions {
    position: relative;
    z-index: 3;
    transform: translateY(calc(var(--cv-about-hero-pad-b) + 50%));
  }

  .cv-about-page .cv-about-goal {
    padding-top: 92px;
  }

  /* The translation's <br> is the slogan's line break, on every width.
     Below ~520px the old size wrapped "Engineering the future" inside
     line 1. Scale to the card: 13.3em covers the widest line (Unbounded 700)
     and 96px leaves the phone gutter, hero padding, and a little slack.
     The button stack still occupies its layout box, so the heading sits
     high in the sky. Shift only the heading down into the lower half;
     the actions transform above is what hangs the buttons on the card edge. */
  .cv-about-hero h1 {
    font-size: clamp(17px, calc((100vw - 96px) / 13.3), 32px);
    line-height: 1.1;
    text-wrap: balance;
    transform: translateY(56px);
  }

  .cv-about-hero h1 br {
    display: revert;
  }

  .cv-about-page .cv-team-photo {
    width: auto;
    max-width: 360px;
    margin-inline: auto;
    justify-content: center;
  }

  .cv-about-page .cv-team-photo img {
    width: auto;
    max-width: 360px;
    max-height: 360px;
    margin-inline: auto;
  }

  /* Matches the 88px badge below so a justified row cannot overflow. */
  .cv-about-page .cv-team-logos {
    --cv-team-logo-w: 88px;
  }

  /* Larger employer badges on phones. The extra class beats cervento-team.css, which is injected later. */
  .cv-about-page .cv-team-logos img {
    width: 88px;
    height: 52px;
  }

  .cv-pillar-card,
  .cv-about-pillars .cv-pillar-card {
    flex: 1 1 100%;
    padding: 18px 20px 24px;
  }

  .cv-pillar-name {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .cv-pillar-desc {
    font-size: 14px;
  }

  /* The gallery used to eat a screen per photo before the copy came back into
     view; a fixed ratio keeps each one a picture, not a chapter. */
  .cv-about-office-item--wide .cv-about-office-figure img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    max-height: 46svh;
  }

  .cv-about-apple-office .cv-about-office-item:not(.cv-about-office-item--wide) .cv-about-office-figure {
    aspect-ratio: auto;
    height: auto;
  }

  .cv-about-apple-office .cv-about-office-item:not(.cv-about-office-item--wide) .cv-about-office-figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    max-height: 52svh;
    object-fit: cover;
  }

  .cv-about-hero-actions .cv-btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .cv-about-office-join .cv-btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
    /* 13px fits the longest label (Romanian) on a 390px phone. */
    font-size: 13px;
    gap: 8px;
    padding-inline: 12px;
  }

  .cv-about-office-grid {
    grid-template-columns: 1fr;
  }

  .cv-about-careers-copy {
    padding-bottom: 20px;
  }

  .cv-job-card {
    padding: 48px 32px;
  }

  .cv-about-partners {
    padding: 70px 4%;
  }

  .cv-about-partners-copy h2 {
    padding-bottom: 0;
  }

  .cv-logo-grid {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .cv-logo-cell {
    min-height: 120px;
    border-right: 0;
    border-bottom: 1px solid var(--cv-border-soft);
  }

  .cv-logo-cell:last-child {
    border-bottom: 0;
  }

  .cv-logo-cell img {
    max-height: 72px;
  }

  .cv-logo-cell img.cv-logo-upb {
    max-height: 80px;
  }

  .cv-btn {
    padding: 16px 48px;
  }

  .cv-btn--apply {
    padding: 16px 32px;
  }
}

/* ── Scroll-linked card rise (desktop + tablet) ── */
@supports (animation-timeline: view()) {
  .cv-about-page .cv-pillar-card,
  .cv-about-page .cv-job-card {
    animation: cv-about-rise linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 36%;
  }

  @keyframes cv-about-rise {
    from { opacity: 0.35; transform: translate3d(0, 36px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .cv-about-apple-head > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .cv-about-office-figure,
  .cv-about-office-figure img,
  .cv-pillar-card,
  .cv-job-card {
    animation: none !important;
  }
}

/* ── Windows High Contrast / forced colours ──
   The team names are drawn with -webkit-text-stroke over a transparent fill and
   the stat cards rely on translucent backgrounds; both vanish when the OS
   replaces the palette. Hand those back a real colour. */
@media (forced-colors: active) {
  .cv-about-page .cv-team-info h3,
  .cv-about-page .cv-person-card h3 {
    color: CanvasText;
    -webkit-text-stroke: 0;
  }

  .cv-about-page .cv-pillar-card,
  .cv-about-page .cv-job-card,
  .cv-about-page .cv-about-hero {
    border: 1px solid CanvasText;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .cv-about-page .cv-about-hero-overlay {
    display: none;
  }

  :where(a, button, [tabindex]):focus-visible {
    outline: 3px solid Highlight;
  }
}