/* ------------------------------------------------------------------
   Global mobile / responsive pass.
   Layout only - no copy changes. Loaded after fonts.css on every page.
   Desktop (>=981px) is untouched: everything here is inside a media query.

   NOTE: inline styles are serialized by React with a space after the colon
   ("border-radius: 8px"), while the authored source has none. Attribute
   selectors below therefore list BOTH forms wherever a value is matched.
   ------------------------------------------------------------------ */

html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, svg { max-width: 100%; }

/* ------------------------------------------------------------------
   Standardised UI typography (buttons, pill CTAs, nav dropdown links).
   Family only - each element keeps its own casing, weight and tracking
   from its inline style, so no copy changes appearance. Saira is
   embedded per-page and every fallback is a system font.
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   Full-bleed strips (.trp-fullbleed)
   These sit inside a padded, max-width column but must reach both screen
   edges. They cancel the section's own horizontal padding rather than
   using 100vw, which would overshoot by the scrollbar width. The
   max-width exemption is needed because the mobile block below sets
   `body * { max-width: 100% }`, which would otherwise clamp them.
   ------------------------------------------------------------------ */
.trp-fullbleed {
  max-width: none !important;
  width: auto !important;
  margin-left: -32px;
  margin-right: -32px;
}
@media (max-width: 980px) {
  .trp-fullbleed { margin-left: -18px !important; margin-right: -18px !important; }
}
@media (max-width: 560px) {
  .trp-fullbleed { margin-left: -14px !important; margin-right: -14px !important; }
}

/* Marquee track: must keep its natural content width, otherwise the -50%
   translate in @keyframes trpMarquee resolves against a clamped box and the
   loop snaps back half way through. */
.trp-marquee {
  max-width: none !important;
  width: max-content !important;
}

/* ------------------------------------------------------------------
   Button baseline (.trp-btn)
   Inline styles can be stripped or rewritten when a page is exported to
   an external host, which left CTAs rendering as underlined serif links.
   These rules live in a real stylesheet, so they survive that: they fix
   family, weight, casing, alignment and the removal of the underline.
   Colour, padding and size deliberately stay on each button's own inline
   style, so nothing changes size or colour here.
   ------------------------------------------------------------------ */
.trp-btn,
a.trp-btn,
button.trp-btn,
span.trp-btn {
  font-family: 'Saira', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  line-height: 1.1;
  box-sizing: border-box;
}
.trp-btn:hover, a.trp-btn:hover, button.trp-btn:hover, span.trp-btn:hover { text-decoration: none; }
/* wrapper anchor around a .trp-btn span: carries no styling of its own */
a.trp-btnlink { text-decoration: none !important; color: inherit; display: inline-block; }
a.trp-btnlink:hover { text-decoration: none !important; }

button,
[role="button"],
input[type="submit"],
.trp-dropitem,
.trp-navlink,
.trp-mobilenav a,
a[style*="border-radius: 6px"],  a[style*="border-radius:6px"],
a[style*="border-radius: 8px"],  a[style*="border-radius:8px"],
a[style*="border-radius: 9px"],  a[style*="border-radius:9px"],
a[style*="border-radius: 10px"], a[style*="border-radius:10px"] {
  font-family: 'Saira', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-synthesis: none;
}

@media (max-width: 980px) {

  /* ---- 7. no horizontal scrolling ---- */
  body * { max-width: 100%; }
  /* any capped container gives up its desktop width */
  body [style*="max-width: 1280px"], body [style*="max-width:1280px"],
  body [style*="max-width: 1240px"], body [style*="max-width:1240px"],
  body [style*="max-width: 1180px"], body [style*="max-width:1180px"],
  body [style*="max-width: 1120px"], body [style*="max-width:1120px"],
  body [style*="max-width: 1000px"], body [style*="max-width:1000px"],
  body [style*="max-width: 940px"],  body [style*="max-width:940px"],
  body [style*="max-width: 920px"],  body [style*="max-width:920px"],
  body [style*="max-width: 880px"],  body [style*="max-width:880px"],
  body [style*="max-width: 840px"],  body [style*="max-width:840px"],
  body [style*="max-width: 820px"],  body [style*="max-width:820px"],
  body [style*="max-width: 760px"],  body [style*="max-width:760px"],
  body [style*="max-width: 720px"],  body [style*="max-width:720px"],
  body [style*="max-width: 680px"],  body [style*="max-width:680px"],
  body [style*="max-width: 640px"],  body [style*="max-width:640px"],
  body [style*="max-width: 620px"],  body [style*="max-width:620px"] {
    max-width: 100% !important;
  }

  body section[style*="padding"] { padding-left: 18px !important; padding-right: 18px !important; }

  /* ---- 2 + 3. stack every multi-column grid into one column ---- */
  body [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  body [style*="grid-template-columns"] { gap: 22px !important; }

  /* two-up flex rows (hero text + image, split panels) */
  body [style*="gap: 52px"], body [style*="gap:52px"],
  body [style*="gap: 48px"], body [style*="gap:48px"],
  body [style*="gap: 44px"], body [style*="gap:44px"] {
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* fixed-height media wells become fluid so nothing is cropped or clipped */
  body [style*="min-height: 420px"], body [style*="min-height:420px"],
  body [style*="min-height: 380px"], body [style*="min-height:380px"],
  body [style*="min-height: 360px"], body [style*="min-height:360px"],
  body [style*="min-height: 340px"], body [style*="min-height:340px"],
  body [style*="min-height: 290px"], body [style*="min-height:290px"],
  body [style*="min-height: 280px"], body [style*="min-height:280px"] {
    min-height: 0 !important;
  }

  /* ---- 5. type scales down ---- */
  body h1 { font-size: clamp(28px, 8.4vw, 40px) !important; line-height: 1.12 !important; }
  body h2 { font-size: clamp(23px, 6.4vw, 31px) !important; line-height: 1.16 !important; }
  body h3 { font-size: clamp(19px, 5.2vw, 24px) !important; line-height: 1.22 !important; }
  body h4 { font-size: 17px !important; }
  body p, body li { font-size: 15.5px !important; line-height: 1.62 !important; }

  /* large display numerals (stat tiles, step numbers) */
  body [style*="font-size: 36px"], body [style*="font-size:36px"],
  body [style*="font-size: 40px"], body [style*="font-size:40px"],
  body [style*="font-size: 44px"], body [style*="font-size:44px"],
  body [style*="font-size: 48px"], body [style*="font-size:48px"],
  body [style*="font-size: 52px"], body [style*="font-size:52px"],
  body [style*="font-size: 56px"], body [style*="font-size:56px"],
  body [style*="font-size: 60px"], body [style*="font-size:60px"] {
    font-size: clamp(26px, 7.6vw, 38px) !important;
  }

  /* long uppercase eyebrow/label runs may wrap */
  body [style*="white-space: nowrap"], body [style*="white-space:nowrap"] {
    white-space: normal !important;
  }
  body [style*="letter-spacing: .28em"], body [style*="letter-spacing:.28em"],
  body [style*="letter-spacing: .34em"], body [style*="letter-spacing:.34em"] {
    letter-spacing: .16em !important;
  }

  /* ---- 4. comfortable tap targets ---- */
  body a[style*="border-radius: 8px"],  body a[style*="border-radius:8px"],
  body a[style*="border-radius: 9px"],  body a[style*="border-radius:9px"],
  body a[style*="border-radius: 10px"], body a[style*="border-radius:10px"],
  body button:not(.trp-burger),
  body [role="button"] {
    min-height: 48px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* pill CTAs stay on one line and hug their label */
  body a[style*="border-radius: 8px"],  body a[style*="border-radius:8px"],
  body a[style*="border-radius: 9px"],  body a[style*="border-radius:9px"],
  body a[style*="border-radius: 10px"], body a[style*="border-radius:10px"],
  body button[style*="border-radius"] {
    white-space: nowrap !important;
    width: auto !important;
    flex: 0 0 auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* the hamburger owns its own box */
  body button.trp-burger {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    padding: 13px !important; width: 48px !important; min-width: 48px; height: 48px !important;
    white-space: normal !important;
  }
  body button.trp-burger span { width: 22px !important; min-width: 22px; align-self: center; }

  body [style*="gap: 12px"], body [style*="gap:12px"],
  body [style*="gap: 10px"], body [style*="gap:10px"] { gap: 14px !important; }
  body footer a { min-height: 44px; display: inline-flex; align-items: center; }

  /* ---- home page: one-screen snap sections must not clip on a phone ---- */
  body section[data-screen-label] {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    scroll-snap-align: none !important;
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }
  body div[style*="scroll-snap-type"] {
    scroll-snap-type: none !important;
    height: auto !important;
    overflow-y: visible !important;
  }

  /* ---- 6. carousel: fit the viewport, allow swipe ---- */
  body [style*="perspective"] {
    perspective: 900px !important;
    height: auto !important;
    min-height: 300px;
    touch-action: pan-y;
  }

  body iframe { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }

  /* ---- media wells: full width, never taller than the phone screen ---- */
  body [style*="aspect-ratio"] {
    width: 100% !important;
    max-height: 62vh !important;
  }
  /* fixed pixel heights on image wells become fluid */
  body [style*="height: 470px"], body [style*="height:470px"],
  body [style*="height: 440px"], body [style*="height:440px"],
  body [style*="height: 420px"], body [style*="height:420px"],
  body [style*="height: 400px"], body [style*="height:400px"],
  body [style*="height: 380px"], body [style*="height:380px"],
  body [style*="height: 340px"], body [style*="height:340px"],
  body [style*="height: 300px"], body [style*="height:300px"] {
    height: auto !important;
    min-height: 200px;
  }
  /* images that were sized for a desktop column */
  body img[style*="max-height"] { max-height: 46vh !important; }
  /* side-by-side media + copy blocks always stack */
  body [style*="gap: 54px"], body [style*="gap:54px"],
  body [style*="gap: 50px"], body [style*="gap:50px"],
  body [style*="gap: 40px"], body [style*="gap:40px"],
  body [style*="gap: 36px"], body [style*="gap:36px"] {
    gap: 24px !important;
  }
  /* absolutely-positioned corner overlays return to the flow on a phone */
  body [style*="position: absolute"][style*="top: 14px"],
  body [style*="position:absolute"][style*="top:14px"],
  body [style*="position: absolute"][style*="top: 18px"],
  body [style*="position:absolute"][style*="top:18px"] {
    position: static !important;
    margin: 0 auto 14px !important;
  }
}

/* phones proper */
@media (max-width: 560px) {
  body section[style*="padding"] { padding-left: 14px !important; padding-right: 14px !important; }
  body h1 { font-size: clamp(26px, 8.8vw, 34px) !important; }
  body [style*="justify-content: space-between"], body [style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 14px !important;
  }
}