:root {
  /* Wide enough for 4K displays while keeping content comfortably grouped. */
  --max: 1920px;
  --page-gutter: clamp(32px, 4vw, 112px);
}

.container {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--max));
}

.header-inner {
  max-width: 2048px;
}

.hero-art {
  right: 0;
  width: 58%;
}

.cards-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cards-5 .card,
.cards-5 .card:nth-last-child(-n+2) {
  grid-column: auto;
}

.service-card-image {
  position: relative;
  z-index: 1;
  width: calc(100% + 64px);
  height: 178px;
  margin: -32px -32px 24px;
  object-fit: cover;
  border-radius: 22px 22px 0 0;
}

/* Controlled large-screen scaling: visual areas grow, prose remains readable. */
.lead,
.hero p,
.page-hero p,
.cta p,
.section-head p {
  max-width: 76ch;
}

@media (min-width: 1600px) {
  .header-inner {
    height: clamp(88px, 4.3vw, 108px);
  }

  .brand-logo {
    width: clamp(240px, 13vw, 310px);
    max-height: 76px;
  }

  .site-nav {
    gap: clamp(24px, 1.6vw, 40px);
  }

  .site-nav a {
    font-size: clamp(.88rem, .52vw, 1rem);
  }

  .hero,
  .hero-grid {
    min-height: clamp(800px, 48vw, 1120px);
  }

  .hero-grid {
    grid-template-columns: minmax(650px, .95fr) minmax(520px, 1.05fr);
    gap: clamp(64px, 5vw, 120px);
  }

  .hero-copy {
    padding-block: clamp(100px, 7vw, 170px);
  }

  .hero h1 {
    font-size: clamp(6.1rem, 5.8vw, 8.8rem);
    max-width: 10ch;
  }

  .hero p {
    font-size: clamp(1.18rem, .75vw, 1.42rem);
  }

  .section {
    padding-block: clamp(120px, 7vw, 180px);
  }

  .section-sm {
    padding-block: clamp(78px, 4.5vw, 112px);
  }

  .section-head {
    gap: clamp(52px, 4vw, 96px);
    margin-bottom: clamp(58px, 4vw, 88px);
  }

  .section-head h2,
  .display {
    font-size: clamp(4.4rem, 3.8vw, 6.4rem);
  }

  .page-hero {
    padding-block: clamp(120px, 7vw, 170px);
  }

  .page-hero h1 {
    max-width: 1200px;
    font-size: clamp(5.3rem, 4.6vw, 7.4rem);
  }

  .grid-2 {
    gap: clamp(64px, 5vw, 120px);
  }

  .grid-3,
  .cards-5 {
    gap: clamp(24px, 1.6vw, 34px);
  }

  .card {
    padding: clamp(32px, 1.8vw, 44px);
  }

  .service-card-image {
    width: calc(100% + clamp(64px, 3.6vw, 88px));
    height: clamp(190px, 11vw, 260px);
    margin: clamp(-44px, -1.8vw, -32px) clamp(-44px, -1.8vw, -32px) 28px;
  }

  .photo-frame {
    min-height: clamp(560px, 35vw, 760px);
  }

  .cta {
    padding: clamp(76px, 5vw, 112px);
  }

  .content-panel,
  .form-card,
  .contact-card {
    padding: clamp(42px, 2.6vw, 62px);
  }

  .site-footer {
    padding-top: clamp(86px, 5vw, 126px);
  }
}

@media (min-width: 2560px) {
  :root {
    --max: 2048px;
  }

  .hero-art {
    width: 55%;
  }

  .service-strip {
    margin-top: -66px;
  }

  .mini-service {
    padding: 36px 24px;
  }

  .article-card {
    grid-template-columns: 300px 1fr;
    gap: 34px;
  }

  .article-card img {
    height: 210px;
  }
}

@media (max-width: 1300px) {
  .cards-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1050px) {
  .container {
    width: min(calc(100% - 40px), var(--max));
  }

  .cards-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .container {
    width: min(calc(100% - 28px), var(--max));
  }

  .cards-5 {
    grid-template-columns: 1fr;
  }

  .service-card-image {
    height: 210px;
  }
}