.elementor-kit-6{--e-global-color-primary:#135a8e;--e-global-color-secondary:#1c87d6;--e-global-color-text:#4c6272;--e-global-color-accent:#ce4046;--e-global-color-lakeblue:#1c87d6;--e-global-color-mwgreen:#47c277;--e-global-color-midnight:#135a8e;--e-global-color-hotpipe:#ce4046;--e-global-color-safetyyel:#f7e431;--e-global-color-electric:#b7cfe2;--e-global-color-pepsink:#1d2b36;--e-global-color-pepsmuted:#5b7080;--e-global-color-pepshair:#dfe9f2;--e-global-color-pepsmist:#f4f8fb;--e-global-typography-primary-font-family:"Antique Olive Compact";--e-global-typography-primary-font-weight:400;--e-global-typography-primary-line-height:1.05em;--e-global-typography-secondary-font-family:"Antique Olive Nord";--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-font-style:italic;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.65em;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:700;color:#4c6272;font-family:"Roboto", Sans-serif;font-size:17px;font-weight:400;line-height:1.65em;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:#1c87d6;}.elementor-kit-6 a:hover{color:#135a8e;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* --- Peps brand webfonts ------------------------------------------------
   The two Antique Olive faces from the brand style guide. Files are stored in
   the WordPress Font Library (Appearance > Fonts). Elementor typography
   controls reference these family names by name.
   ---------------------------------------------------------------------- */
@font-face {
  font-family: "Antique Olive Compact";
  src: url("/wp-content/uploads/fonts/AntiqueOliveCompact.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Antique Olive Nord";
  src: url("/wp-content/uploads/fonts/AntiqueOliveNordItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --- Service-area pills -------------------------------------------------
   The pill's navy hover background is set natively on the container, but
   Elementor's Heading hover colour only fires when the heading itself is
   hovered - so hovering the mascot would leave navy text on navy. This makes
   the whole pill drive the text colour, which is the only way to keep the
   label readable on hover. The .elementor-kit-6 is deliberately specific: Elementor's
   own per-element colour rule scores (0,4,0) and loads later, so this has to
   out-rank it rather than rely on !important.
   ---------------------------------------------------------------------- */
.elementor-element.peps-area-pill:hover .elementor-widget-heading .elementor-heading-title {
  color: #ffffff;
}

/* --- Contact form ------------------------------------------------------
   Two things the Form widget has no control for:
   1. Field padding. The native Size control (xs-xl) only varies HORIZONTAL
      padding - every size sits at 7-8px vertically, against the design's 14px.
   2. The SMS-consent text. It inherits body type (17px), where the design has
      small print at 11px. There is no acceptance-text typography control.
   ---------------------------------------------------------------------- */
.peps-contact-form .elementor-field-group .elementor-field-textual {
  padding: 14px 16px;
}
.elementor-element.peps-contact-form .elementor-form-fields-wrapper
  .elementor-field-type-acceptance .elementor-field-option,
.elementor-element.peps-contact-form .elementor-form-fields-wrapper
  .elementor-field-type-acceptance .elementor-field-option label {
  font-size: 11px;
  line-height: 1.5;
  color: #7b8f9d;
}

/* --- Photograph filling its column -------------------------------------
   A 16:9 photograph at 520px wide is 293px tall. Beside a 700px column of
   copy that leaves ~400px of dead space and the picture reads as floating.
   Elementor's Image widget has a Height control but only in fixed units -
   there is no "fill the container" option, and a fixed height cannot track
   a copy column whose height changes from section to section. So the row is
   set to `stretch` natively and these rules carry the height down to the
   <img>. Cropping is from the top, which protects faces.
   ---------------------------------------------------------------------- */
.peps-photo-fill > .elementor-widget-image {
  align-self: stretch;
}
.peps-photo-fill .elementor-widget-image > .elementor-widget-container {
  height: 100%;
}
.peps-photo-fill img {
  height: 100%;
  object-fit: cover;
}
/* stacked, the photograph goes back to its natural height */
@media (max-width: 1024px) {
  .peps-photo-fill img { height: auto; }
}

/* --- Mobile menu: two levels, word links, arrow toggles -----------------
   The client asked that tapping "Services" open /services/ while only the
   arrow beside it unfolds the list. No Elementor widget does that here: the
   Toggle widget swallows a link placed in its title, and the Mega Menu's
   vertical layout and panel width only apply inside its own collapsed state,
   not inside our slide-in drawer. Native <details>/<summary> does exactly
   what was asked with no JavaScript - the anchor navigates, the rest of the
   row toggles - and this block dresses it. It is the only custom CSS in the
   menu; the desktop panels are pure Elementor widgets.
   ---------------------------------------------------------------------- */
.peps-mmenu ul { list-style: none; margin: 0; padding: 0; }
.peps-mmenu > ul > li { border-bottom: 1px solid rgba(9,44,72,0.08); }
.peps-mmenu a { text-decoration: none; }

/* level one - Home, About Us, Services... */
.peps-mmenu .lvl1 > summary,
.peps-mmenu .lvl1-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 0; cursor: pointer;
  font-family: "Roboto", sans-serif; font-size: 18px; font-weight: 600;
  text-transform: uppercase; color: #092c48;
}
.peps-mmenu .lvl1 > summary > a, .peps-mmenu .lvl1-link { color: #092c48; }
.peps-mmenu .lvl1 > summary > a:hover,
.peps-mmenu .lvl1-link:hover,
.peps-mmenu .lvl1[open] > summary > a { color: #ce4046; }

/* level two - the category names, and nothing else until one is tapped */
.peps-mmenu .lvl2 > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; cursor: pointer;
  font-family: "Roboto", sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #47c277;
}
.peps-mmenu .lvl2[open] > summary { color: #ce4046; }
.peps-mmenu .lvl2 ul { padding: 2px 0 10px 2px; }
.peps-mmenu .lvl2 li { margin: 0 0 11px; }
.peps-mmenu .lvl2 a {
  font-family: "Roboto", sans-serif; font-size: 15px; font-weight: 500;
  color: #1c87d6;
}
.peps-mmenu .lvl2 a:hover { color: #ce4046; }

/* the disclosure arrow: ours on the right, turned over when open */
.peps-mmenu summary { list-style: none; }
.peps-mmenu summary::-webkit-details-marker { display: none; }
.peps-mmenu .chev {
  flex: 0 0 auto; margin-left: 12px; color: #ce4046; font-size: 13px;
  line-height: 1; transition: transform .18s ease;
}
.peps-mmenu .lvl2 .chev { color: #47c277; font-size: 11px; }
.peps-mmenu details[open] > summary .chev { transform: rotate(180deg); }/* End custom CSS */