/* ================================================================
   WIDE SCREENS (27 Oct) — content grows with screens wider than 1536px
   ----------------------------------------------------------------
   Up to 1536px wide nothing here applies, so laptops look exactly as before.
   Above that, two growing units stand in for "px":
     --u   grows in step with the screen (1920px wide → 1.25px, 2560px → 1.67px)
           used for layout: page width, header, images, footer
     --ut  grows at 60% of that rate (1920px → 1.15px, 2560px → 1.4px)
           used for the smaller text, so it grows slightly and titles stay put
   e.g. "calc(14 * var(--ut))" = 14px on a laptop, ~16px on a 1920px screen.
   To change how much text grows, edit the 0.6 below.
   Roll back: remove the <link ... css/wide.css> line from the pages
   (and the two "WIDE SCREENS" lines in script/fx.js for the logo ring).
   ================================================================ */
:root {
  --g:  clamp(0px, 100vw - 1536px, 1024px);       /* extra width past 1536px, capped at 2560px screens */
  --u:  calc(1px + var(--g) / 1536);
  --ut: calc(1px + var(--g) / 1536 * 0.6);
}

@media (min-width: 1537px) {

  /* ---------- page width ---------- */
  .container,
  .ft-bottom-row { max-width: calc(1200 * var(--u)); }
  .megamenu-panel { max-width: calc(1160 * var(--u)); }

  /* ---------- header: bar, burger, logo, Connect ---------- */
  :root { --nav-space: calc(16px + 76 * var(--ut)); }
  .header-inner { height: calc(76 * var(--ut)); }
  .brand-logo { height: calc(108 * var(--ut)); margin: calc(-16 * var(--ut)) 0; } /* LARGER HEADER LOGO (28 Oct) — was 80 */
  .menu-toggle { gap: calc(5 * var(--ut)); padding: calc(6 * var(--ut)); }
  .menu-toggle span { width: calc(22 * var(--ut)); height: calc(2 * var(--ut)); }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(calc(7 * var(--ut))) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(calc(-7 * var(--ut))) rotate(-45deg); }
  .connect-btn { font-size: calc(14 * var(--ut)); padding: calc(8 * var(--ut)) calc(16 * var(--ut)); }
  .connect-btn .plus { font-size: calc(16 * var(--ut)); }

  /* ---------- shared buttons ---------- */
  .btn { font-size: calc(14 * var(--ut)); padding: calc(12 * var(--ut)) calc(22 * var(--ut)); }
  .btn-outline { font-size: calc(14 * var(--ut)); }

  /* ---------- home: banner ---------- */
  .hero-tagline { font-size: calc(14 * var(--ut)); }
  .hero-desc { font-size: calc(14.5 * var(--ut)); max-width: calc(420 * var(--ut)); }
  .hero-tab { font-size: calc(14 * var(--ut)); }

  /* ---------- home: about ---------- */
  .about-eyebrow { font-size: calc(14 * var(--ut)); }
  .about-copy { max-width: min(calc(640 * var(--u)), 48%); }
  .about-copy p { max-width: min(calc(580 * var(--ut)), 100%); }
  .about-slide > p:not(.about-lead) { font-size: calc(15.5 * var(--ut)); }

  /* ---------- home: why choose us ---------- */
  #why-choose .eyebrow { font-size: calc(13 * var(--ut)); }
  .ws-card { width: min(44vw, calc(640 * var(--u))); }
  .ws-slide p { font-size: calc(16.1 * var(--ut)); max-width: calc(460 * var(--ut)); }
  .ws-points { max-width: calc(500 * var(--ut)); }
  .ws-points strong { font-size: calc(15.3 * var(--ut)); }
  .ws-points li span:not(.ws-pt-icon) { font-size: calc(13.6 * var(--ut)); }

  /* ---------- home: trusted by ---------- */
  .orbit-sub { font-size: calc(15.6 * var(--ut)); }

  /* ---------- home: services / products ---------- */
  .feature .eyebrow { font-size: calc(14 * var(--ut)); }
  .feature .copy p { font-size: calc(18 * var(--ut)); max-width: calc(580 * var(--ut)); }

  /* ---------- services / products pages ---------- */
  .page-hero p { font-size: calc(18 * var(--ut)); }
  .page-hero.sv-scene p { max-width: calc(520 * var(--ut)); }
  .page-hero-tab { font-size: calc(14 * var(--ut)); }
  .deck, .deck-bar { max-width: calc(1020 * var(--u)); }
  .deck-swipe-hint { font-size: calc(16 * var(--ut)); }
  .ts-tab-label { font-size: calc(12.5 * var(--ut)); }
  .deck-card-summary { font-size: calc(17.7 * var(--ut)); max-width: calc(520 * var(--ut)); }
  .deck-card-desc { font-size: calc(14.6 * var(--ut)); max-width: calc(500 * var(--ut)); }
  .deck-card-offers { max-width: calc(520 * var(--ut)); }
  .deck-card-offers li { font-size: calc(13 * var(--ut)); }
  .book-face--front .deck-card-summary { font-size: calc(14.6 * var(--ut)); }
  .book-face--front .deck-card-desc { font-size: calc(13.1 * var(--ut)); }
  .book-face--front .deck-card-offers li { font-size: calc(11.6 * var(--ut)); }
  .section-eyebrow { font-size: calc(13 * var(--ut)); }
  .section-sub { font-size: calc(15 * var(--ut)); }
  .cta-banner p { font-size: calc(16 * var(--ut)); }

  /* ---------- contact page ---------- */
  .ct-hero p { font-size: calc(18 * var(--ut)); max-width: calc(560 * var(--ut)); }
  .ct-hero-tab { font-size: calc(14 * var(--ut)); }
  .ct-lead { font-size: calc(15.6 * var(--ut)); max-width: calc(540 * var(--ut)); }
  .ct-tile-label { font-size: calc(12 * var(--ut)); }
  .ct-tile-value { font-size: calc(14.6 * var(--ut)); }
  .ct-tile-note, .ct-tile-link { font-size: calc(13.5 * var(--ut)); }
  .ct-form-note { font-size: calc(14 * var(--ut)); }
  .ct-field span { font-size: calc(12.5 * var(--ut)); }
  .ct-map-country, .ct-map-company { font-size: calc(14 * var(--ut)); }
  .ct-map-list li span, .ct-map-list li a, .ct-map-link { font-size: calc(13.5 * var(--ut)); }

  /* ---------- footer ---------- */
  .footer-tagline { font-size: calc(33.5 * var(--ut)); }
  .ft-contact, .ft-office .ft-contact { font-size: calc(13.5 * var(--ut)); }
  .ft-contact svg { width: calc(16 * var(--ut)); height: calc(16 * var(--ut)); }
  .ft-office .ft-map { min-height: clamp(300px, 46vh, calc(420 * var(--u))); }
  .ft-office-info { width: min(36%, calc(300 * var(--u))); }
  .ft-office .ft-contact { font-size: calc(12.5 * var(--ut)); }
  .ft-office-info .ft-form-title { font-size: calc(17 * var(--ut)); }
  .ft-office-company, .ft-office-link { font-size: calc(12.5 * var(--ut)); }
  .ft-top:has(.ft-info) { grid-template-columns: minmax(0, 1fr) calc(220 * var(--u)) minmax(0, 1.05fr); }
  .ft-info-title { font-size: calc(12 * var(--ut)); }
  .ft-row > a { font-size: calc(18 * var(--ut)); }
  .ft-sub a { font-size: calc(14.5 * var(--ut)); }
  .ft-form-title { font-size: calc(20 * var(--ut)); }
  .ft-form-note { font-size: calc(13.5 * var(--ut)); }
  .ft-field span { font-size: calc(12 * var(--ut)); }
  .ft-field input, .ft-field textarea { font-size: calc(14 * var(--ut)); padding: calc(10 * var(--ut)) calc(12 * var(--ut)); }
  .ft-bottom-row .footer-bottom { font-size: calc(12 * var(--ut)); padding: calc(11 * var(--ut)) calc(30 * var(--ut)) calc(10 * var(--ut)); }
  .ft-info .ft-social-link { width: calc(38 * var(--ut)); height: calc(38 * var(--ut)); }
  .ft-info .ft-social-link svg { width: calc(18 * var(--ut)); height: calc(18 * var(--ut)); }
  .ft-bottom-row .ft-social-link { width: calc(38 * var(--ut)); height: calc(38 * var(--ut)); }
  .ft-bottom-row .ft-social-link svg { width: calc(18 * var(--ut)); height: calc(18 * var(--ut)); }
}

/* ---------------- BANNERS GROW WITH THE SCREEN (29 Oct) ----------------
   Banner titles, text and buttons on every page now scale with the full
   --u unit past 1536px (titles used to stop at a fixed size, so they looked
   small on big screens). 1536px and below: unchanged. */
@media (min-width: 1537px) {
  /* home banner */
  .hero h1 { font-size: calc(46 * var(--u)); }
  .hero-tagline { font-size: calc(14 * var(--u)); }
  .hero-desc { font-size: calc(14.5 * var(--u)); max-width: calc(440 * var(--u)); }
  /* Careers, ODC, EDB banners */
  .page-hero.sv-scene h1 { font-size: calc(47 * var(--u)); }
  .page-hero p, .page-hero.sv-scene p { font-size: calc(18 * var(--u)); max-width: calc(520 * var(--u)); }
  /* Contact banner */
  .ct-hero h1 { font-size: calc(47 * var(--u)); max-width: calc(640 * var(--u)); }
  .ct-hero p { font-size: calc(18 * var(--u)); max-width: calc(560 * var(--u)); }
  /* Services / Products / Industries page titles */
  .rail-title { font-size: clamp(34px, min(3.6vw, 7.4vh), calc(72 * var(--u))); }
  .rail-eyebrow { font-size: calc(14 * var(--u)); }
  .ind-title { font-size: clamp(26px, min(2.5vw, 5.2vh), calc(46 * var(--u))); }
  /* banner buttons */
  .hero .btn, .page-hero .btn, .ct-hero .btn, .edb-hero-btns .btn {
    font-size: calc(15 * var(--u));
    padding: calc(13 * var(--u)) calc(24 * var(--u));
  }
  .edb-ghost { font-size: calc(14.5 * var(--u)); }
}