/* Codex 54: the approved Codex 53 visual language on small screens.
   Homepage only; desktop (>1100px), content, assets and links are unchanged. */
@media (max-width: 1100px) {
  main {
    --c54-section-bottom: clamp(76px, 8vw, 112px);
    --c54-section-top: clamp(38px, 4vw, 56px);
    --c54-block-bottom: clamp(64px, 7vw, 104px);
    --c54-block-top: clamp(32px, 3.5vw, 52px);
  }
  main > section[class] {
    background: linear-gradient(90deg, rgba(197,237,248,.97) 0%, rgba(248,253,254,.985) 34%, #fff 50%, rgba(248,253,254,.985) 66%, rgba(197,237,248,.97) 100%);
  }
  main > section[class] :is(h1, h2, h3, h4),
  main .c31-hub-copy strong,
  main .c31-application-copy strong,
  main .c31-project-feature strong,
  main .c31-project-list strong,
  main .c31-technique-links a > span,
  main .c31-faq summary,
  main .c31-quote aside > strong,
  main .c26-first-quote > strong { font-family: Cambria, Georgia, serif; }

  /* Preserve the hero and orientation spacing; carry over modification 6. */
  .c31-section:not(.c31-orient):not(.c31-systems) { padding-top: var(--c54-section-top); }
  .c31-systems { padding-top: clamp(22.8px, 2.4vw, 33.6px); padding-bottom: calc(var(--c54-section-bottom) / 2); }
  .c26-section { padding-top: var(--c54-block-top); }
  .c31-quote { padding-top: clamp(36px, 4vw, 55px); }
  /* Modification 7: remove one third once, from each total gap measured after
     modification 6. The technique photo group has an existing 8px bottom margin. */
  .c31-applications { padding-bottom: calc(var(--c54-section-bottom) - (var(--c54-section-bottom) + var(--c54-section-top)) / 3); }
  .c31-projects { padding-bottom: calc(var(--c54-section-bottom) - (var(--c54-section-bottom) + var(--c54-block-top)) / 3); }
  .c26-service { padding-bottom: calc(var(--c54-block-bottom) - (var(--c54-block-bottom) + var(--c54-block-top)) / 3); }
  .c31-technique { padding-bottom: calc(var(--c54-section-bottom) - (var(--c54-section-bottom) + var(--c54-section-top) + 8px) / 3); }

  .c31-heading-centered,
  .c26-heading-centered,
  .c31-applications .c31-heading,
  .c31-area .c31-heading,
  .c31-faq .c31-heading { text-align: center; }
  .c31-heading-centered > p:last-child,
  .c26-heading-centered > p:last-child,
  .c31-applications .c31-heading > p:last-child,
  .c31-faq .c31-heading > p:last-child { margin-inline: auto; }

  /* Light section backgrounds require the same dark foregrounds as desktop.
     Deliberately retain the approved overlays on application/project photos. */
  .c31-applications, .c31-technique, .c31-quote, .c26-workshop { color: #11191d; }
  .c31-applications .c31-application { color: #fff; }
  .c31-applications .c31-heading-light h2, .c26-workshop h2 { color: #11191d; }
  .c31-applications .c31-heading-light > p:last-child,
  .c31-technique-copy > p:not(.c31-eyebrow),
  .c26-workshop-copy > p:not(.c26-eyebrow),
  .c31-quote .c31-quote-grid > div > p:not(.c31-eyebrow) { color: #53636b; }
  .c26-workshop .c26-eyebrow-light { color: #087ba3; }
  .c31-application-more { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; border-color: #cbd9de; }
  .c31-application-more::after { content: ""; flex-basis: 100%; order: 1; }
  .c31-application-more > span { color: #53636b; }
  .c31-application-more > a { color: #087ba3; }
  .c31-application-more .c31-application-all { order: 2; margin-inline: 0; color: #11191d; border-color: #acbbc2; }
  .c31-technique-links, .c31-technique-links a { border-color: #cbd9de; }
  .c31-technique-links a { color: #223037; }
  .c31-technique-links a:hover { background: #e7f4f8; }
  .c31-technique-links a b { color: #087ba3; }
  .c31-quote .c31-button-ghost { color: #223037; border-color: #acbbc2; }
  .c31-quote aside { color: #fff; }
  .c31-technique .c31-technique-grid .section-photos .section-photo { background: rgba(255,255,255,.75); border-color: #d7e1e5; border-top-color: #42c4e9; }
  .c31-technique .c31-technique-grid .section-photos .section-photo figcaption,
  .c31-technique .c31-technique-grid .section-photos .section-photo[data-photo-v7] figcaption span { color: #223037; }
  .c31-technique .c31-technique-grid .section-photos .section-photo[data-photo-v7] figcaption p { color: #53636b !important; }

  .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-card { grid-template-rows: auto 1fr; }
  .c31-system-image { aspect-ratio: 4 / 3; }
  .c31-system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c31-application-grid { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: none; grid-auto-rows: clamp(300px, 60vw, 520px); }
  .c31-application-grid > .c31-application { grid-column: auto; grid-row: auto; height: auto; min-height: 0; }
  .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%; }
  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; }

  /* Equal safe outer margins across both generations of homepage components. */
  main .c26-container { width: calc(100% - 56px); max-width: none; padding-inline: 0; }
  .c26-steps { padding-left: 0; }
  .c26-steps::before { display: none; }
  .c26-step { margin-left: 0; }
  .c26-step-top b { margin-left: 0; }
  .c31-quote aside { margin-inline: auto; }
  .c44-quote-heading, .c44-quote-heading h2 { text-align: center; }
  .c31-quote .c31-actions { justify-content: center; }
  .c31-button, .c26-button { max-width: 100%; line-height: 1.35; padding-block: 12px; }
}
@media (max-width: 900px) {
  main { --c54-section-bottom: 72px; --c54-section-top: 36px; }
  main .c26-container { width: calc(100% - 40px); }
  .c31-systems { padding-top: 21.6px; }
}
@media (max-width: 820px) {
  main { --c54-block-bottom: 64px; --c54-block-top: 32px; }
  .c31-trust li { padding-inline: 18px; }
}
@media (max-width: 640px) {
  main { --c54-section-bottom: 58px; --c54-section-top: 29px; }
  main .c26-container { width: calc(100% - 28px); }
  .c31-systems { padding-top: 17.4px; }
  .c31-system-grid { grid-template-columns: minmax(0, 1fr); }
  /* Keep natural colours visible, without placing a large text panel on the subject. */
  .c31-hub { display: grid; min-height: 0; background: #fff; }
  .c31-hub img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  .c31-hub-copy { position: static; border-radius: 0; padding: 20px; }
  .c31-hub-number { top: 16px; left: 16px; }
  .c31-application-more::after { display: none; }
  .c31-application-more > a { align-self: center; }
  .c52-hero h1 { font-size: clamp(1.125rem, 4.8vw, 1.9rem); }
  .c31-quote aside { width: 100%; }
}