/* Keep v4's layout, with a unit below the clarified asset-utilisation target. */
.proof-metrics .proof-metric__value--target {
  flex-direction: column;
  align-items: center;
}
.proof-metrics .proof-metric__value--target small {
  font-size: clamp(12px, 1.2vw, 16px);
  letter-spacing: .02em;
  line-height: 1.2;
}

/* Screenshot review: preserve desktop and tune tablet/mobile independently. */
.mobile-line-break { display: none; }

@media (min-width: 761px) and (max-width: 1100px) {
  .approach-section .offer-grid {
    width: 95vw;
    margin-inline: calc((100% - 95vw) / 2);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    gap: 0 14px;
  }
  .offer-grid > .offer-card {
    min-width: 0;
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 0;
    padding: 28px 18px;
  }
  .offer-card h3 { margin-top: 24px; font-size: clamp(23px, 2.8vw, 30px); }
  .offer-card .offer-card__promise { margin-bottom: 24px; }
  .offer-card ul { display: contents; }
  .offer-card li { padding-block: 12px; font-size: 14px; }
  .offer-card li:first-child { border-top: 1px solid rgba(75,179,195,.25); }

  .principle-quote { width: calc(100% - 40px); padding-block: 36px; }
  .principle-quote > .shell {
    width: 100%;
    padding-inline: 28px;
    grid-template-columns: minmax(0, .3fr) minmax(0, .7fr);
    gap: 32px;
    align-items: start;
  }
  .principle-portrait { width: 100%; aspect-ratio: .72; align-self: start; }
  .principle-quote blockquote p { font-size: clamp(30px, 4.3vw, 44px); }

  .founder-layout--content {
    width: 95vw;
    margin-inline: calc((100% - 95vw) / 2);
    grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
    gap: 32px;
    padding: 24px;
    align-items: start;
  }
  .founder-layout--content .founder-portrait--photo {
    aspect-ratio: 4 / 5;
    align-self: start;
  }
  .founder-portrait--photo img {
    position: static;
    height: auto;
    object-fit: contain;
    transform: none;
  }

  /* Tablet proof cards are half their former 280px height. */
  .case-study-card summary { min-height: 140px; padding: 16px 20px; }
  .case-study-card__identity { flex: none; height: 72px; grid-template-rows: 1fr; }
  .case-study-card__identity img { height: 70px; }
  .case-study-card__prompt { height: 34px; padding-right: 42px; font-size: 11px; }
  .case-study-card summary::after { width: 32px; height: 32px; right: 20px; bottom: 16px; }
}

@media (max-width: 760px) {
  :root { --mobile-cta-width: min(280px, calc(100vw - 48px)); }
  .site-nav__inner { width: calc(100% - 36px); grid-template-columns: 1fr auto; }
  .site-nav__brand { width: clamp(130px, 34vw, 170px); }
  .site-nav__links { grid-column: 2; grid-template-columns: auto; }
  .site-nav__links a:not(.site-nav__contact) { display: none; }
  .site-nav__links .site-nav__contact { min-height: 44px; padding-inline: 8px; }

  .particle-hero-cta,
  .final-cta .button {
    width: var(--mobile-cta-width);
    min-width: 0;
    max-width: 100%;
    min-height: 50px;
    padding: 12px 18px;
    font-size: clamp(11px, 3.1vw, 13px);
    white-space: nowrap;
  }
  .pressure-outcomes { width: 70vw; margin-inline: auto; }

  .page-sequence > .approach-section {
    width: calc(100% - 20px);
    margin-inline: 10px;
    padding-bottom: 36px;
  }
  .operational-areas .section-intro h2 { overflow-wrap: normal; }

  .principle-quote > .shell {
    width: 100%;
    margin-inline: 0;
    padding-inline: 20px;
  }
  .principle-quote__copy { min-width: 0; container-type: inline-size; }
  .principle-quote blockquote p {
    font-size: clamp(24px, 7.5vw, 38px);
    font-size: 9cqi;
    text-wrap: initial;
  }
  .principle-quote blockquote p > span { white-space: nowrap; }
  .mobile-line-break { display: block; }

  /* Collapsed proof cards are 40% of their former 280px height. */
  .case-study-card summary { min-height: 112px; padding: 12px 18px; }
  .case-study-card__identity { flex: none; height: 58px; grid-template-rows: 1fr; }
  .case-study-card__identity img { width: min(150px, 70%); height: 52px; }
  .case-study-card__prompt { height: 28px; padding-right: 40px; font-size: 11px; }
  .case-study-card summary::after { width: 28px; height: 28px; right: 18px; bottom: 12px; font-size: 17px; }

  .final-cta h2 { font-size: clamp(44px, 12.5vw, 62px); }
  .final-cta p:not(.eyebrow) { font-size: 19px; }
  .final-cta .button { font-size: 14px; }

  .site-footer { padding-block: 24px; }
  .site-footer__inner { flex-direction: row; align-items: center; gap: 16px; }
  .site-footer .hero-brand--footer { width: min(181px, 48vw); margin: 0; }
  .site-footer__inner > a:last-child { font-size: 12px; white-space: nowrap; }
}