



/* Areas We Cover cards */
.pj-areas { width: min(1180px,100%); margin: 0 auto; padding: clamp(24px,4vw,48px); background: #fff; border: 1px solid #e5e7eb; border-radius: 18px; box-shadow: 0 12px 34px rgba(31,42,55,.09); color: var(--brand-dark); }
.pj-areas * { box-sizing: border-box; }
.pj-areas-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.pj-areas-heading h2 { margin: 4px 0 8px !important; font-size: clamp(30px,3vw,42px); line-height: 1.15; color: var(--brand-dark) !important; }
.pj-areas-heading p { max-width: 700px; margin: 0 !important; color: #4b5563; font-size: 16px; line-height: 1.6; }
.pj-eyebrow { display: block; color: var(--brand-green-dark); font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.pj-areas-cta { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 22px; border-radius: 8px; background: var(--brand-pink); color: #fff !important; font-weight: 700; text-decoration: none !important; }
.pj-areas-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.pj-area-card { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 14px 16px; border: 1px solid #dfe5e8; border-radius: 10px; background: #f8fafb; color: var(--brand-dark) !important; text-decoration: none !important; transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.pj-area-card:hover,
.pj-area-card:focus-visible { transform: translateY(-2px); border-color: var(--brand-green-dark); box-shadow: 0 8px 18px rgba(31,42,55,.1); outline: none; }
.pj-area-card strong,
.pj-area-card small { display: block; }
.pj-area-card strong { font-size: 16px; line-height: 1.3; color: var(--brand-dark); }
.pj-area-card small { margin-top: 3px; color: #667085; font-size: 13px; line-height: 1.3; }
.pj-area-pin { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-light); color: var(--brand-green-dark); font-family: ETmodules; font-size: 18px; }
.pj-area-arrow { margin-left: auto; color: var(--brand-green-dark); font-size: 20px; }
.pj-areas-note { margin: 24px 0 0 !important; text-align: center; color: #4b5563; font-size: 15px !important; }
.pj-areas-note a { color: var(--brand-green-dark); font-weight: 700; }

/* Areas service selector */
.pj-area-switcher { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 24px; }
.pj-area-switch { appearance: none; border: 2px solid var(--brand-green-dark); border-radius: 8px; background: #fff; color: var(--brand-green-dark); cursor: pointer; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.25; padding: 12px 20px; transition: background-color .2s,color .2s,transform .2s; }
.pj-area-switch:hover,
.pj-area-switch:focus-visible { transform: translateY(-1px); }
.pj-area-switch.is-active { background: var(--brand-green-dark); color: #fff; }
.pj-areas-grid[hidden] { display: none !important; }

/* Contact form: prevent the submit-button animation escaping into details. */
.page-id-105 #dvcd_contact_s4 .et_contact_bottom_container button::before { content: none !important; display: none !important; }

/* Contact form: allow validation messages to expand without clipping controls. */
.page-id-105 #dvcd_contact_s4,
.page-id-105 #dvcd_contact_s4 .et_pb_row,
.page-id-105 #dvcd_contact_s4 .et_pb_column,
.page-id-105 #dvcd_contact_s4 .et_pb_contact_form_container,
.page-id-105 #dvcd_contact_s4 .et_pb_contact,
.page-id-105 #dvcd_contact_s4 .et_pb_contact_form {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.page-id-105 #dvcd_contact_s4 .et_pb_contact_form_container {
  min-height: 0 !important;
}

.page-id-105 #dvcd_contact_s4 .et-pb-contact-message {
  flex: 0 0 100%;
  width: 100%;
}

.page-id-105 #dvcd_contact_s4 .et_contact_bottom_container {
  position: relative !important;
  clear: both;
  flex: 0 0 100%;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 15px;
  overflow: visible !important;
}

@media (max-width: 767px) {
  .page-id-105 #dvcd_contact_s4 .et_contact_bottom_container {
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
  }
}

/* Global footer contact form: make the fixed slide-in independently scrollable. */
#dct_side_bar.slide_in_sidebar {
  box-sizing: border-box;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#dct_side_bar #et_pb_contact_form_4,
#dct_side_bar #et_pb_contact_form_4 .et_pb_contact,
#dct_side_bar #et_pb_contact_form_4 .et_pb_contact_form {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

#dct_side_bar #et_pb_contact_form_4 .et_contact_bottom_container {
  position: relative !important;
  flex: 0 0 100%;
  width: 100%;
  padding-bottom: 24px;
}

@media (max-width: 980px) {
  .pj-areas-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 600px) {
  .pj-areas { padding: 24px 18px; border-radius: 12px; }
  .pj-areas-heading { align-items: flex-start; flex-direction: column; }
  .pj-areas-cta { width: 100%; }
  .pj-areas-grid { grid-template-columns: 1fr; }
  .pj-area-card { min-height: 70px; }
  .pj-area-switcher { display: grid; grid-template-columns: 1fr; }
  .pj-area-switch { width: 100%; }
}

/* Footer contact Blurbs: frontend fallback for Divi's generated template CSS. */
.et-l--footer .et_pb_blurb_1_tb_footer .et_pb_module_header,
.et-l--footer .et_pb_blurb_2_tb_footer .et_pb_module_header,
.et-l--footer .et_pb_blurb_3_tb_footer .et_pb_module_header,
.et-l--footer .et_pb_blurb_4_tb_footer .et_pb_module_header {
  color: #fff !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

.et-l--footer .et_pb_blurb_1_tb_footer .et_pb_blurb_description,
.et-l--footer .et_pb_blurb_2_tb_footer .et_pb_blurb_description,
.et-l--footer .et_pb_blurb_3_tb_footer .et_pb_blurb_description,
.et-l--footer .et_pb_blurb_4_tb_footer .et_pb_blurb_description {
  color: #b9c0cd !important;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

.et-l--footer .et_pb_blurb_1_tb_footer .et-pb-icon,
.et-l--footer .et_pb_blurb_4_tb_footer .et-pb-icon { color: var(--brand-green) !important; }
.et-l--footer .et_pb_blurb_2_tb_footer .et-pb-icon,
.et-l--footer .et_pb_blurb_3_tb_footer .et-pb-icon { color: var(--brand-green) !important; }

.et-l--footer .et_pb_blurb_1_tb_footer .et-pb-icon,
.et-l--footer .et_pb_blurb_2_tb_footer .et-pb-icon,
.et-l--footer .et_pb_blurb_3_tb_footer .et-pb-icon,
.et-l--footer .et_pb_blurb_4_tb_footer .et-pb-icon {
  background: transparent !important;
  font-size: 27px !important;
}

/* PlumbJax brand: aliases keep custom CSS connected to Divi global colours. */
:root {
  --brand-pink: var(--gcid-primary-color, #DE1D6C);
  --brand-green: var(--gcid-brand-green, #58A12B);
  --brand-green-dark: var(--gcid-secondary-color, #2B701D);
  --brand-dark: var(--gcid-heading-color, #373435);
  --brand-light: var(--gcid-brand-light, #F7FBF8);
  --brand-background: #FFFFFF;
}

/* Preserve the supplied artwork's proportions in the existing logo containers. */
.et_pb_menu__logo img[src*="plumbjax-brand-"],
img[src*="plumbjax-brand-wordmark"] { height: auto; object-fit: contain; }

/* Contrast-safe interaction states for custom controls and the shared form. */
.pj-areas-cta:hover,
.pj-areas-cta:focus-visible { background: var(--brand-dark); }
.pj-area-switch:focus-visible,
.pj-area-card:focus-visible,
.et_pb_button:focus-visible,
.et_pb_contact_submit:focus-visible { outline: 2px solid var(--brand-green-dark); outline-offset: 4px; }
#dvcd_contact_s4 .et_contact_bottom_container button:hover,
.dvcd_contact_s4 .et_contact_bottom_container button:hover {
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  color: #FFFFFF !important;
}
.et_pb_menu .mobile_menu_bar:before { color: #FFFFFF !important; }
.et_mobile_menu { border-top-color: var(--brand-green-dark); }
