/* ep-mobile.css: Stage 4 designed layouts for Eco Projects (loaded LAST). Written for THIS markup (a V2-style iLaunch shell with no booking bar, a hero slider only on the home page,
   a flat 9-item menu, a news sidebar, project records with a tab filter and a lightbox), not taken from a starter pack.
   Bands: 1250 and up = nothing here except the tap-to-call link, keyboard ring and form dress (a pixel copy of live); 1170 to 1249 = live's layout with the AA palette;
   768 to 1169 = a reflow; below 768 = the phone design.  Below 1250 every state is WCAG AA, text 14px or more, inputs 16px, tap targets 24px or more.
   AA palette (contrast on white): dark green #4b6a08 6.24:1 (white on it 6.24:1), hover #3a5206 8.9:1, body text #333333 12.6:1, muted #595959 7.0:1, white on #463a2f footer 11.2:1. */

/* ---- every width: the menu button is only for phones; phone numbers are explicit links that keep the look of their surroundings ---- */
body.ep-site #page-container .ils-menu-toggle { display: none; }
body.ep-site #page-container a.tel-link:is(:link, :visited, :hover, :active, :focus) { color: inherit; text-decoration: none; font: inherit; }
body.ep-site #page-container a.tel-link { cursor: pointer; }
/* keyboard ring on every stop (Divi's reset removes it; live shows none, a deliberate addition at every width) */
body.ep-site #page-container :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }
body.ep-site #page-container #footer :is(a, input):focus-visible { outline-color: #ffffff; }
body.ep-site #page-container #menu li.active a:focus-visible { outline-color: #0b57d0; }
body.ep-site #page-container a:focus-visible > img { outline: 2px solid #0b57d0; outline-offset: 2px; }

/* live's invalid nested anchors leave an empty link before the testimonial PDF link: invisible, but a keyboard stop with nothing to see (removed at every width, no visible change) */
body.ep-site #page-container a.gallery-item:empty { display: none; }

/* ================================================================== below 1250: AA palette, 14px text floor, 16px inputs ================================================================== */
@media (max-width: 1249px) {
  body.ep-site #page-container :is(th, td, p, li) { font-size: 14px; }
  body.ep-site #page-container a:is(:link, :visited, :active) { color: #4b6a08; text-decoration: underline; }
  body.ep-site #page-container a:is(:hover, :focus) { color: #2f4305; text-decoration: underline; }
  body.ep-site #page-container :is(h1, h3, .project-record h2) { color: #4b6a08; }
  body.ep-site #page-container h2 a:is(:link, :visited, :active) { color: #555555; text-decoration: none; }
  body.ep-site #page-container h2 a:is(:hover, :focus) { color: #2f4305; text-decoration: underline; }
  body.ep-site #page-container h3 a:is(:link, :visited, :active, :hover, :focus) { color: #4b6a08; }
  /* header */
  body.ep-site #page-container a.tel-link { display: inline-block; padding: 4px 0; }
  body.ep-site #page-container #header .phone a.tel-link { padding: 2px 0; }
  /* the hero tagline sits on a solid dark green box so its contrast can be measured (live: thin white text straight on the photo) */
  body.ep-site.ep-home #page-container .feature-text { width: 540px; margin-right: -520px; }
  body.ep-site.ep-home #page-container .feature-text p { background: #4b6a08; padding: 0 20px; }
  body.ep-site #page-container #header .phone { background-image: none; position: relative; }
  body.ep-site #page-container #header .phone::before { content: ""; position: absolute; left: 7px; top: 5px; width: 19px; height: 20px; background: url(/wp-content/uploads/ilaunch/skin/icon-phone.png) no-repeat; }
  body.ep-site #page-container #header .search { background: #ededed; }
  body.ep-site #page-container #header .search input.clicknclear { color: #595959; font-size: 16px; width: 190px; height: 28px; padding-top: 0; padding-bottom: 0; }
  body.ep-site #page-container #header .search .button { min-width: 24px; min-height: 24px; }
  body.ep-site #page-container #header input#spbutton { color: #333333; }
  /* a post with comments switched off keeps no empty Comments heading below 1250 (live: the heading sits above its comment form) */
  body.ep-site #page-container a#commentlist, body.ep-site #page-container a#commentlist + h2, body.ep-site #page-container .div:has(+ a#commentlist) { display: none; }
  body.ep-site #page-container #menu li.active a:is(:link, :visited, :active, :hover, :focus) { background-color: #4b6a08; color: #ffffff; }
  body.ep-site #page-container #menu li:hover a:is(:link, :visited, :active), body.ep-site #page-container #menu a:is(:hover, :focus) { background-color: #4b6a08; color: #ffffff; text-decoration: none; }
  /* buttons (Read More, Submit, Search): white on dark green in every state */
  body.ep-site #page-container :is(input.button, a.button, a.more):not(#spbutton) { background-color: #4b6a08; color: #ffffff; font-size: 14px; text-decoration: none; }
  body.ep-site #page-container :is(input.button, a.button, a.more):not(#spbutton):is(:hover, :focus, :active) { background-color: #3a5206; color: #ffffff; text-decoration: none; }
  body.ep-site #page-container a.more:is(:link, :visited, :active, :hover, :focus) { color: #ffffff; text-decoration: none; }
  body.ep-site #page-container a.more { background-image: url(/wp-content/uploads/ilaunch/skin/button-more.png); background-repeat: no-repeat; background-position: right; }
  body.ep-site #page-container a.more:is(:hover, :focus, :active) { background-image: url(/wp-content/uploads/ilaunch/skin/button-more.png); background-repeat: no-repeat; background-position: right; }
  body.ep-site #page-container input.button { min-height: 30px; }
  /* small print */
  body.ep-site #page-container :is(.panel .details, .entry .details, .panel li em, .panel p, .smalltext, .paging, div.top, .form td em, blockquote p.tdate) { font-size: 14px; }
  body.ep-site #page-container :is(.panel .details, .entry .details) { color: #444444; }
  body.ep-site #page-container .panel li { font-size: 14px; color: #444444; }
  body.ep-site #page-container .panel .title a:is(:link, :visited, :active) { color: #4b6a08; text-decoration: underline; }
  body.ep-site #page-container .panel .title a:is(:hover, :focus) { color: #2f4305; text-decoration: underline; }
  body.ep-site #page-container blockquote p.tdate, body.ep-site #page-container .smalltext, body.ep-site #page-container .smalltext a { color: #595959; line-height: 20px; }
  body.ep-site #page-container .paging a:is(:link, :visited, :active) { background-color: #ededed; color: #333333; text-decoration: none; padding: 6px 10px; display: inline-block; min-width: 24px; text-align: center; }
  body.ep-site #page-container .paging a:is(:hover, :focus), body.ep-site #page-container .paging em { background-color: #4b6a08; color: #ffffff; padding: 6px 10px; display: inline-block; text-decoration: none; }
  body.ep-site #page-container .paging em a { color: #ffffff; }
  body.ep-site #page-container div.top a:is(:link, :visited, :active) { color: #333333; background: #e3e3e3; text-decoration: none; padding: 4px 12px; font-size: 14px; }
  body.ep-site #page-container div.top a:is(:hover, :focus) { color: #ffffff; background: #4b6a08; }
  body.ep-site #page-container blockquote .highlight { color: #6b5600; }
  /* project tabs and thumbnails */
  body.ep-site #page-container .p-tabs a:is(:link, :visited, :active) { color: #333333; text-decoration: none; font-size: 16px; }
  body.ep-site #page-container .p-tabs a:is(:hover, :focus) { color: #4b6a08; text-decoration: none; }
  body.ep-site #page-container .p-tabs a.active:is(:link, :visited, :active, :hover, :focus) { color: #4b6a08; }
  body.ep-site #page-container .project-record img:hover { border-color: #4b6a08; }
  /* the home banners: white on a solid dark green (live: white on a light green, 2:1) */
  body.ep-site.ep-home #page-container .content-banners { background-color: #4b6a08; background-image: none; }
  body.ep-site.ep-home #page-container .content-banner.left { border-right: 1px solid #7e9a3a; box-sizing: border-box; width: 485px; }
  body.ep-site.ep-home #page-container .content-banner.right { box-sizing: border-box; width: 485px; }
  body.ep-site.ep-home #page-container .content-banner h2 a:is(:link, :visited, :active, :hover, :focus) { color: #ffffff; text-decoration: underline; }
  body.ep-site.ep-home #page-container .content-banner h2 a:is(:hover, :focus) { text-decoration: none; }
  body.ep-site.ep-home #page-container .content-banner p { font-size: 14px; color: #ffffff; }
  body.ep-site.ep-home #page-container h1 strong { color: #4b6a08; }
  /* footer: light text on the dark brown, solid colour under the texture so contrast is measurable */
  body.ep-site #page-container #footer { background-image: none; background-color: #463a2f; }
  body.ep-site #page-container #footer, body.ep-site #page-container #footer p, body.ep-site #page-container #footer .vcard, body.ep-site #page-container #footer .mainmenu, body.ep-site #page-container #footer .footermenu { font-size: 14px; line-height: 24px; color: #e6dfd8; }
  body.ep-site #page-container #footer em { color: #bdb2a7; }
  body.ep-site #page-container #footer .copyright, body.ep-site #page-container #footer .footer-tags, body.ep-site #page-container #footer .footer-tags p, body.ep-site #page-container #footer .footer-tags a { color: #cfc5bb; font-size: 14px; }
  body.ep-site #page-container #footer a:is(:link, :visited, :active) { color: #e6dfd8; text-decoration: none; }
  body.ep-site #page-container #footer a:is(:hover, :focus) { color: #ffffff; text-decoration: underline; }
  body.ep-site #page-container #footer :is(.mainmenu, .footermenu) a { display: inline-block; padding: 2px 0; }
  body.ep-site #page-container #footer a.tel-link:is(:link, :visited, :active, :hover, :focus) { color: inherit; }
  /* forms (all widths below 1250): label above the field, 16px text, 48px fields, a solid border that is 3:1 against white */
  body.ep-site #page-container .ep-contact-form.et_pb_contact_form_container { margin: 15px 0; padding: 0; width: auto; max-width: 620px; }
  body.ep-site #page-container .ep-contact-form .et-pb-contact-message:empty { display: none; }
  body.ep-site #page-container .ep-contact-form .et_pb_contact { padding: 0; margin: 0; }
  body.ep-site #page-container .ep-contact-form form.et_pb_contact_form { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; }
  body.ep-site #page-container .ep-contact-form form.et_pb_contact_form::before { display: none; }
  body.ep-site #page-container .ep-contact-form p.et_pb_contact_field, body.ep-site #page-container .ep-contact-form .et_contact_bottom_container, body.ep-site #page-container .ep-contact-form .et_pb_contact_right { display: contents; }
  body.ep-site #page-container .ep-contact-form .et_pb_contact_form_label { display: block; margin: 0; padding: 12px 0 4px; font: 400 16px/24px 'Lato', Arial, Helvetica, sans-serif; color: #333333; }
  body.ep-site #page-container .ep-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 8px; vertical-align: -3px; background: url(/wp-content/uploads/ilaunch/skin/icon-required.png) no-repeat 0 0; }
  body.ep-site #page-container .ep-contact-form p.et_pb_contact_field .input { display: block; box-sizing: border-box; width: 100%; max-width: none; height: 48px; margin: 0; padding: 10px 12px; border: 1px solid #767676; border-radius: 0; background: #ffffff; font: 400 16px/24px 'Lato', Arial, Helvetica, sans-serif; color: #333333; box-shadow: none; }
  body.ep-site #page-container .ep-contact-form p.et_pb_contact_field textarea.input { height: 150px; }
  body.ep-site #page-container .ep-contact-form p.et_pb_contact_field .input::placeholder { color: transparent; }
  body.ep-site #page-container .ep-contact-form .input.et_contact_error { border-color: #b3261e; border-width: 2px; }
  body.ep-site #page-container .ep-contact-form .et_pb_contact_right p.clearfix { display: flex; flex-wrap: wrap; align-items: center; float: none; width: auto; margin: 0; padding: 12px 0 0; min-height: 0; font: 400 16px/48px 'Lato', Arial, Helvetica, sans-serif; color: #333333; }
  body.ep-site #page-container .ep-contact-form .et_pb_contact_right p.clearfix::before { display: none; }
  body.ep-site #page-container .ep-contact-form .et_pb_contact_right p.clearfix::after { content: "To prevent spam, please answer the sum to verify you are a real person."; display: block; visibility: visible; height: auto; clear: none; flex: 0 0 100%; text-align: left; margin-top: 4px; font: 400 14px/20px 'Lato', Arial, Helvetica, sans-serif; color: #444444; order: -1; padding-bottom: 6px; }
  body.ep-site #page-container .ep-contact-form .et_pb_contact_captcha_question { font: inherit; color: inherit; padding: 0 6px 0 0; }
  body.ep-site #page-container .ep-contact-form input.et_pb_contact_captcha { display: inline-block; box-sizing: border-box; width: 96px; max-width: none; height: 48px; margin: 0 0 0 4px; padding: 10px 12px; border: 1px solid #767676; border-radius: 0; background: #ffffff; font: 400 16px/24px 'Lato', Arial, Helvetica, sans-serif; color: #333333; box-shadow: none; }
  body.ep-site #page-container .et_pb_section .ep-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { justify-self: start; display: inline-block; box-sizing: border-box; width: auto; min-width: 140px; height: 48px; margin: 16px 0 0 !important; padding: 0 28px !important; border: 0 !important; border-radius: 24px !important;
    background: #4b6a08 !important; color: #ffffff !important; font: 700 16px/48px 'Lato', Arial, Helvetica, sans-serif !important; letter-spacing: normal; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: none; }
  body.ep-site #page-container .et_pb_section .ep-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:is(:hover, :focus, :active) { background: #3a5206 !important; color: #ffffff !important; padding: 0 28px !important; }
  body.ep-site #page-container .et_pb_section .ep-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button::after { display: none !important; }
  body.ep-site #page-container .ep-contact-form form.et_pb_contact_form::after { content: "Required fields"; clear: none; display: block; visibility: visible; height: auto; justify-self: start; margin: 12px 0 0; padding: 0 0 0 24px; background: url(/wp-content/uploads/ilaunch/skin/icon-required.png) no-repeat left center; font: 400 14px/20px 'Lato', Arial, Helvetica, sans-serif; color: #444444; }
  body.ep-site #page-container .et_pb_contact_form_container .et-pb-contact-message { font-size: 16px; line-height: 24px; color: #333333; }
  /* search page form */
  body.ep-site #page-container :is(input, select, textarea):not([type="hidden"]) { font-size: 16px; }
  body.ep-site #page-container input.button { font-size: 16px; }
  body.ep-site #page-container .form.searchpage input { font-size: 16px; height: 24px; }
  body.ep-site #page-container .form.searchpage .button { font-size: 16px; padding: 10px 20px; height: auto; }
  /* short pages (search, profile): the footer sits at the bottom of the screen instead of mid-screen with white under it (live shows the white; that stays at 1250 and up) */
  body.ep-site #page-container #et-boc { display: flex; flex-direction: column; min-height: 100vh; }
  body.ep-site #page-container #et-main-area { display: flex; flex-direction: column; flex: 1 0 auto; }
  body.ep-site #page-container #main-content { flex: 1 0 auto; }
  /* the footer: tap height on the links */
  body.ep-site #page-container :is(.panel li a, .entry h2 a, .entry .details a, .entry a.more:not(.button), .archive a, .p-gallery a) { padding-top: 5px; padding-bottom: 5px; }
  body.ep-site #page-container a.more { padding-top: 3px; padding-bottom: 3px; }
}

/* ================================================================== 768 to 1169 and below: the reflow ================================================================== */
@media (max-width: 1169px) {
  body.ep-site #page-container :is(#container, .container, #header .container, #footer .container) { box-sizing: border-box; width: auto; max-width: 1018px; padding-left: 24px; padding-right: 24px; }
  /* V5 (3.18 fix round 1): credit line flush with the copyright line, address block beside the left column instead of dropping below it */
  body.ep-site #page-container #footer .left { width: 440px; }
  body.ep-site #page-container #footer .copyright, body.ep-site #page-container #footer .footer-tags { display: block; margin: 8px 0 0; }
  body.ep-site.ep-home #page-container #container { width: auto; max-width: none; padding: 0; }
  body.ep-site #page-container #content { padding: 24px 0 35px; }
  body.ep-site.ep-home #page-container #content.split { padding: 24px 24px 35px; max-width: 1018px; margin: 0 auto; box-sizing: border-box; }
  body.ep-site #page-container #content.split { background-image: none; }
  body.ep-site #page-container :is(.left, .mid, .right) { box-sizing: border-box; }
  body.ep-site #page-container #content img { max-width: 100%; height: auto; }
  body.ep-site #page-container #content :is(.clearboth, .clearleft, .clearright) { display: block; }

  /* header: logo left; phone and search at the right; the menu as a wrapped row of pills under both */
  body.ep-site #page-container #header { padding: 16px 0 8px; }
  body.ep-site #page-container #header .container { display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 20px; align-items: start; }
  body.ep-site #page-container #header .container > .clearboth, body.ep-site #page-container #header .right > .clearright, body.ep-site #page-container #header .search > .clearright { display: none; }
  body.ep-site #page-container #header .logo { grid-column: 1; grid-row: 1 / span 2; float: none; width: 190px; }
  body.ep-site #page-container #header .right { display: contents; float: none; width: auto; }
  body.ep-site #page-container #header .phone { grid-column: 2; grid-row: 1; justify-self: end; float: none; margin: 0 0 10px; }
  body.ep-site #page-container #header .phone a { display: inline-block; min-height: 24px; }
  body.ep-site #page-container #header .search { grid-column: 2; grid-row: 2; justify-self: end; float: none; margin: 0; display: flex; align-items: center; }
  body.ep-site #page-container #menu { grid-column: 1 / -1; grid-row: 3; float: none; clear: none; margin: 14px 0 0; }
  body.ep-site #page-container #menu ul { float: none; display: flex; flex-wrap: wrap; gap: 4px 2px; margin: 0; padding: 0; }
  body.ep-site #page-container #menu li { float: none; margin: 0; padding: 0; background: none; }
  body.ep-site #page-container #menu li a:is(:link, :visited, :active) { padding: 8px 16px; line-height: 28px; min-height: 28px; }

  /* home: hero, tagline band, two banners, awards row, welcome row, news */
  body.ep-site.ep-home #page-container #feature { min-height: 0; }
  body.ep-site #page-container .featuremain { height: auto; min-height: clamp(200px, 46vw, 440px) !important; }
  body.ep-site #page-container #feature .slide { background-size: cover !important; background-position: center; }
  body.ep-site.ep-home #page-container #featuremain > li[data-delay] { list-style: none; margin: 0; padding: 0; }
  body.ep-site.ep-home #page-container #featuremain > li[data-delay] img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: center; }
  body.ep-site.ep-home #page-container .feature-text { position: static; width: auto; margin: 0; right: auto; top: auto; padding: 18px 24px; background: #4b6a08; letter-spacing: 0; }
  body.ep-site.ep-home #page-container .feature-text p { padding: 0; background: none; margin: 0 auto; max-width: 970px; font-size: 36px; line-height: 42px; font-weight: 700; color: #ffffff; }
  body.ep-site.ep-home #page-container .content-banners { width: auto; max-width: 970px; margin: 0 auto; background-image: none; display: flex; }
  body.ep-site.ep-home #page-container .content-banners > .clearboth { display: none; }
  body.ep-site.ep-home #page-container .content-banner { box-sizing: border-box; flex: 1 1 50%; width: auto; padding: 24px 24px 24px 90px; float: none; }
  body.ep-site.ep-home #page-container .content-banner.left { width: auto; background-position: 24px 24px; border-right: 1px solid #7e9a3a; }
  body.ep-site.ep-home #page-container .content-banner.right { width: auto; background-position: 24px 24px; }
  body.ep-site.ep-home #page-container #content.split { display: flex; flex-wrap: wrap; gap: 0 30px; background-image: none; }
  body.ep-site.ep-home #page-container #content > .clearboth { display: none; }
  body.ep-site.ep-home #page-container #content .banner-bar { order: 1; flex: 1 1 40%; display: flex; justify-content: center; align-items: center; gap: 24px; width: auto; height: auto; margin: 0 0 20px; padding: 0; text-align: center; }
  body.ep-site.ep-home #page-container #content .banner-bar p { margin: 0; }
  body.ep-site.ep-home #page-container #content .banner-bar.left, body.ep-site.ep-home #page-container #content .banner-bar.right { margin: 0 0 20px; }
  body.ep-site.ep-home #page-container #content > .left:not(.banner-bar) { order: 2; float: none; flex: 0 0 277px; width: 277px; padding: 0; }
  body.ep-site.ep-home #page-container #content > .mid { order: 3; float: none; flex: 1 1 300px; width: auto; padding: 0 0 20px; }
  body.ep-site.ep-home #page-container #content > .right:not(.banner-bar) { order: 4; float: none; flex: 0 0 100%; width: auto; padding: 10px 0 0; }
  body.ep-site.ep-home #page-container h1 { line-height: 38px; }
  body.ep-site.ep-home #page-container .panel.blog { margin-top: 10px; }

  /* inner pages: the news sidebar sits beside the text from 768, below it on phones */
  body.ep-site:not(.ep-home) #page-container #content > div.left { float: left; width: calc(100% - 310px); }
  body.ep-site:not(.ep-home) #page-container #content > div.right { float: right; width: 270px; }
  body.ep-site #page-container .p-tabs { width: auto; }
  /* project records: the main photo stacks over the text, thumbnails in a grid that never stretches them */
  body.ep-site #page-container .project-record .gallery-item.main-image { float: none; display: block; margin: 0 0 16px; }
  body.ep-site #page-container .project-record .gallery-item.main-image img { display: block; width: 100%; max-width: 462px; height: auto; box-sizing: border-box; }
  body.ep-site #page-container table.p-gallery, body.ep-site #page-container table.p-gallery tbody { display: block; width: 100%; }
  body.ep-site #page-container table.p-gallery tr { display: grid; grid-template-columns: repeat(6, minmax(0, 140px)); gap: 10px; }
  body.ep-site #page-container table.p-gallery td { display: block; padding: 0; }
  body.ep-site #page-container table.p-gallery td a { display: block; }
  body.ep-site #page-container table.p-gallery img { width: 100%; height: auto; box-sizing: border-box; }
  body.ep-site #page-container .p-gallery { margin: 20px 0 30px; }
  body.ep-site #page-container h1.p-icon { box-sizing: border-box; width: calc(100% - 66px); min-height: 54px; display: flex; align-items: center; line-height: 30px; padding: 0 0 0 65px; }
  body.ep-site #page-container a.p-icon.commercial, body.ep-site #page-container a.p-icon.residential { display: block; background-repeat: no-repeat; font-size: 0; }
  /* site map: the tree's connector pictures and percentage columns break below 1170; buttons in a plain wrapped grid */
  body.ep-site.ep-sitemap #page-container .primaryNav li { width: 25% !important; margin-top: 0; padding: 6px 0; background: none !important; box-sizing: border-box; }
  body.ep-site.ep-sitemap #page-container .primaryNav li a { margin: 0 10px 0 0; padding: 8px 10px; font-size: 14px; }
  body.ep-site.ep-sitemap #page-container .primaryNav { float: none; display: flow-root; width: auto; }
  body.ep-site.ep-sitemap #page-container .primaryNav #home { padding: 0 0 6px; background: none; }
  body.ep-site.ep-sitemap #page-container .primaryNav li li { padding-top: 6px; background: none !important; }
  body.ep-site.ep-sitemap #page-container .primaryNav li li li a { font-size: 14px; width: auto; float: none; }
  body.ep-site #page-container .form.searchpage td::after { content: ""; display: block; clear: both; }
  /* generic tables with fixed inline widths (contact details, home logos) */
  body.ep-site #page-container #content table[style*="width"], body.ep-site #page-container #content table[width] { max-width: 100%; }
}

/* ================================================================== below 768: the phone design ================================================================== */
@media (max-width: 767px) {
  body.ep-site #page-container :is(#container, .container, #header .container, #footer .container) { padding-left: 16px; padding-right: 16px; }
  body.ep-site #page-container #header { padding: 12px 0 8px; }
  body.ep-site #page-container #header .container { grid-template-columns: 118px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; }
  body.ep-site #page-container #header .logo { grid-row: 1 / span 2; width: 118px; }
  body.ep-site #page-container #header .logo img { width: 118px; height: auto; }
  body.ep-site #page-container #header .phone { grid-column: 2; grid-row: 1; justify-self: stretch; margin: 0; padding: 0; display: block; border-radius: 22px; }
  body.ep-site #page-container #header .phone::before { left: 14px; top: 50%; margin-top: -10px; }
  body.ep-site #page-container #header .phone a { display: block; padding: 11px 12px 11px 44px; min-height: 22px; font-size: 18px; line-height: 22px; text-align: center; }
  body.ep-site #page-container #header .ils-menu-toggle { display: inline-flex; grid-column: 2; grid-row: 2; justify-self: end; width: auto; min-width: 132px; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; height: 48px; margin: 0; padding: 0 22px 0 18px; border: 0; border-radius: 24px;
    background: #4b6a08; color: #ffffff; font: 700 16px/48px 'Lato', Arial, Helvetica, sans-serif; cursor: pointer; }
  body.ep-site #page-container #header .ils-menu-toggle:is(:hover, :focus, :active) { background: #3a5206; color: #ffffff; }
  body.ep-site #page-container #header .ils-menu-toggle span, body.ep-site #page-container #header .ils-menu-toggle span::before, body.ep-site #page-container #header .ils-menu-toggle span::after { display: block; position: relative; width: 20px; height: 2px; background: #ffffff; content: ""; }
  body.ep-site #page-container #header .ils-menu-toggle span::before { position: absolute; top: -6px; left: 0; }
  body.ep-site #page-container #header .ils-menu-toggle span::after { position: absolute; top: 6px; left: 0; }
  body.ep-site #page-container #header #menu, body.ep-site #page-container #header .search { display: none; }
  body.ep-site #page-container #header.ils-menu-open #menu { display: block; grid-column: 1 / -1; grid-row: 3; margin: 0; background: #f4f4f4; border-radius: 12px; padding: 6px; }
  body.ep-site #page-container #header.ils-menu-open .search { display: flex; grid-column: 1 / -1; grid-row: 4; justify-self: stretch; padding: 4px 14px; border-radius: 24px; }
  body.ep-site #page-container #header .search input.clicknclear { flex: 1 1 auto; width: auto; min-width: 0; height: 40px; }
  body.ep-site #page-container #header .search .button { width: 24px; height: 24px; padding: 8px; box-sizing: content-box; }
  body.ep-site #page-container #menu ul { display: block; }
  body.ep-site #page-container #menu li { display: block; }
  body.ep-site #page-container #menu li a:is(:link, :visited, :active, :hover, :focus) { padding: 0 16px; line-height: 44px; min-height: 44px; border-radius: 8px; font-size: 16px; }
  body.ep-site #page-container #menu li.active { background: none; }
  body.ep-site #page-container #header #menu li a:is(:link, :visited, :active, :hover, :focus) { text-align: left; }

  /* home */
  body.ep-site.ep-home #page-container .feature-text { padding: 16px; }
  body.ep-site.ep-home #page-container .feature-text p { font-size: 26px; line-height: 32px; }
  body.ep-site.ep-home #page-container .content-banners { display: block; }
  body.ep-site.ep-home #page-container .content-banner { padding: 20px 16px 20px 86px; }
  body.ep-site.ep-home #page-container .content-banner.left { border-right: 0; border-bottom: 1px solid #7e9a3a; background-position: 16px 20px; }
  body.ep-site.ep-home #page-container .content-banner.right { background-position: 16px 20px; }
  body.ep-site.ep-home #page-container #content.split { padding: 20px 16px 28px; gap: 0; }
  body.ep-site.ep-home #page-container #content .banner-bar { flex: 1 1 50%; gap: 12px; margin: 0 0 16px; }
  body.ep-site.ep-home #page-container #content .banner-bar img { width: 64px; height: auto; }
  body.ep-site.ep-home #page-container #content > .left:not(.banner-bar) { flex: 0 0 100%; width: 100%; margin: 0 0 16px; }
  body.ep-site.ep-home #page-container #content > .left:not(.banner-bar) img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
  body.ep-site.ep-home #page-container #content > .mid { flex: 0 0 100%; }

  /* inner pages */
  body.ep-site #page-container #content { padding: 16px 0 28px; }
  body.ep-site #page-container h1 { font-size: 28px; line-height: 34px; margin-bottom: 14px; }
  body.ep-site #page-container h2 { font-size: 24px; line-height: 30px; }
  body.ep-site #page-container h3 { font-size: 20px; line-height: 26px; }
  body.ep-site #page-container h1.p-icon { width: calc(100% - 62px); padding-left: 62px; background-size: 48px auto; line-height: 28px; font-size: 24px; }
  body.ep-site #page-container a.p-icon.commercial, body.ep-site #page-container a.p-icon.residential { display: block; width: 48px; height: 48px; background-size: 48px auto; background-repeat: no-repeat; font-size: 0; }
  body.ep-site:not(.ep-home) #page-container #content > div.left, body.ep-site:not(.ep-home) #page-container #content > div.right { float: none; width: auto; }
  body.ep-site #page-container .p-tabs li { width: 50%; box-sizing: border-box; }
  body.ep-site #page-container .p-tabs { height: auto; display: flex; }
  body.ep-site #page-container .p-tabs a { line-height: 44px; }
  body.ep-site #page-container .p-tabs li { line-height: 44px; }
  body.ep-site #page-container .project-record { margin: 24px 0; }
  body.ep-site #page-container table.p-gallery tr { grid-template-columns: repeat(3, minmax(0, 140px)); }
  body.ep-site #page-container .list .entry .image { float: none; width: auto; margin: 0 0 12px; padding: 0; }
  body.ep-site #page-container .blog-image, body.ep-site #page-container .entry > a > img { float: none; display: block; max-width: 160px; margin: 0 0 12px; }
  body.ep-site #page-container .paging { text-align: left; line-height: 40px; }
  body.ep-site #page-container .paging .options { margin: 0 12px; }
  body.ep-site #page-container .paging .result-count { display: block; margin: 0; }
  body.ep-site #page-container blockquote { padding: 44px 0 20px 0; background-size: 36px auto; margin: 24px 0; }
  body.ep-site #page-container blockquote .testimonial-image { float: none; display: block; margin: 0 0 16px; max-width: 100%; height: auto; }
  body.ep-site #page-container #content table:not(.p-gallery):not(.form):not(.searchpage), body.ep-site #page-container #content table:not(.p-gallery):not(.form):not(.searchpage) :is(tbody, tr, td) { display: block; width: auto !important; max-width: 100%; box-sizing: border-box; }
  body.ep-site #page-container #content table:not(.p-gallery) td[style*="text-align: right"] { display: none; }
  body.ep-site #page-container .form.searchpage, body.ep-site #page-container .form.searchpage :is(tbody, tr, td) { display: block; width: auto; max-width: 100%; }
  body.ep-site.ep-sitemap #page-container .primaryNav li { width: 50% !important; }
  body.ep-site #page-container .form.searchpage input:not(.button) { float: none; display: block; width: 100%; box-sizing: border-box; height: 48px; margin: 0 0 10px; padding: 10px 12px; border-color: #767676; }
  body.ep-site #page-container .form.searchpage .button { display: block; width: 100%; box-sizing: border-box; min-height: 48px; font-size: 16px; }
  body.ep-site #page-container .ep-contact-form.et_pb_contact_form_container { max-width: none; }
  body.ep-site #page-container .et_pb_section .ep-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { justify-self: stretch; width: 100%; }
  body.ep-site #page-container .map-container { height: 340px; }
  body.ep-site #page-container .map-wrapper .map-container, body.ep-site #page-container .map-container * { max-width: 100%; }

  /* footer: one column, tap-sized links */
  body.ep-site #page-container #footer .container { padding: 24px 16px; }
  body.ep-site #page-container #footer :is(.left, .right) { float: none; width: auto; }
  body.ep-site #page-container #footer .mainmenu, body.ep-site #page-container #footer .footermenu { margin-bottom: 12px; }
  body.ep-site #page-container #footer :is(.mainmenu, .footermenu) a { padding: 10px 0; margin-right: 14px; min-height: 24px; }
  body.ep-site #page-container #footer .footermenu em { display: none; }
  body.ep-site #page-container #footer .right { margin-top: 12px; }
  body.ep-site #page-container #footer .copyright, body.ep-site #page-container #footer .footer-tags { display: block; margin: 8px 0 0; }
  body.ep-site #page-container #footer .vcard a { display: inline-block; padding: 6px 0; }
}