/* tbos.global — phone layout tidy-up (2026-09-29).
   The page is a static export of a Beaver Builder layout, so these rules target its node ids. Loaded after every BB
   stylesheet and scoped to BB's own mobile breakpoint: desktop and tablet are untouched.
   !important only where the layout sets inline styles (the hero box, the RUN & MAINTAIN spans). Selectors mirror BB's
   own specificity (.fl-node-X.fl-module > .fl-module-content) so that, loaded later, they win without !important. */
@media (max-width: 768px) {

  /* One gutter for everything: 20px each side, and no sideways scroll (the hero row was 400px wide in a 390px screen) */
  .fl-node-5d9d82cd7df0a .fl-row-content { max-width: 100%; }
  .fl-row-content-wrap { overflow-x: clip; }

  /* Body copy: calmer line height (the rich-text blocks ran at ~2.0) */
  .fl-row .fl-rich-text p, .fl-row .fl-rich-text li,
  .fl-row .fl-rich-text p *, .fl-row .fl-rich-text li * { line-height: 1.6; }
  .fl-row .fl-rich-text p { margin-bottom: 12px; }
  .fl-row .fl-rich-text p:last-child { margin-bottom: 0; }
  .fl-row .fl-rich-text ul { margin: 0; padding-left: 20px; }

  /* Header (Jason 09-29, option B): one 64px bar. Small logo + tagline left, round call / email buttons right.
     The whole button is the link (the icon itself isn't one, so the text link is stretched over it). */
  .fl-node-5d95fe11c8103 .fl-col-group { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; }
  .fl-node-5d95fe11c8103 .fl-col { width: auto !important; float: none !important; }
  .fl-node-5d95ff8a9abb0.fl-module > .fl-module-content { margin: 0; }
  .fl-node-5d95ff8a9abb0 .fl-photo { text-align: left; }
  .fl-node-5d95ff8a9abb0 .fl-photo-content { width: auto !important; }
  .fl-node-5d95fe11ca1f4 { flex: 1 1 auto; min-width: 0; } /* logo column was a fixed 250px: pushed the buttons off a 360px screen */
  .fl-node-5d95fe11ca1f8 { flex: 0 0 auto; }
  .fl-node-5d95ff8a9abb0 .fl-photo-img { width: 120px !important; height: auto; }
  .fl-node-5d9f27c2ae4e4.fl-module > .fl-module-content { margin: 3px 0 0; }
  .fl-node-5d9f27c2ae4e4 .fl-rich-text, .fl-node-5d9f27c2ae4e4 .fl-rich-text * { font-size: 11px !important; line-height: 1.2 !important; text-align: left !important; }
  .fl-node-5d95fe11ca1f8 > .fl-col-content { display: flex; gap: 10px; }
  .fl-node-5da89292ea752.fl-module > .fl-module-content,
  .fl-node-5d9d7d04cadc2.fl-module > .fl-module-content { margin: 0; }
  .fl-node-5da89292ea752 .uabb-list-icon-wrap, .fl-node-5d9d7d04cadc2 .uabb-list-icon-wrap {
    position: relative; width: 42px; height: 42px; margin: 0 !important; border-radius: 50%; background: #14649f;
    display: flex; align-items: center; justify-content: center; }
  .fl-node-5da89292ea752 .uabb-callout-outter, .fl-node-5d9d7d04cadc2 .uabb-callout-outter { margin: 0 !important; }
  .fl-node-5da89292ea752 .uabb-icon-wrap, .fl-node-5d9d7d04cadc2 .uabb-icon-wrap,
  .fl-node-5da89292ea752 .uabb-icon, .fl-node-5d9d7d04cadc2 .uabb-icon { background: none !important; width: auto !important; height: auto !important; line-height: 1 !important; }
  .fl-node-5da89292ea752 .uabb-icon i, .fl-node-5d9d7d04cadc2 .uabb-icon i { color: #fff !important; font-size: 17px !important; width: auto !important; height: auto !important; line-height: 1 !important; }
  /* The glyph is drawn by i::before, which UABB colours itself; and the (hidden) text box kept 14px of padding in the
     circle, pushing the icon off-centre. Zero it out of the flow while its link still covers the whole circle. */
  .fl-node-5da89292ea752 .uabb-icon i::before, .fl-node-5d9d7d04cadc2 .uabb-icon i::before { color: #fff !important; }
  .fl-node-5da89292ea752 .uabb-list-icon-text, .fl-node-5d9d7d04cadc2 .uabb-list-icon-text {
    position: static; flex: 0 0 0; width: 0; min-width: 0; margin: 0 !important; padding: 0 !important; }
  .fl-node-5da89292ea752 .uabb-list-icon-text-heading, .fl-node-5d9d7d04cadc2 .uabb-list-icon-text-heading { margin: 0 !important; padding: 0 !important; }
  .fl-node-5da89292ea752 .uabb-list-icon-text-heading a, .fl-node-5d9d7d04cadc2 .uabb-list-icon-text-heading a {
    position: absolute; inset: 0; font-size: 0 !important; border-radius: 50%; }

  /* Hero (option B): the photo as a clean strip, zoomed on the truck, then the headline + button on a grey panel that
     runs straight on from it, so photo and text are one block. The panorama (1920x600) is drawn on ::before so it
     can be zoomed and cropped independently of the text. */
  .fl-node-5d9d82cd7df0a.fl-row > .fl-row-content-wrap { display: block; min-height: 0; padding: 0 0 26px; background: #e9edf1 !important; }
  .fl-node-5d9d82cd7df0a.fl-row > .fl-row-content-wrap::before { content: ""; display: block; height: 64vw; max-height: 320px; margin-bottom: 22px;
    background: url(/wp-content/uploads/TBOS-Website-Header3.jpg) 46% 62% / auto 138% no-repeat; }
  .fl-node-5d9d82cd7df0a .fl-row-content { min-height: 0; }
  .fl-node-5d9d82cd888cd { display: none; } /* empty 70px spacer column (desktop layout) */
  .fl-node-5d9f4ab65103a.fl-module > .fl-module-content { margin: 0 20px; }
  .fl-node-5d9f4ab65103a .fl-rich-text p { background: none !important; padding: 0 !important; }
  .fl-node-5d9f4ab65103a .fl-rich-text, .fl-node-5d9f4ab65103a .fl-rich-text * { text-align: left !important; }
  .fl-node-5d9f4ab65103a .fl-rich-text p, .fl-node-5d9f4ab65103a .fl-rich-text p * { line-height: 1.08; }
  .fl-node-5d9f4ab65103a .fl-rich-text span { color: rgb(58, 182, 78) !important; font-size: 19px !important; letter-spacing: .3px; } /* page's kicker green: the lime was unreadable on grey */
  .fl-node-5d9f4ab65103a .fl-rich-text span + br + span { color: rgb(24, 107, 160) !important; font-size: clamp(30px, 9.4vw, 40px) !important; letter-spacing: 0; }
  .fl-node-5da896dda2001.fl-module > .fl-module-content { margin: 18px 20px 0; }
  /* The next section was the same pale grey: white on phones, so the hero panel reads as its own block */
  .fl-node-5d96003d4cd56.fl-row > .fl-row-content-wrap { background-color: #fff; }

  /* Section spacing: one rhythm (they ranged from 0 to 80px) */
  .fl-node-5d96003d4cd56.fl-row > .fl-row-content-wrap { padding: 28px 0 20px; }
  .fl-node-5d9d89662f73f.fl-row > .fl-row-content-wrap { padding: 24px 0 8px; }
  .fl-node-5d9d8b54e9a1d.fl-row > .fl-row-content-wrap { padding: 32px 0; }
  .fl-node-5d96011850b63.fl-row > .fl-row-content-wrap { padding: 32px 0 16px; }
  .fl-node-5d9d92acaa272.fl-row > .fl-row-content-wrap { padding: 28px 0 8px; }

  /* Headings: one scale. Section titles 24–26px, feature titles 21px; the 58px "RUN & MAINTAIN" was a desktop size */
  .fl-node-5d9d7f9fe70fc.fl-module > .fl-module-content { margin: 0 20px 12px; }
  .fl-node-5d9d7f9fe70fc .fl-rich-text p, .fl-node-5d9d7f9fe70fc .fl-rich-text p * { line-height: 1.2; }
  .fl-node-5d9d7f9fe70fc .fl-rich-text span[style*="font-size"] { font-size: 26px !important; }
  .fl-node-5d9d88b793cd9.fl-module > .fl-module-content,
  .fl-node-5d9d86cb8cf34.fl-module > .fl-module-content,
  .fl-node-5d9d86cb8cf36.fl-module > .fl-module-content { margin: 12px 20px; }
  .fl-node-5da89912661e4.fl-module > .fl-module-content { margin: 16px 20px 24px; }

  .fl-node-5d9d8b54e9ad1.fl-module > .fl-module-content { margin: 0 20px 12px; }
  .fl-node-5d9d8b54e9ad1 .fl-rich-text p { font-size: 19px; }
  .fl-node-5d9d8b54e9ad1 .fl-rich-text p, .fl-node-5d9d8b54e9ad1 .fl-rich-text p * { line-height: 1.15; }
  .fl-node-5d9d8b54e9ad1 .fl-rich-text span { font-size: 34px !important; }
  .fl-node-5d9d8b54e9ad3.fl-module > .fl-module-content { margin: 0 20px 8px; }
  .fl-node-5d9d8b54e9ad3 .fl-rich-text p, .fl-node-5d9d8b54e9ad3 .fl-rich-text p * { font-size: 18px !important; line-height: 1.5; }
  .fl-node-5d9f6741cd3b9.fl-module > .fl-module-content { margin: 16px 20px; }
  .fl-node-5d9d8bc477cd8.fl-module > .fl-module-content,
  .fl-node-5d9d8bce8fb2f.fl-module > .fl-module-content { margin: 12px 20px; }

  .fl-node-5d96015cc159b.fl-module > .fl-module-content { margin: 0 20px 8px; }
  .fl-node-5d9d90b0d564b.fl-module > .fl-module-content { margin: 0 20px 8px; }
  .fl-node-5da8a9907fe56.fl-module > .fl-module-content,
  .fl-node-5da8aa1a26be6.fl-module > .fl-module-content,
  .fl-node-5da8aa1925e07.fl-module > .fl-module-content { margin: 20px 20px 12px; }
  .fl-node-5da86a1b0cab1.fl-module .fl-heading, .fl-node-5d9d916c67d7e.fl-module .fl-heading, .fl-node-5da86a155e5d3.fl-module .fl-heading { font-size: 21px; line-height: 1.3; }
  .fl-node-5d9d91b970a37.fl-module > .fl-module-content,
  .fl-node-5da86a17cc78b.fl-module > .fl-module-content,
  .fl-node-5da86a18dc21c.fl-module > .fl-module-content { margin: 6px 20px 8px; }

  /* Download button: same weight as the other CTAs */
  .fl-node-5d9612383f637.fl-row > .fl-row-content-wrap { min-height: 0; }
  .fl-node-5d9612383f637 .fl-row-content { min-height: 0; }
  .fl-node-5d9d930797d90.fl-module > .fl-module-content { margin: 16px 20px; }
  .fl-node-5d9d930797d90 a.fl-button { padding: 14px 18px; }
  .fl-node-5d9d930797d90 a.fl-button .fl-button-text,
  .fl-node-5d9d930797d90 a.fl-button i { font-size: 17px; line-height: 1.35; }

  /* The two "See how you can meet OCS" buttons: same size as the download button */
  .fl-node-5da896dda2001 a.uabb-button, .fl-node-5da89912661e4 a.uabb-button { padding: 14px 18px; }
  .fl-node-5da896dda2001 .uabb-button-text, .fl-node-5da89912661e4 .uabb-button-text { font-size: 17px; line-height: 1.35; }

  /* Empty spacer rows between blocks */
  .fl-node-5d9f351cd77b9 { display: none; }
  .fl-node-5dcd6b4d2909c.fl-row > .fl-row-content-wrap { padding: 0; }
  .fl-node-5da893214aff6.fl-module > .fl-module-content,
  .fl-node-5dcd6b4d29134.fl-module > .fl-module-content { margin: 24px 20px; }

  /* Free consultation + form */
  .fl-node-5d9f2ca89b508.fl-module > .fl-module-content { margin: 0 20px 8px; }
  .fl-node-5d9f2ca89b508.fl-module .fl-heading { font-size: 24px; }
  .fl-node-5d9f2cbe2ccca.fl-module > .fl-module-content { margin: 0 20px 12px; }
  .fl-node-5da8a61655ba2.fl-module > .fl-module-content { margin: 0 20px 8px; }
  /* Submit: full width, site font + the same blue as the other buttons (it was Arial 15px, half width) */
  .fl-node-5da8a61655ba2 .uabb-contact-form-submit { width: 100%; padding: 14px 18px; background: rgb(20, 100, 159); border-radius: 4px;
    font-family: Lato, sans-serif; font-size: 17px; line-height: 1.35; }
  .fl-node-5da8a61655ba2 .uabb-contact-form-submit .uabb-contact-form-button-text { font: inherit; }

  /* OCS + SolvAir: long paragraphs read better left-aligned, on the shared 20px gutter */
  .fl-node-5d9f34bf61550.fl-module > .fl-module-content { margin: 28px 20px 12px; }
  .fl-node-5d960144520e8.fl-module > .fl-module-content { margin: 0 20px; }
  .fl-node-5d960144520e8 .fl-rich-text p { text-align: left !important; }
  .fl-node-5d9f68dfde3b2.fl-module > .fl-module-content { margin: 0 20px 12px; }
  .fl-node-5d9f68dfde3b2 .uabb-imgicon-wrap { text-align: center; }
  .fl-node-5d9f68dfde118.fl-row > .fl-row-content-wrap,
  .fl-node-5dcd6a05748c8.fl-row > .fl-row-content-wrap { margin-left: 0; margin-right: 0; } /* rows had 40px side margins on top of the gutter */
  /* Partner logos: modest and centred (UABB sizes the wrapper, not the img) */
  .fl-node-5d9f68dfde3b2.fl-module .uabb-image .uabb-image-content { width: 180px; }
  .fl-node-5dcd6a0574a69.fl-module .uabb-image .uabb-image-content { width: 190px; }
  .fl-node-5d9f68dfde3b2.fl-module .uabb-image, .fl-node-5dcd6a0574a69.fl-module .uabb-image { text-align: center; }
  .fl-node-5d9f68dfde3b6.fl-module > .fl-module-content { margin: 0 20px; }

  /* Distribution partners: site font + the shared gutter (it used Helvetica and a 40–60px indent) */
  .fl-node-5dcd6b3ec6425.fl-module > .fl-module-content { margin: 0 20px 12px; }
  .fl-node-5dcd6b3ec6425.fl-module .fl-heading,
  .fl-node-5dcd6a0574a6b h3 { font-family: Lato, sans-serif; }
  .fl-node-5dcd6b3ec6425.fl-module .fl-heading { font-size: 24px; text-align: center; }
  .fl-node-5dcd6a0574a69.fl-module > .fl-module-content { margin: 0 20px 12px; }
  .fl-node-5dcd6a0574a6b.fl-module > .fl-module-content { margin: 0 20px 28px; }
  .fl-node-5dcd6a0574a6b h3 { font-size: 21px; margin: 0 0 8px; }
  .fl-node-5dcd6a0574a6b .fl-rich-text p { margin-bottom: 8px; word-break: break-word; }

  /* Footer: everything on one centre line (the icons were pushed into place with 55–88px side margins) */
  .fl-node-5d9f69f912065.fl-row > .fl-row-content-wrap { padding: 28px 0 20px; }
  .fl-node-5d9f6a84dbe9f.fl-col > .fl-col-content { padding-bottom: 0; } /* logo column carried 60px of desktop padding */
  .fl-node-5d9f69f9121cf.fl-module > .fl-module-content,
  .fl-node-5d9f69f9121d0.fl-module > .fl-module-content { margin: 0 20px 12px; }
  .fl-node-5d9f69f9121d2.fl-module > .fl-module-content,
  .fl-node-5da89514b22f3.fl-module > .fl-module-content { margin: 0 20px; display: flex; justify-content: center; }
  .fl-node-5d9f6d13dc328.fl-module > .fl-module-content { margin: 16px 20px 4px; }
  .fl-node-5d9f6d13dc328 .fl-rich-text p { text-align: center !important; }
  .fl-node-5d9f6dbad99e9.fl-module > .fl-module-content { margin: 0 20px; }
  .fl-node-5d9f6dbad99e9 .fl-icon-group { text-align: center; }
  .fl-node-5d9f6dbad99e9 .fl-icon:has(a[href="#"]) { display: none; } /* Instagram link is "#": goes nowhere */
  .fl-node-5d9f713588119.fl-module > .fl-module-content { margin: 16px 20px 0; }
}