.elementor-kit-45{--e-global-color-primary:#EA5B0C;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#575754;--e-global-color-accent:#EEEEEE;--e-global-color-0be5264:#222222;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:1.25em;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-line-height:1.25em;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:500;--e-global-typography-accent-line-height:1.25em;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-45 button,.elementor-kit-45 input[type="button"],.elementor-kit-45 input[type="submit"],.elementor-kit-45 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:400;text-transform:uppercase;text-decoration:none;line-height:1.6em;color:var( --e-global-color-secondary );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-primary );border-radius:10px 10px 10px 10px;padding:13px 24px 13px 24px;}.elementor-kit-45 e-page-transition{background-color:#FFBC7D;}.elementor-kit-45 a{color:var( --e-global-color-text );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-45 a:hover{color:var( --e-global-color-primary );text-decoration:underline;}.elementor-kit-45 h1{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-45 h2{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-45 h3{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-45 h4{line-height:1.2em;}.elementor-kit-45 h5{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-45 h6{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-45 button:hover,.elementor-kit-45 button:focus,.elementor-kit-45 input[type="button"]:hover,.elementor-kit-45 input[type="button"]:focus,.elementor-kit-45 input[type="submit"]:hover,.elementor-kit-45 input[type="submit"]:focus,.elementor-kit-45 .elementor-button:hover,.elementor-kit-45 .elementor-button:focus{color:var( --e-global-color-secondary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1800px;}.e-con{--container-max-width:1800px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:30px;}.elementor-element{--widgets-spacing:30px 30px;--widgets-spacing-row:30px;--widgets-spacing-column:30px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-45{line-height:var( --e-global-typography-text-line-height );}.elementor-kit-45 a{line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-45 h1{line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-45 h2{line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-45 h3{line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-45 h5{line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-45 h6{line-height:var( --e-global-typography-primary-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-45{line-height:var( --e-global-typography-text-line-height );}.elementor-kit-45 a{line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-45 h1{line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-45 h2{line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-45 h3{line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-45 h5{line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-45 h6{line-height:var( --e-global-typography-primary-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   ECT CUSTOM CSS
   Organised by: Global > Content > Navigation > Cards/CTAs > Forms > Footer > Responsive
   ========================================================================== */


/* ==========================================================================
   1. GLOBAL TYPOGRAPHY & CONTENT
   ========================================================================== */

/* Highlight the secondary line within H1 headings and place it on a new line. */
h1 span {
    display: block;
    color: #f15a00;
}

/* Style general-page H2 headings consistently. */
#general-page h2 {
    margin-top: 40px;
    font-size: 35px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Remove the top margin from the first H2 on general pages. */
#general-page h2:first-of-type {
    margin-top: 0;
}

/* Apply the ECT orange colour to links within general pages. */
#general-page a {
    color: #ea5b0c;
}

/* Align unordered lists neatly within general-page content. */
#general-page ul {
    margin-left: 20px;
    padding-left: 0;
}

/* Remove underlines from related-card links on hover. */
a.ect-related-card:hover {
    text-decoration: none !important;
}

/* Remove underlines from ECT info-card links on hover. */
.ect-info-card a:hover {
    text-decoration: none;
}

/* Remove underlines from primary navigation and Elementor buttons on hover. */
#site-navigation a:hover,
a.elementor-button:hover {
    text-decoration: none;
}


/* ==========================================================================
   2. COOKIEYES
   ========================================================================== */

/* ==========================================================================
   COOKIEYES OVERRIDES
   ========================================================================== */

/* Style the CookieYes notice title. */
body .cky-consent-container .cky-notice .cky-title {
    margin: 0 0 10px !important;
    font-size: 16px !important;
}

/* Set consistent body-copy sizing throughout CookieYes panels. */
body .cky-consent-container .cky-notice-des *,
body .cky-preference-center .cky-preference-content-wrapper *,
body .cky-preference-center .cky-dma-content-wrapper *,
body .cky-preference-center .cky-accordion-header-des *,
body .cky-preference-center .cky-gpc-wrapper .cky-gpc-desc * {
    font-size: 13px !important;
}

/* Apply ECT orange to the CookieYes revisit button. */
body .cky-btn-revisit-wrapper {
    background-color: #ea5b0c !important;
}

/* Apply ECT orange to links within the CookieYes notice. */
body .cky-consent-container .cky-notice-des a {
    color: #ea5b0c !important;
}

/* Apply ECT orange to the main CookieYes action buttons. */
body .cky-consent-container .cky-btn.cky-btn-preferences,
body .cky-consent-container .cky-btn.cky-btn-accept,
body .cky-consent-container .cky-btn.cky-btn-reject {
    border-color: #ea5b0c !important;
    background-color: #ea5b0c !important;
}

/* Style the CookieYes customise button as an outlined ECT-orange action. */
body .cky-consent-container .cky-btn.cky-btn-customize {
    border: 2px solid #ea5b0c !important;
    background-color: transparent !important;
    color: #ea5b0c !important;
}

/* Standardise CookieYes button sizing and shape. */
body .cky-consent-container .cky-notice-btn-wrapper .cky-btn {
    padding: 8px !important;
    border-radius: 5px !important;
    font-size: 13px !important;
    line-height: 24px !important;
}


/* ==========================================================================
   3. HEADER & DESKTOP NAVIGATION
   ========================================================================== */

/* Flip the header phone icon so the handset faces the intended direction. */
.header-phone .elementor-icon-list-icon i,
.header-phone .elementor-icon-list-icon svg {
    transform: scaleX(-1);
}

/* Keep dropdown arrows the same colour as the active menu item. */
.elementor-nav-menu .current-menu-item > a .sub-arrow,
.elementor-nav-menu .current-menu-ancestor > a .sub-arrow {
    color: inherit;
}

/* Ensure SVG dropdown arrows also inherit the active menu colour. */
.elementor-nav-menu .current-menu-item > a .sub-arrow svg,
.elementor-nav-menu .current-menu-ancestor > a .sub-arrow svg {
    fill: currentColor;
}

/* Add spacing and a divider above desktop "View All" menu items. */
.elementor-nav-menu .view-all {
    margin-top: 8px;
    border-top: 1px solid #e1e1e1;
}

/* Style desktop "View All" menu links as distinct actions. */
.elementor-nav-menu .view-all > a {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    color: #000 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Add a subtle background to desktop "View All" links on hover or focus. */
.elementor-nav-menu .view-all > a:hover,
.elementor-nav-menu .view-all > a:focus {
    background-color: #f7f7f7 !important;
    color: #000 !important;
    text-decoration: none !important;
}

/* Add a small directional arrow after desktop "View All" links. */
.elementor-nav-menu .view-all > a::after {
    content: "→";
    display: inline-block;
    margin-left: 8px;
    color: #000;
    transition: transform 0.2s ease;
}

/* Move the desktop "View All" arrow slightly right on hover or focus. */
.elementor-nav-menu .view-all > a:hover::after,
.elementor-nav-menu .view-all > a:focus::after {
    transform: translateX(3px);
}

/* Remove Elementor's animated underline from the header quote button. */
.elementor-908 .elementor-element.elementor-element-32910a23
.elementor-nav-menu--main:not(.e--pointer-framed)
li.btn .elementor-item::after {
    background-color: transparent !important;
}


/* ==========================================================================
   4. CARDS & REUSABLE HOVER EFFECTS
   ========================================================================== */

/* Make ECT sector cards feel interactive and animate movement smoothly. */
.ect-sector-cards .ect-info-card {
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Establish the positioning context used by the full-card sector link overlay. */
.ect-sector-cards .ect-info-card .elementor-widget-container {
    position: relative;
}

/* Extend the sector-card title link across the full card surface. */
.ect-sector-cards .ect-info-card .elementor-icon-box-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
}

/* Lift ECT sector cards and add a soft shadow on hover. */
.ect-sector-cards .ect-info-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Apply the dark support-card appearance used on the home page. */
.home-support .ect-info-card {
    background-color: #333;
    color: #fff;
}

/* Add a neutral border and smooth transition to reusable hover cards. */
.ect-hover-card {
    border: 1px solid #ddddda;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

/* Highlight and gently lift reusable hover cards on hover or keyboard focus. */
.ect-hover-card:hover,
.ect-hover-card:focus-within {
    border-color: #f15a00;
    transform: translateY(-3px);
}

/* Remove underlines from reusable hover cards and their internal links. */
.ect-hover-card,
.ect-hover-card:hover,
.ect-hover-card:focus,
.ect-hover-card:focus-within,
.ect-hover-card a,
.ect-hover-card a:hover,
.ect-hover-card a:focus {
    text-decoration: none !important;
}

/* Animate icons within reusable hover cards. */
.ect-hover-card .elementor-icon,
.ect-hover-card .elementor-button-icon {
    transition: transform 0.2s ease;
}

/* Move reusable hover-card icons slightly right on hover or focus. */
.ect-hover-card:hover .elementor-icon,
.ect-hover-card:hover .elementor-button-icon,
.ect-hover-card:focus-within .elementor-icon,
.ect-hover-card:focus-within .elementor-button-icon {
    transform: translateX(3px);
}

/* Move hover-card icons upward instead on the locations page. */
.ect-locations-page .ect-hover-card:hover .elementor-icon,
.ect-locations-page .ect-hover-card:hover .elementor-button-icon,
.ect-locations-page .ect-hover-card:focus-within .elementor-icon,
.ect-locations-page .ect-hover-card:focus-within .elementor-button-icon {
    transform: translateY(-3px);
}


/* ==========================================================================
   5. BUTTONS & TEXT CTAS
   ========================================================================== */

/* Style generic .btn links as ECT orange pill-style buttons. */
.btn a {
    padding-right: 30px;
    padding-left: 30px;
    border-radius: 10px;
    background-color: #ea5b0c;
    color: #fff !important;
}

/* Add spacing before icons inside generic .btn links. */
.btn i {
    margin-left: 10px;
}

/* Add a smooth lift animation to Elementor buttons. */
a.elementor-button {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}

/* Lift Elementor buttons and retain the global primary colour on hover. */
a.elementor-button:hover {
    transform: translateY(-6px);
    background-color: var(--e-global-color-primary);
}

/* Lift Elementor buttons when their contents receive keyboard focus. */
a.elementor-button:focus-within {
    transform: translateY(-6px);
}

/* Add the reusable lift animation to .btn links and hover-bounce elements. */
.btn a,
.hover-bounce-up {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}

/* Move reusable bounce elements gently upward on hover. */
.btn a:hover,
.hover-bounce-up:hover {
    transform: translateY(-6px);
}

/* Apply the reusable bounce effect when keyboard focus is within the element. */
.btn a:focus-within,
.hover-bounce-up:focus-within {
    transform: translateY(-6px);
}

/* Style reusable inline text CTAs with an offset underline. */
.ect-text-cta a {
    display: inline-block;
    color: #f15a00;
    font-weight: 500;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: currentColor;
    text-underline-offset: 4px;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Darken and lift inline text CTAs on hover or focus. */
.ect-text-cta a:hover,
.ect-text-cta a:focus {
    color: #c94700;
    transform: translateY(-2px);
}

/* Remove the default paragraph bottom margin within text CTA blocks. */
.ect-text-cta p {
    margin-bottom: 0;
}

/* Style service-hub links to match the site's primary Elementor button style. */
.service-hub-button .ect-service-hub-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 24px;
    border: 1px solid var(--e-global-color-primary);
    border-radius: 10px;
    background-color: var(--e-global-color-primary);
    color: var(--e-global-color-secondary);
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}

/* Size and animate icons within service-hub buttons. */
.service-hub-button .ect-service-hub-link i {
    font-size: 12px;
    transition: transform 0.25s ease;
}

/* Lift service-hub buttons and add a soft shadow on hover. */
.service-hub-button .ect-service-hub-link:hover {
    transform: translateY(-6px);
    background-color: var(--e-global-color-primary);
    color: var(--e-global-color-secondary);
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

/* Move the service-hub button icon slightly right on hover. */
.service-hub-button .ect-service-hub-link:hover i {
    transform: translateX(3px);
}

/* Reduce the service-hub lift while the button is actively pressed. */
.service-hub-button .ect-service-hub-link:active {
    transform: translateY(-2px);
}

/* Add a visible keyboard-focus outline to service-hub buttons. */
.service-hub-button .ect-service-hub-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* ==========================================================================
   6. FLUENT FORMS
   ========================================================================== */

/* Define shared ECT form variables for Fluent Forms 3, 4 and 5. */
#fluentform_3,
#fluentform_4,
#fluentform_5 {
    --ect-orange: #f15a00;
    --ect-orange-hover: #cf4d00;
    --ect-dark: #1a1a1a;
    --ect-grey: #575754;
    --ect-border: rgba(255, 255, 255, 0.35);
}

/* Make the second inner submit column span the available width. */
.ff-inner_submit_container .ff-t-column-2 {
    width: 100% !important;
}

/* Hide the unused first inner submit column. */
.ff-inner_submit_container .ff-t-column-1 {
    display: none;
}

/* Add spacing above Form 4 subheadings without adding spacing below. */
#fluentform_4 h3 {
    margin-top: 20px;
    margin-bottom: 0;
}

/* Apply ECT orange to the Form 4 progress bar. */
#fluentform_4 .ff-el-progress-bar {
    background-color: #ea5b0c;
}

/* Remove unwanted bottom spacing from Form 4 choice fields. */
#fluentform_4 .choices {
    margin-bottom: 0;
}

/* Style Form 4 secondary buttons with a dark neutral appearance. */
#fluentform_4 .ff-btn-secondary:not(.ff_btn_no_style) {
    border-color: #222;
    border-radius: 2px;
    background-color: #222;
    color: #fff;
}

/* Style the Form 4 progress status text. */
#fluentform_4 .ff-el-progress-status {
    font-size: 1rem;
    font-weight: 700;
}

/* Set the dimensions and typography of the Form 4 progress indicator. */
#fluentform_4 .ff-el-progress {
    height: 1.75rem;
    font-size: 1em;
    line-height: 1.6rem;
}

/* Create a two-column layout for the Form 3 enquiry form. */
#fluentform_3 fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
}

/* Remove Fluent Forms default spacing from Form 3 grid elements. */
#fluentform_3 .ff-el-group,
#fluentform_3 .ff-field_container,
#fluentform_3 .ff-t-container,
#fluentform_3 .ff-t-cell {
    margin-bottom: 0;
}

/* Ensure the Form 3 name wrapper occupies its full grid column. */
#fluentform_3 .ff-name-field-wrapper {
    width: 100%;
}

/* Stack the internal Form 3 name-field container. */
#fluentform_3 .ff-name-field-wrapper .ff-t-container {
    display: block;
}

/* Make Form 3 textarea groups span both grid columns. */
#fluentform_3 .ff-el-group:has(textarea) {
    grid-column: 1 / -1;
}

/* Make submit-button wrappers span the full form width. */
#fluentform_3 .ff_submit_btn_wrapper,
#fluentform_4 .ff_submit_btn_wrapper,
#fluentform_5 .ff_submit_btn_wrapper {
    grid-column: 1 / -1;
    width: 100%;
}

/* Add consistent spacing below Form 3 field labels. */
#fluentform_3 .ff-el-input--label {
    margin-bottom: 8px;
}

/* Style Form 3 field labels for use on a dark background. */
#fluentform_3 .ff-el-input--label label {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* Apply ECT orange to required-field markers on Forms 3 and 5. */
#fluentform_3 .ff-el-input--label label::after,
#fluentform_5 .ff-el-input--label label::after {
    color: var(--ect-orange);
}

/* Standardise text inputs across Fluent Forms 3, 4 and 5. */
#fluentform_3 .ff-el-form-control,
#fluentform_4 .ff-el-form-control,
#fluentform_5 .ff-el-form-control {
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--ect-dark);
    font-size: 15px;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Standardise placeholder styling across Fluent Forms 3, 4 and 5. */
#fluentform_3 .ff-el-form-control::placeholder,
#fluentform_4 .ff-el-form-control::placeholder,
#fluentform_5 .ff-el-form-control::placeholder {
    color: #777;
    opacity: 1;
}

/* Brighten form controls slightly on hover. */
#fluentform_3 .ff-el-form-control:hover,
#fluentform_4 .ff-el-form-control:hover,
#fluentform_5 .ff-el-form-control:hover {
    background: #fff;
}

/* Apply the ECT-orange focus treatment to form controls. */
#fluentform_3 .ff-el-form-control:focus,
#fluentform_4 .ff-el-form-control:focus,
#fluentform_5 .ff-el-form-control:focus {
    border-color: var(--ect-orange);
    outline: none;
    background: #fff;
    color: var(--ect-dark);
    box-shadow: 0 0 0 3px rgba(241, 90, 0, 0.16);
}

/* Give Form 3 message fields a useful minimum height and vertical resizing. */
#fluentform_3 textarea.ff-el-form-control {
    min-height: 135px;
    resize: vertical;
}

/* Style submit buttons across Fluent Forms 3, 4 and 5 to match Elementor. */
#fluentform_3 .ff-btn-submit,
#fluentform_4 .ff-btn-submit,
#fluentform_5 .ff-btn-submit {
    display: block;
    width: 100%;
    min-height: auto;
    padding: 13px 24px;
    border: 1px solid var(--e-global-color-primary);
    border-radius: 10px;
    background-color: var(--e-global-color-primary);
    color: var(--e-global-color-secondary);
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Lift Fluent Forms submit buttons on hover or focus. */
#fluentform_3 .ff-btn-submit:hover,
#fluentform_3 .ff-btn-submit:focus,
#fluentform_4 .ff-btn-submit:hover,
#fluentform_4 .ff-btn-submit:focus,
#fluentform_5 .ff-btn-submit:hover,
#fluentform_5 .ff-btn-submit:focus {
    transform: translateY(-6px);
    opacity: 1;
}

/* Add a clear keyboard-focus outline to Fluent Forms submit buttons. */
#fluentform_3 .ff-btn-submit:focus-visible,
#fluentform_4 .ff-btn-submit:focus-visible,
#fluentform_5 .ff-btn-submit:focus-visible {
    outline: 3px solid rgba(241, 90, 0, 0.3);
    outline-offset: 3px;
}

/* Style validation messages consistently across Fluent Forms 3, 4 and 5. */
#fluentform_3 .ff-el-is-error .text-danger,
#fluentform_4 .error.text-danger,
#fluentform_5 .error.text-danger {
    margin-top: 6px;
    color: #ea5b0c;
    font-size: 13px;
}

/* Highlight invalid Form 3 controls with a stronger error border. */
#fluentform_3 .ff-el-is-error .ff-el-form-control {
    border-color: #ff7043;
}

/* Style the Form 3 success message for use on a dark background. */
#fluentform_3 .ff-message-success {
    padding: 18px 20px;
    border: 1px solid var(--ect-orange);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
}


/* ==========================================================================
   7. FOOTER
   ========================================================================== */

/* Lay out the footer legal menu as a wrapping horizontal row. */
.footer-legal-menu .elementor-nav-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 0;
}

/* Keep each footer legal-menu item compact. */
.footer-legal-menu .elementor-nav-menu > li {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    width: auto;
}

/* Remove Elementor spacing and style footer legal-menu links. */
.footer-legal-menu .elementor-nav-menu > li > a {
    flex-grow: 0 !important;
    width: auto !important;
    padding: 0 !important;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
}

/* Replace Elementor's footer legal-menu divider with a middot. */
.footer-legal-menu .elementor-nav-menu > li:not(:last-child)::after {
    content: "·" !important;
    display: inline-block !important;
    align-self: auto !important;
    height: auto !important;
    margin: 0 9px;
    border: 0 !important;
    border-left: 0 !important;
    color: #fff;
    font-size: 14px;
    line-height: 1;
}

/* Keep footer legal-menu links white on hover. */
.footer-legal-menu .elementor-nav-menu > li > a:hover {
    color: #fff;
}


/* ==========================================================================
   8. RESPONSIVE MENU
   ========================================================================== */

/* Separate responsive-menu "View All" items from standard submenu links. */
#responsive-menu-pro-container li.view-all {
    position: relative;
    margin-top: 8px;
    padding-top: 7px;
}

/* Add a short divider above responsive-menu "View All" items. */
#responsive-menu-pro-container li.view-all::before {
    content: "";
    position: absolute;
    top: 0;
    right: 10%;
    left: 10%;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
}

/* Keep responsive-menu "View All" links white. */
#responsive-menu-pro-container li.view-all > a.responsive-menu-pro-item-link {
    color: #fff !important;
}

/* Keep responsive-menu "View All" links white on hover or focus. */
#responsive-menu-pro-container li.view-all > a.responsive-menu-pro-item-link:hover,
#responsive-menu-pro-container li.view-all > a.responsive-menu-pro-item-link:focus {
    color: #fff !important;
}


/* ==========================================================================
   9. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Adjust the responsive menu CTA at tablet and mobile widths. */
@media (max-width: 1300px) {

    /* Add spacing around the responsive-menu Request a Quote item. */
    #responsive-menu-pro-container li.btn {
        margin-top: 30px;
        padding: 0 5%;
    }

    /* Style the responsive-menu Request a Quote link as a button. */
    #responsive-menu-pro-container li.btn > a.responsive-menu-pro-item-link {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100% !important;
        max-width: 250px;
        height: auto !important;
        padding: 13px 20px !important;
        border: 0 !important;
        border-radius: 5px;
        background: #f25c05 !important;
        color: #fff !important;
        font-size: 18px !important;
        font-weight: 500;
        line-height: 1.3 !important;
        text-align: center;
        transition: background-color 0.25s ease, transform 0.25s ease;
    }

    /* Darken and gently lift the responsive-menu CTA on hover or focus. */
    #responsive-menu-pro-container li.btn > a.responsive-menu-pro-item-link:hover,
    #responsive-menu-pro-container li.btn > a.responsive-menu-pro-item-link:focus {
        transform: translateY(-2px);
        background: #d94f00 !important;
        color: #fff !important;
    }

    /* Keep the responsive-menu CTA chevron neatly aligned. */
    #responsive-menu-pro-container li.btn > a i {
        margin: 0;
        font-size: 15px;
        transition: transform 0.25s ease;
    }

    /* Move the responsive-menu CTA chevron slightly right on hover. */
    #responsive-menu-pro-container li.btn > a:hover i {
        transform: translateX(3px);
    }
}

/* Stack selected layouts and tighten footer styling at mobile widths. */
@media (max-width: 767px) {

    /* Reduce footer legal-menu link sizing on mobile. */
    .footer-legal-menu .elementor-nav-menu > li > a {
        font-size: 13px;
    }

    /* Remove extra horizontal spacing around footer legal-menu separators on mobile. */
    .footer-legal-menu .elementor-nav-menu > li:not(:last-child)::after {
        margin: 0;
    }

    /* Make service-hub buttons span the full available width on mobile. */
    .service-hub-button .ect-service-hub-link {
        width: 100%;
    }

    /* Collapse the Form 3 enquiry grid to a single column on mobile. */
    #fluentform_3 fieldset {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Reset full-width Form 3 grid items for the single-column mobile layout. */
    #fluentform_3 .ff-el-group:has(textarea),
    #fluentform_3 .ff_submit_btn_wrapper {
        grid-column: auto;
    }

    /* Ensure the Form 3 submit button fills its mobile column. */
    #fluentform_3 .ff-btn-submit {
        width: 100%;
    }
}

/* Fine-tune the menu button and H1 treatment on small phones. */
@media screen and (max-width: 500px) {

    /* Move the responsive-menu button slightly closer to the top edge. */
    button#responsive-menu-pro-button {
        top: 8px !important;
    }

    /* Keep highlighted H1 text inline on narrow screens. */
    h1 span {
        display: inline;
    }
}/* End custom CSS */