/* Responsive finishing layer for the compact pages.
   Loaded after the identity, compact and systems rules so the desktop study
   retains its intended desktop composition while intrinsic typography, tablet
   and narrow layouts get intentional states. */

@media (max-width: 60rem) {
  body.compact-page .hero {
    grid-template-columns: 1fr;
  }

  body.compact-page .hero__title span {
    white-space: normal;
  }

  body.compact-page .hero__panel--media {
    min-height: clamp(20rem, 56vw, 32rem);
  }

  body.compact-page .systems-hero .section__inner,
  body.compact-page .compact-systems .systems-home-layout,
  body.compact-page .grading-layout,
  body.compact-page .systems-proof-grid {
    grid-template-columns: 1fr;
  }

  body.compact-page .systems-hero h1 {
    max-width: 10ch;
    font-size: clamp(3.1rem, 10vw, 6rem);
  }

  body.compact-page .site-header__inner {
    grid-template-columns: 1fr auto auto;
  }

  body.compact-page .menu-toggle {
    display: inline-flex;
  }

  body.compact-page .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    max-height: calc(100svh - 5rem);
    overflow-y: auto;
    padding: 1rem;
    background: var(--offwhite);
    border-bottom: 1px solid var(--line);
    overscroll-behavior: contain;
  }

  body.compact-page .site-nav.is-open {
    display: block;
  }

  body.compact-page .site-nav__list {
    flex-direction: column;
    gap: 0.25rem;
  }

  body.compact-page .header-cta {
    display: none;
  }

  body.compact-page .systems-contact .section__inner {
    align-items: flex-start;
  }

  body.compact-page .systems-contact .section__header {
    margin: 0;
  }
}

/* At tablet widths each offer gets a readable editorial row: label and title
   on the left, the complete explanation on the right. */
@media (min-width: 48.0625rem) and (max-width: 68.75rem) {
  body.compact-page .systems-offers {
    grid-template-columns: 1fr;
  }

  body.compact-page .systems-offers article {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
  }

  body.compact-page .systems-offers article .eyebrow {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0.5rem;
  }

  body.compact-page .systems-offers article h3 {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
  }

  body.compact-page .systems-offers article > p:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 51.25rem) {
  body.compact-page .systems-columns {
    grid-template-columns: 1fr;
  }

  body.compact-page .systems-columns > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  body.compact-page .systems-columns > div:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 37.5rem) {
  body.compact-page {
    font-size: 1rem;
  }

  body.compact-page .section__inner,
  body.compact-page .site-header__inner {
    width: calc(100% - 2rem);
  }

  body.compact-page .site-header__inner {
    gap: 0.75rem;
  }

  body.compact-page .header-brand {
    gap: 0.75rem;
  }

  body.compact-page .site-header .logo img {
    width: 72px;
  }

  body.compact-page .hero__panel--copy {
    padding-block: 2.5rem 2.25rem;
  }

  body.compact-page .systems-hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  body.compact-page .systems-hero h1 {
    font-size: clamp(2.8rem, 13vw, 4.5rem);
  }

  body.compact-page .systems-hero .hero__actions,
  body.compact-page .hero__actions {
    gap: 0.5rem 0.75rem;
  }

  body.compact-page .grading-work {
    grid-template-columns: 1fr;
  }

  body.compact-page .grading-work figcaption {
    display: block;
  }

  body.compact-page .grading-work figcaption span {
    display: block;
    margin-top: 0.25rem;
  }

  body.compact-page .systems-proof-grid,
  body.compact-page .systems-proof-grid figure,
  body.compact-page .systems-proof-grid figure img {
    min-width: 0;
    max-width: 100%;
  }
}

@supports (font-size: 1cqi) {
  @media (min-width: 37.5625rem) {
    body.compact-page .hero__panel--copy,
    body.compact-page .systems-hero .section__inner > div:first-child {
      container-type: inline-size;
    }

    body.compact-page .hero__title {
      font-size: clamp(3rem, 11cqi, 6.6rem);
    }

    body.compact-page .systems-hero h1 {
      font-size: clamp(3.4rem, 20cqi, 8.6rem);
    }
  }
}

@media (min-width: 48.0625rem) {
  body.compact-page .compact-contact .section__header {
    container-type: inline-size;
  }

  body.compact-page .compact-contact h2 {
    max-width: 16ch;
    font-size: clamp(44px, 11cqi, 60px);
  }
}

/* Keep controls comfortable on narrow and touch-capable browsers. */
@media (max-width: 1180px), (pointer: coarse) {
  body.compact-page .menu-toggle,
  body.compact-page .site-nav a,
  body.compact-page .language-switch a,
  body.compact-page .footer-links a,
  body.compact-page .btn {
    min-height: 44px;
  }

  body.compact-page .site-nav a,
  body.compact-page .language-switch a {
    display: inline-flex;
    align-items: center;
  }

  body.compact-page .language-switch a,
  body.compact-page .menu-toggle {
    min-width: 44px;
    justify-content: center;
  }

  body.compact-page .systems-columns p {
    font-size: 1rem;
  }

  body.compact-page .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* The no-JS fallback must keep navigation visible after the responsive layer
   hides it for the interactive menu. */
html.no-js body.compact-page .menu-toggle {
  display: none;
}

html.no-js body.compact-page .site-nav {
  position: static;
  display: block;
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
}

/* Intrinsic editorial sizing: every text column must be allowed to shrink
   before a sibling image or grid track can cover its final line. */
body.compact-page .hero__panel--copy,
body.compact-page .hero__title,
body.compact-page .hero__title > span,
body.compact-page .systems-hero .section__inner > *,
body.compact-page .systems-home-layout > *,
body.compact-page .grading-layout > *,
body.compact-page .systems-proof-grid > *,
body.compact-page .section__header,
body.compact-page .systems-offers article,
body.compact-page .systems-columns > div,
body.compact-page .systems-steps article,
body.compact-page .systems-contact .section__inner > * {
  min-width: 0;
}

body.compact-page .hero__title {
  max-width: 100%;
  overflow-wrap: normal;
}

body.compact-page .hero__title > span {
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

body.compact-page .grading-work figcaption > * {
  min-width: 0;
}

/* Large type settings can make the desktop header denser than its viewport.
   Use the existing menu treatment through the tablet range; the hero can
   keep its two-column composition until the established 960px stack. */
@media (min-width: 60.0625rem) and (max-width: 73.75rem) {
  body.compact-page .site-header__inner {
    grid-template-columns: 1fr auto auto;
  }

  body.compact-page .menu-toggle {
    display: inline-flex;
  }

  body.compact-page .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    max-height: calc(100svh - 5rem);
    overflow-y: auto;
    padding: 1rem;
    background: var(--offwhite);
    border-bottom: 1px solid var(--line);
    overscroll-behavior: contain;
  }

  body.compact-page .site-nav.is-open {
    display: block;
  }

  body.compact-page .site-nav__list {
    flex-direction: column;
    gap: 0.25rem;
  }

  body.compact-page .header-cta {
    display: none;
  }
}

/* Keep the navigation legible over the long editorial chapters. */
body.compact-page .site-header {
  background: var(--offwhite);
}

body.compact-page .systems-hero .section__inner > div:first-child {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}

body.compact-page .systems-hero h1,
body.compact-page .systems-hero .hero__lede,
body.compact-page .systems-hero .hero__actions {
  margin-block: 0;
  min-width: 0;
}

body.compact-page .systems-hero h1 {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (min-width: 48.0625rem) {
  body.compact-page .compact-contact h2 {
    max-width: 16ch;
  }
}

@media (max-width: 56.25rem) {
  body.compact-page .compact-work h2 {
    font-size: clamp(1.75rem, 9vw, 3.75rem);
  }

  body.compact-page .compact-services .system-options {
    grid-template-columns: 1fr;
  }
}

body.compact-page .systems-offers article > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.compact-page .systems-contact .section__inner {
  align-items: flex-start;
}

body.compact-page .systems-contact .section__header {
  margin: 0;
}

body.compact-page .systems-region {
  max-width: 36rem;
}

body.compact-page h1,
body.compact-page h2,
body.compact-page h3,
body.compact-page h4,
body.compact-page .eyebrow {
  overflow-wrap: anywhere;
}

body.compact-page section {
  scroll-margin-top: max(90px, calc(var(--header-height) + 1rem));
}

body.compact-page .compact-services h3,
body.compact-page .systems-columns > *,
body.compact-page .systems-steps article > *,
body.compact-page .systems-steps h3 {
  overflow-wrap: anywhere;
}

@media (max-width: 73.75rem) {
  body.compact-page .compact-services .system-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 37.5rem) {
  body.compact-page .section__inner,
  body.compact-page .site-header__inner {
    width: calc(100% - 32px);
  }

  body.compact-page .site-header__inner {
    gap: 8px;
  }

  body.compact-page .header-brand {
    gap: 8px;
  }

  body.compact-page .site-header .logo img {
    width: clamp(56px, 18vw, 72px);
  }

  body.compact-page .language-switch {
    gap: 6px;
  }

  body.compact-page .compact-grading h2,
  body.compact-page .compact-contact h2,
  body.compact-page .systems-proof h2 {
    font-size: clamp(40px, 10vw, 64px);
  }

  body.compact-page .compact-work h2 {
    font-size: clamp(1.75rem, 7.5vw, 3.5rem);
  }

  body.compact-page .menu-toggle {
    padding: 8px;
    gap: 8px;
  }

  body.compact-page .menu-toggle__label {
    font-size: inherit;
  }

  body.compact-page .menu-toggle__icon,
  body.compact-page .menu-toggle__icon::before,
  body.compact-page .menu-toggle__icon::after {
    width: 16px;
  }
}

@media (max-width: 30rem) {
  body.compact-page .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding-right: 0;
  }

  body.compact-page .header-brand {
    max-width: 100%;
    flex-wrap: wrap;
  }

  body.compact-page .menu-toggle {
    position: static;
  }
}

/* Keep each commissioned-work caption inside its own figure when either
   credit is longer than the available image column. */
body.compact-page .grading-work figcaption {
  flex-wrap: wrap;
  align-items: flex-start;
}

body.compact-page .grading-work figcaption span {
  max-width: 100%;
  overflow-wrap: anywhere;
}