/* ==========================================================================
   Enterprise Solution Providers — 1:1 port of the original espusa.com design.

   The source is the site's own Divi child theme ("esp"): wp-content/themes/esp/
   style.css + main-style.css, plus the Divi Customizer globals. Every value in
   this file is transcribed from those files, not re-invented. Divi's framework
   is NOT vendored — only the handful of its layout defaults the child theme
   actually depends on are reproduced, inline, where they are needed.

   Layout rig: one 1180px container. Header = 110 logo + 950 nav + 120 search.
   ========================================================================== */

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/work-sans-latin.woff2") format("woff2");
}

:root {
  /* blues */
  --blue: #1468ae;
  --blue-dropdown: #1463a5;
  --blue-section: #1462a2;
  --blue-grad-a: #145790;
  --blue-grad-b: #156db7;
  --blue-tab-a: #0877bf;
  --blue-tab-b: #3d5c82;
  --blue-tab-rule: #3884b9;
  --navy-mobile: #00326b;
  /* accents */
  --orange: #ff7c00;
  --gold: #febe1f;
  --orange-alt: #fea111;
  /* Focus ring only. The original had no visible focus style at all; #ff7c00 on
     white is 2.3:1, so a darkened brand orange is used to clear WCAG 1.4.11. */
  --orange-dark: #c95b00;
  --orange-mobile: #ff8203;
  --orange-mobile-2: #fea614;
  /* text */
  --black: #000;
  --body: #62656c;
  --nav: #808080;
  --meta: #a6a9ad;
  --meta-2: #a9abaf;
  --meta-3: #b8b9c1;
  /* footer */
  --footer-bg: #202325;
  --footer-bar-bg: #2b3033;
  --footer-text: #d2d8dd;
  --footer-bar-text: #acb1b6;
  /* surfaces + rules */
  --soft: #f5f7fa;
  --rule: #d0e1ef;
  --rule-light: #c8daeb;
  --rule-input: #c6c8cc;
  --tab-idle: #d5dfec;
  --onblue-body: #c9dae7;
  --onblue-body-2: #cedae7;
  --onblue-meta: #d5dee8;
  /* orange contact form */
  --field-text: #fdd7c2;
  --field-border: #ffbf80;
  --field-border-2: #ffcb99;
  /* metrics */
  --container: 1180px;
  --sans: "Work Sans", sans-serif;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { overflow-x: hidden; }

body {
  margin: 0;
  background-color: #fff;
  color: var(--body);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 25px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; border: 0; }
button, input, select, textarea { font: inherit; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: none; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--sans); }

h3 {
  margin-top: 40px;
  color: var(--black);
  font-size: 40px;
  line-height: 45px;
  font-weight: 700;
}
h4 {
  color: var(--black);
  font-size: 30px;
  line-height: 35px;
  font-weight: 700;
}
p, li {
  color: var(--body);
  font-size: 18px;
  line-height: 25px;
  font-weight: 400;
}
p { margin: 0; padding-bottom: 1em; }
p:last-of-type { padding-bottom: 0; }
strong { font-weight: 700; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  text-align: left;
}
.clearfix::after { content: ""; display: table; clear: both; }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -10rem;
  left: 1rem;
  z-index: 100000;
  padding: 12px 16px;
  background: #fff;
  color: var(--black);
  font-weight: 700;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--orange-dark); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   2. Header — desktop
   110px logo + 950px nav + 120px search = 1180px. Not sticky.
   -------------------------------------------------------------------------- */

#main-header {
  position: relative;
  z-index: 99999;
  width: 100%;
  padding: 22px 0 25px;
  background-color: #fff;
  box-shadow: none;
}

.logo_container {
  position: relative;
  float: left;
  width: 110px;
}
#logo {
  display: inline-block;
  width: auto;
  height: auto;
  vertical-align: middle;
}

#et-top-navigation {
  float: left;
  width: 950px;
  padding: 0;
  font-weight: normal;
}

nav#top-menu-nav { float: none; text-align: center; }
ul#top-menu { line-height: 0; }

ul#top-menu > li {
  position: relative;
  display: inline-block;
  margin: 0 60px 0 0;
  padding: 0;
}
ul#top-menu > li:last-child { margin-right: 0; }

ul#top-menu > li > a {
  display: block;
  position: relative;
  padding: 15px 0;
  color: var(--nav);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
  transition: opacity 0.4s ease-in-out;
}
ul#top-menu > li > a:hover { opacity: 0.7; }
ul#top-menu > li.current-menu-item > a { color: var(--black); }

/* PRACTICES caret */
ul#top-menu > li.menu-item-has-children > a { padding-right: 16px; }
ul#top-menu > li.menu-item-has-children > a::before {
  content: "";
  position: absolute;
  right: 0;
  top: 23px;
  width: 10px;
  height: 10px;
  background: url("/media/theme/menu-arrow.png") no-repeat;
}

/* Practices dropdown */
ul#top-menu li ul.sub-menu {
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 9999;
  width: 208px;
  margin: 0;
  padding: 0;
  background: var(--blue-dropdown);
  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
  text-align: left;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
ul#top-menu li:hover > ul.sub-menu,
ul#top-menu li:focus-within > ul.sub-menu { visibility: visible; opacity: 1; }

ul#top-menu li ul.sub-menu li { width: 100%; margin: 0; padding: 0; }
ul#top-menu li ul.sub-menu li a {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border-bottom: 1px dotted #fff;
  color: #fff;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
}
ul#top-menu li ul.sub-menu li:last-child a { border-bottom: none; }
ul#top-menu li ul.sub-menu li a:hover { background-color: rgb(0 0 0 / 3%); opacity: 0.7; }

/* Header search */
.header-search-main {
  float: right;
  width: 120px;
  padding-top: 4px;
}
.header-search-main .searchform { position: relative; }
.header-search-main input[type="search"] {
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 0 0 35px;
  border: none;
  border-radius: 3px;
  background-color: #fff;
  color: #666;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}
.header-search-main input[type="submit"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  background: url("/media/theme/search-icon.png") no-repeat center center;
  text-indent: -9999px;
  cursor: pointer;
}

/* Mobile header — hidden until <=767px */
.mobile-header-main { display: none; }

/* --------------------------------------------------------------------------
   3. Interior page banner (.page_title over the featured image)
   -------------------------------------------------------------------------- */

.page-featured-image-full {
  background-size: cover;
  background-position: center center;
}
.page_title { padding: 167px 0; }
.page_title h1,
.page_title h2 {
  padding: 0 0 8px;
  color: #fff;
  font-size: 60px;
  line-height: 60px;
  font-weight: 700;
}
.page_title h6 {
  padding: 0;
  color: #fff;
  font-size: 22px;
  line-height: 22px;
  font-weight: 400;
}
/* practices template: the eyebrow renders above the title */
.page-template-practices .page_title h6 { padding: 0 0 8px; font-size: 24px; line-height: 24px; }
/* business case + blog post variants */
.single-business_cases .page_title h1 { padding: 12px 0 8px; font-size: 40px; line-height: 42px; }
.single-business-title { width: 458px; }
.single-post .page_title h6 { padding: 0 0 12px; }
.single-post .page_title h1 { width: 635px; padding: 0 0 16px; font-size: 40px; line-height: 44px; }
.single-post .page_title .post-item-info ul li {
  float: left;
  margin: 0 50px 0 0;
  color: var(--meta-3);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}
.single-post .page_title .post-item-info ul li:last-child { margin: 0; }
.single-post .page_title .post-item-info ul li a { color: inherit; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.button {
  display: inline-block;
  padding: 16px 40px 18px;
  border-radius: 50px;
  color: #fff;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.button-outline { border: 2px solid rgb(255 255 255 / 50%); }
.button-right-arrow::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 12px;
  margin-left: 1em;
  background: url("/media/theme/learn-icon.png") no-repeat;
}

/* Orange gradient pill — the hero CTA */
.slider-button-div a {
  display: inline-block;
  padding: 24px 52px;
  border-radius: 50px;
  background-color: var(--orange);
  background-image: linear-gradient(to right, var(--orange), var(--gold));
  color: #fff;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

/* Outlined blue pill — "Learn more" */
.learn-more-div { margin-top: 36px; }
.learn-more-div a {
  display: inline-block;
  width: 210px;
  padding: 17px 25px 19px 40px;
  border: 2px solid var(--rule);
  border-radius: 50px;
  background: url("/media/theme/learn-icon.jpg") no-repeat 82%;
  color: var(--blue);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. Homepage
   -------------------------------------------------------------------------- */

/* 5.1 Hero */
.home-slider-main { padding: 0; }
.home-slider-main .et_pb_slide {
  padding: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.home-slider-main .et_pb_slide_description {
  max-width: var(--container);
  margin: 0 auto;
  padding: 230px 0 205px;
  text-align: left;
}
.home-slider-main .et_pb_slide_description h1,
.home-slider-main .et_pb_slide_description h2 {
  padding-bottom: 15px;
  color: #fff;
  font-size: 60px;
  line-height: 65px;
  font-weight: 700;
}
.home-slider-main .et_pb_slide_description p {
  padding-bottom: 38px;
  color: #fff;
  font-size: 22px;
  line-height: 22px;
}

/* 5.2 "We Are Enterprise Solution Providers" */
.enterprice-soluctions-main-section {
  padding: 0;
  overflow: hidden;
}
.enterprice-soluctions-main-section .et_pb_row { display: flow-root; }
.enterprice-content-l {
  float: left;
  width: 67%;
  margin: 0;
  padding-top: 96px;
  position: relative;
  z-index: 999;
}
.enterprice-content-l h3 {
  padding-bottom: 12px;
  letter-spacing: 1px;
}
.enterprice-content-l h6 {
  padding-bottom: 19px;
  color: var(--body);
  font-size: 22px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0.2px;
}
.enterprice-image-r {
  float: right;
  width: 524px;
  margin-right: -120px;
  margin-left: -18px;
}
.enterprice-image-r img { display: block; }

/* 5.3 "Our Expertise" — blue band */
.our-excerptice-main-section {
  padding: 90px 0;
  background-color: var(--blue-section);
}
.our-top-title { margin-bottom: 14px; }
.our-top-title h3 {
  padding-bottom: 10px;
  color: #fff;
}
.our-top-title p {
  padding-bottom: 20px;
  color: var(--onblue-body);
  font-size: 22px;
  line-height: 30px;
  font-weight: 400;
}
.excerptice-list-main ul { margin: 0; padding: 0; }
.excerptice-list-section {
  float: left;
  width: 340px;
  margin-right: 80px;
  list-style: none;
}
.excerptice-list-section:last-child { margin-right: 0; }
.excerptice-title h4 {
  padding-bottom: 22px;
  color: #fff;
  font-size: 26px;
  line-height: 26px;
  font-weight: 700;
}
.excerptice-title h4 a { color: #fff; }
.excerptice-image img { display: block; width: 100%; }
.excerptice-list-content { padding: 34px 0 22px; }
.excerptice-list-content p {
  color: var(--onblue-body);
  font-size: 18px;
  line-height: 25px;
  font-weight: 400;
}
.excerptice-button a {
  display: block;
  padding-left: 17px;
  background: url("/media/theme/read-icon.jpg") no-repeat left 7px;
  color: #fff;
  font-size: 18px;
  line-height: 25px;
  font-weight: 500;
}

/* 5.4 Growth + management team.
   The section paints a 910px #f5f7fa panel bled to the right edge, behind the
   team column, via ::after. */
.team-main-section {
  position: relative;
  padding: 90px 0 100px;
}
.team-main-section::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 910px;
  height: 100%;
  background: var(--soft);
}
.team-main-section .et_pb_row { position: relative; z-index: 2; display: flow-root; }
.focused-text-l { float: left; width: 400px; margin: 0; }
.focused-team-r { float: right; width: 580px; }
.focused-text-l h3 { padding-bottom: 17px; }
.focused-team-r h3 { padding-bottom: 45px; }
.our-work-image { margin: 52px 0 0 -28px; }
.our-work-image img { display: block; }

/* The original scrolls this list inside a fixed-height panel. */
.scroll-main-div { max-height: 595px; overflow-y: auto; }
.team-list-main ul { margin: 0; padding: 0; }
.team-list-section { margin-bottom: 50px; list-style: none; }
.team-list-content h4 {
  padding-bottom: 5px;
  color: var(--blue);
  font-size: 26px;
  line-height: 26px;
  font-weight: 700;
}
.team-list-content h4 a { color: var(--blue); }
.team-list-content h6 {
  padding-bottom: 10px;
  color: #9c9d9f;
  font-size: 18px;
  line-height: 20px;
  font-weight: 400;
}
.team-list-content p { font-size: 16px; line-height: 25px; }
/* Hidden in the original by the Divi Customizer global CSS. */
.team-read-more { display: none; }

/* 5.5 Orange CTA bar */
.get-started-main-section {
  padding: 55px 0 58px;
  background-color: var(--orange);
  background-image: linear-gradient(to right, var(--orange), var(--gold));
}
.get-started-main-section .et_pb_row { display: flow-root; }
.get-started-text-l { float: left; width: 950px; margin: 0; }
.get-started-text-l h4 {
  padding-bottom: 9px;
  color: #fff;
  font-size: 30px;
  line-height: 30px;
  font-weight: 700;
}
.get-started-text-l p { padding-bottom: 0; color: #fff; }
.get-started-button-r { float: right; width: 190px; padding-top: 3px; }
.get-started-button-r .let-talk-button a {
  display: block;
  padding: 16px 25px 18px 40px;
  border: 2px solid #ffe4a5;
  border-radius: 50px;
  background: url("/media/theme/learn-icon.png") no-repeat 82%;
  color: #fff;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */

#main-footer { background: var(--footer-bg); }
#footer-widgets { padding: 70px 0 68px; }
.footer-widget { float: left; color: #fff; }
#footer-widgets .footer-widget:first-child { width: 88px; margin: 0 100px 0 0; }
#footer-widgets .footer-widget:nth-child(2) { width: 135px; margin: 0 104px 0 0; }
#footer-widgets .footer-widget:nth-child(3) { width: 162px; margin: 0 122px 0 0; }
#footer-widgets .footer-widget:nth-child(4) { width: 196px; margin: 0 98px 0 0; }
#footer-widgets .footer-widget:nth-child(5) { width: 108px; }

#footer-widgets .footer-widget h4.title {
  margin: 0;
  padding-bottom: 14px;
  color: var(--footer-text);
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
  text-transform: uppercase;
}
#footer-widgets .footer-widget ul li {
  margin-bottom: 8px;
  color: var(--footer-text);
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}
#footer-widgets .footer-widget ul li a { color: var(--footer-text); }
#footer-widgets .footer-widget ul li a:hover { color: rgb(255 255 255 / 70%); }
#footer-widgets .footer-widget ul li ul li { margin-left: 15px; }

#footer-widgets .footer-widget:nth-child(4) ul li { margin-bottom: 12px; }
.footer-phone a { padding-left: 22px; background: url("/media/theme/phone-icon.png") no-repeat left 4px; }
.footer-mail a { padding-left: 22px; background: url("/media/theme/mail-icon.png") no-repeat left 6px; }
.footer-address { padding-left: 22px; background: url("/media/theme/address-icon.png") no-repeat left 5px; }

#footer-widgets .footer-widget:nth-child(5) ul li {
  display: inline-block;
  margin: 0 18px 0 0;
}
#footer-widgets .footer-widget:nth-child(5) ul li:last-child { margin-right: 0; }
.footer-logo img { display: block; }

#footer-bottom { padding: 25px 0; background: var(--footer-bar-bg); }
.copy-text-left { float: left; }
.footer-copy-text-right { float: right; }
.footer-bottom-main p {
  padding-bottom: 0;
  color: var(--footer-bar-text);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}
.footer-bottom-main a { color: var(--footer-bar-text); }
.footer-copy-text-right img {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

/* --------------------------------------------------------------------------
   7. Responsive — the theme's own breakpoints, at its own values.
   1179 and 767 are the child theme's; 568 is its large-phone footer variant.
   -------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 1179px) {
  .container { padding-left: 10px; padding-right: 10px; }

  #main-header { padding: 18px 0; }
  .logo_container { width: 17%; }
  #logo { max-width: 100%; }
  #et-top-navigation { width: 65%; }
  .header-search-main { width: 16%; padding-top: 0; }
  ul#top-menu > li { margin: 0 23px 0 0; }
  ul#top-menu > li > a { padding: 10px 0; font-size: 15px; }
  ul#top-menu > li.menu-item-has-children > a::before { top: 17px; }

  h3 { font-size: 24px; line-height: 29px; }
  p, li { font-size: 16px; line-height: 22px; }
  .button { padding: 12px 25px 10px; font-size: 14px; }

  .page_title { padding: 95px 10px; }
  .page_title h1 { font-size: 40px; line-height: 45px; }
  .single-business_cases .page_title h1 { font-size: 28px; line-height: 36px; }
  .single-business-title { width: 365px; }
  .single-post .page_title h1 { width: 80%; padding: 0 0 11px; font-size: 36px; line-height: 38px; }
  .single-post .page_title h6 { padding: 0 0 8px; }
  .single-post .page_title .post-item-info ul li { margin: 0 30px 0 0; }

  .home-slider-main .et_pb_slide_description { padding: 150px 10px 130px; }
  .home-slider-main .et_pb_slide_description h1 { font-size: 44px; line-height: 48px; }

  .enterprice-content-l { width: 60%; padding-top: 60px; }
  .enterprice-image-r { width: 38%; margin-right: 0; margin-left: 0; }

  .our-excerptice-main-section { padding: 60px 0; }
  .excerptice-list-section { width: 31%; margin-right: 3.5%; }

  .team-main-section { padding: 60px 0 70px; }
  .team-main-section::after { width: 59%; }
  .focused-text-l { width: 34%; }
  .focused-team-r { width: 50%; }
  .our-work-image { margin-left: 0; }

  .get-started-text-l { width: 74%; }

  #footer-widgets { padding: 48px 0 45px; }
  #footer-widgets .footer-widget:first-child { width: 11%; margin: 0 3% 0 0; }
  #footer-widgets .footer-widget:nth-child(2) { width: 18%; margin: 0 3% 0 0; }
  #footer-widgets .footer-widget:nth-child(3) { width: 18%; margin: 0 3% 0 0; }
  #footer-widgets .footer-widget:nth-child(4) { width: 26%; margin: 0 3% 0 0; }
  #footer-widgets .footer-widget:nth-child(5) { width: 15%; margin: 0; }
  #footer-widgets .footer-widget ul li { font-size: 15px; line-height: 20px; }
  #footer-widgets .footer-widget h4.title { font-size: 17px; }
  .footer-bottom-main p { font-size: 15px; }
}

@media only screen and (max-width: 767px) {
  .container { padding-left: 10px; padding-right: 10px; }

  h3 { margin-top: 24px; font-size: 21px; line-height: 29px; }
  h3 br { display: none; }
  h4 { font-size: 22px; line-height: 27px; }
  p, li { font-size: 16px; line-height: 20px; }

  /* The desktop header row is replaced wholesale by the mobile block. */
  .et_menu_container { display: none; }
  .mobile-header-main { display: block; }
  #main-header { padding: 15px 0; }

  .mobile-header-left { float: left; width: 120px; }
  .mobile-header-left .logo_container { width: 65px; }
  .mobile-main-deatils-div { float: right; width: 160px; }
  .mobile-main-deatils-div .header-search-main { float: left; width: 115px; padding-top: 0; }
  .header-search-main input[type="search"],
  .header-search-main input[type="submit"] { height: 34px; }

  .menu-toggle {
    float: right;
    width: 35px;
    height: 35px;
    padding: 0;
    border: 1px solid var(--navy-mobile);
    border-radius: 2px;
    background: #fff;
    cursor: pointer;
  }
  .menu-toggle span {
    display: block;
    width: 17px;
    height: 2px;
    margin: 3px auto;
    background: var(--navy-mobile);
  }

  .mobile_menu {
    display: none;
    position: absolute;
    left: 0;
    z-index: 9999;
    width: 100%;
    margin-top: 15px;
    padding: 0;
    background: var(--orange-mobile);
    box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
    text-align: left;
  }
  .mobile_menu[data-open] { display: block; }
  .mobile_menu li a {
    display: block;
    padding: 10px 15px;
    border-bottom: 1px dotted #fff;
    color: #fff;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    text-transform: uppercase;
  }
  /* The source's collapsible sub-menu is permanently open — a Divi rule with
     !important defeats its own toggle — so it is rendered open here too. */
  .mobile_menu ul.sub-menu { background: var(--orange-mobile-2); }

  .page_title { padding: 58px 10px; }
  .page_title h1 { font-size: 27px; line-height: 38px; }
  .page_title h6 { font-size: 17px; line-height: 19px; }
  .page-template-practices .page_title h6 { padding: 0 0 4px; font-size: 20px; line-height: 22px; }
  .single-business_cases .page_title h1 { padding: 8px 0 0; font-size: 23px; line-height: 30px; }
  .single-business-title { width: 100%; }
  .single-post .page_title h1 { width: 100%; padding: 0 0 6px; font-size: 26px; line-height: 28px; }
  .single-post .page_title h6 { padding: 0 0 8px; }
  .single-post .page_title .post-item-info ul li { margin: 0 15px 0 0; font-size: 15px; }

  .home-slider-main .et_pb_slide_description { padding: 90px 10px 80px; }
  .home-slider-main .et_pb_slide_description h1 { font-size: 34px; line-height: 38px; }
  .home-slider-main .et_pb_slide_description p { padding-bottom: 26px; font-size: 18px; line-height: 24px; }
  .slider-button-div a { padding: 16px 32px; font-size: 15px; }

  .enterprice-content-l { float: none; width: 100%; padding-top: 45px; }
  .enterprice-image-r { float: none; width: 100%; margin: 30px 0 0; }

  .our-excerptice-main-section { padding: 45px 0; }
  .our-top-title p { font-size: 18px; line-height: 26px; }
  .excerptice-list-section { float: none; width: 100%; margin: 0 0 40px; }
  .excerptice-list-section:last-child { margin-bottom: 0; }

  .team-main-section { padding: 45px 0 50px; }
  .team-main-section::after { display: none; }
  .focused-text-l,
  .focused-team-r { float: none; width: 100%; }
  .focused-team-r { margin-top: 40px; }
  .focused-team-r h3 { padding-bottom: 30px; }
  .our-work-image { margin: 32px 0 0; }
  .scroll-main-div { max-height: none; overflow: visible; }

  .get-started-text-l,
  .get-started-button-r { float: none; width: 100%; }
  .get-started-button-r { margin-top: 24px; padding-top: 0; }
  .get-started-button-r .let-talk-button a { display: inline-block; }

  #footer-widgets { width: 300px; margin: 0 auto; padding: 35px 0 25px; }
  #footer-widgets .footer-widget:first-child { width: 100%; margin: 0 0 22px; }
  #footer-widgets .footer-widget:nth-child(2) { width: 45%; margin: 0 24px 25px 0; }
  #footer-widgets .footer-widget:nth-child(3) { width: 47%; margin: 0; }
  #footer-widgets .footer-widget:nth-child(4) { width: 100%; margin: 0 0 18px; }
  #footer-widgets .footer-widget:nth-child(4) ul li { margin-bottom: 7px; }
  #footer-widgets .footer-widget:nth-child(5) { width: 100%; margin-bottom: 0; }
  #footer-widgets .footer-widget:nth-child(5) ul li { margin-right: 12px; }
  #footer-widgets .footer-widget ul li { font-size: 15px; line-height: 21px; }
  .copy-text-left { float: none; width: 100%; text-align: center; }
  .footer-copy-text-right { float: left; width: 100%; padding-top: 15px; text-align: center; }
  .footer-bottom-main p { font-size: 14px; line-height: 20px; }
}

@media only screen and (min-width: 568px) and (max-width: 767px) {
  h3 { font-size: 25px; line-height: 30px; }
  #footer-widgets { width: 100%; padding: 40px 0 28px; }
  #footer-widgets .footer-widget:first-child { width: 18%; margin: 0 0 22px; }
  #footer-widgets .footer-widget:nth-child(2) { width: 21%; margin: 0 24px 25px 0; }
  #footer-widgets .footer-widget:nth-child(3) { width: 25%; margin: 0; }
  #footer-widgets .footer-widget:nth-child(4) { width: 31%; margin: 0 0 18px; }
  #footer-widgets .footer-widget:nth-child(5) { width: 20%; margin-bottom: 0; }
  #footer-widgets .footer-widget ul li { font-size: 14px; line-height: 20px; }
  .footer-bottom-main p { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   8. Practice landing pages (/agile/, /data/, /technology/, /regulatory/,
      /business-strategy/, /global-sourcing/)
   -------------------------------------------------------------------------- */

.page-template-practices #main-content { background: var(--soft); }
.page-template-practices .page_title h6 { padding: 0 0 8px; font-size: 24px; line-height: 24px; }

.practices-inner-page-content { padding: 78px 0 50px; }
.practices-inner-page-content .et_pb_row { display: flow-root; }
.practices-inne-top-l { float: left; width: 210px; margin: 0 110px 0 0; }
.practices-inne-top-l h4 { padding-bottom: 10px; }
.practices-inne-top-r { float: left; width: 850px; }
.practices-inne-top-r p { padding-bottom: 22px; }


/* Agile is the one practice page with the blue gradient hero. */
.practices-inner-page-content.agile-content {
  padding: 90px 0 75px;
  background-color: var(--blue-grad-a);
  background-image: linear-gradient(to right, var(--blue-grad-a), var(--blue-grad-b));
}
.practices-inner-page-content.agile-content .practices-inne-top-l h4,
.practices-inner-page-content.agile-content .practices-inne-top-r p { color: #fff; }

.practices-inner-faq-section.agile-content { padding-top: 90px; }
.practices-inner-faq-section .top-title-faq h3 { padding-bottom: 35px; }
.practices-faq-main-text { padding: 0; }

/* Accordion.
   The whole row is the click target, as in the original. The toggle is a real
   button inside the heading, stretched over the row so the float layout and the
   document outline both survive. */
.past-listings-main {
  margin-bottom: 98px;
  padding: 65px 0 73px;
  background: #fff;
}
.session-title {
  position: relative;
  margin-bottom: 70px;
  padding: 0 80px 55px;
  border-bottom: 2px solid var(--rule);
  background: url("/media/theme/faq-plus-icon.png") no-repeat 97% 7px;
}
.session-title:has([aria-expanded="true"]) {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  background-image: url("/media/theme/faq-minus-icon.png");
}
.session-content-main:last-of-type .session-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.faq-image-div { float: left; width: 121px; }
.faq-image img { display: block; }
.feq-content-r { float: left; width: 899px; padding-left: 38px; }
.feq-content-r h3 { padding-bottom: 7px; font-size: 30px; line-height: 35px; }
.feq-content-r h3 button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* Stretch the hit area over the row without covering the panel. */
.feq-content-r h3 button::before {
  content: "";
  position: absolute;
  inset: 0;
}

.session-desc {
  margin-bottom: 72px;
  padding: 20px 80px 78px 239px;
  border-bottom: 2px solid var(--rule);
}
.session-content-main:last-of-type .session-desc {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.session-desc h6 {
  padding: 24px 0 12px;
  color: var(--black);
  font-size: 22px;
  line-height: 22px;
  font-weight: 700;
}
.session-desc ul { padding-left: 1em; }
.session-desc ul li { list-style-type: disc; }
.session-desc ul li ul li { list-style-type: circle; }
.session-desc ul li ul li ul li { list-style-type: square; }

@media only screen and (min-width: 768px) and (max-width: 1179px) {
  .practices-inne-top-l { width: 24%; margin-right: 4%; }
  .practices-inne-top-r { width: 72%; }
  .session-title { padding: 0 60px 40px 20px; background-position: right 20px top 7px; }
  .feq-content-r { width: calc(100% - 121px); }
  .feq-content-r { width: calc(100% - 121px); }
  .session-desc { padding: 20px 20px 50px 159px; }
  .past-listings-main { padding: 45px 0 50px; margin-bottom: 60px; }
}

@media only screen and (max-width: 767px) {
  .practices-inner-page-content { padding: 45px 0 30px; }
  .practices-inner-page-content.agile-content { padding: 45px 0 40px; }
  .practices-inne-top-l,
  .practices-inne-top-r { float: none; width: 100%; margin: 0; }
  .practices-inne-top-r { padding-top: 20px; }
  .practices-inner-faq-section.agile-content { padding-top: 45px; }
  .past-listings-main { margin-bottom: 45px; padding: 30px 20px; }
  .session-title { margin-bottom: 35px; padding: 0 40px 28px 0; background-position: right 0 top 4px; }
  .faq-image-div { display: none; }
  .feq-content-r { float: none; width: 100%; padding-left: 0; }
  .feq-title { font-size: 22px; line-height: 27px; }
  .session-desc { margin-bottom: 35px; padding: 14px 0 34px; }
}


/* --------------------------------------------------------------------------
   9. single.php surfaces — /faqs/<slug>/, /our_expertise/<slug>/ and
      /team/<slug>/ — plus the index.php archive at /faq_categories/<slug>/.

      The theme ships no single-faqs.php / single-team.php / single-our_expertise.php,
      so all three CPTs render through themes/esp/single.php, and with no
      taxonomy-faq_categories.php the archive falls through to themes/esp/index.php.
      Most of what follows is themes/esp/main-style.css, whose 657 lines are
      almost entirely this one template; the rest is the handful of Divi Builder
      layout defaults the FAQ body genuinely depends on, reproduced inline the
      way sections 5 and 8 already reproduce the ones they need.

      Note: main-style.css scopes its hero-meta and page_title overrides to
      `body.single-post`, which is the /blogs/ post only — on single-faqs /
      single-team / single-our_expertise those rules are INERT. That is
      load-bearing and is reproduced by leaving them alone here.
   -------------------------------------------------------------------------- */

/* 9.1 Hero meta (author + date) — single.php:21-27.
   With the `body.single-post` rules inert, the two items fall through to
   `body p, body li` (style.css:239-245) and STACK; they do not float side by
   side, and — unlike `body p` — `body li` is never restated in any of the
   original's media queries, so 18px/25px holds at every width. Stating it
   here pins that, above section 7's `p, li` steps. */
.page_title .post-item-info ul { margin: 0; padding: 0; list-style: none; }
.page_title .post-item-info li {
  display: list-item;
  float: none;
  margin: 0;
  color: var(--body);
  font-size: 18px;
  line-height: 25px;
  font-weight: 400;
}
/* /faq_categories/<slug>/ has no hero title at all: index.php:10 calls
   single_post_title(), which returns nothing on a taxonomy archive, so the
   band is 167 + 8 + 167 = 342px. The heading is kept for assistive tech; its
   only child is absolutely positioned, so the h1 generates no line box and the
   band height is unchanged. */
.page_title h1.page_title-empty { padding: 0 0 8px; }

/* 9.2 Body shell — main-style.css:1-4,19-32,128-131 ; style.css:684-686 */
.single-post-section,
.blog-page-section { background: var(--soft); }
.single-post-section { padding: 100px 0; }
.blog-page-section { padding: 105px 0 60px; }
/* Divi's `body:not(.et-tb) #main-content .container{padding-top:58px}` (1,2,1)
   outranks the child theme's `#main-content .container{padding-top:0}`
   (style.css:1200, 1,1,0), so this 58px is real space in the original. */
.single-post-section > .container,
.blog-page-section > .container { padding-top: 58px; }

#left-area { float: left; width: 680px; margin: 0; padding: 0; }
#sidebar { float: right; width: 405px; margin: 0; padding: 0; }

/* 9.3 "Recent Posts" sidebar widget — main-style.css:33-84.
   The widget title is an <h4> in the original and the item title an <h4> too;
   they are emitted as h2/h3 for a legal outline and restyled to the original
   values here. */
#sidebar .et_pb_widget { margin: 0 0 40px; padding: 42px 45px 50px; background: #fff; }
#sidebar .et_pb_widget:last-child { margin: 0; }
#sidebar .widgettitle {
  margin: 0;
  padding: 0 0 28px;
  color: var(--blue);
  font-size: 22px;
  line-height: 26px;
  font-weight: 600;
}
.recent-posts-list { margin: 0; padding: 0; list-style: none; }
.recent-posts-list > li { margin: 0; padding: 0 0 30px; }
.recent-posts-list > li:last-child { padding: 0; }
.recent-post-img { float: left; width: 145px; }
.recent-post-img img { display: block; width: 100%; }
.recent-post-item-right { float: right; width: 150px; margin-top: -8px; }
.recent-posts-list h3 {
  margin: 0;
  padding: 0;
  color: var(--body);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}
.recent-posts-list h3 a { color: inherit; }

/* 9.4 Share row — single.php:61-69 ; main-style.css:186-206.
   The icons are used at natural size: 7x16, 18x16, 14x16. */
.single-post-share {
  margin: 0 0 64px;
  padding: 36px 0 65px;
  border-bottom: 2px solid var(--rule);
}
.single-post-share ul { margin: 0; padding: 0; list-style: none; }
.single-post-share li { float: left; margin: 0 20px 0 0; }
.single-post-share li a,
.single-post-share li img { display: block; }
.single-post-share li span {
  display: block;
  padding: 0 20px 0 0;
  color: var(--body);
  font-size: 20px;
  line-height: 16px;
  font-weight: 600;
}

/* 9.5 FAQ body copy — main-style.css:150-164 */
.entry-content p { padding: 0 0 30px; line-height: 24px; }
/* Divi's `.et_pb_text > :last-child{padding-bottom:0}` matches the
   .et_pb_text_inner wrapper, NOT the last paragraph inside it, so the final
   <p> of every text module keeps its 30px. Reproduced literally — it is real
   height in the original. */
.entry-content .et_pb_text > :last-child { padding-bottom: 0; }
.entry-content img { display: block; }
.entry-content h2 {
  padding: 0 0 28px;
  color: var(--black);
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
}
/* Divi's `#left-area ul,.entry-content ul{list-style-type:disc;padding:0 0 23px 1em}`
   is cancelled by the child theme at style.css:293-296, at every depth — so
   these lists have no bullets and no indent, and a nested list reads flat. */
.entry-content ul { padding: 0 0 14px; list-style: none; }
/* A nested list keeps a full line of space beneath it, as in the source. */
.entry-content ul ul { padding-bottom: 18px; }

/* 9.6 The Divi Builder payload inside the 680px column.
   Every one of the 22 FAQ posts is a builder post — the six practice-page
   accordions re-render the same the_content() and every one of them is a
   .et_pb_section > .et_pb_row > .et_pb_column_4_4 > .et_pb_text, empty text
   module included. Only /faqs/agile-transformation/ (post 169) adds the
   .faq-column-main-div row of three 1/3 columns, and it is also the only FAQ
   post whose builder settings zero the section and first-row padding
   (et-cache/169/et-core-unified-cpt-169.min.css). Rows are 80% of 680 = 544px,
   centred, so 68px either side. */
.entry-content .et_pb_section { position: relative; background: #fff; }
.entry-content .et_pb_row {
  position: relative;
  width: 80%;
  max-width: var(--container);
  margin: auto;
}
.entry-content .et_pb_row::after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  width: 0;
  height: 0;
  line-height: 0;
}
.entry-content .et_pb_column { position: relative; z-index: 2; float: left; min-height: 1px; }
.entry-content .et_pb_image {
  display: block;
  margin-left: 0;
  margin-right: auto;
  line-height: 0;
  text-align: left;
}
.entry-content .et_pb_image .et_pb_image_wrap { display: inline-block; position: relative; max-width: 100%; }
/* The source images are squeezed to 161.4x105.7 by the 1/3 column: the 290px
   width attribute is capped by `img{max-width:100%}` and `height:auto` rescales.
   That squeeze is the original; the same files render full size only inside the
   practice-page accordion. (et-cache/169 gets there via an explicit
   `width:auto`, which is not restated here because it would also discard the
   width/height attributes this build adds to reserve the box before load.) */
.entry-content .et_pb_image .et_pb_image_wrap img { position: relative; }

/* Divi's own column breakpoint. Below 981px the gutter rules simply do not
   exist, so the columns go full width and stack. */
@media only screen and (min-width: 981px) {
  .entry-content .et_pb_section { padding: 4% 0; }
  .entry-content .et_pb_row { padding: 2% 0; }
  .entry-content .et_pb_gutters3 .et_pb_column { margin-right: 5.5%; }
  .entry-content .et_pb_gutters3 .et_pb_column_4_4 { width: 100%; }
  .entry-content .et_pb_gutters3 .et_pb_column_4_4 .et_pb_module { margin-bottom: 2.75%; }
  .entry-content .et_pb_gutters3 .et_pb_column_1_3 { width: 29.6667%; }
  .entry-content .et_pb_gutters3 .et_pb_column_1_3 .et_pb_module { margin-bottom: 9.27%; }
  .entry-content .et_pb_row .et_pb_column:last-child { margin-right: 0; }
  .entry-content .et_pb_row .et_pb_column .et_pb_module:last-child { margin-bottom: 0; }
}
@media only screen and (max-width: 980px) {
  .entry-content .et_pb_section { padding: 50px 0; }
  .entry-content .et_pb_row { padding: 30px 0; }
  .entry-content .et_pb_column { width: 100%; margin-bottom: 30px; }
  .entry-content .et_pb_row .et_pb_column:last-child { margin-bottom: 0; }
  .entry-content .et_pb_column .et_pb_module { margin-bottom: 30px; }
  .entry-content .et_pb_row .et_pb_column .et_pb_module:last-child { margin-bottom: 0; }
}
/* Divi's 1475px step (et-core-unified-cpt-*.min.css). */
@media only screen and (min-width: 1475px) {
  .entry-content .et_pb_section { padding: 59px 0; }
  .entry-content .et_pb_row { padding: 29px 0; }
}
/* The post-169 zeroes. Both selectors are one class more specific than the
   defaults above, so they win in every media context without repetition.
   `:has()` stands in for "this is the post whose builder zeroed the section" —
   the three-column row is the only thing that distinguishes it, and where
   `:has()` is unsupported the page merely keeps Divi's default section
   padding. */
.entry-content .et_pb_section:has(.faq-column-main-div) { padding: 0; }
.entry-content .et_pb_row.inner-faq-content { padding: 0; }

/* The three column headings are <h6> in the original, and the child theme's
   only rule for them is scoped to `.session-desc` (the accordion), so on the
   FAQ single they fall through to Divi's raw heading styling — its reset
   `h1..h6{color:#333;padding-bottom:10px;line-height:1em;font-weight:500}`
   plus `.et_pb_column_1_3 h6{font-size:15px}`, in Divi's own body face.
   Reproduced verbatim; the tag is <h2> so the document keeps a legal heading
   order, and the extra class keeps it clear of `.entry-content h2`. */
.entry-content .faq-column-main-div .et_pb_column h2 {
  padding: 0 0 10px;
  color: #333;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1em;
  font-weight: 500;
}

/* 9.7 /faq_categories/<slug>/ listing — index.php:29-81 ; main-style.css:1-108.
   index.php discards the queried term and re-queries post_type=post with
   posts_per_page=-1, so all six archives render the site's one blog post.
   It emits no #loadMore: that control belongs to /blogs/. */
.blog-posts-list .post-item { padding: 0 0 60px; }
.post-item-img { float: left; width: 290px; }
.post-item-img img { display: block; }
.post-item-right { float: right; width: 350px; }
.blog-posts-list .post-item-info ul { margin: 0; padding: 0; list-style: none; }
.blog-posts-list .post-item-info li {
  float: left;
  margin: 0 30px 0 0;
  color: var(--meta);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.blog-posts-list .post-item-info li:last-child { margin: 0; }
.blog-posts-list .post-item h2 {
  margin: 0;
  padding: 8px 0 17px;
  color: var(--blue);
  font-size: 22px;
  line-height: 26px;
  font-weight: 600;
}
.blog-posts-list .post-item h2 a,
.blog-posts-list .post-item-info li a { color: inherit; }
.post-item-desc p { line-height: 24px; }

/* 9.8 main-style.css:371-494 — the theme's 768-1179 block. */
@media only screen and (min-width: 768px) and (max-width: 1179px) {
  .single-post-section { padding: 70px 0; }
  .blog-page-section { padding: 70px 0 40px; }

  #left-area { width: 66%; }
  #sidebar { width: 30%; }

  #sidebar .et_pb_widget { margin: 0 0 30px; padding: 20px; }
  #sidebar .widgettitle { padding: 0 0 20px; font-size: 20px; line-height: 24px; }
  .recent-posts-list > li { padding: 0 0 20px; }
  .recent-post-img { width: 33%; }
  .recent-post-item-right { width: 63%; margin-top: -5px; }
  .recent-posts-list h3 { font-size: 14px; line-height: 18px; }

  .entry-content p { padding: 0 0 20px; line-height: 22px; }
  .entry-content h2 { padding: 0 0 18px; font-size: 26px; line-height: 30px; }

  .single-post-share { margin: 0 0 40px; padding: 22px 0 40px; }
  .single-post-share li span { padding: 0 12px 0 0; }

  .blog-posts-list .post-item { padding: 0 0 35px; }
  .post-item-img { width: 36%; }
  .post-item-img img { width: 100%; }
  .post-item-right { width: 60%; }
  .blog-posts-list .post-item-info li { margin: 0 20px 0 0; }
  .blog-posts-list .post-item h2 { padding: 4px 0 8px; font-size: 18px; line-height: 22px; }
  .post-item-desc p { line-height: 21px; }
}

/* 9.9 main-style.css:497-658 — the theme's <=767 block. */
@media only screen and (max-width: 767px) {
  .single-post-section,
  .blog-page-section { padding: 30px 0; }

  #left-area { float: none; width: 100%; }
  #sidebar { float: none; width: 100%; padding: 40px 0 0; }

  #sidebar .et_pb_widget { margin: 0 0 20px; padding: 20px; }
  #sidebar .widgettitle { padding: 0 0 18px; }
  .recent-posts-list > li { padding: 0 0 20px; }
  .recent-post-img { width: 34%; }
  .recent-post-item-right { width: 61%; margin-top: -4px; }
  .recent-posts-list h3 { font-size: 15px; line-height: 19px; }

  .entry-content p { padding: 0 0 18px; line-height: 21px; }
  .entry-content h2 { padding: 0 0 12px; font-size: 19px; line-height: 24px; }

  .single-post-share { margin: 0 0 36px; padding: 20px 0 30px; }
  .single-post-share li { margin: 0 15px 0 0; }
  .single-post-share li span { padding: 0 10px 0 0; }

  .blog-posts-list .post-item { padding: 0 0 28px; }
  .post-item-img,
  .post-item-img img { width: 100%; }
  .post-item-right { float: left; width: 100%; padding: 16px 0 0; }
  .blog-posts-list .post-item-info li { margin: 0 12px 0 0; }
  .blog-posts-list .post-item h2 { padding: 6px 0 8px; font-size: 19px; line-height: 23px; }
  .post-item-desc p { line-height: 22px; }
}

/* --------------------------------------------------------------------------
   10. /about-esp/ — page.php (page-id-18), six stacked Divi Builder sections.

       Sources: themes/esp/style.css:810-1000 (every geometry value), the
       per-page overrides in et-cache/18/et-core-unified-18.min.css and
       et-core-unified-deferred-18.min.css (the three section backgrounds, and
       the `padding-top/bottom:0!important` that flattens every row), plus
       Divi's own `h1..h6{padding-bottom:10px}` where the theme sets none.
   -------------------------------------------------------------------------- */

/* Divi puts `word-wrap:break-word` on every .et_pb_text module; this port has
   no equivalent global, so the sections in this lane declare it and let it
   inherit. Without it the 140-character Flash-cookie URL in the privacy policy
   pushes the document to 907px wide on a 420px phone. */
.about-content-section1,
.about-our-content-div,
.our-practices-main-section,
.about-team-section-div,
.about-resources-section,
.business-cat-posts,
.legal-content .contact-map-section { overflow-wrap: break-word; }

/* 10.1 Intro band. The original is
   `.about-content-section1.et_section_regular{padding:86px 0 70px 211px}`
   inside `#page-container{max-width:1600px;margin:auto}`, with
   `.et_pb_row_0{width:100%;max-width:100%}` releasing the row from the 1180
   container. This port has no #page-container, so the 1600px cap is re-imposed
   on the row itself — which puts the copy at exactly the same x at every width. */
.about-content-section1 { padding: 86px 0 70px; }
.about-content-section1 .about-content-row {
  display: flow-root;
  max-width: 1600px;
  margin: 0 auto;
  padding-left: 211px;
}
.about-content-image { float: right; margin: 0 0 38px 60px; }
.about-content-section1 h6 {
  padding-bottom: 12px;
  color: var(--black);
  font-size: 22px;
  line-height: 22px;
  font-weight: 500;
}
.about-content-section1 h3 { padding-bottom: 21px; }
/* Divi's `.et_pb_text > :last-child{padding-bottom:0}` matches the
   .et_pb_text_inner wrapper, not the last <p> inside it, so in the original
   every paragraph here keeps its 25px. The `:last-of-type` half of the
   selector re-states that against this port's base rule. */
.about-content-section1 p,
.about-content-section1 p:last-of-type { padding-bottom: 25px; }

/* 10.2 The alternating philosophy / solutions bands. The body column is FIRST
   in the DOM but floats right; the title column is second and floats left. */
.about-our-content-div { padding: 90px 0 0; }
.about-our-content-div .et_pb_row { display: flow-root; }
/* et-cache/18: `div.et_pb_section.et_pb_section_1{background-image:…}` and
   `.et_pb_section_2.et_pb_section{background-color:#f5f7fa}`. The first band
   carries no background-colour in the original either — see gaps, the photo is
   not yet in public/media/ and must be copied before this ships. */
.about-our-content-div.first {
  background-image: url("/media/2019/10/about-content-bg.jpg");
  background-position: 50% 50%;
  background-size: cover;
}
.about-our-content-div.second { background-color: var(--soft); }
.about-our-content-r { float: right; width: 775px; margin: 0; }
.about-our-content-l { float: left; width: 325px; margin: 0; }
.about-our-content-div .about-our-content-r p,
.about-our-content-div .about-our-content-r p:last-of-type { padding-bottom: 20px; line-height: 24px; }
.about-our-content-div .about-our-content-l h3 { padding-bottom: 0; font-size: 40px; text-align: center; }
.about-our-content-div .about-our-content-l p { font-weight: 500; text-align: center; }
.about-our-content-div.first .about-our-content-l h3,
.about-our-content-div.first .about-our-content-l p,
.about-our-content-div.first .about-our-content-r p { color: #fff; }
.about-image { padding-top: 68px; }
.about-our-content-div.first .about-image { padding-top: 22px; }
.about-image img { display: block; }

/* 10.3 "Our Practices" — eight white cards on #0d4879, four per row.
   4 x 280 + 3 x 20 = 1180. Each card is 88px of header + 328px of body = 416px. */
.our-practices-main-section { padding: 80px 0; background-color: #0d4879; }
.our-practices-title h3 { padding-bottom: 20px; color: #fff; }
.our-practices-main-section .et_pb_row { display: flow-root; }
.practice-inner-row .et_pb_column {
  float: left;
  width: 280px;
  margin: 0 20px 20px 0;
  background: #fff;
}
.practice-inner-row .et_pb_column:last-child { margin-right: 0; }
.about-practices-list { height: 88px; padding: 36px 25px 0 40px; }
.about-practices-img { display: inline-block; vertical-align: middle; }
.about-practices-img img { display: block; }
.about-practices-title { display: inline-block; padding-left: 8px; vertical-align: middle; }
.about-practices-title h4 {
  padding-bottom: 0;
  color: var(--blue);
  font-size: 20px;
  line-height: 20px;
  font-weight: 600;
}
.middle-text-div { height: 328px; padding: 12px 40px 20px; }
.middle-text-div p,
.middle-text-div p:last-of-type {
  padding-bottom: 7px;
  color: var(--black);
  font-size: 14px;
  line-height: 17px;
}
/* The theme's `… .practice-inner-row .et_pb_column ul{padding:2px 0 6px 20px}`
   loses to `#left-area ul{padding:0;list-style-type:none}` in the original, and
   the 14px rule is scoped to <p>, so the Regulatory card's three list items stay
   un-bulleted, un-indented and at the 18px/25px body scale. The base ul/li rules
   already reproduce that exactly at desktop; see the responsive blocks below. */

/* 10.4 Management team — two-up, 48% columns with a 47px gutter.
   48% x 2 + 47 = 1179.8 of the 1180 row. The per-person values repeat section 5's
   global .team-list-content rules so this section cannot break if those are
   later scoped to the homepage. */
.about-team-section-div { padding: 88px 0 54px; }
.about-team-section-div .et_pb_row { display: flow-root; }
.about-team-section-div .team-top-title { margin-bottom: 22px; }
.about-team-section-div .team-top-title h3 { padding-bottom: 10px; }
.about-team-section-div .team-list-main ul { display: flow-root; }
.about-team-section-div .team-list-section {
  float: left;
  width: 48%;
  margin: 0 47px 22px 0;
}
.about-team-section-div .team-list-section:nth-child(2n) { margin-right: 0; }
.about-team-section-div .team-list-content h4 {
  padding-bottom: 5px;
  color: var(--blue);
  font-size: 26px;
  line-height: 26px;
  font-weight: 700;
}
.about-team-section-div .team-list-content h4 a { color: inherit; }
.about-team-section-div .team-list-content h6 {
  padding-bottom: 10px;
  color: #9c9d9f;
  font-size: 18px;
  line-height: 20px;
  font-weight: 400;
}
.about-team-section-div .team-list-content p { font-size: 16px; line-height: 25px; }

/* 10.5 "Our Resources" — 210px title column left, 835px body column right. */
.about-resources-section {
  padding: 92px 0 75px;
  background-image: url("/media/2019/10/about-resources-bg.jpg");
  background-position: 50% 50%;
  background-size: cover;
}
.about-resources-section .et_pb_row { display: flow-root; }
.about-resources-title-l { float: left; width: 210px; margin: 0; padding-top: 20px; }
.about-resources-title-l h3 { padding-bottom: 10px; color: #fff; font-size: 40px; }
.about-resources-content-r { float: right; width: 835px; }
.about-resources-section .about-resources-content-r p,
.about-resources-section .about-resources-content-r p:last-of-type {
  padding-bottom: 25px;
  color: #fff;
  line-height: 23px;
}

/* --------------------------------------------------------------------------
   11. /practices/ — teamplate-practices.php (page-id-20).

       The archived page carries no featured image, so the template's `else`
       branch prints a bare `.page_title.container` with no background at all,
       and the 60px white title is invisible on the white body. That defect is
       reproduced, not fixed — see gaps for the one-line change if the client
       wants it legible.

       The body is the theme's .business-cats-posts-inner grid (style.css:
       1208-1246), which exists solely to style this page's shortcode, holding
       the three business_cases the shortcode declared. 3 x 360 + 2 x 50 = 1180.
   -------------------------------------------------------------------------- */

/* teamplate-practices.php prints the bare `.page_title.container` OUTSIDE
   #main-content, so in the original the band sits on the white body rather than
   on the template's own #f5f7fa. This port nests the banner inside #main-content,
   so the white is restored here — scoped so it can never reach the plain banner
   the /faq_categories/ archives and the single-post template also use. */
.page-template-practices .page-featured-image-full--plain { background: #fff; }

.business-cat-posts { margin-top: 20px; padding: 80px 0 48px; background: var(--soft); }
.business-cats-posts-inner .business-details-list {
  float: left;
  width: 360px;
  margin: 0 50px 50px 0;
}
.business-cats-posts-inner .business-details-list:nth-child(3n) { margin-right: 0; }
.business-image img { display: block; width: 100%; }
.business-content-bottom {
  height: 160px;
  padding: 30px 38px 40px;
  background: #fff;
  text-align: center;
}
/* The original heading is an <h5>; this port emits an <h2> so the document
   outline stays legal under the page's single <h1>. Both are styled. */
.business-content-bottom h2,
.business-content-bottom h5 {
  padding-bottom: 7px;
  color: var(--blue);
  font-size: 22px;
  line-height: 25px;
  font-weight: 600;
}
.business-content-bottom h2 a,
.business-content-bottom h5 a { color: inherit; }
.business-content-bottom h6 {
  color: var(--body);
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
}
/* Stand-in for the ajax plugin's own load-more control, at the geometry the
   theme gives the one it does ship (main-style.css:109-127). */
.practices-load-more {
  display: block;
  width: 210px;
  height: 60px;
  margin: 0 auto;
  border: 2px solid var(--rule-light);
  color: var(--blue);
  font-size: 16px;
  line-height: 56px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}
.practices-load-more span {
  padding: 0 22px 0 0;
  background: url("/media/theme/load-more-icon.jpg") no-repeat right center;
}

/* --------------------------------------------------------------------------
   12. /privacy-policy/ — template-home.php (page-id-475). No banner at all:
       one white .contact-map-section of six heading + body rows. Scoped to the
       body's own `legal-content` class so it can never reach the contact page's
       own .contact-map-section.
   -------------------------------------------------------------------------- */

.legal-content .contact-map-section { padding: 92px 0 66px; background: #fff; }
/* Divi's column is floated, so it contains `body h3{margin-top:40px}` instead of
   letting it collapse out of the row. flow-root reproduces that containment —
   without it every row starts 40px low and the six-row rhythm shifts. */
.legal-content .legal-row { display: flow-root; }
/* Divi's `.et_pb_gutters3 .et_pb_column_4_4 .et_pb_module{margin-bottom:2.75%}`
   — 32.45px on the 1180px row, and it scales with the row. Divi swaps it for a
   flat 30px below its own 981px breakpoint (see section 13). style.css:682
   zeroes it on the one module that carries .map-title-div, at every width. */
.legal-content .legal-heading:not(.map-title-div) { margin-bottom: 2.75%; }
/* The original's first heading is an <h3> like the other five (`.map-title-div h4`
   never matches it); this port promotes it to the page's <h1>, so `body h3`'s
   values are restated here. */
.legal-content .legal-title {
  margin-top: 40px;
  padding-bottom: 10px;
  color: var(--black);
  font-size: 40px;
  line-height: 45px;
  font-weight: 700;
}
/* Divi's global `h1..h6{padding-bottom:10px}`, which this port's base drops. */
.legal-content .legal-row h3,
.legal-content .legal-body h4 { padding-bottom: 10px; }

/* --------------------------------------------------------------------------
   13. Responsive for sections 10-12 — the original's own 1260/1599, 1179/1180,
       767/768 and 567/568 breakpoints, in the file order the original uses
       (the 568-767 block last, so it wins inside that range).
   -------------------------------------------------------------------------- */

/* style.css:1452-1466 — the intro inset drops to 42px only in this band. */
@media only screen and (min-width: 1260px) and (max-width: 1599px) {
  .about-content-section1 { padding: 85px 0 70px; }
  .about-content-section1 .about-content-row { padding-left: 42px; }
  .about-content-section1 h3 { font-size: 37px; }
  .about-content-image { margin: 0 0 13px 40px; }
}

/* style.css:1876-1975 ; 1810-1832 ; 1697 ; main-style.css:405-411 */
@media only screen and (min-width: 768px) and (max-width: 1179px) {
  .about-content-section1 { padding: 54px 0 30px; }
  .about-content-section1 .about-content-row { padding: 0 10px; }
  .about-content-image { width: 41%; margin: 0 0 38px 25px; }

  .about-our-content-div { padding: 55px 0 44px; }
  .about-our-content-l { width: 30%; }
  .about-our-content-r { width: 66%; }
  .about-our-content-div .about-our-content-l h3 { font-size: 28px; }
  .about-our-content-div .about-our-content-l p { line-height: 20px; }
  .about-our-content-div .about-our-content-r p,
  .about-our-content-div .about-our-content-r p:last-of-type { line-height: 20px; }

  .our-practices-main-section { padding: 50px 0; }
  .practice-inner-row .et_pb_column { width: 23.5%; margin-right: 2%; margin-bottom: 19px; }
  .about-practices-list { height: 85px; padding: 24px 16px 0 15px; }
  .about-practices-title { width: 64%; padding-left: 8px; }
  .about-practices-title h4 { font-size: 15px; line-height: 17px; }
  .middle-text-div { height: 310px; padding: 5px 13px 20px; }
  .middle-text-div p,
  .middle-text-div p:last-of-type { font-size: 12px; line-height: 14px; }

  .about-team-section-div { padding: 50px 0 33px; }
  .about-team-section-div .team-list-section { width: 48%; margin-right: 4%; margin-bottom: 30px; }
  .about-team-section-div .team-list-content h4 { padding-bottom: 5px; font-size: 20px; line-height: 22px; }
  .about-team-section-div .team-list-content h6 { padding-bottom: 5px; font-size: 15px; line-height: 18px; }
  .about-team-section-div .team-list-content p { font-size: 14px; line-height: 20px; }

  .about-resources-section { padding: 58px 0 40px; }
  .about-resources-title-l { width: 25%; padding-top: 20px; }
  .about-resources-title-l h3 { font-size: 35px; }
  .about-resources-content-r { width: 71%; }
  .about-resources-section .about-resources-content-r p,
  .about-resources-section .about-resources-content-r p:last-of-type { padding-bottom: 22px; line-height: 20px; }

  .business-cat-posts { padding: 52px 0 40px; }
  .business-cats-posts-inner .business-details-list { width: 31.333%; margin-right: 3%; margin-bottom: 25px; }
  .business-content-bottom { padding: 18px 20px 31px; }
  .business-content-bottom h2,
  .business-content-bottom h5 { padding-bottom: 7px; font-size: 17px; line-height: 23px; }
  .business-content-bottom h6 { font-size: 14px; line-height: 20px; }
  .practices-load-more { width: 180px; height: 52px; margin-bottom: 30px; font-size: 15px; line-height: 48px; }

  /* The original never scales <li> responsively: its mobile/tablet blocks
     re-declare `body p` alone, so list items keep the 18px/25px desktop scale
     while paragraphs shrink. This port's base scales `p, li` together, so the
     two surfaces in this lane that carry lists restate it. */
  .middle-text-div li,
  .legal-content .legal-body li { font-size: 18px; line-height: 25px; }

  .legal-content .contact-map-section { padding: 50px 0 52px; }
}

/* Divi's own 981px module breakpoint: `.et_pb_column .et_pb_module{margin-bottom:30px}`
   replaces the percentage gutter below it. Section 9.8 already uses this breakpoint. */
@media only screen and (max-width: 980px) {
  .legal-content .legal-heading:not(.map-title-div) { margin-bottom: 30px; }
}

/* style.css:2036-2320 — the original steps this one value again at 1024px. */
@media only screen and (min-width: 1024px) and (max-width: 1179px) {
  .legal-content .contact-map-section { padding: 55px 0 62px; }
}

/* style.css:2758-3098 ; 2866-2890 ; 2700 ; main-style.css:528-534 */
@media only screen and (max-width: 767px) {
  .about-content-section1 { padding: 30px 0 12px; }
  .about-content-section1 .about-content-row { padding: 0 10px; }
  .about-content-image { margin: 0 0 15px; }
  .about-content-section1 h6 { padding-bottom: 8px; font-size: 19px; line-height: 20px; }
  .about-content-section1 h3 { padding-bottom: 10px; }
  .about-content-section1 p,
  .about-content-section1 p:last-of-type { padding-bottom: 18px; }

  .about-our-content-div { padding: 30px 0 0; }
  .about-our-content-l,
  .about-our-content-r { float: none; width: 100%; margin: 0; }
  .about-our-content-l { padding-top: 14px; }
  .about-our-content-div .about-our-content-l h3 { padding-bottom: 6px; font-size: 25px; }
  .about-our-content-div .about-our-content-r p,
  .about-our-content-div .about-our-content-r p:last-of-type { padding-bottom: 18px; line-height: 20px; }
  .about-image { padding-top: 20px; }
  .about-image img { margin: 0 auto; }

  .our-practices-main-section { padding: 25px 0 17px; }
  .practice-inner-row .et_pb_column { float: none; width: 100%; margin: 0 0 15px; }
  .about-practices-list { height: auto; padding: 25px 28px 10px; }
  .about-practices-title { width: auto; }
  .about-practices-title h4 { font-size: 18px; line-height: 20px; }
  .middle-text-div { height: auto; padding: 10px 28px 18px; }
  .middle-text-div p,
  .middle-text-div p:last-of-type { padding-bottom: 8px; font-size: 14px; line-height: 17px; }

  .about-team-section-div { padding: 25px 0 10px; }
  .about-team-section-div .team-top-title { margin-bottom: 10px; }
  .about-team-section-div .team-list-section { float: none; width: 100%; margin: 0 0 20px; }
  .about-team-section-div .team-list-content h4 { font-size: 17px; line-height: 18px; }
  .about-team-section-div .team-list-content h6 { padding-bottom: 4px; font-size: 14px; line-height: 18px; }
  .about-team-section-div .team-list-content p { font-size: 14px; line-height: 16px; }

  .about-resources-section { padding: 18px 0; }
  .about-resources-title-l,
  .about-resources-content-r { float: none; width: 100%; }
  .about-resources-title-l h3 { font-size: 28px; }
  .about-resources-section .about-resources-content-r p,
  .about-resources-section .about-resources-content-r p:last-of-type { padding-bottom: 18px; line-height: 18px; }

  .business-cat-posts { margin-top: 15px; padding: 25px 0 10px; }
  .business-cats-posts-inner .business-details-list { float: none; width: 100%; margin: 0 0 20px; }
  .business-content-bottom { height: auto; padding: 18px 30px 14px; }
  .business-content-bottom h2,
  .business-content-bottom h5 { padding-bottom: 8px; font-size: 17px; line-height: 23px; }
  .business-content-bottom h6 { font-size: 15px; line-height: 22px; }
  .practices-load-more { width: 160px; height: 50px; margin-bottom: 0; font-size: 15px; line-height: 46px; }

  /* See the note in the tablet block: the original scales `body p` alone. */
  .middle-text-div li,
  .legal-content .legal-body li { font-size: 18px; line-height: 25px; }

  .legal-content .contact-map-section { padding: 30px 0 32px; }
  .legal-content .legal-title { font-size: 21px; line-height: 29px; }
}

/* style.css:3101-3282 — the large-phone band, last so it wins inside 568-767. */
@media only screen and (min-width: 568px) and (max-width: 767px) {
  .about-content-image { width: 45%; margin: 0 0 11px 18px; }
  .about-team-section-div .team-list-content h4 { font-size: 19px; line-height: 20px; }
  .about-team-section-div .team-list-content h6 { padding-bottom: 9px; font-size: 15px; line-height: 19px; }
  .about-team-section-div .team-list-content p { font-size: 16px; line-height: 20px; }

  .business-cats-posts-inner .business-details-list { float: left; width: 31.333%; margin-right: 3%; margin-bottom: 20px; }
  .business-cats-posts-inner .business-details-list:nth-child(3n) { margin-right: 0; }
  .business-content-bottom { height: 165px; padding: 20px 12px 16px; }
  .business-content-bottom h2,
  .business-content-bottom h5 { font-size: 15px; line-height: 18px; }
  .business-content-bottom h6 { font-size: 14px; line-height: 19px; }

  .legal-content .legal-title { font-size: 25px; line-height: 30px; }
}


/* --------------------------------------------------------------------------
   10. /contact/ — themes/esp/page.php with the Divi Builder payload for post 16
       (style.css:20-52,80-113,614-810,1663-1741,2165-2198,2669-2753,3197-3241
       plus et-cache/16/et-core-unified-16.min.css).

       /blogs/, /category/uncategorized/ and the single blog post need NO new
       CSS: they are themes/esp/index.php and single.php, already ported in
       section 9 (.blog-page-section, #left-area/#sidebar, .post-item*,
       .recent-post*, .single-post-section, .entry-content, .single-post-share)
       together with both of their responsive steps.

       Contact geometry, all inside the 1180px row: map 780 + rail 400;
       cards 3 x 380 + 2 x 20; the general form's lower row 380 + 20 + 380.
       The markup gives every .et_pb_row the .container class because the child
       theme sets `.container,.et_pb_row{width:100%}` (style.css:136) over
       Divi's `max-width:1180px` — the two are the same rig, padding included.
   -------------------------------------------------------------------------- */

/* 10.1 Module rhythm. Divi's
   `.et_pb_gutters3 .et_pb_column_4_4 .et_pb_module{margin-bottom:2.75%}` is
   32.45px of the 1180px row, zeroed on the last module of a column and on
   .map-title-div (style.css:682,803). The only module on the page it actually
   moves is the blue band's button. */
.contact-map-section .et_pb_module,
.contact-details-main-section .et_pb_module,
.blue-background .et_pb_module,
.contact-form-main-section .et_pb_module { margin-bottom: 2.75%; }
.contact-map-section .et_pb_module:last-child,
.contact-details-main-section .et_pb_module:last-child,
.blue-background .et_pb_module:last-child,
.contact-form-main-section .et_pb_module:last-child,
.contact-map-section .map-title-div,
.contact-form-main-section .map-title-div { margin-bottom: 0; }

/* The section headings are <h4> in the original; the element is <h2> here so
   the document keeps a legal heading order. Every value is the h4's. */
.map-title-div h2 {
  margin: 0;
  padding: 0 0 34px;
  color: var(--black);
  font-size: 30px;
  line-height: 30px;
  font-weight: 700;
  text-align: center;
}

/* 10.2 Map band — style.css:614-687 */
.contact-map-section { padding: 92px 0 66px; }
.contact-map-section .et_pb_tabs { border: none; }
.contact-map-section .et_pb_tabs_controls {
  float: right;
  width: 400px;
  background-color: var(--blue-tab-a);
  background-image: linear-gradient(to bottom, var(--blue-tab-a), var(--blue-tab-b));
}
.contact-map-section .et_pb_tabs_controls li {
  position: relative;
  display: block;
  width: 100%;
  border: none;
}
.contact-map-section .et_pb_tabs_controls button {
  display: block;
  width: 100%;
  padding: 38px 152px 38px 70px;
  border: 0;
  border-bottom: 2px solid var(--blue-tab-rule);
  background: none;
  color: var(--onblue-body-2);
  font-family: var(--sans);
  font-size: 22px;
  line-height: 23px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.contact-map-section .et_pb_tabs_controls li:last-child button { border-bottom: none; }
.contact-map-section .et_pb_tabs_controls li.et_pb_tab_active button { color: #fff; }
/* The 17x35 notch sits 17px outside the rail, over the map. z-index is lowered
   from the original's 9999 so it can never outrank the header (99999). */
.contact-map-section .et_pb_tabs_controls li.et_pb_tab_active::before {
  content: "";
  position: absolute;
  top: 40px;
  left: -17px;
  z-index: 9;
  width: 17px;
  height: 35px;
  background: url("/media/theme/map-arrow.png") no-repeat;
}
.contact-map-section .et_pb_all_tabs {
  float: left;
  width: 780px;
  background-color: #fff;
}
.contact-map-section .et_pb_all_tabs > .et_pb_tab { display: none; padding: 0; }
.contact-map-section .et_pb_all_tabs > .et_pb_tab.et_pb_active_content { display: block; }
/* Divi clamps every embed with `iframe{max-width:100%}`; the height comes from
   the element's own height attribute until the media queries below take over. */
.google-map-inner iframe { max-width: 100%; border: 0; }

/* 10.3 Address / phone / email cards — style.css:688-727 */
.contact-details-main-section { padding: 0 0 100px; }
.contact-details-inner .et_pb_column {
  float: left;
  width: 380px;
  margin-right: 20px;
  padding: 55px 72px 58px;
  background: var(--soft);
}
.contact-details-inner .et_pb_column:last-child { margin-right: 0; }
.contact-image-div img { display: block; margin: auto; }
.contact-details-inner .et_pb_column h3 {
  margin: 0;
  padding: 25px 0 10px;
  color: var(--blue);
  font-size: 22px;
  line-height: 22px;
  font-weight: 700;
  text-align: center;
}
.contact-details-inner .et_pb_column p {
  margin-bottom: 18px;
  color: var(--body);
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  text-align: center;
}
.contact-details-inner .et_pb_column a {
  display: block;
  color: var(--body);
  font-size: 20px;
  line-height: 20px;
  font-weight: 700;
  text-align: center;
}

/* 10.4 Blue notice band — style.css:98-113 ; et-cache/16 (#1462a2) */
.blue-background {
  padding: 55px 0;
  background-color: var(--blue-section);
  color: #fff;
}
.blue-background p {
  padding-bottom: 0;
  color: var(--onblue-body);
  font-size: 18px;
  line-height: 25px;
}

/* 10.5 Both forms — style.css:20-52,80-92,728-809,1420-1424.
   The employment section is `contact-form-modal popup` in the original, hidden
   by `.et_pb_section.popup{display:none}` and opened by Popups-for-Divi from
   the blue band's pill. Reproduced as a :target reveal, so the page still shows
   one orange band on load and the pill still opens the form — without JS. */
.contact-form-modal { display: none; }
.contact-form-modal:target { display: block; }

.contact-form-main-section {
  padding: 75px 0 32px;
  background-color: var(--orange);
  background-image: linear-gradient(to right, var(--orange), var(--orange-alt));
}
.contact-form-main-section .map-title-div h2 { padding-bottom: 40px; color: #fff; }
.contact-form-main-section label {
  display: block;
  padding: 0 0 10px;
  color: #fff;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
}
.contact-form-main-section input:not([type="submit"]),
.contact-form-main-section select {
  width: 100%;
  padding: 14px 20px;
  border: 1px solid var(--field-border);
  background: url("/media/theme/field-bg.png") repeat-x;
  color: var(--field-text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}
.contact-form-main-section ::placeholder { color: var(--field-text); opacity: 1; }
/* style.css:793 applies this to every select on the site; only this one exists. */
.contact-form-main-section select {
  appearance: none;
  -webkit-appearance: none;
  text-indent: 1px;
  text-overflow: "";
}
/* Not in the original: the 8 MB ceiling the backend enforces. */
.contact-form-main-section .field-help {
  display: block;
  padding: 8px 0 0;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}

.contact-field { float: left; width: 380px; margin-right: 20px; }
.contact-field.last { margin-right: 0; }
.contact-form-short p { margin-bottom: 28px; }
.contact-form-field-bottom { width: 780px; margin: auto; }
.contact-form-field-bottom .contact-field.last { position: relative; }
.contact-form-field-bottom .contact-field.last::before {
  content: "";
  position: absolute;
  top: 54px;
  right: 20px;
  width: 10px;
  height: 10px;
  background: url("/media/theme/select-icon.png") no-repeat;
}
.two-column-fields .contact-field { width: 47%; }
.two-column-fields .contact-form-field:last-child .contact-field {
  float: none;
  width: 47%;
  margin: 0 auto;
}

.contact-form-field-submit { text-align: center; }
/* The submit p is no longer the last p in its wrapper — the status line is —
   so the base `p:last-of-type{padding-bottom:0}` would stop applying to it. */
.contact-form-field-submit p { padding-bottom: 0; }
.contact-submit {
  margin: 15px auto auto;
  padding-right: calc(47px + 1em);
  border: 2px solid rgb(255 255 255 / 50%);
  background: transparent url("/media/theme/learn-icon.png") no-repeat right 40px top 50%;
  cursor: pointer;
}
.contact-form-main-section .form-status {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
}
.contact-form-main-section .form-status:empty { display: none; }

/* Spam trap — no CSS existed for it, so it was rendering in the page. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   10.6 Responsive — the child theme's own contact breakpoints.
   -------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 1179px) {
  .map-title-div h2 { padding-bottom: 30px; font-size: 26px; line-height: 25px; }

  .contact-map-section { padding: 50px 0 52px; }
  .contact-map-section .et_pb_tabs_controls { width: 38%; }
  .contact-map-section .et_pb_all_tabs { width: 62%; }
  .contact-map-section .et_pb_tabs_controls button { padding: 32px 28px; font-size: 18px; line-height: 21px; }
  .contact-map-section .et_pb_tabs_controls li.et_pb_tab_active::before { top: 25px; left: -13px; }
  .google-map-inner iframe { display: block; height: 259px; }

  .contact-details-main-section { padding: 0 0 60px; }
  .contact-details-inner .et_pb_column { width: 31.333%; margin-right: 3%; margin-bottom: 0; padding: 40px 25px; }
  .contact-details-inner .et_pb_column h3 { padding: 16px 0 12px; font-size: 19px; line-height: 22px; }
  .contact-details-inner .et_pb_column p { margin-bottom: 15px; font-size: 14px; line-height: 20px; }
  .contact-details-inner .et_pb_column a { font-size: 17px; }

  .contact-form-main-section { padding: 55px 0 18px; }
  .contact-form-main-section .map-title-div h2 { padding-bottom: 44px; }
  .contact-form-main-section label { font-size: 17px; }
  .contact-field { width: 31.333%; margin-right: 3%; }
  .contact-form-field-bottom { width: 70%; }
  .contact-form-field-bottom .contact-field { width: 45%; }
}

/* The child theme layers a second, narrower step on top of the block above. */
@media only screen and (min-width: 1024px) and (max-width: 1179px) {
  .map-title-div h2 { font-size: 28px; line-height: 30px; }
  .contact-map-section { padding: 55px 0 62px; }
  .contact-map-section .et_pb_tabs_controls button { padding: 42px 50px; font-size: 21px; line-height: 24px; }
  .google-map-inner iframe { height: 328px; }
  .contact-details-inner .et_pb_column h3 { padding: 22px 0 12px; font-size: 22px; line-height: 23px; }
  .contact-details-inner .et_pb_column p { font-size: 16px; line-height: 23px; }
  .contact-form-main-section { padding: 58px 0 21px; }
}

@media only screen and (max-width: 767px) {
  .map-title-div h2 { padding-bottom: 23px; font-size: 21px; line-height: 26px; }

  .contact-map-section { padding: 30px 0 32px; }
  .contact-map-section .et_pb_tabs_controls { float: left; width: 100%; }
  .contact-map-section .et_pb_all_tabs { width: 100%; }
  .contact-map-section .et_pb_tabs_controls button { padding: 19px 28px; font-size: 18px; line-height: 22px; }
  .contact-map-section .et_pb_tabs_controls li.et_pb_tab_active::before { display: none; }
  .google-map-inner iframe { display: block; height: 300px; }

  .contact-details-main-section { padding: 0 0 12px; }
  .contact-details-inner .et_pb_column { width: 100%; margin-right: 0; margin-bottom: 19px; padding: 25px 38px 35px; }
  .contact-details-inner .et_pb_column h3 { padding: 16px 0 7px; font-size: 18px; line-height: 21px; }
  .contact-details-inner .et_pb_column p { margin-bottom: 12px; }
  .contact-details-inner .et_pb_column a { font-size: 18px; }

  .contact-form-main-section { padding: 28px 0 0; }
  .contact-form-main-section .map-title-div h2 { padding-bottom: 18px; }
  .contact-form-main-section label { padding: 0 0 8px; font-size: 16px; }
  .contact-field,
  .two-column-fields .contact-field,
  .two-column-fields .contact-form-field:last-child .contact-field { width: 100%; margin-right: 0; }
  .contact-form-short p { margin-bottom: 18px; }
  .contact-form-field-bottom { width: 100%; }
  .contact-form-field-bottom .contact-field.last::before { top: 47px; }
}

@media only screen and (min-width: 568px) and (max-width: 767px) {
  .map-title-div h2 { padding-bottom: 22px; font-size: 22px; line-height: 25px; }
  .contact-map-section .et_pb_tabs_controls { float: right; width: 38%; }
  .contact-map-section .et_pb_all_tabs { width: 62%; }
  .contact-map-section .et_pb_tabs_controls button { font-size: 17px; }
  .contact-map-section .et_pb_tabs_controls li.et_pb_tab_active::before { display: block; top: 24px; left: -14px; }
  .google-map-inner iframe { height: 250px; }
  .contact-details-inner .et_pb_column { width: 31.333%; margin-right: 3%; margin-bottom: 24px; padding: 30px 20px 38px; }
  .contact-details-inner .et_pb_column p { font-size: 15px; line-height: 20px; }
  .contact-details-inner .et_pb_column a { font-size: 17px; }
  .contact-form-short p { margin-bottom: 25px; }
}

/* style.css:64-75 — the theme shrinks the pill and moves the submit arrow at
   ONE breakpoint, max-width:1179px, phones included. Scoped to this lane's two
   buttons; section 7 stops its own .button step at 768px. Last, so the
   padding-right longhand survives the shorthand above it. */
@media only screen and (max-width: 1179px) {
  .blue-background .button,
  .contact-submit { padding: 12px 25px 10px; font-size: 14px; }
  .contact-submit { padding-right: calc(32px + 1em); background-position: right 25px top 50%; }
}

/* Divi's own >=1475px section step. Every contact section but the blue band
   carries a two-class selector that outranks it; .blue-background does not, so
   above 1475px the band really is 59px, not 55px. */
@media only screen and (min-width: 1475px) {
  .blue-background { padding: 59px 0; }
}

/* --------------------------------------------------------------------------
   9. Blog index, category archive and search results
      (/blogs/, /category/uncategorized/, /search/)

      Source: main-style.css:1-127 (.blog-page-section / .post-item) and
      main-style.css:19-84 (the 680 + 95 + 405 = 1180 two-column shell and the
      Recent Posts widget). The 58px top padding is Divi's
      `body:not(.et-tb) #main-content .container{padding-top:58px}`, which the
      child theme tries and fails to cancel (style.css:1200 loses on
      specificity) — measured live at 58px, so it is reproduced here, scoped to
      the two sections that actually carry a .container.
   -------------------------------------------------------------------------- */

.blog-page-section {
  padding: 105px 0 60px;
  background: var(--soft);
}
.blog-page-section > .container,
.single-post-section > .container { padding-top: 58px; }

.blog-page-section #left-area,
.single-post-section #left-area {
  float: left;
  width: 680px;
  margin: 0;
  padding: 0;
}
.blog-page-section #sidebar,
.single-post-section #sidebar {
  float: right;
  width: 405px;
  margin: 0;
  padding: 0;
}

.blog-posts-list .post-item { padding: 0 0 60px; }
.blog-posts-list .post-item[hidden] { display: none; }

.post-item-img { float: left; width: 290px; }
.post-item-img img { display: block; }
.post-item-right { float: right; width: 350px; }

.blog-posts-list .post-item-info ul li {
  float: left;
  margin: 0 30px 0 0;
  color: var(--meta);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.blog-posts-list .post-item-info ul li:last-child { margin: 0; }
.blog-posts-list .post-item-info ul li a { color: inherit; }

.blog-posts-list .post-item h2 {
  margin: 0;
  padding: 8px 0 17px;
  color: var(--blue);
  font-size: 22px;
  line-height: 26px;
  font-weight: 600;
}
.blog-posts-list .post-item h2 a { color: inherit; }
.post-item-desc p { line-height: 24px; }

/* Recent Posts widget — shared by the archive and the single post.
   Inner width 405 - 45 - 45 = 315 = 145 + 20 gutter + 150. */
.blog-page-section #sidebar .et_pb_widget,
.single-post-section #sidebar .et_pb_widget {
  margin: 0 0 40px;
  padding: 42px 45px 50px;
  background: #fff;
}
.blog-page-section #sidebar .et_pb_widget:last-child,
.single-post-section #sidebar .et_pb_widget:last-child { margin: 0; }

.widgettitle {
  margin: 0;
  padding: 0 0 28px;
  color: var(--blue);
  font-size: 22px;
  line-height: 26px;
  font-weight: 600;
}
.recent-posts-list li { margin: 0; padding: 0 0 30px; }
.recent-posts-list li:last-child { padding: 0; }
.recent-post-img { float: left; width: 145px; }
.recent-post-img img { display: block; width: 100%; }
.recent-post-item-right { float: right; width: 150px; margin-top: -8px; }
.recent-posts-list li h3 {
  margin: 0;
  padding: 0;
  color: var(--body);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}
.recent-posts-list li h3 a { color: inherit; }

/* --------------------------------------------------------------------------
   14. Business cases — the index grid and the single case
   Ported from style.css:1181-1246 (index) and :1250-1400 (single case).
   -------------------------------------------------------------------------- */

/* 14.1 Index: the category bar */
.business-tabs-cats { background: var(--blue); }
/* Divi's 58px container top padding survives here, so the bar sits low. */
.business-tabs-cats .container { padding-top: 58px; }
.business-tabs-cats ul { margin: 0; padding: 0; }
.business-tabs-cats ul li { float: left; }
.business-tabs-cats ul li a,
.business-tabs-cats ul li span {
  display: block;
  padding: 30px 41px;
  background: url("/media/theme/tabs-line.jpg") no-repeat right center;
  color: var(--tab-idle);
  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
}
.business-tabs-cats ul li:last-child a,
.business-tabs-cats ul li:last-child span { background: none; }
.business-tabs-cats ul li a[aria-current],
.business-tabs-cats ul li a:hover {
  background-color: var(--orange);
  background-image: linear-gradient(to right, var(--orange), var(--gold));
  color: #fff;
}

/* 14.2 Index: the card grid */
.business-cat-posts {
  margin-top: 20px;
  padding: 80px 0 48px;
  background: var(--soft);
}
.business-details-list {
  float: left;
  width: 360px;
  margin: 0 50px 50px 0;
}
.business-details-list:nth-child(3n) { margin-right: 0; }
.business-details-list[hidden] { display: none; }
.business-image img { display: block; width: 100%; }
.business-content-bottom {
  height: 160px;
  padding: 30px 38px 40px;
  background: #fff;
  text-align: center;
}
.business-content-bottom h2 {
  padding-bottom: 7px;
  color: var(--blue);
  font-size: 22px;
  line-height: 25px;
  font-weight: 600;
}
.business-content-bottom h2 a { color: inherit; }
.business-client {
  padding-bottom: 0;
  color: var(--body);
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
}
.business-empty { padding-bottom: 32px; }

/* 14.3 Single case.
   These rows keep Divi's own geometry rather than the child theme's pixel
   widths, because Divi's percentages win the cascade here: rows are 80% of the
   viewport capped at 1180, columns 36.7 / 57.8 / 47.25% on a 5.5% gutter, and
   sections pad 4%. Measured against the original at 1410px. */
.single-business-content-div { background: var(--soft); }
.single-business-content-div .et_pb_section { padding: 4% 0; background: none; }
.single-business-content-div .et_pb_row {
  width: 80%;
  max-width: var(--container);
  margin: 0 auto;
}
.single-business-content-div .et_pb_column { float: left; }
.single-business-content-div h2 {
  padding: 0 0 29px;
  color: var(--black);
  font-size: 30px;
  line-height: 30px;
  font-weight: 600;
}

.business-client-section {
  background-color: var(--blue-grad-a);
  background-image: linear-gradient(to right, var(--blue-grad-a), var(--blue-grad-b));
}
.business-client-l { width: 47.25%; margin-right: 5.5%; }
.business-client-r { width: 47.25%; }
.client-icon-l { float: left; }
.client-icon-l img { max-width: 100%; }
.client-content-r { float: left; padding-left: 33px; }
.business-client-section h6 {
  padding-bottom: 13px;
  color: var(--onblue-meta);
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
}
.business-client-section .client-name {
  padding-bottom: 0;
  color: #fff;
  font-size: 30px;
  line-height: 35px;
  font-weight: 700;
}
.business-client-r ul li {
  margin-bottom: 20px;
  padding-left: 25px;
  background: url("/media/theme/list-arrow1.jpg") no-repeat left 7px;
  color: #fff;
  font-size: 18px;
  line-height: 22px;
  font-weight: 600;
}
.business-client-r ul li:last-child { margin-bottom: 0; }
.business-client-r ul li ul { padding-top: 12px; }
.business-client-r ul { padding-bottom: 14px; }

/* 14.4 The three alternating sections */
.single-business-content-div .soluction-content-row {
  padding: 60px 42px 73px 60px;
  background: #fff;
}
.single-business-content-div .soluction-content-row.list-div { padding: 53px 42px 73px 60px; }
.single-business-content-div .soluction-content-row.last { padding: 35px 0 0 60px; }

.challenge-image-l { width: 36.7%; margin-right: 5.5%; }
.challenge-image-l img { display: block; max-width: 100%; }
.challenge-content-r { width: 57.8%; }
.challenge-content-r p { padding-bottom: 22px; line-height: 24px; }
.challenge-content-r p:last-of-type { padding-bottom: 0; }

.soluction-content-row.list-div .et_pb_column { width: 100%; }

.top-results-content-l { width: 57.8%; margin-right: 5.5%; padding-top: 30px; }
.top-results-image-r { width: 36.7%; }
.top-results-image-r img { display: block; max-width: 100%; }
.top-results-content-l ul li,
.challenge-content-r ul li {
  margin-bottom: 17px;
  padding-left: 25px;
  background: url("/media/theme/list-arrow2.jpg") no-repeat left 6px;
  color: var(--body);
  font-size: 20px;
  line-height: 22px;
  font-weight: 500;
}
.top-results-content-l ul { padding-bottom: 14px; }
.top-results-content-l ul li strong { font-weight: 700; }
.soluction-content-row.list-div ul li {
  margin-bottom: 15px;
  padding-left: 25px;
  background: url("/media/theme/list-arrow2.jpg") no-repeat left 6px;
  color: var(--body);
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
}
.soluction-content-row.list-div ul li:last-child { margin-bottom: 0; }

@media only screen and (min-width: 768px) and (max-width: 1179px) {
  .business-tabs-cats .container { padding-top: 30px; }
  .business-tabs-cats ul li a,
  .business-tabs-cats ul li span { padding: 18px 14px; font-size: 15px; line-height: 22px; }
  .business-details-list { width: 31.333%; margin: 0 3% 25px 0; }
  .business-content-bottom { padding: 18px 20px 31px; }
  .business-content-bottom h2 { padding-bottom: 7px; font-size: 17px; line-height: 23px; }
  .business-client { font-size: 14px; line-height: 20px; }
  .business-cat-posts { padding: 52px 0 40px; }

  .business-client-l { width: 40%; }
  .business-client-r { width: 56%; }
  .single-business-content-div .soluction-content-row,
  .single-business-content-div .soluction-content-row.list-div { padding: 40px 24px 45px 30px; }
  .single-business-content-div .soluction-content-row.last { padding: 30px 0 0 30px; }
  .challenge-image-l { width: 36%; }
  .challenge-content-r { width: 60%; }
  .top-results-content-l { width: 58%; }
  .top-results-image-r { width: 38%; }
  .challenge-business-section { padding: 60px 0 50px; }
  .top-results-content-l ul li, .challenge-content-r ul li { font-size: 17px; }
}

@media only screen and (max-width: 767px) {
  .business-tabs-cats { padding: 16px 0 15px; }
  .business-tabs-cats .container { padding-top: 0; }
  .business-tabs-cats ul li { float: none; width: 100%; }
  .business-tabs-cats ul li a,
  .business-tabs-cats ul li span { padding: 9px 22px; background: none; font-size: 16px; line-height: 21px; }
  .business-details-list { float: none; width: 100%; margin: 0 0 20px; }
  .business-content-bottom { height: auto; padding: 18px 30px 14px; }
  .business-content-bottom h2 { padding-bottom: 8px; font-size: 17px; line-height: 23px; }
  .business-client { font-size: 15px; line-height: 22px; }
  .business-cat-posts { margin-top: 15px; padding: 25px 0 10px; }

  .business-client-section { padding: 40px 0 30px; }
  .business-client-l,
  .business-client-r { float: none; width: 100%; }
  .business-client-r { margin-top: 24px; }
  .client-content-r { padding-left: 20px; }
  .business-client-r { float: right; width: 612px; }
.business-client-r ul li {
  margin-bottom: 20px;
  padding-left: 25px;
  background: url("/media/theme/list-arrow1.jpg") no-repeat left 7px;
  color: #fff;
  font-size: 18px;
  line-height: 22px;
  font-weight: 600;
}
.business-client-r ul li:last-child { margin-bottom: 0; }
.business-client-r ul li ul { padding-top: 12px; }
.business-client-r ul { padding-bottom: 14px; }
.business-client-section .client-name { font-size: 22px; line-height: 27px; }
  .challenge-business-section { padding: 40px 0 30px; }
  .soluction-main-section, .top-results-main-section { padding-bottom: 40px; }
  .single-business-content-div .soluction-content-row,
  .single-business-content-div .soluction-content-row.list-div,
  .single-business-content-div .soluction-content-row.last { padding: 24px 20px 30px; }
  .challenge-image-l,
  .challenge-content-r,
  .top-results-content-l,
  .top-results-image-r { float: none; width: 100%; }
  .challenge-content-r, .top-results-image-r { margin-top: 24px; }
  .top-results-content-l { padding-top: 0; }
  .top-results-content-l ul li, .challenge-content-r ul li { font-size: 17px; line-height: 24px; }
}

/* A labelled sub-group inside a case section: a 130px title beside its list,
   each separated by a rule (style.css:1338-1352). */
.business-inner-soluctions { margin: 33px 0 0; padding-top: 31px; border-top: 2px solid var(--rule); }
.business-inner-soluctions:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.soluction-title-l { float: left; width: 130px; }
.soluction-title-l h6 {
  padding-bottom: 0;
  color: var(--black);
  font-size: 22px;
  line-height: 22px;
  font-weight: 600;
}
.soluctions-content-r { float: left; width: 850px; margin-left: 66px; }
.soluctions-content-r ul { padding-bottom: 14px; }

@media only screen and (min-width: 768px) and (max-width: 1179px) {
  .soluction-title-l { width: 22%; }
  .soluctions-content-r { width: 72%; margin-left: 6%; }
}
@media only screen and (max-width: 767px) {
  .soluction-title-l,
  .soluctions-content-r { float: none; width: 100%; margin-left: 0; }
  .soluctions-content-r { margin-top: 12px; }
  .business-inner-soluctions { margin-top: 24px; padding-top: 22px; }
}