/* ============================================================
   Responsive layer for the NDS site.
   The page markup uses inline styles (ported 1:1 from the design
   concepts), so these overrides target the exact inline patterns
   with attribute selectors + !important. Desktop (>1100px) is
   untouched — this file only acts at tablet/mobile widths.
   ============================================================ */

/* Mobile-nav elements are hidden on desktop */
.nds-menu-toggle,
.nds-burger,
.nds-mobile-menu {
  display: none;
}

img {
  max-width: 100%;
}

/* ============ Tablet and below: burger navigation ============ */
@media (max-width: 1100px) {
  .nds-header {
    position: relative !important;
    padding: 0 20px !important;
    gap: 16px !important;
  }
  .nds-nav {
    display: none !important;
  }
  .nds-cta {
    margin-left: auto !important;
  }
  .nds-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 10px 6px;
  }
  .nds-burger span {
    width: 24px;
    height: 2px;
    background: #fff;
    display: block;
  }
  .nds-mobile-menu {
    position: fixed;
    top: 84px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0e0f10;
    border-top: 3px solid #a6192e;
    z-index: 100;
    flex-direction: column;
    padding: 8px 0 14px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
  }
  .nds-menu-toggle:checked ~ .nds-mobile-menu {
    display: flex;
  }
  .nds-mobile-menu > a {
    display: block;
    padding: 13px 24px;
    color: #e8e6e1;
    text-decoration: none;
    font: 600 15px Oswald, sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-bottom: 1px solid #1d1f22;
  }
  .nds-mobile-sub a {
    display: block;
    padding: 9px 24px 9px 42px;
    color: #9a9791;
    text-decoration: none;
    font: 600 13px Oswald, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .nds-mobile-sub {
    border-bottom: 1px solid #1d1f22;
    padding: 4px 0 8px;
  }
  .nds-mobile-actions {
    display: flex;
    gap: 14px;
    padding: 16px 24px 6px;
    align-items: center;
    flex-wrap: wrap;
  }
  .nds-mobile-actions .nds-mobile-tel {
    color: #fff;
    font: 600 18px Oswald, sans-serif;
    text-decoration: none;
  }
  .nds-mobile-actions .nds-mobile-quote {
    background: #a6192e;
    color: #fff;
    text-decoration: none;
    font: 600 14px Oswald, sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 13px 22px;
  }

  /* Type scale — tablet */
  [style*="font:700 84px"] { font-size: 60px !important; }
  [style*="font:700 68px"] { font-size: 50px !important; }
  [style*="font:700 60px"] { font-size: 44px !important; }
  [style*="font:700 46px"] { font-size: 36px !important; }
  [style*="font:700 42px"] { font-size: 34px !important; }
  [style*="font:700 40px"] { font-size: 32px !important; }

  /* Grids — tablet */
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  div[style*="grid-template-columns:1.5fr 1fr 1.1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    row-gap: 36px !important;
  }
}

/* ============ Mid tier: stack asymmetric splits ============ */
@media (max-width: 900px) {
  /* content+sidebar / text+image splits become single column */
  div[style*="grid-template-columns:1.5fr 1fr"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:1.4fr 1fr"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:1.3fr 1fr"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:1.2fr 1fr"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:1fr 1.1fr"] { grid-template-columns: 1fr !important; }
  /* footer keeps 2x2 (must re-assert after the 1.5fr rule, which
     substring-matches the footer's 4-column pattern too) */
  div[style*="grid-template-columns:1.5fr 1fr 1.1fr 1fr"] { grid-template-columns: 1fr 1fr !important; row-gap: 36px !important; }
  /* careers role rows stack */
  div[style*="grid-template-columns:1fr auto auto auto"] { grid-template-columns: 1fr !important; gap: 10px !important; }
  div[style*="grid-template-columns:1fr auto auto auto"] a { justify-self: start; }
  /* stat strip 2x2 */
  div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="position:sticky"] { position: static !important; }
}

/* ============ Mobile ============ */
@media (max-width: 700px) {
  /* Collapse every grid to a single column, then re-open exceptions */
  div[style*="display:grid"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* About history timeline keeps year + text side by side */
  div[style*="grid-template-columns:110px 1fr"] {
    grid-template-columns: 90px 1fr !important;
  }

  [style*="border-right:1px solid rgba(255,255,255"] {
    border-right: none !important;
  }

  /* Type scale — mobile */
  [style*="font:700 84px"] { font-size: 40px !important; }
  [style*="font:700 68px"] { font-size: 36px !important; }
  [style*="font:700 60px"] { font-size: 32px !important; }
  [style*="font:700 46px"] { font-size: 28px !important; }
  [style*="font:700 42px"] { font-size: 28px !important; }
  [style*="font:700 40px"] { font-size: 26px !important; }
  [style*="font:700 34px"] { font-size: 24px !important; }
  [style*="font:700 32px"] { font-size: 23px !important; }
  [style*="font:700 30px"] { font-size: 22px !important; }

  /* Section paddings */
  [style*="padding:96px 48px"] { padding: 56px 20px !important; }
  [style*="padding:88px 48px"] { padding: 48px 20px !important; }
  [style*="padding:80px 48px 40px"] { padding: 44px 20px 24px !important; }
  [style*="padding:80px 48px"] { padding: 48px 20px !important; }
  [style*="padding:78px 48px"] { padding: 48px 20px !important; }
  [style*="padding:72px 48px"] { padding: 44px 20px !important; }
  [style*="padding:64px 48px 32px"] { padding: 44px 20px 24px !important; }
  [style*="padding:56px 48px"] { padding: 36px 20px !important; }
  [style*="padding:44px 48px"] { padding: 30px 20px !important; flex-wrap: wrap !important; }
  [style*="padding:26px 48px"] { padding: 18px 20px !important; }
  [style*="padding:0 48px 80px"] { padding: 0 20px 48px !important; }
  [style*="padding:0 48px 40px"] { padding: 0 20px 28px !important; }
  [style*="padding:40px 40px 44px"] { padding: 26px 18px 30px !important; }
  [style*="padding:34px 32px"] { padding: 24px 20px !important; }
  [style*="padding:56px 48px"] { padding: 36px 20px !important; }

  /* Column/grid gaps that assume desktop widths */
  [style*="gap:56px"] { gap: 28px !important; }
  [style*="gap:48px"] { gap: 28px !important; }
  [style*="gap:44px"] { gap: 28px !important; }

  /* Hero / banner heights (anchored to position:relative to avoid
     matching min-height patterns) */
  [style*="position:relative;height:640px"] {
    height: auto !important;
    min-height: 440px !important;
  }
  [style*="position:relative;height:360px"] {
    height: auto !important;
    min-height: 260px !important;
  }
  [style*="position:relative;height:320px"] {
    height: auto !important;
    min-height: 230px !important;
  }

  /* Image / map cells with desktop min-heights */
  [style*="min-height:520px"] { min-height: 320px !important; }
  [style*="min-height:420px"] { min-height: 280px !important; }
  [style*="min-height:380px"] { min-height: 260px !important; }
  [style*="height:460px"] { height: 320px !important; }

}

/* ============ Small phones ============ */
@media (max-width: 480px) {
  /* Header: keep the phone number, drop the CTA button (it's in the menu) */
  .nds-cta a[style*="background:#A6192E"] {
    display: none !important;
  }

  [style*="font:700 84px"] { font-size: 34px !important; }
  [style*="font:700 68px"] { font-size: 30px !important; }
  [style*="font:700 60px"] { font-size: 28px !important; }
}