/* ─── RESET & TOKENS ─────────────────────────────── */
    
    

    html { scroll-behavior: smooth; }
    body {
      font-family: var(--sans);
      font-weight: 300;
      color: var(--c-ink-strong);
      background: var(--c-ground-deep);
      -webkit-font-smoothing: antialiased;
    }

    /* ─── CANVAS BACKGROUND (65% opacity, non-interactive) ─ */
    .about-bg-canvas-wrap {
      position: fixed;
      inset: 0;
      z-index: 0;
      opacity: 0.65;
      pointer-events: none;
    }
    .about-bg-canvas-wrap canvas {
      display: block;
      width: 100%;
      height: 100%;
      vertical-align: top;
    }
    .about-page-content {
      position: relative;
      z-index: 1;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; width: 100%; }
    ul { list-style: none; }

    /* ─── BREADCRUMB ─────────────────────────────────── */
    .breadcrumb {
      background: transparent;
      border-bottom: 1px solid rgba(var(--c-ink-rgb), 0.1);
      padding: 16px var(--grid-inset);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px 20px;
      font-size: 0.8rem;
      color: var(--c-ink-40);
      letter-spacing: 0.02em;
    }
    .breadcrumb-back {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--c-ink-strong);
      font-size: 0.8125rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      transition: color 0.2s, gap 0.2s;
    }
    .breadcrumb-back:hover { color: var(--c-ink-strong); gap: 10px; }
    .breadcrumb-trail {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .breadcrumb-trail a { color: var(--c-ink-40); transition: color 0.2s; }
    .breadcrumb-trail a:hover { color: var(--c-accent); }
    .breadcrumb-trail > span:not(.breadcrumb-current) { color: var(--c-ink-20); }
    .breadcrumb-current { color: var(--c-ink-55); }

    /* ─── SECTION SHELL ──────────────────────────────── */
    section { padding: 80px var(--grid-inset); }
    section + section { padding-top: 0; }

    .section-label {
      font-size: 1.0rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--c-ink-strong);
      margin-bottom: 12px;
      display: flex; align-items: center; gap: 8px;
    }
    /* Client request 2026-07-30: the leading rule comes off the section labels.
       There had been two of them — this one plus a hand-written inline <span> in
       the About markup that duplicated it. The span is gone; this is hidden
       rather than deleted so it is one line to restore. */
    .section-label::before {
      display: none;
      content: '';
      width: 20px; height: 1px;
      background: var(--c-accent);
    }
    h2.section-title {
      font-family: var(--serif);
      font-size: clamp(1.75rem, 3vw, 2.5rem);
      font-weight: 400;
      line-height: 1.2;
      color: var(--c-ink-strong);
      max-width: 1000px;
    }

    /* ─── MISSION SPLIT ──────────────────────────────── */
    .mission-section {
      background: transparent;
      border-bottom: 1px solid rgba(var(--c-ink-rgb), 0.1);
    }
    .mission-grid {
      display: block;
      margin-top: 56px;
    }
    .mission-image-wrap {
      position: relative;
      aspect-ratio: 1100/617;
      background: var(--c-ground-solid);
      margin-bottom: 48px;
    }
    .mission-image-wrap img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      display: block;
      filter: grayscale(20%);
    }
    .mission-paragraphs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 48px;
    }
    .mission-text p {
      font-size: 1.0625rem;
      line-height: 1.6;
      color: rgba(var(--c-ink-rgb), 0.82);
    }
    /* ─── VALUES STRIP ───────────────────────────────── */
    .values-section {
      background: transparent;
      padding: 72px var(--grid-inset);
    }
    .values-section .section-label { color: var(--c-ink-strong); }
    .values-section .section-label::before { background: var(--c-em); }
    .values-section h2.section-title { color: var(--c-ink-strong); max-width: 1000px; }

    /* Radial motif above the six principle cards below — the same six
       titles as the grid below (title only, no body text — the description
       lives in the grid), one centered with five spaced 72° apart in a
       circle around it.

       On request, 2026-08-30: the diagram is circular (not rounded-square)
       and radial at EVERY width, not just >=1280px. A vertical-stack
       fallback below 1280px used to be the safe layout because the site's
       own --grid-max (1320px) caps the content column and a naive
       max-width:100% shrink doesn't rescale a wrapper's fixed-px radius —
       see git history for that measurement. The fix here is different:
       .values-radial-outer is sized fluidly (width:100%, capped at
       --diagram-natural, aspect-ratio 1/1) and .values-radial itself is
       always rendered at its natural (unscaled) pixel size, then visually
       shrunk with `transform: scale()` — about.js measures the outer
       box and sets --diagram-scale to outerWidth/natural (capped at 1).
       Scaling via transform rather than via width keeps every card's text
       wrapped exactly as authored at natural size, so a narrower viewport
       never makes a title reflow to more lines and blow the circle's
       inscribed-text budget; it only ever gets visually smaller as a whole,
       uniformly, with zero risk of new overflow at any width.

       Titles only (no paragraph) need far less room than the old
       body-copy version, so both the card diameters and --radial-r (the
       gap between cards) are much tighter than when this held full text. */
    .values-radial-outer {
      --diagram-natural: 680px;
      position: relative;
      width: 100%;
      max-width: var(--diagram-natural);
      aspect-ratio: 1 / 1;
      margin: 40px auto 0;
      overflow: hidden;
    }
    .values-radial {
      --radial-r: 240px;
      position: absolute;
      top: 0;
      left: 0;
      width: var(--diagram-natural);
      height: var(--diagram-natural);
      transform: scale(var(--diagram-scale, 1));
      transform-origin: top left;
    }
    .values-radial-card {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150px;
      height: 150px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #888;
      background: #2e2e2e;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }
    /* The inner text column is deliberately narrower than the circle: a
       centered rectangle only stays clear of the round edge while
       (half-width)^2 + (half-height)^2 <= (circle radius)^2. 105px (outer)
       and 150px (center) were sized against each card's actual title,
       longest first ("Non-invasive by design"), with margin. */
    .values-radial-card-inner {
      width: 105px;
      text-align: center;
    }
    .values-radial-center {
      width: 220px;
      height: 220px;
      border-color: var(--c-accent);
    }
    .values-radial-center .values-radial-card-inner {
      width: 150px;
    }
    /* Spokes from the center card to each outer card. Each line is drawn
       the full --radial-r length from the shared center point, so it runs
       under both circles — the opaque card backgrounds cover everything
       but the visible gap between the two edges. Angles match the
       trig-offset positions of .values-radial-1..5 below (0/54/126/198/-18°,
       i.e. atan2 of each card's top/left offset), and the lines are placed
       before the cards in source order so the (unpositioned) cards paint
       over them without needing z-index. */
    .values-radial-line {
      position: absolute;
      top: 50%;
      left: 50%;
      width: var(--radial-r);
      height: 1px;
      background: var(--c-accent);
      transform-origin: 0 50%;
    }
    .values-radial-line-1 { transform: rotate(-90deg); }
    .values-radial-line-2 { transform: rotate(54deg); }
    .values-radial-line-3 { transform: rotate(126deg); }
    .values-radial-line-4 { transform: rotate(198deg); }
    .values-radial-line-5 { transform: rotate(-18deg); }
    .values-radial-card h3 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 1.25rem;
      color: var(--c-ink-strong);
      margin: 0;
    }
    .values-radial-card:not(.values-radial-center) h3 {
      font-size: 0.9375rem;
    }
    .values-radial-1 { top: calc(50% - var(--radial-r)); left: 50%; }
    .values-radial-2 { top: calc(50% + var(--radial-r) * 0.809); left: calc(50% + var(--radial-r) * 0.5878); }
    .values-radial-3 { top: calc(50% + var(--radial-r) * 0.809); left: calc(50% - var(--radial-r) * 0.5878); }
    .values-radial-4 { top: calc(50% - var(--radial-r) * 0.309); left: calc(50% - var(--radial-r) * 0.9511); }
    .values-radial-5 { top: calc(50% - var(--radial-r) * 0.309); left: calc(50% + var(--radial-r) * 0.9511); }

    .values-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: rgba(var(--c-ink-rgb), 0.08);
      margin-top: 56px;
      border: 1px solid rgba(var(--c-ink-rgb), 0.08);
    }
    .value-card {
      background: var(--c-ground-solid);
      padding: 40px 36px;
      transition: background 0.3s;
    }
    /* Was `background: #1c1a14` — a hardcoded near-black under text that reads
       var(--c-ink-strong). On the light surface that painted near-black ink on a
       near-black card and the whole tile went unreadable on hover. Compositing an
       ink tint over the ground keeps the "lift" in both surfaces: ink is dark on
       light and cream on dark, so the card always moves toward the text colour,
       never against it. Opaque because the grid gap behind it is a tinted line. */
    .value-card:hover {
      background: linear-gradient(rgba(var(--c-ink-rgb), 0.05) 0 100%), var(--c-ground-solid);
    }
    .value-number {
      font-family: var(--serif);
      font-size: 2.5rem;
      color: var(--c-ink-07);
      line-height: 1;
      margin-bottom: 20px;
    }
    .value-card h3 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 1.25rem;
      color: var(--c-ink-strong);
      margin-bottom: 12px;
    }
    .value-card p {
      font-size: 1rem;
      line-height: 1.6;
      color: rgba(var(--c-ink-rgb), 0.82);
    }
    .value-card-sub {
      font-size: 1rem;
      line-height: 1.65;
      color: rgba(var(--c-ink-rgb), 0.82);
      margin-top: 10px;
    }

    /* ─── TEAM SECTION ───────────────────────────────── */
    .team-section {
      background: transparent;
      border-top: 1px solid rgba(var(--c-ink-rgb), 0.1);
      padding-top: 72px;
    }
    /* ── Our people: one full-width header, copy beneath it ──
       Replaced a left-heading / right-column split on 2026-08-11 at the client's
       direction. Three things were wrong with it and they compounded: the copy
       was assigned the TITLE's grid row rather than the top one, so it began 60px
       lower with nothing occupying the gap; both columns were frozen at 596px and
       516px, so a wider viewport only pushed them further apart instead of giving
       either more room; and the left column held 60px of content against the
       right's 154px, which is the hole that opened under the heading.
       This is the same shape the client rejected on News, Resources and
       Publications — see the section-panel standard. The header now spans the
       full width and the copy sits beneath it, so nothing is stranded in a column
       that cannot grow. */
    .team-intro {
      padding-bottom: 56px;
      border-bottom: 1px solid rgba(var(--c-ink-rgb), 0.1);
      margin-bottom: 56px;
    }
    .team-intro .section-label {
      margin-bottom: 0;
    }
    .team-intro .section-title {
      margin: 0;
      max-width: 1000px;
    }
    .team-intro-right {
      margin-top: 20px;
    }
    .team-intro-right p {
      font-size: 1rem; line-height: 1.6; color: rgba(var(--c-ink-rgb), 0.82);
      margin: 0;
    }
    .team-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
    }
    .team-card { position: relative; }
    .team-photo {
      aspect-ratio: 3/4;
      background: var(--c-ground-solid);
      overflow: hidden;
      margin-bottom: 20px;
      position: relative;
    }
    .team-photo-inner {
      width: 100%; height: 100%;
      background: linear-gradient(160deg, #1e1a14 0%, #2a2218 100%);
      display: flex; align-items: center; justify-content: center;
    }
    .team-photo-inner svg { opacity: 0.3; }
    .team-photo::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(var(--c-field-rgb), 0.8) 0%, transparent 50%);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .team-card:hover .team-photo::after { opacity: 1; }
    .team-social {
      position: absolute; bottom: 16px; left: 16px; right: 16px;
      display: flex; gap: 8px;
      opacity: 0; transform: translateY(6px);
      transition: all 0.3s;
      z-index: 1;
    }
    .team-card:hover .team-social { opacity: 1; transform: translateY(0); }
    .team-social a {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--c-ink-strong);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.75rem;
      color: var(--c-ground-deep);
      transition: background 0.2s, color 0.2s;
    }
    .team-social a:hover { background: var(--c-accent); color: var(--c-ground-deep); }
    .team-name {
      font-family: var(--serif);
      font-size: 1.125rem;
      font-weight: 400;
      color: var(--c-ink-strong);
    }
    .team-role {
      font-size: 1rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--c-ink-strong);
      margin-top: 4px;
    }

    /* Leadership carousel */
    .team-carousel-shell {
      position: relative;
      margin-top: 8px;
      padding: 0 52px;
      box-sizing: border-box;
    }
    .team-carousel {
      display: flex;
      gap: 24px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 0 48px;
      padding: 8px 0 20px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: rgba(212,168,112,0.35) transparent;
    }
    .team-carousel:focus-visible {
      outline: 1px solid var(--c-accent);
      outline-offset: 4px;
    }
    @media (prefers-reduced-motion: no-preference) {
      .team-carousel { scroll-behavior: smooth; }
    }
    .team-carousel::-webkit-scrollbar { height: 6px; }
    .team-carousel::-webkit-scrollbar-thumb {
      background: rgba(212,168,112,0.35);
      border-radius: 3px;
    }
    .team-carousel-card {
      flex: 0 0 min(100%, 440px);
      scroll-snap-align: start;
      display: flex;
      flex-direction: row;
      align-items: stretch;
      gap: 20px;
      padding: 20px;
      /* Same pattern: a hardcoded dark card carrying token-driven name and role. */
      background: rgba(var(--c-field-rgb), 0.65);
      border: 1px solid rgba(var(--c-ink-rgb), 0.1);
      min-height: 168px;
      box-sizing: border-box;
    }
    .team-carousel-photo {
      width: 124px;
      flex-shrink: 0;
      align-self: stretch;
      min-height: 140px;
      background: var(--c-ground-solid);
      overflow: hidden;
    }
    .team-carousel-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }
    .team-carousel-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: left;
    }
    .team-carousel-name {
      font-family: var(--serif);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--c-ink-strong);
      line-height: 1.3;
      margin: 0 0 8px;
    }
    .team-carousel-role {
      font-size: 1rem;
      line-height: 1.45;
      color: rgba(var(--c-ink-rgb), 0.82);
      margin: 0;
      font-weight: 400;
      letter-spacing: 0.01em;
    }
    .team-carousel-linkedin {
      display: inline-flex;
      align-self: flex-start;
      align-items: center;
      justify-content: center;
      margin-top: 14px;
      color: #ff9330;
      text-decoration: none;
      filter:
        drop-shadow(0 0 6px rgba(255, 140, 55, 0.95))
        drop-shadow(0 0 14px rgba(255, 120, 40, 0.55))
        drop-shadow(0 0 22px rgba(224, 90, 20, 0.35));
      transition: color 0.2s ease, filter 0.2s ease, transform 0.2s ease;
    }
    .team-carousel-linkedin:hover {
      color: #ffc070;
      filter:
        drop-shadow(0 0 8px rgba(255, 170, 90, 1))
        drop-shadow(0 0 18px rgba(255, 140, 60, 0.65))
        drop-shadow(0 0 28px rgba(255, 100, 30, 0.45));
      transform: translateY(-1px);
    }
    @media (prefers-reduced-motion: reduce) {
      .team-carousel-linkedin:hover { transform: none; }
    }
    .team-carousel-linkedin:focus-visible {
      outline: 2px solid rgba(255, 160, 80, 0.9);
      outline-offset: 3px;
    }
    .team-carousel-linkedin-icon {
      display: block;
    }
    .team-carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border-radius: 2px;
      border: 1px solid rgba(var(--c-ink-rgb), 0.15);
      /* Hardcoded surface + token foreground in one rule: the arrow is token ink,
         so on the light surface a near-black button swallowed it whole.
         --c-field-rgb exists for this — 10,8,6 dark, 255,255,255 light. */
      background: rgba(var(--c-field-rgb), 0.92);
      color: rgba(var(--c-ink-rgb), 0.9);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      transition: border-color 0.2s, background 0.2s;
    }
    .team-carousel-btn:hover {
      border-color: var(--c-accent);
      background: linear-gradient(rgba(var(--c-ink-rgb), 0.06) 0 100%), rgba(var(--c-field-rgb), 0.98);
    }
    .team-carousel-btn:focus-visible {
      outline: 2px solid var(--c-accent);
      outline-offset: 2px;
    }
    .team-carousel-prev { left: -8px; }
    .team-carousel-next { right: -8px; }
    @media (max-width: 1024px) {
      .team-carousel-prev { left: 0; }
      .team-carousel-next { right: 0; }
    }
    @media (max-width: 640px) {
      .team-carousel-shell { padding: 0 44px; }
      .team-carousel-card {
        flex: 0 0 min(100%, 100%);
        flex-direction: column;
        align-items: stretch;
      }
      .team-carousel-photo {
        width: 100%;
        min-height: 220px;
        max-height: 280px;
      }
    }
    .team-subhead {
      font-family: var(--serif);
      font-size: clamp(1.5rem, 2.4vw, 2rem);
      font-weight: 400;
      line-height: 1.2;
      color: var(--c-ink-strong);
      text-align: left;
      margin: 72px 0 32px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(var(--c-ink-rgb), 0.1);
      /* The nav bar is fixed even on this flow page (body only reserves its height
         with padding-top); a plain #leadership jump would land the heading right
         under it without this. */
      scroll-margin-top: var(--snav-h, 98px);
    }
    .team-section > .team-subhead:first-of-type {
      margin-top: 0;
    }

    /* ─── STATS ──────────────────────────────────────── */
    .stats-section {
      background: transparent;
      border-top: 1px solid rgba(var(--c-ink-rgb), 0.1);
      border-bottom: 1px solid rgba(var(--c-ink-rgb), 0.1);
      padding: 72px var(--grid-inset);
    }
    .stats-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
    }
    .stat-item {
      padding: 0 40px;
      border-right: 1px solid rgba(var(--c-ink-rgb), 0.12);
      text-align: left;
    }
    .stat-item:first-child { padding-left: 0; }
    .stat-item:last-child { border-right: none; }
    .stat-number {
      font-family: var(--serif);
      font-size: clamp(2.5rem, 4vw, 3.5rem);
      color: var(--c-ink-strong);
      line-height: 1;
    }
    .stat-label {
      font-size: 0.8rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--c-ink-40);
      margin-top: 10px;
    }

    /* ─── FOOTER ─────────────────────────────────────── */
    footer {
      background: transparent;
      padding: 64px var(--grid-inset) 32px;
    }
    .footer-top {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 60px;
      padding-bottom: 48px;
      border-bottom: 1px solid rgba(var(--c-ink-rgb), 0.08);
    }
    .footer-brand {
      font-family: var(--serif);
      font-size: 1.5rem;
      color: var(--c-ink-strong);
      margin-bottom: 16px;
    }
    .footer-tagline {
      font-size: 0.875rem;
      line-height: 1.65;
      color: var(--c-ink-30);
      max-width: 280px;
    }
    .footer-col h5 {
      font-size: 0.7rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--c-ink-25);
      margin-bottom: 20px;
    }
    .footer-col ul li {
      margin-bottom: 12px;
    }
    .footer-col ul li a {
      font-size: 0.875rem;
      color: var(--c-ink-45);
      transition: color 0.2s;
    }
    .footer-col ul li a:hover { color: var(--c-accent); }
    .footer-bottom {
      padding-top: 24px;
      display: flex; justify-content: space-between; align-items: center;
    }
    .footer-copy {
      font-size: 0.8rem;
      color: var(--c-ink-18);
      letter-spacing: 0.02em;
    }
    .footer-up {
      width: 36px; height: 36px;
      border: 1px solid rgba(var(--c-ink-rgb), 0.12);
      border-radius: 2px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
    }
    .footer-up:hover { border-color: var(--c-accent); }
    .footer-up svg { stroke: rgba(var(--c-ink-rgb), 0.35); }

    /* ─── SCROLL ANIMATION INIT ──────────────────────── */
    .reveal {
      opacity: 1;
      transform: none;
      transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1);
    }
    html.reveal-animating .reveal:not(.visible) {
      opacity: 0;
      transform: translateY(28px);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    @media (prefers-reduced-motion: reduce) {
      html.reveal-animating .reveal:not(.visible) { opacity: 1; transform: none; }
      .reveal { transition: none; }
    }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }

    /* ─── RESPONSIVE ─────────────────────────────────── */
    @media (max-width: 1024px) {
      section { padding: 60px 40px; }
      .breadcrumb { padding: 14px 40px; }
      .stats-section, .values-section, footer { padding-left: 40px; padding-right: 40px; }
      .mission-paragraphs { gap: 0 32px; }
      .team-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-top { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .breadcrumb { flex-direction: column; align-items: flex-start; }
      .mission-paragraphs { grid-template-columns: 1fr; gap: 16px 0; }
      .values-grid { grid-template-columns: 1fr; gap: 1px; }
      /* Three stats: a 2-up strands one item on its own row, and 3-up starves
         "Publications" and "2024" of width at phone sizes. Stack them. */
      .stats-row { grid-template-columns: 1fr; gap: 28px; }
      .stat-item { border-right: none; padding: 0; }
      .footer-top { grid-template-columns: 1fr 1fr; }
    }
  

    /* Client request: remove all eyebrow labels site-wide (About uses .section-label). */
    /* section-labels ("Our Mission", "What drives us", "Our People") are real section headers — visible. */

/* ── Readability: body-copy measure ≈58ch ── */
/* Mission and values keep the 58ch reading measure. The team intro does not:
   at 58ch it ran to six lines, which the client called too many (2026-08-11).
   880px puts it on three. Full width would put it on two, but at 176 characters
   a line — too far for the eye to travel back on real prose, as opposed to the
   one-sentence ledes elsewhere on the site that were widened deliberately.
   Desktop only; below 900px it returns to the shared measure and wraps. */
.mission-text p, .value-card p, .team-intro-right p { max-width: 58ch; }
@media (min-width: 900px) {
  .team-intro-right p { max-width: 880px; }
}

    /* ── Light surface ───────────────────────────────────────────────────────
       The ambient canvas is drawn in the dark palette at 65% opacity across the
       whole viewport. On a light ground it reads as a grey veil over everything,
       which is what dropped this page's body copy to about 2.7:1. Pulled right
       back so it stays a texture rather than a wash.
       ──────────────────────────────────────────────────────────────────────── */