/*
 * Phone fixes, 15 October 2026.
 *
 * The owner's ask: "build everything for mobile first, as everyone uses their
 * phone these days". Every page was looked at on a 390x844 and a 360x800
 * screen; these are the faults that showed, each one measured before and
 * after. Every rule in the first block sits behind max-width: 767px, so
 * tablets and desktops render exactly as before. Linked on every page next to
 * fit-motion.css by tools/inject-motion.mjs, so `npm run motion:remove` takes
 * it out with the rest of the layer.
 *
 * The desktop review of 18 October 2026 added three blocks at the end, for
 * tablet and desktop widths only; the phone block is unchanged. The SEOptimer
 * fixes the same night added the last block: classes for styles that used to
 * be inline style="" attributes, at every width.
 */
@media (max-width: 767px) {

  /* The chat's "Need Roofing Help?" note sat fixed over the bottom right of
     every screen (169x61, above the chat button), on top of buttons, card
     text and the copyright line, with a 14px close cross. The chat button
     itself stays where it is. */
  #welcomeMessages { display: none !important; }

  /* Intro paragraphs set at 25px on a 24px line (Elementor's per-widget
     typography, written for desktop): on a phone they ran 9 to 13 lines
     with the lines almost touching (service and city heroes, About's mission
     and vision, the "Comprehensive roofing solutions" and "A simple,
     transparent process" lines, the closing "Schedule your free inspection").
     20px on a 1.45 line. */
  .elementor-element-055947b, .elementor-element-085d654, .elementor-element-08f548a,
  .elementor-element-13ecfb0, .elementor-element-24faa2b, .elementor-element-2a8f097,
  .elementor-element-2b2578e, .elementor-element-33cf717, .elementor-element-34d8a5f,
  .elementor-element-431ab08, .elementor-element-48a41e0, .elementor-element-6680d1a,
  .elementor-element-688aafc, .elementor-element-6e16d32, .elementor-element-7c534c8,
  .elementor-element-7cdb279, .elementor-element-9868567, .elementor-element-ccbb09d,
  .elementor-element-e4822e5, .elementor-element-f03bf90, .elementor-element-fbd4da7 {
    font-size: 20px !important;
    line-height: 1.45 !important;
    /* Several of them were also held to 65% of the screen (254px of 390). */
    --container-widget-width: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* FAQ answers on the nine service pages were 13px. */
  .elementor-element-74c50af, .elementor-element-4519de2, .elementor-element-78ae937,
  .elementor-element-b240882, .elementor-element-3d948a3 {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* The menu button was 33px square and drawn in dark grey (#33373D) on the
     near-black header, hard to see and to hit. 44px, in the logo's light
     tone. */
  .elementor-location-header .elementor-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    padding: 9px !important;
    /* the extra 11px overlaps the header's own padding, so the bar keeps
       its 103px height */
    margin-top: -5.5px !important;
    margin-bottom: -5.5px !important;
    color: #E9E1D6 !important;
    fill: #E9E1D6 !important;
  }
  .elementor-location-header .elementor-menu-toggle svg {
    width: 26px !important;
    height: 26px !important;
    fill: #E9E1D6 !important;
  }

  /* Buttons were 39px tall; 44px is the smallest comfortable tap. */
  .elementor-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Footer link lists (Services, Quick Links): 24px rows packed together.
     40px rows, same order and wording. */
  .elementor-location-footer .elementor-icon-list-item > a {
    display: flex;
    min-height: 40px;
    align-items: center;
  }

  /* Blog posts: the title and the article each had 12% padding inside a
     padded column, so the text ran 281px wide on a 390px phone (about 35
     characters a line). 20px from the screen edge instead, like the
     picture above them. */
  .elementor-location-single .elementor-widget-theme-post-content,
  .elementor-location-single .elementor-widget-theme-post-title,
  .elementor-location-single .elementor-element-96be4d4 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Form fields were 15px: iPhone Safari zooms the page into any field under
     16px when it is tapped. */
  .elementor-field-textual {
    font-size: 16px !important;
  }

  /* The homepage "Book Now" band (and the same band on /fort-worth/ and
     /home-2/) painted a 1920x1080 photograph, 711 KB, behind the form on a
     390px phone. The same picture at 1024x576 (117 KB) is plenty for a
     phone-sized band. */
  .elementor-12 .elementor-element.elementor-element-eb25e37:not(.elementor-motion-effects-element-type-background),
  .elementor-545 .elementor-element.elementor-element-16ede0f:not(.elementor-motion-effects-element-type-background),
  .elementor-767 .elementor-element.elementor-element-cf01e9c:not(.elementor-motion-effects-element-type-background) {
    background-image: url("/wp-content/uploads/2026/03/portfolio-1024x576.webp") !important;
  }

  /* Service page heroes (16 October 2026): roof replacement painted a
     1920x1080 photograph (394 KB), roof repair a 1920x1080 one (322 KB) and
     storm repair a 1440x842 one (236 KB). Phones get 1024px WebP copies of
     the same pictures (110, 88 and 112 KB).
     The motion layer (fit-motion.js, initHero) reads this section's computed
     background once at load, copies it onto div.fit-hero-bg__img, then
     switches the section's own background off with a one-class
     `background-image: none !important` rule. :where() keeps these rules at
     zero specificity, so they still beat Elementor's (not !important) but
     lose to that switch-off rule: the layer gets the small copy and the
     section does not paint it a second time underneath. */
  :where(.elementor-155 .elementor-element.elementor-element-7f96697:not(.elementor-motion-effects-element-type-background)) {
    background-image: url("/wp-content/uploads/2026/03/roof-replacement-texas-photo-by-paragon-exterior-on-unsplash-1024x576.webp") !important;
  }
  :where(.elementor-192 .elementor-element.elementor-element-7f96697:not(.elementor-motion-effects-element-type-background)) {
    background-image: url("/wp-content/uploads/2026/03/roof-repair-texas-1024x576.webp") !important;
  }
  :where(.elementor-193 .elementor-element.elementor-element-7f96697:not(.elementor-motion-effects-element-type-background)) {
    background-image: url("/wp-content/uploads/2026/03/storm-repair-texas-1024x599.webp") !important;
  }

  /* Lattice pattern bands (18 October 2026). The dark bands on 27 pages tile
     a 2560x2560 PNG (196 KB) and the homepage's white counters band another
     (111 KB), each drawn at 20% of the band's width: 78px a tile on a 390px
     phone. Phones get 1024x1024 lossless WebP copies of the same artwork
     (43 and 16 KB); the tile size, colour and position stay as they were.
     "Pattern" stays in the file names because fit-motion.js finds these
     bands by that word in the computed background (seams and lattice).
     :where() and !important, as for the service page heroes above. */
  :where(
    .elementor-12 .elementor-element.elementor-element-98362bf:not(.elementor-motion-effects-element-type-background),
    .elementor-12 .elementor-element.elementor-element-d295875:not(.elementor-motion-effects-element-type-background),
    .elementor-12 .elementor-element.elementor-element-bdf28a8:not(.elementor-motion-effects-element-type-background),
    .elementor-12 .elementor-element.elementor-element-04efcb2:not(.elementor-motion-effects-element-type-background),
    .elementor-767 .elementor-element.elementor-element-98362bf:not(.elementor-motion-effects-element-type-background),
    .elementor-767 .elementor-element.elementor-element-72d9e19:not(.elementor-motion-effects-element-type-background),
    .elementor-767 .elementor-element.elementor-element-ae519ca:not(.elementor-motion-effects-element-type-background),
    .elementor-767 .elementor-element.elementor-element-04efcb2:not(.elementor-motion-effects-element-type-background),
    .elementor-15 .elementor-element.elementor-element-b310728:not(.elementor-motion-effects-element-type-background),
    .elementor-15 .elementor-element.elementor-element-543d45b:not(.elementor-motion-effects-element-type-background),
    .elementor-15 .elementor-element.elementor-element-289f783:not(.elementor-motion-effects-element-type-background),
    .elementor-15 .elementor-element.elementor-element-8559d1f:not(.elementor-motion-effects-element-type-background),
    .elementor-15 .elementor-element.elementor-element-f62f9d9:not(.elementor-motion-effects-element-type-background),
    .elementor-17 .elementor-element.elementor-element-b1b6eed:not(.elementor-motion-effects-element-type-background),
    .elementor-17 .elementor-element.elementor-element-8421461:not(.elementor-motion-effects-element-type-background),
    .elementor-17 .elementor-element.elementor-element-08d3f0d:not(.elementor-motion-effects-element-type-background),
    .elementor-155 .elementor-element.elementor-element-b1b6eed:not(.elementor-motion-effects-element-type-background),
    .elementor-155 .elementor-element.elementor-element-08d3f0d:not(.elementor-motion-effects-element-type-background),
    .elementor-191 .elementor-element.elementor-element-b1b6eed:not(.elementor-motion-effects-element-type-background),
    .elementor-191 .elementor-element.elementor-element-08d3f0d:not(.elementor-motion-effects-element-type-background),
    .elementor-192 .elementor-element.elementor-element-b1b6eed:not(.elementor-motion-effects-element-type-background),
    .elementor-192 .elementor-element.elementor-element-08d3f0d:not(.elementor-motion-effects-element-type-background),
    .elementor-193 .elementor-element.elementor-element-b1b6eed:not(.elementor-motion-effects-element-type-background),
    .elementor-193 .elementor-element.elementor-element-08d3f0d:not(.elementor-motion-effects-element-type-background),
    .elementor-194 .elementor-element.elementor-element-b1b6eed:not(.elementor-motion-effects-element-type-background),
    .elementor-194 .elementor-element.elementor-element-08d3f0d:not(.elementor-motion-effects-element-type-background),
    .elementor-195 .elementor-element.elementor-element-b1b6eed:not(.elementor-motion-effects-element-type-background),
    .elementor-195 .elementor-element.elementor-element-08d3f0d:not(.elementor-motion-effects-element-type-background),
    .elementor-196 .elementor-element.elementor-element-b1b6eed:not(.elementor-motion-effects-element-type-background),
    .elementor-196 .elementor-element.elementor-element-08d3f0d:not(.elementor-motion-effects-element-type-background),
    .elementor-197 .elementor-element.elementor-element-b1b6eed:not(.elementor-motion-effects-element-type-background),
    .elementor-197 .elementor-element.elementor-element-08d3f0d:not(.elementor-motion-effects-element-type-background),
    .elementor-504 .elementor-element.elementor-element-b6bc6aa:not(.elementor-motion-effects-element-type-background),
    .elementor-538 .elementor-element.elementor-element-b6bc6aa:not(.elementor-motion-effects-element-type-background),
    .elementor-540 .elementor-element.elementor-element-b6bc6aa:not(.elementor-motion-effects-element-type-background),
    .elementor-541 .elementor-element.elementor-element-b6bc6aa:not(.elementor-motion-effects-element-type-background),
    .elementor-545 .elementor-element.elementor-element-b6bc6aa:not(.elementor-motion-effects-element-type-background),
    .elementor-19 .elementor-element.elementor-element-691d38a:not(.elementor-motion-effects-element-type-background),
    .elementor-292 .elementor-element.elementor-element-5863e79:not(.elementor-motion-effects-element-type-background)) {
    background-image: url("/wp-content/uploads/2026/03/Pattern_1760821232732-BxRKkN_8-1024x1024.webp") !important;
  }
  :where(
    .elementor-12 .elementor-element.elementor-element-2eb0266:not(.elementor-motion-effects-element-type-background),
    .elementor-767 .elementor-element.elementor-element-2eb0266:not(.elementor-motion-effects-element-type-background)) {
    background-image: url("/wp-content/uploads/2026/03/Pattern_4_1760819902693-D2fJIe4A-1024x1024.webp") !important;
  }

  /* Homepage hero (18 October 2026). On a phone the hero box is about 390px
     wide and 2,000px tall, and the 1408x768 photograph (256 KB) is drawn with
     `cover`, so only the middle tenth of its width shows (a fifth at 767px).
     Phones get the middle 608x768 of the same photograph (115 KB), cut
     around the same centre at full resolution: the box would have to be
     wider than 0.79 of its height before any edge of the cut could show, so
     the picture on screen is the same. index.html preloads this copy for
     phones. :where() lets fit-motion.js (initHero) copy it onto its layer
     and then switch the section's own background off, as for the service
     page heroes above. */
  :where(.elementor-12 .elementor-element.elementor-element-982bd2a:not(.elementor-motion-effects-element-type-background)) {
    background-image: url("/wp-content/uploads/2026/03/Premium_residential_roof_hero_image_5360bc36-DRkZuqw1-608x768.webp") !important;
  }

  /* Card photo (18 October 2026). The roofer with the nail gun (services
     hub, the eight service pages, attic insulation and solar panel removal:
     eleven pages) is an 825x1024 WebP, 207 KB, drawn with `contain`
     in a box 300px tall: 242x300 on a phone. Phones get a 680x845 copy of
     the same picture (135 KB). */
  :where(
    .elementor-17 .elementor-element.elementor-element-d8c92af:not(.elementor-motion-effects-element-type-background),
    .elementor-155 .elementor-element.elementor-element-d8c92af:not(.elementor-motion-effects-element-type-background),
    .elementor-191 .elementor-element.elementor-element-d8c92af:not(.elementor-motion-effects-element-type-background),
    .elementor-192 .elementor-element.elementor-element-d8c92af:not(.elementor-motion-effects-element-type-background),
    .elementor-193 .elementor-element.elementor-element-d8c92af:not(.elementor-motion-effects-element-type-background),
    .elementor-194 .elementor-element.elementor-element-d8c92af:not(.elementor-motion-effects-element-type-background),
    .elementor-195 .elementor-element.elementor-element-d8c92af:not(.elementor-motion-effects-element-type-background),
    .elementor-196 .elementor-element.elementor-element-d8c92af:not(.elementor-motion-effects-element-type-background),
    .elementor-197 .elementor-element.elementor-element-d8c92af:not(.elementor-motion-effects-element-type-background)) {
    background-image: url("/wp-content/uploads/2026/03/Confident-roofer-with-pneumatic-nail-gun-680x845.webp") !important;
  }

  /* Breadcrumb links (18 October 2026) on the blog posts and the blog and tag
     pages ("Home", "Roofing Blog") were 15px tall, a small tap. Padding on
     the inline link makes the tap area 44px tall and 12px wider; on an
     inline box vertical padding does not move the line, and the negative
     side margins give back the side padding, so nothing on screen moves.
     Most of it goes above the link, where the space is empty: on a post the
     breadcrumb's second line (the post title) starts 3px below the links,
     and text painted after a link takes the tap where the two overlap. */
  .elementor-widget-breadcrumbs a {
    padding: 26px 6px 3px;
    margin: 0 -6px;
  }
}

/*
 * Desktop review, 18 October 2026. Measured at 1440, 1365, 1280, 1100, 1025
 * and 768 to 1024 before and after; nothing below 768px changes.
 */

/* The header menu on narrow desktops. Its six links need 770px at 16px with
   20px either side, and from 1025 to about 1360 the menu column is narrower
   (570px at 1025, 723px at 1280), so "Contact" (and at 1100 "Roofing Blog")
   wrapped to a second row and the fixed header grew from 102 to 132px. The
   page below is pushed down by a copy of the header that wrapped differently,
   so at 1280 the contact page's H1 started 6px under the header's edge. The
   side padding now shrinks with the screen (7px from 1025 to 1143, 14px at
   1280, 19.6px at 1400, 20px above) and below 1140 the links drop to 14px;
   one row at every width, header 89 to 101px. The range runs past 1365 to
   1400 because a Windows scrollbar takes 17px: a 1366px screen lays the page
   out at 1349px, where the 20px padding still wrapped. Checked with and
   without a scrollbar: one row everywhere, at least 10px to spare. */
@media (min-width: 1025px) and (max-width: 1400px) {
  .elementor-location-header .elementor-nav-menu--main .elementor-item {
    padding-left: clamp(7px, 4.9vw - 49px, 20px) !important;
    padding-right: clamp(7px, 4.9vw - 49px, 20px) !important;
  }
}
@media (min-width: 1025px) and (max-width: 1139px) {
  .elementor-location-header .elementor-nav-menu--main .elementor-item {
    font-size: 14px !important;
  }
}

/* The menu button on tablets, 768 to 1024px: the same rule as on phones
   (15 October, in the phone block above). It was 33px square and #33373D on
   the #1A1A1A header, about 1.5:1, and so was the close cross. 44px, in the
   logo's light tone (about 13:1); the header stays 103px. The open menu
   itself is not restyled. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-location-header .elementor-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    padding: 9px !important;
    margin-top: -5.5px !important;
    margin-bottom: -5.5px !important;
    color: #E9E1D6 !important;
    fill: #E9E1D6 !important;
  }
  .elementor-location-header .elementor-menu-toggle svg {
    width: 26px !important;
    height: 26px !important;
    fill: #E9E1D6 !important;
  }
}

/* FAQ answers on the eleven service pages (roof replacement, attics, solar
   panel removal and the rest) were 13px on tablets and desktops as well.
   16px, as the phone block already sets. */
@media (min-width: 768px) {
  .elementor-element-74c50af, .elementor-element-4519de2, .elementor-element-78ae937,
  .elementor-element-b240882, .elementor-element-3d948a3 {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
}

/* Inline styles moved here, 18 October 2026 (SEOptimer "inline styles").
   Each was a style="" attribute repeated in the page HTML; the classes below
   carry exactly the same declarations, at every width. Left inline on
   purpose: Tag Manager's noscript iframe (Google's standard snippet), the
   enquiry form's hidden spam-trap field (it must stay hidden even if this
   file fails to load) and the reviews widget's template (Trustindex's). */
/* "Founder" in "About the Founder of FIT Roofing & Construction" (18 pages). */
.fit-accent { color: #A1805A; }
/* The city name in the city-page H1s ("... in Fort Worth"), 5 pages. */
.fit-accent-city { color: #d9a25f; font-style: italic; font-weight: 900; }
/* The phone number link on /contact/ takes its paragraph's colour. */
.elementor-icon-box-description a.fit-inherit { color: inherit; }
/* The Google map in the footer of every page (was style="border:0;"). */
.elementor-widget-html iframe.fit-map { border: 0; }

/* The phone number in the header, 24 October 2026. (214) 714-0071 as a
   tap-to-call text link on every page, set like the menu links (AR One Sans
   600, white, the accent #A1805A on hover). The menu column has no width to
   spare (the narrow-desktop block above), so from 768px up the number sits
   in the button column, right-aligned above "Get A Free Inspection"; that
   column loses its 10px top and bottom padding (it has no background) so the
   header keeps its height. On phones the button column is hidden, so a
   second copy sits in the bar between the logo and the menu button, inside
   the menu widget and on the button's row (the button's -5.5px top margin
   from the phone block above; 44px button plus 8px gap), so it follows the
   button as the logo grows. The open menu is not touched. */
.fit-header-phone { display: none; }
.fit-header-phone__link {
  font-family: var(--e-global-typography-primary-font-family), Sans-serif;
  font-weight: var(--e-global-typography-primary-font-weight);
  font-size: 16px;
  line-height: 20px;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
}
.fit-header-phone__link:hover,
.fit-header-phone__link:focus { color: #A1805A; }
@media (min-width: 768px) {
  .elementor-location-header .elementor-element-42e07f3 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    row-gap: 4px !important;
  }
  /* flex, so the line is exactly the link's height (a block's own line box
     was 6px taller and grew the header at 1025 to 1139) */
  .fit-header-phone--wide {
    display: flex;
    justify-content: flex-end;
  }
  /* a 28px tap area without making the line taller */
  .fit-header-phone--wide .fit-header-phone__link {
    display: inline-block;
    padding: 4px 0;
    margin: -4px 0;
  }
}
/* Where the button text wraps to two lines (56px tall) and the menu drops
   to 14px. */
@media (min-width: 768px) and (max-width: 1139px) {
  .elementor-location-header .elementor-element-42e07f3 { row-gap: 2px !important; }
  .fit-header-phone--wide .fit-header-phone__link { font-size: 14px; line-height: 18px; }
}
@media (max-width: 767px) {
  .fit-header-phone--bar {
    display: flex;
    align-items: center;
    position: absolute;
    top: -5.5px;
    right: 52px;
    height: 44px;
  }
  .fit-header-phone--bar .fit-header-phone__link {
    font-size: 15px;
    line-height: 44px;
  }
}
@media (max-width: 374px) {
  .fit-header-phone--bar .fit-header-phone__link { font-size: 13px; }
}

/* /plano/: the "Plano roof permits" card, 24 October 2026. It sits under the
   Service Coverage card and the map, across the full row, drawn like that
   card (1px primary border, 25px corners and padding, the same heading and
   text). The text stops at about 75 characters a line so it stays readable
   across 1,120px. Positioned, like Elementor's own blocks, so it paints
   above the section's 90% black overlay. Batch 3 (24 Oct 2026) puts the same
   card, with these class names, on /fort-worth/ and /arlington/ too. */
.fit-plano-permits {
  position: relative;
  box-sizing: border-box;
  width: calc(100% - 20px);
  margin: 10px;
  padding: 25px;
  border: 1px solid var(--e-global-color-primary);
  border-radius: 25px;
}
.fit-plano-permits__title {
  margin: 0 0 20px;
  font-family: "AR One Sans", Sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 1;
  color: #FFFFFF;
}
.fit-plano-permits p {
  max-width: 46em;
  margin: 0;
  font-family: "Roboto", Sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #A7A7A7;
}

/* Batch 2 (24 Oct 2026): the Service Coverage card on the town pages got shorter text; stretch it to the map's height from tablet width up. */
@media (min-width: 768px){.elementor-element.elementor-element-ec7c6c7{--align-self:stretch;align-self:stretch}}

/* Phone audit, 28 Oct 2026 (owner: "everything we do needs to be mobile friendly").
   1. The menu opened as a 138px white strip on the right with 13px links and 11px
      sub-links; with Services open its last four links (Portfolio, Roofing Locations,
      Roofing Blog, Contact) sat below a 667px screen. A swipe beside the strip scrolled
      the page, not the menu, and the chat button sat on its last rows. Now a full-width
      panel under the 83px header bar: 17px links on 48px rows, its own scroll within
      the space left on screen, no scroll chaining to the page, and the chat button
      hidden while it is open.
   2. html/body clip sideways overflow: two service pages shifted 2-3px sideways while a
      slide-in animation ran. clip, unlike hidden, leaves the fixed header alone.
   3. Blog tables: four 87px columns broke words mid-word ("condensat/e"); on phones the
      table scrolls sideways inside the post instead, with readable columns. */
@media (max-width: 767px) {
  html, body { overflow-x: clip; }

  .elementor-location-header nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: fixed !important;
    top: 83px !important; /* the header bar is 83px tall at every phone width */
    margin-top: 0 !important;
    max-height: calc(100vh - 83px) !important;
    max-height: calc(100dvh - 83px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .35);
  }
  .elementor-location-header nav.elementor-nav-menu--dropdown a.elementor-item,
  .elementor-location-header nav.elementor-nav-menu--dropdown a.elementor-sub-item {
    font-size: 17px !important;
    line-height: 1.3 !important;
    min-height: 48px;
    display: flex !important;
    align-items: center;
    padding: 12px 24px !important;
  }
  .elementor-location-header nav.elementor-nav-menu--dropdown a.elementor-sub-item {
    font-size: 16px !important;
    padding-left: 40px !important;
  }
  body:has(.elementor-location-header .elementor-menu-toggle.elementor-active) #chat-widget-push-to-talk {
    display: none !important;
  }

  .elementor-widget-theme-post-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .elementor-widget-theme-post-content th,
  .elementor-widget-theme-post-content td {
    min-width: 8.5em;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: manual !important;
  }
}

/* Contact page info cards (28 Oct 2026): the email and phone lines were #7a7a7a on #1f1f1f (3.8:1);
   the site's lighter body grey reads at about 7:1. The email address is now a mailto link like the phone. */
.elementor-19 .elementor-element-e471187 .elementor-icon-box-description,
.elementor-19 .elementor-widget-icon-box .elementor-icon-box-description { color: #A7A7A7 !important; }
@media (max-width: 767px) {
  /* ...and each line is a 44px tap target, not just its 18px of text. */
  .elementor-19 .elementor-icon-box-description a { display: inline-block; padding: 13px 0; margin: -13px 0; }
}