.elementor-88 .elementor-element.elementor-element-s3-pcchk{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-88 .elementor-element.elementor-element-s3-pcchk > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-88 .elementor-element.elementor-element-s9s-1{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-88 .elementor-element.elementor-element-s9s-2{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-88 .elementor-element.elementor-element-s9s-3{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-88 .elementor-element.elementor-element-s9-carousel{--e-n-carousel-swiper-slides-to-display:3;--e-n-carousel-swiper-offset-size:0px;--e-n-carousel-swiper-slides-gap:20px;width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:-32px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:-32px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;--e-n-carousel-arrow-size:20px;--e-n-carousel-arrow-normal-color:#1C450C;--e-n-carousel-arrow-hover-color:#1C450C;--e-n-carousel-swiper-pagination-size:10px;--e-n-carousel-dots-normal-color:rgba(255, 255, 255, 0.5);--e-n-carousel-dots-hover-color:#FFFFFF;--e-n-carousel-swiper-pagination-spacing:24px;}.elementor-88 .elementor-element.elementor-element-s9-carousel :is(.elementor-swiper-button-prev, .elementor-swiper-button-next) {background-color:#FADF7D;border-radius:50% 50% 50% 50%;padding:12px 12px 12px 12px;}.elementor-88 .elementor-element.elementor-element-s9-carousel :is(.elementor-swiper-button-prev:hover, .elementor-swiper-button-next:hover) {background-color:#FADF7D;}.elementor-88 .elementor-element.elementor-element-s9-carousel .swiper-pagination-bullet{--swiper-pagination-bullet-horizontal-gap:6px;--swiper-pagination-bullet-vertical-gap:6px;}.elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-item{border-width:0px;}.elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-item .elementor-tab-content{border-width:0px;}.elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-item .elementor-tab-title.elementor-active{border-width:0px;}.elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-tab-title{background-color:#FEFCF4;padding:8px 30px 8px 30px;}.elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-icon, .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-title{color:#18360D;}.elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-icon svg{fill:#18360D;}.elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-active .elementor-accordion-icon, .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-active .elementor-accordion-title{color:#FFFFFF;}.elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-active .elementor-accordion-icon svg{fill:#FFFFFF;}.elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-title{font-family:"Merriweather", Sans-serif;font-size:21px;font-weight:400;line-height:1.3em;}.elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-tab-title .elementor-accordion-icon i:before{color:#18360D;}.elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-tab-title .elementor-accordion-icon svg{fill:#18360D;}.elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon i:before{color:#18360D;}.elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon svg{fill:#18360D;}.elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-icon{margin-inline-end:20px;}.elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-tab-content{background-color:#FFFFFF;color:#565656;font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;padding:10px 30px 0px 30px;}.elementor-88 .elementor-element.elementor-element-s10-faq-default-open-script{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-88 .elementor-element.elementor-element-hbc-loop-grid{--grid-columns:3;--grid-row-gap:20px;--grid-column-gap:20px;}.elementor-88 .elementor-element.elementor-element-hbc-loop-grid .elementor-loop-container{grid-auto-rows:1fr;}.elementor-88 .elementor-element.elementor-element-hbc-loop-grid .e-loop-item > .elementor-section, .elementor-88 .elementor-element.elementor-element-hbc-loop-grid .e-loop-item > .elementor-section > .elementor-container, .elementor-88 .elementor-element.elementor-element-hbc-loop-grid .e-loop-item > .e-con, .elementor-88 .elementor-element.elementor-element-hbc-loop-grid .e-loop-item .elementor-section-wrap > .e-con{height:100%;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-88 .elementor-element.elementor-element-s9-carousel{--e-n-carousel-swiper-slides-to-display:2;--e-n-carousel-swiper-offset-size:0px;--e-n-carousel-swiper-slides-gap:20px;}.elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-tab-title{padding:8px 30px 8px 30px;}.elementor-88 .elementor-element.elementor-element-hbc-loop-grid{--grid-columns:2;--grid-row-gap:20px;}}@media(max-width:767px){.elementor-88 .elementor-element.elementor-element-s9-carousel{--e-n-carousel-swiper-slides-to-display:1;--e-n-carousel-swiper-offset-size:36px;--e-n-carousel-swiper-slides-gap:16px;--e-n-carousel-arrow-prev-left-position:14px;--e-n-carousel-arrow-next-right-position:14px;}.elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-title{font-size:18px;}.elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-tab-title{padding:12px 20px 12px 20px;}.elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-tab-content{padding:10px 20px 0px 20px;}.elementor-88 .elementor-element.elementor-element-hbc-loop-grid{--grid-columns:1;--grid-row-gap:20px;}}/* Start custom CSS for template, class: .elementor-element-s3-pcchk *//* Homepage 88 only: shared postcode checker (template 6267) in its own row under the map section (s3-pc-col). Template 6267 itself is not modified. */ /* Hide the visible 'Postcode' label; kept for screen readers (template JS links it to the input via for/id). Same approach as pages 256 and 6215. */ .elementor-88 .elementor-element.elementor-element-s3-pcchk .fpc-pc__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* Mobile: centred and stacked (same approach as pages 185/559). */ @media (max-width:767px){ .elementor-88 .elementor-element.elementor-element-s3-pcchk .fpc-pc{margin:0 auto} .elementor-88 .elementor-element.elementor-element-s3-pcchk .fpc-pc__row{flex-direction:column;align-items:center;gap:16px} .elementor-88 .elementor-element.elementor-element-s3-pcchk .fpc-pc__input{flex:0 0 auto;width:220px;max-width:100%} }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-43a03e0 *//* FPC homepage Request a Callback: Gravity Form #1 in approved FPC styling, matching popup 6047 (cream #FEFCF4 panel, green #18360D text, #4A7855 pill button -> #18360D hover, DM Sans). Scoped to this widget only. Overrides the site-wide Additional CSS rules for .fpc-callback-form (gold #fcebacd6 card + #4D7E5E 150px button, with !important) without editing them, so the /request-a-callback/ page and other uses of Form #1 are unchanged. */ .elementor-88 .elementor-element.elementor-element-43a03e0 .gform_wrapper,.elementor-88 .elementor-element.elementor-element-43a03e0 .gform_wrapper:has(.fpc-callback-form){background:#FEFCF4 !important;padding:30px !important;border-radius:18px !important;} .elementor-88 .elementor-element.elementor-element-43a03e0 .gform_wrapper .gform_heading{display:none;} .elementor-88 .elementor-element.elementor-element-43a03e0 .gform_wrapper .gform_required_legend{font-family:"DM Sans",sans-serif;font-size:14px !important;color:#565656 !important;margin-bottom:12px !important;} .elementor-88 .elementor-element.elementor-element-43a03e0 .gform_wrapper .gfield_label,.elementor-88 .elementor-element.elementor-element-43a03e0 .gform_wrapper legend.gfield_label,.elementor-88 .elementor-element.elementor-element-43a03e0 .gform_wrapper .gform-field-label{font-family:"DM Sans",sans-serif;font-size:15px;font-weight:500;color:#18360D;} .elementor-88 .elementor-element.elementor-element-43a03e0 .gform_wrapper .gform-field-label--type-sub{font-size:13px;font-weight:400;color:#565656;} .elementor-88 .elementor-element.elementor-element-43a03e0 .gform_wrapper .gfield_required,.elementor-88 .elementor-element.elementor-element-43a03e0 .gform_wrapper .gfield_required_text{color:#565656 !important;font-weight:400;} .elementor-88 .elementor-element.elementor-element-43a03e0 .fpc-callback-form input[type=text],.elementor-88 .elementor-element.elementor-element-43a03e0 .fpc-callback-form input[type=email],.elementor-88 .elementor-element.elementor-element-43a03e0 .fpc-callback-form input[type=tel],.elementor-88 .elementor-element.elementor-element-43a03e0 .fpc-callback-form textarea{font-family:"DM Sans",sans-serif;font-size:16px;color:#18360D;background:#FFFFFF;border:1px solid #D7DCCB !important;border-radius:12px !important;padding:12px 14px;box-shadow:none !important;} .elementor-88 .elementor-element.elementor-element-43a03e0 .fpc-callback-form input:focus,.elementor-88 .elementor-element.elementor-element-43a03e0 .fpc-callback-form textarea:focus{border-color:#4A7855 !important;outline:2px solid rgba(74,120,85,.25) !important;outline-offset:0 !important;} .elementor-88 .elementor-element.elementor-element-43a03e0 .fpc-callback-form textarea{min-height:110px;height:110px;} .elementor-88 .elementor-element.elementor-element-43a03e0 .gform_wrapper .gform_footer{margin-top:8px;padding:0;justify-content:flex-start;} .elementor-88 .elementor-element.elementor-element-43a03e0 .fpc-callback-form .gform_button,.elementor-88 .elementor-element.elementor-element-43a03e0 .fpc-callback-form input[type=submit]{font-family:"DM Sans",sans-serif !important;font-size:16px !important;font-weight:400 !important;line-height:1.4 !important;color:#FFFFFF !important;background:#4A7855 !important;border:0 !important;border-radius:75px !important;padding:15px 30px !important;width:auto !important;box-shadow:none !important;cursor:pointer;} .elementor-88 .elementor-element.elementor-element-43a03e0 .fpc-callback-form .gform_button:hover,.elementor-88 .elementor-element.elementor-element-43a03e0 .fpc-callback-form input[type=submit]:hover{background:#18360D !important;} .elementor-88 .elementor-element.elementor-element-43a03e0 .fpc-callback-form .gform_button:focus-visible,.elementor-88 .elementor-element.elementor-element-43a03e0 .fpc-callback-form input[type=submit]:focus-visible{outline:3px solid #FADF7D !important;outline-offset:2px !important;} .elementor-88 .elementor-element.elementor-element-43a03e0 .gform_wrapper .gform_confirmation_message{font-family:"DM Sans",sans-serif;font-size:16px;color:#18360D;} @media (max-width:767px){.elementor-88 .elementor-element.elementor-element-43a03e0 .gform_wrapper,.elementor-88 .elementor-element.elementor-element-43a03e0 .gform_wrapper:has(.fpc-callback-form){padding:24px 20px !important;}}/* End custom CSS */ /* Start custom CSS for accordion, class: .elementor-element-s10-accordion *//* FAQ accordion: matches the approved Bacchus Marsh FAQ (page 783, widget 5b07f36). Applies at all breakpoints. Previously desktop-only (min-width:1025px), which left the open question white-on-cream and the rows unpadded on tablet/mobile. Phase 2 fix 2026-10-08. Scoped to this widget only via the ".elementor-88 .elementor-element.elementor-element-s10-accordion" prefix. */ /* Spacing between rows: Figma gap-[15px] separating the open row+answer from the closed list, gap-[10px] between each closed row */ .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-item + .elementor-accordion-item { margin-top: 10px; } .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-item:first-child { margin-bottom: 15px; } /* Row shape + height: Figma rounded-[73px] pill, min h-[60px] on every question row (min-height, not a hard height, so the row can grow if a title ever wraps). Vertical title_padding is set natively (Style tab: 8px desktop/tablet, 12px mobile) so wrapped questions keep breathing room; single-line rows stay at this 60px min-height. Horizontal padding is 30px (20px mobile). Same rule for active and inactive rows. */ .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-tab-title { border-radius: 73px; overflow: hidden; display: flex; align-items: center; min-height: 60px; } /* Actual rendered DOM (verified via REST API) has the icon BEFORE the title , so default flex row order puts the icon first/left. Explicit "order" fixes this regardless of DOM order: title first visually (order:1) and given flex:1 so it fills the row, icon last visually (order:2) at a fixed width so it lands at the true right edge - no absolute positioning, no dependency on Elementor's own markup order. */ .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-tab-title .elementor-accordion-title { order: 1; flex: 1 1 auto; min-width: 0; } /* Active/open row fill: Figma bg-[#18360d], applied only while the row is expanded. Closed rows keep the native "title_background" (#FEFCF4) set on the Style tab. */ .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-tab-title.elementor-active { background-color: #18360D; } /* Expand/collapse control: Figma 43x43 circle bg-[#fadf7d] behind the chevron icon, present on both open and closed rows. order:2 (paired with the title's order:1 above) puts it last in visual flex order regardless of its earlier position in the DOM. */ .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-icon { display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; border-radius: 50%; background-color: #FADF7D; flex-shrink: 0; order: 2; } /* Icon state wrappers: base sizing only, no display set here - display is decided explicitly below per state so exactly ONE of closed/opened ever renders. */ .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-icon-closed, .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-icon-opened { position: relative; width: 24px; height: 24px; } /* Inactive row: show the closed-state icon only, hide the opened-state one */ .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-tab-title:not(.elementor-active) .elementor-accordion-icon-closed { display: inline-flex; } .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-tab-title:not(.elementor-active) .elementor-accordion-icon-opened { display: none; } /* Active row: show the opened-state icon only, hide the closed-state one (same glyph either way, per Figma - both states use one identical chevron) */ .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon-closed { display: none; } .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon-opened { display: inline-flex; } /* Icon glyph: reproduces the ACTUAL Figma vector (node icon-park-outline:down inside 16669:754 - 24x24, single path "M18 9L12 15L6 9", stroke #18360D, stroke-width 2, round linecap/linejoin) instead of the Font Awesome "angle-down" SVG Elementor actually renders (verified via REST API: ). Hides that rendered SVG inside whichever wrapper is visible, then paints the exact Figma shape as a CSS mask on a pseudo-element, sized 24x24 and centered in the badge. */ .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-icon-closed > *, .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-icon-opened > * { visibility: hidden; } .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-icon-closed::after, .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-icon-opened::after { content: ""; position: absolute; inset: 0; background-color: #18360D; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 9L12 15L6 9' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 9L12 15L6 9' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Mobile: slightly smaller chevron circle so long questions keep more width */ @media (max-width: 767px) { .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-icon { width: 36px; height: 36px; } .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-icon-closed, .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-accordion-icon-opened { width: 20px; height: 20px; } } /* Spacing refinement 2026-10-08: at 1024px and below keep at least 12px between the question text and the chevron (the native icon spacing lands on the outer side of the chevron because CSS re-orders it to the right). */ @media (max-width: 1024px) { .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-tab-title { gap: 12px; } } /* Spacing refinement 2026-10-08: on mobile cap the corner radius at 28px (approved Tier 1 treatment) so wrapped questions are not cut into by a full-height pill curve. */ @media (max-width: 767px) { .elementor-88 .elementor-element.elementor-element-s10-accordion .elementor-tab-title { border-radius: 28px; } }/* End custom CSS */ /* Start custom CSS for loop-grid, class: .elementor-element-hbc-loop-grid *//* FPC homepage blog cards: latest 3 posts via Loop Item 6331. Tablet only: 2 cards on row 1, 3rd card centred on row 2 at the same width as one column. Sibling .elementor-88 .elementor-element.elementor-element-hbc-loop-grid counts loop items only (the loop container also holds a