/* 3i revamp — shared component layer. Loaded last in . */
:root{ --r-brand:#2EA3F2; --r-ease:cubic-bezier(.2,.7,.2,1); }
/* WhatsApp button — house default, bottom LEFT (right collides with
back-to-top and most chat widgets). Number read from the page's own tel:
link, never typed in. */
.u-wa{
position:fixed !important; left:16px !important; right:auto !important; bottom:16px !important;
width:62px; height:62px; border-radius:50%; background:#25D366;
box-shadow:0 6px 20px -6px rgba(0,0,0,.45); z-index:9000; display:block; text-decoration:none;
transition:transform .2s var(--r-ease), box-shadow .2s ease;
}
.u-wa::after{
content:""; position:absolute; inset:0; margin:auto; width:34px; height:34px; background:#fff;
-webkit-mask:var(--wa) center/contain no-repeat; mask:var(--wa) center/contain no-repeat;
}
.u-wa{ --wa:url("data:image/svg+xml;utf8,"); }
.u-wa:hover{ transform:translateY(-3px); box-shadow:0 10px 26px -8px rgba(0,0,0,.5); }
.u-wa:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
@media (max-width:767px){ .u-wa{ width:56px; height:56px; left:14px !important; bottom:14px !important; } }
@media (prefers-reduced-motion:reduce){ .u-wa{ transition:none; } .u-wa:hover{ transform:none; } }
/* Phone row in the mobile menu. The theme's own menu is left alone wherever it
works; this is the one thing it lacks. Full menu width, 48px target. */
.u-menu-call{
display:none; box-sizing:border-box; width:100%; align-items:center; gap:10px;
min-height:48px; padding:12px 20px; background:var(--r-brand); color:#fff !important;
font-weight:600; text-decoration:none; white-space:nowrap;
}
.u-menu-call svg{ width:18px; height:18px; fill:currentColor; flex:0 0 auto; }
@media (max-width:980px){ .u-menu-call{ display:flex; } }
.u-menu-call-item{ list-style:none; }
.u-menu-call-item{ margin:0 !important; padding:0 !important; border:0 !important; }
/* Mobile type floor. These themes drop body copy to 13-14px on phones.
Body text only; heading sizes stay the designer's, desktop is untouched. */
@media (max-width:767px){
body{ font-size:16px; }
p, li, td, .et_pb_text, .et_pb_text_inner{ font-size:16px; line-height:1.65; }
footer p, footer li, footer a, #main-footer p, #main-footer li, #main-footer a{ font-size:15px; line-height:1.6; }
small, .small{ font-size:14px; }
}
/* The enquiry form's reply box: success and failure printed in the same grey
on every site seen so far. The live handler tags the FORM, so the states are
styled from those classes. */
.wpcf7 form .wpcf7-response-output, form[data-3i] .wpcf7-response-output{
margin:16px 0 0; padding:12px 16px; border:1px solid transparent; border-radius:10px;
font-size:15px; line-height:1.5;
}
.wpcf7 form.sent .wpcf7-response-output, form[data-3i].sent .wpcf7-response-output{
border-color:rgba(26,156,91,.40) !important; background:#effaf4 !important; color:#12623a !important;
}
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output,
form[data-3i].failed .wpcf7-response-output{
border-color:rgba(190,120,20,.45) !important; background:#fff8ec !important; color:#8a5a06 !important;
}
/* Divi marks its contact-form title as
, so the contact page shipped with
two. The form's title is a section heading, not the page's subject, so it was
demoted - and pinned to the look measured on the untouched build (32px / 600 /
line-height 32px / padding-bottom 16px), because those come from the TAG and
would otherwise change the moment it stops being an h1. */
h2.et_pb_contact_main_title.u-was-h1{font-size:32px;font-weight:600;line-height:32px;
margin:0;padding:0 0 16px;color:#172e54}
/* ---- reanjoy.com revamp: three measured mobile fixes ---------------------
Each one targets a NAMED component, never an element type (the rule that has
caused the most damage on these Betheme/Divi builds is a blanket override of
a per-element decision the theme already made). */
/* (a) The Divi footer text module ships width:121.6% with margin-right:-45px -
deliberate on desktop, where the column has room. At 390px it pushed the
document to 417px, so EVERY page scrolled sideways by 27px. The original
build does this too: an old bug, not one we introduced. Reset only below the
tablet breakpoint, so desktop renders exactly as before. */
/* 767 was not far enough: the same module overflowed by 55px at 768 on all 28
pages. Divi's own tablet breakpoint is 980, so the reset runs to 980 and
desktop above it keeps the designer's 121.6% exactly. */
/* Six modules carry one of these pulls, not one: -39px, -45px and -21px, and
the number Divi gives a module differs per page - so fixing only
.et_pb_text_1_tb_footer left /chemical-testing/ still scrolling. Below Divi's
own 980px breakpoint every one of these sits in a single column, where a
negative side margin can do nothing but hang off the edge. Above 980 the
designer's 121.6% and the pulls are untouched. */
@media (max-width:980px){
.et_pb_text_0, .et_pb_text_1, .et_pb_text_2,
.et_pb_text_0_tb_footer, .et_pb_text_1_tb_footer,
.et_pb_text_2_tb_footer, .et_pb_text_3_tb_footer, .et_pb_text_4_tb_footer{
width:100%!important;margin-right:0!important;margin-left:0!important}
}
/* (b) Three pages carry a wide specification table (450-579px). Squeezing it
would make the figures unreadable, so the TABLE scrolls inside its own box
and the page does not. No visual effect where the table already fits. */
.u-tscroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.u-tscroll > table{margin:0}
/* (c) The mobile menu's own items render at 14px. These are tap targets read at
arm's length; 16px is the floor. Body copy is untouched - already 16px. */
@media (max-width:980px){
#et-mobile-menu li a, .et_mobile_menu li a{font-size:16px!important;line-height:1.5!important}
}
/* (d) .footer-flex is display:flex;gap:80px with white-space:nowrap on every
li - two link columns plus an 80px gutter cannot fit 390px, so the second
column hung 17px off the right edge of /chemical-testing/. Let it wrap and
tighten the gutter below the tablet breakpoint; the desktop row is untouched. */
@media (max-width:980px){
.footer-flex{flex-wrap:wrap;gap:20px 36px}
}
/* (e) The five social links render as 32x32 - below the 44px tap target. The
ICON stays 32px; the hit area around it grows, so nothing looks different. */
.et_pb_social_media_follow li a.icon{position:relative}
.et_pb_social_media_follow li a.icon::after{content:"";position:absolute;
left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}