:root {
  --fab-display-h1: clamp(3.45rem, 5.55vw, 6.25rem);
  --fab-display-h2: clamp(2.75rem, 4.25vw, 4.7rem);
  --fab-display-feature: clamp(2.25rem, 3.2vw, 3.5rem);
  --fab-card-title: clamp(1.35rem, 1.65vw, 1.62rem);
  --fab-body: 1rem;
  --fab-body-large: 1.0625rem;
  --fab-heading-leading: .98;
  --fab-copy-leading: 1.66;
  --fab-intro-gap: clamp(44px, 4.2vw, 64px);
  --fab-section-space: clamp(92px, 7.5vw, 112px);
}

body {
  font-size: var(--fab-body);
  line-height: var(--fab-copy-leading);
}

main .eyebrow {
  font-size: .75rem;
  line-height: 1.4;
  letter-spacing: .12em;
}

/* Shared display hierarchy. These selectors target page and section headings,
   while leaving compact utility headings and navigation untouched. */
main .hero h1 {
  max-width: 11.5em;
  font-size: var(--fab-display-h1);
  line-height: .94;
  text-wrap: balance;
}

main .hero:not(:has(.hero-track)) h1 {
  font-size: clamp(3.35rem, 5vw, 5.7rem);
}

main section:not(.hero) h2 {
  max-width: 13.5em;
  font-size: var(--fab-display-h2) !important;
  line-height: var(--fab-heading-leading) !important;
  text-wrap: balance;
}

main :is(.section-heading, .section-head, .control-head, .brief-head, .fit-head) h2,
main :is(.position, .standards, .engineering, .specify, .response, .summary) h2 {
  max-width: 11.75em;
  font-size: var(--fab-display-h2);
  line-height: var(--fab-heading-leading);
  text-wrap: balance;
}

main :is(.proof-copy, .app-related-copy, .case-copy) h2,
main .case-copy h3 {
  max-width: 12em;
  font-size: var(--fab-display-feature) !important;
  line-height: 1 !important;
  text-wrap: balance;
}

main :is(.family-card, .build-card, .application-card, .app-metalwork-card, .relation, .route-card, .control-card, .client, .brief-card, .fit-card, .finish-card, .card) h3,
main .family-card h2,
main :is(.family-copy, .evidence-card, .decision-card, .scope-card, .proof-card) h3,
main .evidence-label strong {
  font-size: var(--fab-card-title) !important;
  line-height: 1.12 !important;
}

/* Introductory text grids: generous heading column, compact copy column,
   and a deliberate shared top edge. */
main :is(.section-heading, .section-head, .control-head, .brief-head, .fit-head) {
  grid-template-columns: minmax(0, 13fr) minmax(280px, 7fr);
  gap: var(--fab-intro-gap);
  align-items: start;
}

main :is(.hero-head, .contact-grid, .final-grid, .cta-grid) {
  align-items: start;
}

main .hero-head {
  grid-template-columns: minmax(0, 13fr) minmax(280px, 7fr);
  gap: var(--fab-intro-gap);
}

main .split {
  grid-template-columns: minmax(0, 7fr) minmax(340px, 5fr);
  gap: var(--fab-intro-gap);
  align-items: start;
}

main .hero-grid:has(> .hero-copy):has(> .hero-media) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 4.5vw, 64px);
  align-items: start;
}

main .position-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 5vw, 72px);
}

main .summary-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 5vw, 72px);
  align-items: start;
}

/* Project case studies use .section-head for an index + editorial content,
   not the heading + supporting-copy pattern used elsewhere. */
main .section-head:is(:has(> .index), :has(> .section-index)) {
  grid-template-columns: minmax(150px, 2fr) minmax(0, 8fr);
  align-items: start;
}

main .section-head:is(:has(> .index), :has(> .section-index)) h2 {
  max-width: 13.5em;
}

main :is(.position-grid, .standards-grid, .engineering-grid, .specify-grid, .response-grid, .about-grid, .enquiry-grid) {
  align-items: start;
}

/* The long Selected Work headline needs a wider, quieter measure. */
main .work .section-heading {
  grid-template-columns: minmax(0, 13fr) minmax(280px, 7fr);
  gap: clamp(40px, 3.5vw, 52px);
}

main .work .section-heading h2 {
  max-width: 14em;
  font-size: clamp(2.7rem, 4vw, 4.35rem);
  line-height: .99;
}

main .evidence .section-heading h2 {
  font-size: clamp(2.75rem, 4.35vw, 4.7rem) !important;
}

/* Body copy remains readable on ordinary business laptops. Compact labels,
   metadata and eyebrow text retain their distinct smaller tier. */
main :is(.hero-copy, .hero-lead, .section-heading > p, .section-head > p, .control-head > p, .brief-head > p, .fit-head > p) {
  font-size: var(--fab-body-large);
  line-height: 1.68;
}

main :is(.family-card, .build-card, .application-card, .app-metalwork-card, .relation, .route-card, .control-card, .client, .brief-card, .fit-card, .finish-card, .proof-copy, .case-copy, .card) p,
main :is(.step, .scope, .question, .principle, .decision, .standard) :is(p, span),
main :is(.entity, .truth, .sample-note, .optional, .contact-aside, .final-aside, .aside) {
  font-size: max(.9rem, 14.4px);
  line-height: 1.58;
}

main .path .step p,
main .engineering .question span,
main .specify .step p,
main .control .control-card p,
main .fit .fit-card p {
  color: rgba(255, 255, 255, .7);
}

main .evidence-label p,
.application-detail main .app-metalwork-card p,
main :is(.evidence-card, .decision-card, .scope-card, .level) p {
  font-size: .9rem;
  line-height: 1.58;
}

main .contact-panel .note {
  font-size: .875rem;
  line-height: 1.55;
}

main :is(.section-heading, .section-head, .control-head, .brief-head, .fit-head) {
  margin-bottom: clamp(38px, 3.6vw, 50px);
}

main :is(.intro, .families, .engineering, .relations, .project, .application-list, .route, .app-metalwork, .app-related, .path, .proof, .standards, .position, .control, .clients, .brief, .response, .fit, .final, .flagships, .references, .catalogue, .specify, .contact) {
  scroll-margin-top: 80px;
}

@media (max-width: 1280px) {
  main .work .section-heading {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  main .work .section-heading h2 {
    max-width: 13em;
  }

  main .work .section-heading > p {
    max-width: 44rem;
  }
}

@media (max-width: 1180px) {
  main :is(.hero-head, .section-heading, .section-head, .control-head, .brief-head, .fit-head, .contact-grid, .final-grid, .cta-grid, .split, .position-grid, .summary-grid, .standards-grid, .engineering-grid, .specify-grid, .response-grid) {
    grid-template-columns: 1fr;
    gap: clamp(22px, 3vw, 36px);
  }

  main :is(.hero-head, .section-heading, .section-head, .control-head, .brief-head, .fit-head) :is(h1, h2) {
    max-width: 12em;
  }

  main :is(.hero-head, .section-heading, .section-head, .control-head, .brief-head, .fit-head) > p {
    max-width: 44rem;
  }

  main :is(.case, .case.secondary) {
    grid-template-columns: 1fr;
  }

  main .hero-grid:has(> .hero-copy):has(> .hero-media),
  main .section-head:is(:has(> .index), :has(> .section-index)) {
    grid-template-columns: 1fr;
  }

  main .case.secondary .case-media {
    order: 0;
  }
}

@media (max-width: 820px) {
  :root {
    --fab-display-h1: clamp(2.9rem, 8.7vw, 4.2rem);
    --fab-display-h2: clamp(2.45rem, 7.8vw, 3.55rem);
    --fab-display-feature: clamp(2.15rem, 6.8vw, 3rem);
    --fab-card-title: clamp(1.32rem, 4vw, 1.55rem);
  }

  main :is(.section-heading, .section-head, .control-head, .brief-head, .fit-head) {
    gap: 20px;
    margin-bottom: 38px;
  }

  main .hero:not(:has(.hero-track)) h1 {
    font-size: var(--fab-display-h1);
  }
}

@media (max-width: 620px) {
  :root {
    --fab-display-h1: clamp(2.65rem, 11vw, 3.35rem);
    --fab-display-h2: clamp(2.3rem, 9.5vw, 2.9rem);
    --fab-display-feature: clamp(2rem, 8.5vw, 2.65rem);
  }

  main .hero h1 {
    max-width: none;
    overflow-wrap: normal;
  }

  main .evidence .section-heading h2 {
    font-size: var(--fab-display-h2) !important;
  }

  main :is(.section-heading, .section-head, .control-head, .brief-head, .fit-head) {
    gap: 17px;
    margin-bottom: 32px;
  }

  main :is(.hero-copy, .hero-lead, .section-heading > p, .section-head > p, .control-head > p, .brief-head > p, .fit-head > p) {
    font-size: 1rem;
  }
}