/* Wider desktop composition. Tablet and mobile layouts keep their existing spacing. */
@media (min-width: 1200px) {
  .wrap { width: min(1420px, calc(100% - 96px)); }
  .navlinks, .links { font-size: 16px; }

  .page-hero { min-height: 590px; }
  .hero-inner { padding: 110px 0; }
  .page-hero h1 { max-width: 1040px; }
  .page-hero p { max-width: 800px; }

  .section { padding: 112px 0; }
  .section-head {
    grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
    gap: 110px;
    margin-bottom: 56px;
  }
  .grid { gap: 26px; }
  .card { padding: 38px 36px; }
  .feature { gap: 32px; }
  .feature-panel { padding: 50px; }
  .blog-grid { gap: 28px; }
  .post-visual { min-height: 280px; }
  .form-feature { grid-template-columns: .72fr 1.28fr; gap: 80px; }

  .article-hero { padding: 112px 0 94px; }
  .article-hero h1 { max-width: 1100px; }
  .dek { max-width: 860px; }
  .article-layout {
    grid-template-columns: minmax(0, 900px) 330px;
    justify-content: space-between;
    gap: 90px;
    padding: 96px 0 118px;
  }
  .related { padding: 92px 0; }
  .related-grid { gap: 28px; }
  .related-card { padding: 34px; }

  section { padding-top: 112px; padding-bottom: 112px; }
  .hero-grid { min-height: 850px; }
  .cards, .two-pillars, .process-grid { gap: 26px; }
  .card, .pillar { padding: 38px; }
  .intel-head { gap: 100px; }
  .footer-grid { gap: 70px; }
  .cta { padding-top: 82px; padding-bottom: 82px; }
}

@media (max-width: 1100px) {
  .navlinks.open, .links.open { font-size: 17px; }
}