/* Mobile refinements kept separate so the desktop design remains unchanged. */
@media (max-width: 800px) {
  .hero-media {
    height: clamp(230px, 72vw, 280px);
    background-position: 62% center;
  }

  .hero-content {
    padding: 44px 24px 58px;
  }

  .hero h1 {
    font-size: clamp(2.2rem, 10.2vw, 2.75rem);
    line-height: 1.4;
    letter-spacing: 0.015em;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .eyebrow {
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    white-space: nowrap;
  }

  .lead {
    line-height: 1.9;
  }

  .principles h2,
  .section-head h2,
  .article-header h1 {
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .article-header h1 {
    font-size: clamp(2.05rem, 9.5vw, 2.7rem);
    line-height: 1.45;
  }

  .tags {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .site-header {
    padding-inline: 16px;
  }

  .site-header nav {
    gap: 10px;
  }

  .hero h1 {
    font-size: clamp(2.15rem, 10.4vw, 2.4rem);
  }

  .featured-card {
    display: block;
    min-height: 0;
  }

  .card-number {
    border-right: 0;
    border-bottom: 1px solid #40505a;
    padding: 15px 22px;
    text-align: left;
  }

  .card-copy {
    padding: 32px 22px 42px;
  }

  .card-copy h3 {
    font-size: 1.75rem;
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .article-body h2 {
    font-size: 1.15rem;
    line-height: 1.6;
  }
}