/*
 * Mobile rendering layer shared by every page except the separately optimized
 * home page. It removes decorative work from the first viewport while keeping
 * editorial images, copy, links and heading structure intact.
 */
@media (max-width: 900px) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .site-header,
  .mobile-dock {
    backdrop-filter: none !important;
  }

  /* Commercial heroes: text and primary choices paint immediately. */
  .marketing-hero {
    min-height: 0;
    background: #03243d;
  }

  .marketing-hero::before {
    background: #03243d;
  }

  .marketing-hero::after,
  .marketing-hero__image {
    display: none;
  }

  .marketing-hero__grid {
    display: block;
    min-height: 0;
  }

  .marketing-hero__content {
    padding: 38px 0 34px;
  }

  .marketing-hero h1 {
    max-width: 18ch;
    font-size: clamp(2rem, 8.7vw, 2.65rem);
    line-height: 1.07;
  }

  .marketing-hero__content > p:not(.eyebrow) {
    margin: 16px 0 22px;
    font-size: .96rem;
  }

  .marketing-hero__brief {
    display: none;
  }

  /* Validation is useful above the fold; its explanatory card follows below. */
  .certificate-hero {
    padding: 40px 0 36px;
    background: #03243d;
  }

  .certificate-hero::before,
  .certificate-hero::after {
    display: none;
  }

  .certificate-hero__grid {
    display: block;
  }

  .certificate-hero h1 {
    font-size: clamp(2rem, 8.7vw, 2.55rem);
    line-height: 1.07;
  }

  .certificate-hero__content > p:not(.eyebrow) {
    margin: 16px 0 22px;
  }

  .certificate-hero__card {
    display: none;
  }

  /* Keep the first section immediate and skip below-fold layout until needed. */
  .marketing-page__content > :not(:first-child),
  .certificate-page > section:not(:first-child),
  .content-section--page .entry-content > :not(:first-child),
  .blog-page .post-list > article,
  .single-post-article .entry-content > :not(:first-child),
  .site-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
  }

  .entry-content img,
  .single-post-featured img,
  .post-card img {
    height: auto;
  }
}