/* Shared reflow rules, loaded after both colour themes. */
img, video, svg { max-inline-size: 100%; }
main, main section, header > *, footer > * { min-inline-size: 0; }
.hero-grid > *, .intro > *, .philosophy > *, .detail-grid > *,
.contact-grid > *, .form-grid > *, .faq-layout > *, .workflow-columns > *,
.workflow-notes > *, .readiness-layout > *, .resource-grid > *,
.article-grid > *, .process-grid > *, .stats > *, .footer-directory > * {
  min-inline-size: 0;
}
h1, h2, h3, p, label, summary, .btn, .footer-directory a, .footer-top a {
  overflow-wrap: anywhere;
}
.btn { max-inline-size: 100%; white-space: normal; }
input, select, textarea { min-inline-size: 0; max-inline-size: 100%; }
.cta { grid-template-columns: minmax(0, 1fr) auto; }
.cta > * { min-inline-size: 0; }
.footer-top, .footer-links { flex-wrap: wrap; }

/* The page is capped at 1900px. Size this wordmark to its own content box,
   not to the uncapped viewport (which clipped it on 2560/3840px displays). */
footer { container-type: inline-size; }
.footer-word {
  display: flex;
  align-items: center;
  gap: .04em;
  inline-size: 100%;
  font-size: min(14vw, 18rem); /* fallback for browsers without container units */
  font-size: clamp(1rem, 17cqi, 22rem);
  line-height: 1.12;
  letter-spacing: -.06em;
  white-space: nowrap;
  margin-block: 0;
  padding-block: .08em;
}
.footer-word > span { flex: none; font-size: .85em; line-height: 1; }

/* Switch navigation before its labels can collide with the brand/contact. */
@media (max-width: 1000px) {
  header { height: auto; min-height: 84px; gap: 16px; padding-block: 15px; }
  header .brand, header .contact-link, header .menu { flex-shrink: 0; }
  header .contact-link { margin-inline-start: auto; margin-inline-end: 0; }
  .menu { display: block; border: 0; background: transparent; font-size: 23px; padding: 6px; }
  header nav {
    display: none; position: absolute; inset: 100% 0 auto;
    inline-size: 100%; max-block-size: calc(100dvh - 84px);
    overflow-y: auto; background: var(--paper); padding: 24px 6%;
    border-bottom: 1px solid var(--line); flex-direction: column;
    align-items: stretch; gap: 24px;
  }
  header nav.open { display: flex; }
  header nav a { align-self: flex-start; }
}
@media (max-width: 760px) {
  .hero-grid, .philosophy, .detail-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-aside { padding-top: 12px; }
  .cta { grid-template-columns: minmax(0, 1fr); }
  .cta .btn { justify-self: start; }
  .section-top { flex-wrap: wrap; gap: 24px; }
  .page-head h1 { font-size: clamp(2rem, 8.5vw, 3.3rem); letter-spacing: -.055em; }
  .headline-line { overflow: visible; }
  .headline-line > span { white-space: normal; }
}
@media (max-width: 420px) {
  header { gap: 10px; }
  header .brand { width: 110px; font-size: 28px; }
  header .contact-link { gap: 8px; font-size: 11px; }
  .footer-directory { column-gap: 20px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { border-bottom: 1px solid var(--line); padding-bottom: 18px; }
  .process-grid { grid-template-columns: minmax(0, 1fr); }
  .workflow-before, .workflow-after, .readiness-result,
  .measure-panel, .effort-calculator, .contact-form { padding: 22px; }
  .staircase { height: auto; min-height: 210px; }
  .stair { min-width: 0; }
  .stair strong { overflow-wrap: anywhere; }
  .approach-motion, .integration-motion { padding: 20px; }
  .data-lane { grid-template-columns: minmax(0, 1fr) minmax(35px, .6fr); }
  .system-art .node { font-size: 9px; padding: 10px; }
}