/* Load after typography.css. Use CSS viewport width, independent of screen DPI
   and OS/browser zoom. Keep the existing layout below 1600 CSS pixels. */
@media (min-width: 1600px) {
  :root {
    --wide-unit: clamp(1px, calc(0.025vw + 0.6px), 1.375px);
    --site-width: clamp(1280px, 80vw, 2240px);
    --type-display: calc(52 * var(--wide-unit));
    --type-page: calc(48 * var(--wide-unit));
    --type-section: calc(36 * var(--wide-unit));
    --type-subsection: calc(24 * var(--wide-unit));
    --type-product: calc(30 * var(--wide-unit));
    --type-card: calc(18 * var(--wide-unit));
    --type-body: calc(16 * var(--wide-unit));
    --type-card-body: calc(15 * var(--wide-unit));
    --type-small: calc(14 * var(--wide-unit));
    --type-caption: calc(12 * var(--wide-unit));
    --type-control: calc(16 * var(--wide-unit));
    --type-nav: calc(16 * var(--wide-unit));
  }

  /* Align the header, banners, content and footer to the same growing column. */
  .nav, .submenu-inner, .sec, .hero .inner, .pagehero .inner, .trust .row,
  .cta-band .row, .cta-in, footer .cols, footer .base .row, .crumb .row,
  .sticky-cta .row, .spec-wrap { max-width: var(--site-width); }
  .nums .row { max-width: calc(var(--site-width) - 100px); }

  /* Reading columns grow with the font rather than filling the whole screen. */
  .aboutstrip { max-width: calc(980 * var(--wide-unit)); }
  .hero h1 { max-width: calc(1000 * var(--wide-unit)); }
  .hero .sub { max-width: calc(880 * var(--wide-unit)); }
  .svcblk-h p { max-width: calc(900 * var(--wide-unit)); font-size: var(--type-card-body); }
  .trackwrap { max-width: calc(860 * var(--wide-unit)); }
  .pd-intro .static-content { max-width: 70em; }

  .nav { min-height: calc(96 * var(--wide-unit)); gap: calc(24 * var(--wide-unit)); }
  .nav .brand { width: calc(112 * var(--wide-unit)); height: calc(76 * var(--wide-unit));
    flex-basis: calc(112 * var(--wide-unit)); }
  .menu { gap: calc(4 * var(--wide-unit)); }
  .menu-link { padding: calc(10 * var(--wide-unit)) calc(8 * var(--wide-unit)); }
  .nav-cta { gap: calc(14 * var(--wide-unit)); }
  .nav-phone, .nav-email { font-size: calc(12.5 * var(--wide-unit)); }
  .nav-contact-icon { width: calc(16 * var(--wide-unit)); height: calc(16 * var(--wide-unit)); }
  .submenu-link, .nav-cta .btn-quote { font-size: calc(15 * var(--wide-unit)); }
  .btn-quote { padding: calc(11 * var(--wide-unit)) calc(24 * var(--wide-unit)); }

  .hero { height: clamp(600px, calc(100svh - 96 * var(--wide-unit)), calc(780 * var(--wide-unit))); }
  .hero .inner { padding-top: calc(48 * var(--wide-unit)); padding-bottom: calc(146 * var(--wide-unit)); }
  .hero .cta { gap: calc(18 * var(--wide-unit)); margin-top: calc(38 * var(--wide-unit)); }
  .hero .sub, .pagehero .h1sub { font-size: calc(18 * var(--wide-unit)); }
  .pagehero { height: calc(480 * var(--wide-unit)); }
  .pagehero .en { font-size: calc(24 * var(--wide-unit)); }
  .hero-video-toggle { right: max(22px, calc((100% - var(--site-width)) / 2));
    bottom: calc(124 * var(--wide-unit)); width: calc(40 * var(--wide-unit)); height: calc(40 * var(--wide-unit)); }
  .hero-video-toggle svg { width: calc(18 * var(--wide-unit)); height: calc(18 * var(--wide-unit)); }
  .trust .cell { padding: calc(17 * var(--wide-unit)) 0 calc(15 * var(--wide-unit)); }
  .trust .v, .ccard .cval { font-size: calc(22 * var(--wide-unit)); }
  .nums .v, .zone .no { font-size: calc(40 * var(--wide-unit)); }

  .sec-head { padding: calc(66 * var(--wide-unit)) 0 calc(14 * var(--wide-unit)); }
  .rule { width: calc(56 * var(--wide-unit)); margin-top: calc(16 * var(--wide-unit)); }
  .prods, .zones, .cases, .advgrid, .certs, .cgrid, .deptgrid, .relgrid {
    gap: calc(22 * var(--wide-unit));
  }
  .prods, .cases, .certs { padding-top: calc(30 * var(--wide-unit)); }
  .pcard .ph { height: auto; aspect-ratio: 304 / 218; }
  .adv .ph { height: auto; aspect-ratio: 413 / 150; }
  .case .ph { height: auto; aspect-ratio: 412 / 190; }
  .pcard .bd, .adv .bd { padding: calc(16 * var(--wide-unit)) calc(18 * var(--wide-unit)) calc(18 * var(--wide-unit)); }
  .case .bd { padding: calc(18 * var(--wide-unit)) calc(20 * var(--wide-unit)); }
  .zone { padding: calc(28 * var(--wide-unit)) calc(24 * var(--wide-unit)); }
  .cert { padding: calc(22 * var(--wide-unit)) calc(16 * var(--wide-unit)); }
  .ccard { padding: calc(24 * var(--wide-unit)); }
  .pcard .meta { margin-top: calc(10 * var(--wide-unit)); }
  .alllink { padding-top: calc(4 * var(--wide-unit)); padding-bottom: calc(12 * var(--wide-unit)); }
  .aboutstrip .amore { margin-top: calc(18 * var(--wide-unit)); }

  /* Scale fixed-size text that is outside the shared typography tokens. */
  .zonecross .zh2, .zonecross .zcs a b, .klist li, .dlbtn .l,
  .svcblk-h .jump, .sticky-cta .t small, .about-pill span,
  .locline, .locacts a, .list-3 .text p { font-size: var(--type-small); }
  .zi-pain > b, .zi-pain li, .zi-flow .zh, .zi-flow .fi b,
  .stage-h .q, .dlbtn .r, .nnnns li { font-size: var(--type-small); }
  .zi-flow .fi i, .zonecross .zcs a span, .case .loc,
  .case .res span, .list-3 .date { font-size: var(--type-caption); }
  .newsitem .t, .list-3 h4 { font-size: var(--type-card); }
  .opt .dot, .newsitem .dt { font-size: var(--type-small); }
  .fld .in { font-size: var(--type-control); }

  .btn-main { padding: calc(15 * var(--wide-unit)) calc(38 * var(--wide-unit)); }
  .btn-ghost { padding: calc(14 * var(--wide-unit)) calc(34 * var(--wide-unit)); }
  .btn-xl, .btn-line, .cta-btn, .cta-band a, .sticky-cta a {
    padding: calc(14 * var(--wide-unit)) calc(30 * var(--wide-unit));
  }
  .fld .in { padding: calc(12 * var(--wide-unit)) calc(14 * var(--wide-unit)); }
  .form, .trackform { padding: calc(28 * var(--wide-unit)); }
  .pd { gap: calc(38 * var(--wide-unit)); }
  .pd .mainpic img { height: calc(430 * var(--wide-unit)); }
  .rel img { height: calc(120 * var(--wide-unit)); }
  .zcard .ph { width: calc(300 * var(--wide-unit)); min-height: calc(250 * var(--wide-unit)); }
  .about-lead { gap: calc(40 * var(--wide-unit)); }
  .cta-band { margin-top: calc(60 * var(--wide-unit)); }
  footer .cols { padding: calc(52 * var(--wide-unit)) 0 calc(40 * var(--wide-unit));
    gap: calc(60 * var(--wide-unit)); }
  footer .cols .brand img.logo { width: calc(128 * var(--wide-unit)); }
}