/* site overrides — put slider / contact-form / tweak CSS here (keep it out of the pages) */

/* Betheme equal-height valign-middle pulls columns up via translateY(-50%),
   overlapping the previous section/hero when the theme's equalize JS is absent.
   Neutralize the transform at all widths (matches Betheme's own responsive reset). */
.equal-height-wrap .mcb-wrap .mcb-wrap-inner{top:0!important;transform:none!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important}

/* mfn-mobile-menu-fix (v2) — Betheme opens the mobile menu with its own
   jQuery. Sometimes that JS is missing in a frozen build (tap does nothing)
   and sometimes it is alive (tap runs BOTH handlers, the theme leaves an
   inline display on #menu, and the menu can never be closed again). The
   script below takes the tap in the capture phase and stops the theme's
   handler, so exactly one implementation owns the menu. Colours come from
   the theme through --mfn-mm-bg / --mfn-mm-fg, which the script measures —
   v1 hardcoded white, which was wrong on every dark header.
   The panel flows inline (accordion) rather than overlaying: Betheme's own
   rules beat an absolute #menu on some builds and not others, and an
   overlay that half-applies is worse than one that never does. `top:0` on
   #Top_bar is load-bearing — some headers carry a sticky `top` offset that
   only takes effect once the bar is positioned, leaving a white strip
   above the logo while the menu is open. */
#Header_wrapper.mfn-mobile-open #Top_bar{top:0!important}
#Header_wrapper.mfn-mobile-open #menu{display:block!important;position:static!important;left:auto!important;right:auto!important;top:auto!important;width:100%!important;background:var(--mfn-mm-bg,#fff)!important;max-height:80vh;overflow:auto}
#Header_wrapper.mfn-mobile-open #menu>ul.menu{display:block!important;width:100%}
#Header_wrapper.mfn-mobile-open #menu ul.menu>li{display:block!important;float:none!important;width:100%!important;margin:0!important;height:auto!important;min-height:0!important;border-bottom:1px solid rgba(127,127,127,.25)}
#Header_wrapper.mfn-mobile-open #menu ul.menu li a{display:block!important;padding:14px 22px!important;color:var(--mfn-mm-fg,#222)!important;line-height:1.3!important;height:auto!important;min-height:0!important}
#Header_wrapper.mfn-mobile-open #menu ul.menu li a span{line-height:1.3!important}
#Header_wrapper.mfn-mobile-open #menu ul.sub-menu{position:static!important;display:none;left:auto;top:auto;box-shadow:none;min-width:0;background:rgba(127,127,127,.12)}
#Header_wrapper.mfn-mobile-open #menu li.mfn-sub-open>ul.sub-menu{display:block!important}
#Header_wrapper.mfn-mobile-open #menu ul.sub-menu li a{padding-left:42px!important}
/* While the menu is open #Top_bar grows by the height of the panel. A
   Betheme hamburger is absolutely positioned at top:50% of that bar, so it
   slides down INTO the open menu: the second tap lands on a menu item, you
   navigate away, and the menu appears impossible to close. The script pins
   it to where it sat while closed. */
#Header_wrapper.mfn-mobile-open .responsive-menu-toggle{top:var(--mfn-mm-tgl,0)!important;margin-top:0!important;transform:none!important;z-index:100001!important}
.responsive-menu-toggle{cursor:pointer}

/* Divi's own captcha styling handles size, font and placement. The one thing it
   does NOT do on a theme whose fields are borderless is make the answer box
   look fillable - a visitor sees "7 + 9 =" and nothing obvious to type into.
   (Client feedback on charchitchemical: the box has to be visible or people get
   confused.) So exactly one field gets a border; nothing else is touched. */
.et_pb_contact_captcha{border:1px solid rgba(0,0,0,.25)!important;border-radius:4px!important;
  background:rgba(0,0,0,.03)!important;min-width:64px!important;text-align:center;
  padding-left:6px!important;padding-right:6px!important}
.et_pb_contact_captcha_question{font-weight:700;letter-spacing:1px}

.site-credit{display:inline-block;margin-top:6px;font-size:inherit;opacity:.9}
.site-credit a{color:inherit;text-decoration:underline}

/* ---- dpdp-v1 ---------------------------------------------------------- */
/* The consent line always takes a row of its own, above the captcha, so the
   captcha and the send button can sit together underneath. Themes lay the
   bottom of a form out with floats (Divi's .et_contact_bottom_container) or
   flex, so the width and clearing have to be forced or the line gets squeezed
   into the narrow captcha column. */
.dpdp-consent { display: block !important; float: none !important; clear: both !important;
  width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
  box-sizing: border-box; margin: 4px 0 16px !important; padding: 0 !important;
  text-align: left !important; }
.dpdp-consent label { display: flex !important; align-items: flex-start; gap: 10px;
  width: 100%; font-size: 14px; line-height: 1.55; cursor: pointer;
  font-weight: 400 !important; text-align: left !important; margin: 0 !important;
  padding: 0 !important; text-transform: none !important; letter-spacing: normal !important;
  color: inherit; }
/* themes (Divi's mobile sheet especially) strip a checkbox down to
   appearance:none with no background or border — it is then present but
   completely invisible.  Force a real, visible control. */
.dpdp-consent input[type="checkbox"] { appearance: auto !important;
  -webkit-appearance: checkbox !important; -moz-appearance: checkbox !important;
  width: 17px !important; height: 17px !important; min-width: 17px !important;
  max-width: 17px !important; min-height: 17px !important;
  margin: 3px 0 0 !important; padding: 0 !important; flex: 0 0 auto;
  position: static !important; opacity: 1 !important; visibility: visible !important;
  border: 1px solid #8a8f98 !important; border-radius: 3px !important;
  background: #fff !important; background-image: none !important;
  box-shadow: none !important; outline: none !important; float: none !important;
  display: inline-block !important; accent-color: #1f7a3d; cursor: pointer; }
.dpdp-consent span { flex: 1 1 auto; }
/* Some themes leave the captcha answer box transparent, which on a dark
   section makes it invisible even though the rest of the fields are light. */
form[action="/send.php"] input[name="captcha"] {
  background: #fff !important; color: #14181c !important;
  border: 1px solid #8a8f98 !important; border-radius: 4px !important;
  -webkit-text-fill-color: #14181c !important; opacity: 1 !important; }
.dpdp-consent a { text-decoration: underline; }
/* Divi: the bottom row is a flex/float container — give the consent its own line */
.et_contact_bottom_container { flex-wrap: wrap; }
.et_contact_bottom_container .dpdp-consent { margin-bottom: 12px !important; }
/* Divi's bottom row is float:right with a negative top margin that would ride
   up over the consent line now sitting above it. */
.dpdp-consent + .et_contact_bottom_container { margin-top: 0 !important; }
.et_pb_contact .dpdp-consent { clear: both !important; }
/* CF7: the captcha <p> follows the consent, so it must start a fresh row. */
.dpdp-consent + p { clear: both; }

.dpdp-footer-line { display: block; margin-top: 8px; font-size: 13px; opacity: .92; }
.dpdp-footer-line a { text-decoration: underline; }

.dpdp-standalone { max-width: 62rem; margin: 0 auto; padding: 28px 20px 56px; }
.dpdp-back { margin: 0 0 18px; font-size: 14px; }
.dpdp-back a { text-decoration: underline; }
.dpdp-doc { max-width: 60rem; margin: 0 auto; padding: 8px 20px 40px; }
.dpdp-doc h2 { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.3; margin: 32px 0 10px; }
.dpdp-doc p, .dpdp-doc li { font-size: 16px; line-height: 1.75; }
.dpdp-doc ul { margin: 0 0 16px 22px; list-style: disc !important; }
.dpdp-doc ul li { list-style: disc !important; }
.dpdp-doc li { margin: 4px 0; }
.dpdp-meta { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; opacity: .7; }

.dpdp-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 99999;
  max-width: 640px; margin: 0 auto; background: #14181c; color: #fff;
  border-radius: 12px; padding: 18px 20px; box-shadow: 0 16px 44px rgba(0,0,0,.34);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.dpdp-banner[hidden] { display: none; }
.dpdp-banner p { margin: 0; flex: 1 1 260px; font-size: 14px; line-height: 1.6; color: #fff; }
.dpdp-banner a { color: #8fd0ff; text-decoration: underline; }
.dpdp-banner__btns { display: flex; gap: 10px; flex: 0 0 auto; }
/* themes set a global button{} with their own padding, colour and box model —
   beat it, or the two buttons come out as tan pills the wrong size */
.dpdp-banner .dpdp-btn {
  appearance: none !important; -webkit-appearance: none !important;
  box-sizing: border-box !important; border: 0 !important; border-radius: 8px !important;
  padding: 11px 20px !important; margin: 0 !important; min-width: 0 !important;
  width: auto !important; height: auto !important; line-height: 1.2 !important;
  font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0 !important;
  text-transform: none !important; cursor: pointer;
  background: #fff !important; color: #14181c !important; box-shadow: none !important; }
.dpdp-banner .dpdp-btn:hover { background: #e9edf2 !important; color: #14181c !important; }
.dpdp-banner .dpdp-btn--ghost,
.dpdp-banner .dpdp-btn--ghost:hover {
  background: transparent !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.5) !important; }
.dpdp-consent { -webkit-tap-highlight-color: transparent; }
@media (max-width: 767px) {
  .dpdp-consent { margin: 6px 0 14px !important; }
  .dpdp-consent label { font-size: 13.5px; line-height: 1.5; }
}
@media (max-width: 560px) {
  .dpdp-banner { left: 10px; right: 10px; bottom: 10px; padding: 16px; }
  .dpdp-banner__btns { width: 100%; }
  .dpdp-banner .dpdp-btn { flex: 1 1 0; }
}

/* ---- alfa-design-v1 : layout repairs -------------------------------- */

/* 1. "Our Vision" / "Quality Policy" / "Infrastructure" are left-position
      blurbs. Divi centres .et_pb_blurb_content in a 550px table, so on a
      1080px row the icon and copy sat in the middle while the heading above
      them was hard left. A left-position blurb should run the full width. */
.et_pb_blurb.et_pb_blurb_position_left > .et_pb_blurb_content{max-width:none!important;margin:0!important;width:100%}
.et_pb_blurb.et_pb_blurb_position_left .et_pb_main_blurb_image{padding-right:24px;vertical-align:top}
.et_pb_blurb .et_pb_blurb_description > p:last-child{margin-bottom:0}

/* 2. Divi hides whatever it plans to animate until its scroll JS marks it
      .et-animated. In a frozen build that JS is unreliable, so a product
      photo could sit invisible for seconds or never appear at all. Nothing
      is animated here any more, so reveal it immediately. */
.et-waypoint:not(.et_pb_counters),.et_animated,.et_pb_main_blurb_image.et_animated,[class*="et_animated"]{opacity:1!important;animation:none!important;transform:none!important}

/* 3. The grey callout boxes. Divi carried the #f5f5f5 background on the
      COLUMN in some places and on the TEXT MODULE in others, and only some
      of them were given padding — so copy ran into the edge and a pair of
      boxes on one row ended at different heights. Selectors below are read
      from each page's own CSS and scoped to its body class. */
body.page-id-12 .et_pb_text_1,body.page-id-12 .et_pb_text_3,body.page-id-12 .et_pb_column_4,body.page-id-12 .et_pb_column_5,body.page-id-12 .et_pb_column_6{padding:26px 30px!important}
body.page-id-12 .et_pb_column_4 > .et_pb_text,body.page-id-12 .et_pb_column_5 > .et_pb_text,body.page-id-12 .et_pb_column_6 > .et_pb_text{padding:0!important;margin-bottom:0!important;background:transparent!important}
body.page-id-12 .et_pb_text_1 ul,body.page-id-12 .et_pb_text_3 ul,body.page-id-12 .et_pb_column_4 ul,body.page-id-12 .et_pb_column_5 ul,body.page-id-12 .et_pb_column_6 ul{margin:0;padding-left:20px}
body.page-id-12 .et_pb_text_1 li,body.page-id-12 .et_pb_text_3 li,body.page-id-12 .et_pb_column_4 li,body.page-id-12 .et_pb_column_5 li,body.page-id-12 .et_pb_column_6 li{margin:0 0 7px;line-height:1.55}
body.page-id-14 .et_pb_text_3,body.page-id-14 .et_pb_column_4,body.page-id-14 .et_pb_column_5,body.page-id-14 .et_pb_column_6{padding:26px 30px!important}
body.page-id-14 .et_pb_column_4 > .et_pb_text,body.page-id-14 .et_pb_column_5 > .et_pb_text,body.page-id-14 .et_pb_column_6 > .et_pb_text{padding:0!important;margin-bottom:0!important;background:transparent!important}
body.page-id-14 .et_pb_text_3 ul,body.page-id-14 .et_pb_column_4 ul,body.page-id-14 .et_pb_column_5 ul,body.page-id-14 .et_pb_column_6 ul{margin:0;padding-left:20px}
body.page-id-14 .et_pb_text_3 li,body.page-id-14 .et_pb_column_4 li,body.page-id-14 .et_pb_column_5 li,body.page-id-14 .et_pb_column_6 li{margin:0 0 7px;line-height:1.55}
body.page-id-16 .et_pb_column_1,body.page-id-16 .et_pb_column_2,body.page-id-16 .et_pb_text_3,body.page-id-16 .et_pb_column_3,body.page-id-16 .et_pb_column_4,body.page-id-16 .et_pb_column_5,body.page-id-16 .et_pb_column_6{padding:26px 30px!important}
body.page-id-16 .et_pb_column_1 > .et_pb_text,body.page-id-16 .et_pb_column_2 > .et_pb_text,body.page-id-16 .et_pb_column_3 > .et_pb_text,body.page-id-16 .et_pb_column_4 > .et_pb_text,body.page-id-16 .et_pb_column_5 > .et_pb_text,body.page-id-16 .et_pb_column_6 > .et_pb_text{padding:0!important;margin-bottom:0!important;background:transparent!important}
body.page-id-16 .et_pb_column_1 ul,body.page-id-16 .et_pb_column_2 ul,body.page-id-16 .et_pb_text_3 ul,body.page-id-16 .et_pb_column_3 ul,body.page-id-16 .et_pb_column_4 ul,body.page-id-16 .et_pb_column_5 ul,body.page-id-16 .et_pb_column_6 ul{margin:0;padding-left:20px}
body.page-id-16 .et_pb_column_1 li,body.page-id-16 .et_pb_column_2 li,body.page-id-16 .et_pb_text_3 li,body.page-id-16 .et_pb_column_3 li,body.page-id-16 .et_pb_column_4 li,body.page-id-16 .et_pb_column_5 li,body.page-id-16 .et_pb_column_6 li{margin:0 0 7px;line-height:1.55}
body.page-id-18 .et_pb_text_3,body.page-id-18 .et_pb_column_4,body.page-id-18 .et_pb_column_5,body.page-id-18 .et_pb_column_6{padding:26px 30px!important}
body.page-id-18 .et_pb_column_4 > .et_pb_text,body.page-id-18 .et_pb_column_5 > .et_pb_text,body.page-id-18 .et_pb_column_6 > .et_pb_text{padding:0!important;margin-bottom:0!important;background:transparent!important}
body.page-id-18 .et_pb_text_3 ul,body.page-id-18 .et_pb_column_4 ul,body.page-id-18 .et_pb_column_5 ul,body.page-id-18 .et_pb_column_6 ul{margin:0;padding-left:20px}
body.page-id-18 .et_pb_text_3 li,body.page-id-18 .et_pb_column_4 li,body.page-id-18 .et_pb_column_5 li,body.page-id-18 .et_pb_column_6 li{margin:0 0 7px;line-height:1.55}
body.page-id-20 .et_pb_text_3,body.page-id-20 .et_pb_column_4,body.page-id-20 .et_pb_column_5,body.page-id-20 .et_pb_column_6{padding:26px 30px!important}
body.page-id-20 .et_pb_column_4 > .et_pb_text,body.page-id-20 .et_pb_column_5 > .et_pb_text,body.page-id-20 .et_pb_column_6 > .et_pb_text{padding:0!important;margin-bottom:0!important;background:transparent!important}
body.page-id-20 .et_pb_text_3 ul,body.page-id-20 .et_pb_column_4 ul,body.page-id-20 .et_pb_column_5 ul,body.page-id-20 .et_pb_column_6 ul{margin:0;padding-left:20px}
body.page-id-20 .et_pb_text_3 li,body.page-id-20 .et_pb_column_4 li,body.page-id-20 .et_pb_column_5 li,body.page-id-20 .et_pb_column_6 li{margin:0 0 7px;line-height:1.55}
body.page-id-22 .et_pb_text_3,body.page-id-22 .et_pb_column_4,body.page-id-22 .et_pb_column_5,body.page-id-22 .et_pb_column_6{padding:26px 30px!important}
body.page-id-22 .et_pb_column_4 > .et_pb_text,body.page-id-22 .et_pb_column_5 > .et_pb_text,body.page-id-22 .et_pb_column_6 > .et_pb_text{padding:0!important;margin-bottom:0!important;background:transparent!important}
body.page-id-22 .et_pb_text_3 ul,body.page-id-22 .et_pb_column_4 ul,body.page-id-22 .et_pb_column_5 ul,body.page-id-22 .et_pb_column_6 ul{margin:0;padding-left:20px}
body.page-id-22 .et_pb_text_3 li,body.page-id-22 .et_pb_column_4 li,body.page-id-22 .et_pb_column_5 li,body.page-id-22 .et_pb_column_6 li{margin:0 0 7px;line-height:1.55}
body.page-id-24 .et_pb_text_3,body.page-id-24 .et_pb_column_4,body.page-id-24 .et_pb_column_5,body.page-id-24 .et_pb_column_6{padding:26px 30px!important}
body.page-id-24 .et_pb_column_4 > .et_pb_text,body.page-id-24 .et_pb_column_5 > .et_pb_text,body.page-id-24 .et_pb_column_6 > .et_pb_text{padding:0!important;margin-bottom:0!important;background:transparent!important}
body.page-id-24 .et_pb_text_3 ul,body.page-id-24 .et_pb_column_4 ul,body.page-id-24 .et_pb_column_5 ul,body.page-id-24 .et_pb_column_6 ul{margin:0;padding-left:20px}
body.page-id-24 .et_pb_text_3 li,body.page-id-24 .et_pb_column_4 li,body.page-id-24 .et_pb_column_5 li,body.page-id-24 .et_pb_column_6 li{margin:0 0 7px;line-height:1.55}
body.page-id-9 .et_pb_text_3,body.page-id-9 .et_pb_column_4,body.page-id-9 .et_pb_column_5,body.page-id-9 .et_pb_column_6{padding:26px 30px!important}
body.page-id-9 .et_pb_column_4 > .et_pb_text,body.page-id-9 .et_pb_column_5 > .et_pb_text,body.page-id-9 .et_pb_column_6 > .et_pb_text{padding:0!important;margin-bottom:0!important;background:transparent!important}
body.page-id-9 .et_pb_text_3 ul,body.page-id-9 .et_pb_column_4 ul,body.page-id-9 .et_pb_column_5 ul,body.page-id-9 .et_pb_column_6 ul{margin:0;padding-left:20px}
body.page-id-9 .et_pb_text_3 li,body.page-id-9 .et_pb_column_4 li,body.page-id-9 .et_pb_column_5 li,body.page-id-9 .et_pb_column_6 li{margin:0 0 7px;line-height:1.55}

/* the two boxes on a row should end level, not at whatever height their
   own list happens to reach */
@media (min-width:981px){
  .et_pb_row.et_pb_row_2{display:flex;align-items:stretch}
  .et_pb_row.et_pb_row_2 > .et_pb_column{float:none;display:flex;flex-direction:column}
  .et_pb_row.et_pb_row_2 > .et_pb_column > .et_pb_text{flex:1 1 auto}
}