/* Service pages: the work itself occupies the whole content width. */
body.page-service .page-body-layout { grid-template-columns: minmax(0, 1fr); }
body.page-service .scope-panel { grid-template-columns: minmax(0, 1fr); }
body.page-service .scope-panel .section-heading { max-width: 860px; }
body.page-service .card-grid--situations-page .content-card,
body.page-service .card-grid--scope .content-card,
body.page-service .card-grid--hub-coverage .content-card { min-width: 0; grid-column: auto !important; }
.site-header__inner > .brand { justify-self: start; width: min(100%, 336px); min-width: 0; }
.site-header__inner > .brand .brand-logo--header { width: 100%; min-width: 0; }

@media (min-width: 1200px) {
  body.page-service .card-grid--situations-page,
  body.page-service .card-grid--scope,
  body.page-service .card-grid--hub-coverage { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  body.page-service .page-rail__stack { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  body.page-service .page-rail__publications { grid-column: 1 / -1; }
  body.page-service .page-rail__publications ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  body.page-service .card-grid--situations-page,
  body.page-service .card-grid--scope,
  body.page-service .card-grid--hub-coverage { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .site-header__inner > .brand { width: 230px; }
  body.page-service .page-rail__stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-service .page-rail__publications { grid-column: 1 / -1; }
  body.page-service .page-rail__publications ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  body.page-service .page-rail__stack,
  body.page-service .card-grid--situations-page,
  body.page-service .card-grid--scope,
  body.page-service .card-grid--hub-coverage { grid-template-columns: minmax(0, 1fr) !important; }
  .site-header__inner > .brand { width: min(230px, 100%); }
}
@media (max-width: 760px) { .site-header__inner > .brand { width: min(284px, 100%); } }

/* TPPA v32: mobile header and elapsed-time counter proportions.
   The phone starts on the wordmark axis instead of the shield axis. */
:root {
  --space-phi-xs: 5px;
  --space-phi-0: 8px;
  --space-phi-1: 13px;
  --space-phi-2: 21px;
  --space-phi-3: 34px;
}

@media (max-width: 760px) {
  .site-header__inner {
    grid-template-rows: var(--logo-h) var(--space-phi-2);
    column-gap: var(--space-phi-0);
    row-gap: 0;
    min-height: calc(var(--logo-h) + var(--space-phi-2) + var(--space-phi-0));
    padding-block: var(--space-phi-xs);
  }

  .site-header__inner .menu-toggle {
    align-self: end;
  }

  .site-header__inner .header-contacts {
    width: 100%;
    min-height: var(--space-phi-3);
    margin: 0;
    padding: 0;
    align-self: end;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .site-header__inner .header-contact--phone {
    min-width: 0;
    min-height: var(--space-phi-3);
    align-items: flex-end;
    padding-block: 0;
    font-family: var(--font-sans);
    line-height: 1;
    white-space: nowrap;
  }

  body[class] .site-header__inner .header-contacts .header-contact--phone strong {
    font-size: clamp(15.5px, 4.25vw, 17px);
    font-weight: 800;
    letter-spacing: .006em;
    line-height: 1;
  }

  .page-hero--aside-service_age .service-age,
  .page-hero--aside-service_age .service-age.page-rail__panel {
    --age-digit-w: clamp(17px, 4.8vw, 20px);
    --age-digit-gap: clamp(4px, 1.15vw, 5px);
    padding-inline: var(--space-phi-1);
  }

  .page-hero--aside-service_age .service-age__units {
    grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
    gap: var(--space-phi-1);
    width: min(100%, 430px);
    justify-content: stretch;
  }

  .page-hero--aside-service_age .service-age__unit {
    min-width: 0;
    min-height: 64px;
    padding: var(--space-phi-0) var(--space-phi-xs) 7px;
    align-content: center;
    border-color: color-mix(in srgb, var(--accent) 34%, #fff);
    background: color-mix(in srgb, var(--accent) 5%, #fff);
    box-shadow: 0 5px 16px rgba(20, 29, 32, .055);
  }

  .page-hero--aside-service_age .service-age__unit small {
    font-size: clamp(11px, 3vw, 12px);
    letter-spacing: .02em;
  }
}

@media (max-width: 360px) {
  .page-hero--aside-service_age .service-age,
  .page-hero--aside-service_age .service-age.page-rail__panel {
    --age-digit-w: 15.5px;
    --age-digit-gap: 3px;
    padding-inline: var(--space-phi-0);
  }

  .page-hero--aside-service_age .service-age__units {
    gap: var(--space-phi-0);
  }
}