/* Codex 53 — modification 7, homepage only. Desktop composition only.
   The hero itself is not widened again. No shared component is changed. */
@media (min-width: 1101px) {
  main {
    container-type: inline-size;
    --c53-visual-width: min(calc(50cqw + 520px), calc(100cqw - 28px));
    --c53-bottom31: clamp(76px, 8vw, 112px);
    --c53-top31: clamp(38px, 4vw, 56px);
    --c53-bottom26: clamp(64px, 7vw, 104px);
    --c53-top26: clamp(32px, 3.5vw, 52px);
  }

  .c31-trust ul,
  .c31-hub-grid,
  .c31-system-grid,
  .c31-application-grid,
  .c31-project-layout,
  .c26-service-grid,
  .c26-steps,
  .c31-technique .c31-technique-grid .section-photos {
    width: var(--c53-visual-width);
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-inline: 0;
  }

  /* Natural photo colors; a local light caption panel preserves readability. */
  .c31-hub-shade { background: none; }
  .c31-hub-copy {
    background: rgba(255, 255, 255, .96);
    padding: 18px;
    border-radius: 10px;
    color: #17272e;
  }
  .c31-hub-copy small { color: #53636b; }
  .c31-hub-copy em { color: #087ba3; }
  .c31-hub-number { background: #fff; color: #17272e; }

  .c31-system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c31-system-card { grid-template-rows: auto 1fr; }
  .c31-system-image { aspect-ratio: 4 / 3; }
  .c31-systems { padding-bottom: calc(var(--c53-bottom31) / 2); }

  .c31-application-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: clamp(480px, 42cqw, 660px);
  }
  .c31-application-grid > .c31-application { grid-column: auto; grid-row: auto; }
  .c31-application:nth-child(1) img { object-position: 50% 68%; }
  .c31-application:nth-child(2) img { object-position: 50% 55%; }
  .c31-application:nth-child(3) img { object-position: 50% 48%; }
  .c31-application:nth-child(4) img { object-position: 50% 50%; }

  /* Subtract one third of the measured total visible gap, once only.
     Constants are text line-box offsets in the unchanged baseline typography. */
  .c31-applications {
    padding-bottom: calc(var(--c53-bottom31) - (var(--c53-bottom31) + var(--c53-top31) + 9.65625px) / 3);
  }
  .c31-projects {
    padding-bottom: calc(var(--c53-bottom31) - (var(--c53-bottom31) + var(--c53-top26) + 15px) / 3);
  }
  .c26-service {
    padding-bottom: calc(var(--c53-bottom26) - (var(--c53-bottom26) + var(--c53-top26) - 2px) / 3);
  }
  .c31-technique {
    padding-bottom: calc(var(--c53-bottom31) - (var(--c53-bottom31) + var(--c53-top31) + 6px) / 3);
  }

  main .c31-project-list > a > span > strong {
    font: 800 .69rem Arial, sans-serif;
    color: #000;
    margin-top: 0;
  }
  .c31-project-list > a > span > small { display: block; margin-top: 7px; }

  .c26-first-quote { display: flex; flex-direction: column; gap: 16px; text-align: center; }
  .c26-first-quote > p { order: -1; }
  .c31-area > .c31-container > .c31-heading,
  .c31-faq .c31-heading { text-align: center; }
  .c31-faq .c31-heading > p { margin-inline: auto; }
}