/* Steel Electrical - global overrides loaded site-wide after the theme. */

/* Screen-reader-only helper (used for accessible form/labels). */

/* Native cursor restored (magic cursor removed). */
body { cursor: auto; }

/* ==========================================================================
   WhatsApp floating button - site-wide, bottom-left (clear of the scroll-top
   button on the right). Inline SVG logo so it renders without the FA subset.
   Lives outside the smooth-scroll transform wrapper so position:fixed holds.
   ========================================================================== */
.se-wa-fab {
    position: fixed;
    left: 26px;
    bottom: 28px;
    z-index: 9990;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.se-wa-ic {
    position: relative;
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 30px -8px rgba(37, 211, 102, .6), 0 6px 16px rgba(0, 0, 0, .18);
    transition: transform .25s ease, box-shadow .25s ease;
}
.se-wa-ic svg { width: 26px; height: 26px; display: block; }
.se-wa-fab:hover .se-wa-ic { transform: scale(1.07); box-shadow: 0 18px 36px -8px rgba(37, 211, 102, .75), 0 8px 18px rgba(0, 0, 0, .2); }
/* Attention pulse rings */
.se-wa-ic::before,
.se-wa-ic::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25D366;
    z-index: -1;
    opacity: .55;
    animation: seWaPulse 2.4s ease-out infinite;
}
.se-wa-ic::after { animation-delay: 1.2s; }
@keyframes seWaPulse {
    0%   { transform: scale(1);   opacity: .55; }
    70%  { opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
}
/* Hover label removed — green icon FAB remains. */
.se-wa-label { display: none; }

/* Keep WhatsApp + back-to-top same size + shared bottom baseline (all screens) */
.scroll-top {
    right: 26px;
    bottom: 28px !important;
    width: 50px;
    height: 50px;
}
.scroll-top:after {
    width: 50px;
    height: 50px;
    line-height: 50px;
}
@media (max-width: 991px) {
    .se-wa-fab {
        left: 18px;
        bottom: 20px !important;
    }
    .se-wa-ic { width: 46px; height: 46px; }
    .se-wa-ic svg { width: 24px; height: 24px; }
    .scroll-top {
        right: 18px;
        bottom: 20px !important;
        width: 46px;
        height: 46px;
    }
    .scroll-top:after {
        width: 46px;
        height: 46px;
        line-height: 46px;
    }
}

/* Footer social icons — clear the fixed WhatsApp FAB (desktop left-aligned) */
.footer-wrapper.se-footer .copyright-wrap .at-social {
    padding-left: 80px;
}
/* Tablet + mobile — center social icons (parent is text-center below lg) */
@media (max-width: 991px) {
    .footer-wrapper.se-footer .copyright-wrap .at-social {
        padding-left: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Footer credit — Flitzen (centred in copyright bar) */
.footer-wrapper.se-footer .se-credit {
    margin: 0;
    color: #777777;
    font-size: 15.5px;
    line-height: 1.5;
}
.footer-wrapper.se-footer .se-credit-heart {
    color: #F4CC73;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 3px;
    vertical-align: -2px;
}
.footer-wrapper.se-footer .se-credit-heart svg {
    width: 15px;
    height: 15px;
    display: block;
}
.footer-wrapper.se-footer .se-credit a {
    color: #777777;
    text-decoration: underline;
    text-decoration-color: #F4CC73;
    text-underline-offset: 3px;
    transition: color .25s ease;
}
.footer-wrapper.se-footer .se-credit a:hover,
.footer-wrapper.se-footer .se-credit a:focus-visible {
    color: #F4CC73;
}

/* Footer legal link (Privacy Policy) */
.footer-wrapper.se-footer .se-footer-legal {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.5;
}
.footer-wrapper.se-footer .se-footer-legal a {
    color: #777777;
    transition: color .25s ease;
}
.footer-wrapper.se-footer .se-footer-legal a:hover,
.footer-wrapper.se-footer .se-footer-legal a:focus-visible {
    color: #F4CC73;
}

/* ==========================================================================
   Page banner: consistent gap between heading (h1) and intro text.
   theme.css uses negative margins that collapse them; we reset that here.
   ========================================================================== */
.page-banner .page-banner-title {
    margin-bottom: 0;
}
.page-banner .page-banner-text {
    margin-top: 22px;
    font-weight: 500;
}
.page-banner .page-banner-text strong {
    font-weight: 600;
}

/* ==========================================================================
   Services MEGA MENU (desktop). Reveal is enhanced by main.js (hover-intent +
   keyboard disclosure) with a CSS :hover / :focus-within fallback.
   The shelf breaks out to the full browser width (see .se-mega below) and is no
   longer tied to the header container width, so widening the header bar does not
   constrain it. Hidden under 992px where the off-canvas accordion takes over.
   ========================================================================== */
.main-menu .se-has-mega { position: static !important; }
/* Trigger row: the label stays a real link to /services; the caret is now a
   real <button> (the disclosure control) so it is keyboard- and screen-reader-
   operable. main.js wires aria-expanded + full keyboard handling onto it. */
.main-menu .se-has-mega > .se-mega-link { display: inline-flex; align-items: center; }
.main-menu .se-has-mega > .se-mega-toggle {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    margin: 0;
    padding: 6px 4px 6px 3px;      /* generous, invisible hit area for touch */
    color: inherit;
    font: inherit;
    line-height: 0;
    cursor: pointer;
    vertical-align: middle;
}
.main-menu .se-has-mega .se-mega-caret { display: inline-block; font-size: 11px; opacity: .85; transition: transform .25s ease; }
.main-menu .se-has-mega:not(.se-enhanced):hover .se-mega-caret,
.main-menu .se-has-mega:not(.se-enhanced):focus-within .se-mega-caret,
.main-menu .se-has-mega.is-open .se-mega-caret { transform: rotate(180deg); }
.main-menu .se-has-mega > .se-mega-toggle:focus-visible {
    outline: 2px solid var(--theme-color, #F4CC73);
    outline-offset: 2px;
    border-radius: 4px;
}

.se-mega {
    position: absolute;
    top: 100%;
    /* True full-browser-width breakout. The positioned ancestor (.menu-area) is
       centred in the viewport, so left:50% lands on the viewport centre; pulling
       back 50vw and spanning 100vw makes the shelf edge-to-edge no matter how
       wide the header container is. body has overflow-x:hidden, so the 100vw
       never introduces a horizontal scrollbar. */
    left: 50%;
    right: auto;
    width: 100vw;
    margin-left: -50vw;
    /* Reset the nav's white-space:nowrap (inherited from .main-menu, set by the
       header single-row fix) so card titles/descriptions wrap normally instead
       of forcing each column to the full text width and overflowing the row. */
    white-space: normal;
    background: #fff;
    border-top: 1px solid rgba(19, 26, 34, .10);
    border-bottom: 1px solid rgba(19, 26, 34, .10);
    /* A restrained, single-direction lift: keeps the flat editorial top edge
       but clearly separates the shelf from the page content scrolling beneath. */
    box-shadow: 0 30px 50px -34px rgba(19, 26, 34, .38);
    padding: clamp(22px, 2vw, 40px) clamp(16px, 4vw, 54px) clamp(24px, 2vw, 40px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
    z-index: 60;
}
/* The slide-in lives in a keyframe, NOT a persistent transform: once the
   animation ends the panel carries no transform, so it is never promoted to a
   composited layer at rest and the text stays pixel-sharp (the original blur
   fix, preserved). The brief sub-pixel state exists only during the entrance. */
@keyframes seMegaIn {
    from { opacity: 0; transform: translateY(-9px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* No-JS fallback reveal on hover/focus. When main.js adds .se-enhanced it takes
   over the open state (.is-open) and drives hover-intent timing itself. */
.se-has-mega:not(.se-enhanced):hover > .se-mega,
.se-has-mega:not(.se-enhanced):focus-within > .se-mega,
.se-has-mega.is-open > .se-mega {
    opacity: 1;
    visibility: visible;
    animation: seMegaIn .26s cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   Editorial layout: an art-directed dark feature rail beside a two-column
   service index. The rail (DOM-last, visually-first via order) ties into the
   dark top bar; the index is a hairline-ruled directory, not a grid of boxes.
   -------------------------------------------------------------------------- */
.se-mega-inner {
    display: flex;
    align-items: stretch;
    gap: clamp(24px, 2.4vw, 48px);
    max-width: 1560px;
    margin: 0 auto;
}

/* ---- Feature rail ---- */
.se-mega-feature {
    order: -1;                                  /* sits left, though it follows in DOM */
    flex: 0 0 clamp(280px, 24vw, 360px);
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 2vw, 38px);
    background: var(--title-color);
    color: #fff;
}
.se-mega-feature-eyebrow {
    font-family: var(--title-font);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--theme-color, #F4CC73);
}
.se-mega-feature-lead {
    margin: clamp(14px, 1.4vw, 20px) 0 0;
    font-family: var(--title-font);
    font-size: clamp(18px, 1.5vw, 23px);
    font-weight: 500;
    line-height: 1.32;
    letter-spacing: -.015em;
    color: #fff;
}
/* Phone CTA — pushed to the foot of the rail so the rail reads top-to-bottom
   as statement -> action. Scoped under .main-menu to beat the theme link rules. */
.main-menu a.se-mega-feature-call {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: clamp(20px, 2vw, 30px);
}
.se-mega-feature-call-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .6);
}
.se-mega-feature-call-label i { color: var(--theme-color, #F4CC73); font-size: 12px; }
.se-mega-feature-call-num {
    font-family: var(--title-font);
    font-size: clamp(21px, 1.7vw, 26px);
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
    transition: color .2s ease;
}
.main-menu a.se-mega-feature-call:hover .se-mega-feature-call-num,
.main-menu a.se-mega-feature-call:focus-visible .se-mega-feature-call-num { color: var(--theme-color, #F4CC73); text-shadow: none; }
.se-mega-feature-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: clamp(20px, 2vw, 30px);
    padding-top: clamp(18px, 1.6vw, 24px);
    border-top: 1px solid rgba(255, 255, 255, .14);
}
/* NICEIC on a small white plate so the mark stays legible on the dark rail. */
.se-mega-feature-badge { display: inline-flex; background: #fff; border-radius: 6px; padding: 7px 10px; }
.se-mega-feature-badge img { width: auto; height: 30px; max-height: 30px; display: block; }
.main-menu a.se-mega-feature-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-color, #F4CC73);
    white-space: nowrap;
    transition: gap .2s ease, color .2s ease;
}
.main-menu a.se-mega-feature-all:hover,
.main-menu a.se-mega-feature-all:focus-visible { gap: 11px; color: #fff; text-shadow: none; }
.se-mega-feature-all i { font-size: 11px; }

/* ---- Service index: two columns, five rows. The 1px grid gap shows the
   container's rule colour through, drawing every hairline for free — no
   per-cell border logic to get wrong for the fixed ten services. ---- */
.se-mega-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(19, 26, 34, .10);
    border: 1px solid rgba(19, 26, 34, .10);
}
/* Scoped under .main-menu so this wins over the theme's `.main-menu a {
   display:block }` (specificity 0,1,1) — otherwise the row never lays out. */
.main-menu .se-mega-card {
    position: relative;
    overflow: hidden;                          /* clips the sweep to the row */
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    row-gap: 3px;
    column-gap: clamp(13px, 1vw, 18px);
    padding: clamp(13px, 1vw, 18px) clamp(16px, 1.3vw, 24px);
    background: #fff;
}
/* Keep the content above the sweeping colour layer. */
.main-menu .se-mega-card > * { position: relative; z-index: 1; }
/* The theme adds a faux-bold text-shadow to every .main-menu a on hover. */
.main-menu .se-mega-card:hover { text-shadow: none; }
/* Vibrant hover: a gold panel sweeps across the row from the leading edge,
   the icon pops with a springy overshoot, and the copy inverts to dark ink
   on gold. One energetic gesture — the old quiet edge-marker is retired. */
.se-mega-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--theme-color, #F4CC73);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
.se-mega-card:hover::before,
.se-mega-card:focus-visible::before { transform: scaleX(1); }
.se-mega-card:focus-visible { outline: 2px solid var(--title-color); outline-offset: -3px; z-index: 1; }

/* Line icon spanning both text rows; snaps to full ink and pops on hover. */
.se-mega-ic {
    grid-row: span 2;
    color: var(--title-color);
    opacity: .55;
    line-height: 0;
    transition: opacity .25s ease, transform .38s cubic-bezier(.34, 1.56, .64, 1);
}
.se-mega-card:hover .se-mega-ic,
.se-mega-card:focus-visible .se-mega-ic { opacity: 1; transform: scale(1.15) translateY(-1px); }
.se-mega-ic svg { width: clamp(23px, 1.6vw, 27px); height: clamp(23px, 1.6vw, 27px); }
.se-mega-title { font-size: clamp(14.5px, 1vw, 16px); font-weight: 600; color: var(--title-color); line-height: 1.25; letter-spacing: -.01em; transition: color .25s ease; }
.se-mega-desc { font-size: clamp(12px, 0.82vw, 13px); color: var(--body-color); line-height: 1.4; transition: color .25s ease; }
/* Copy darkens so it stays crisp on the gold sweep (muted grey would wash out). */
.se-mega-card:hover .se-mega-desc,
.se-mega-card:focus-visible .se-mega-desc { color: rgba(19, 26, 34, .74); }

/* Respect reduced-motion: the gold fill still applies, just without the sweep. */
@media (prefers-reduced-motion: reduce) {
    .se-mega-card::before { transition: none; }
    .se-mega-card:hover .se-mega-ic,
    .se-mega-card:focus-visible .se-mega-ic { transform: none; }
}

/* Small laptops / large tablets (992-1199px, the only sub-1200 range where the
   mega still shows): narrow the rail and tighten the rows. */
@media (max-width: 1199px) {
    .se-mega-inner { gap: 24px; }
    .se-mega-feature { flex-basis: clamp(240px, 26vw, 300px); padding: 24px; }
    .se-mega-feature-lead { font-size: 18px; }
    .main-menu .se-mega-card { padding: 12px 16px; }
}
@media (max-width: 991px) { .se-mega, .se-mega-toggle, .se-mega-caret { display: none; } }

/* ==========================================================================
   Top-level nav links — vibrant hover, matching the mega's gold sweep.
   A gold underline wipes in from the left on hover/focus (and retracts to the
   right on leave), and stays lit under the active page. Anchored to the link's
   vertical centre (top:50%), so it tracks the text regardless of the header's
   vertical padding (robust to any sticky-shrink). Desktop nav only — the row is
   d-none d-lg-inline-block. Retires the theme's faux-bold text-shadow hover
   (and the page-CSS active-state copy of it) so "Services" never looks doubled
   while the mega-menu is open.
   ========================================================================== */
.header-layout4 .main-menu > ul > li > a,
.header-layout4 .main-menu > ul > li > a:hover,
.header-layout4 .main-menu > ul > li > a:focus,
.header-layout4 .main-menu > ul > li > a:focus-visible,
.header-layout4 .main-menu > ul > li.active > a,
.header-layout4 .main-menu > ul > li.is-open > a,
.header-layout4 .main-menu > ul > li:hover > a,
.header-layout4 .main-menu > ul > li:focus-within > a {
    text-shadow: none;
}
.header-layout4 .main-menu > ul > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: 13px;
    height: 2.5px;
    background: var(--theme-color, #F4CC73);
    transform: scaleX(0);
    transform-origin: right center;         /* retracts rightwards on leave */
    transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
.header-layout4 .main-menu > ul > li:hover > a::after,
.header-layout4 .main-menu > ul > li:focus-within > a::after,
.header-layout4 .main-menu > ul > li.is-open > a::after,
.header-layout4 .main-menu > ul > li.active > a::after {
    transform: scaleX(1);
    transform-origin: left center;          /* grows from the left on enter */
}
@media (prefers-reduced-motion: reduce) {
    .header-layout4 .main-menu > ul > li > a::after { transition: none; }
}

/* ==========================================================================
   Mobile off-canvas menu (<=991px only).
   The full-screen .at-menu-wrapper overlay sits above the header (z-index
   999999) and can intercept taps even when invisible. pointer-events:none when
   closed fixes the hamburger; at-body-visible open-state styles were missing
   from the theme bundle so the panel never appeared when toggled.
   ========================================================================== */
@media (max-width: 991px) {
    .at-menu-wrapper {
        pointer-events: none;
    }
    body.at-body-visible .at-menu-wrapper,
    .at-menu-wrapper.at-body-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    body.at-body-visible .at-menu-wrapper .at-menu-area,
    .at-menu-wrapper.at-body-visible .at-menu-area {
        left: 0;
        opacity: 1;
        visibility: visible;
    }
    body.at-body-visible {
        overflow: hidden;
    }
    .header-area .at-menu-toggle {
        position: relative;
        z-index: 1000001;
        pointer-events: auto;
    }

    /* Chevron only on dropdown parents (Services); plain links have no > icon */
    .at-mobile-menu > ul > li:not(.se-m-has-sub) > a::before {
        display: none;
    }
    .at-mobile-menu > ul > li:not(.se-m-has-sub) > a {
        padding-left: 0;
    }
    .at-mobile-menu .se-m-sub li a::before {
        display: none;
    }
    .at-mobile-menu .se-m-has-sub > details > summary {
        padding-left: 18px;
    }
    .at-mobile-menu .se-m-has-sub > details > summary::before {
        content: "\f105";
        font-family: var(--icon-font);
        position: absolute;
        left: 0;
        top: 12px;
        display: inline-block;
    }
    .at-mobile-menu .se-m-has-sub > details[open] > summary::before {
        transform: rotate(90deg);
    }
    .at-mobile-menu .se-m-caret {
        display: none;
    }
}

/* Services accordion inside the off-canvas mobile menu (native <details>, no JS) */
.at-mobile-menu .se-m-has-sub > details > summary {
    list-style: none;
    cursor: pointer;
    display: block;
    position: relative;
    padding: 12px 18px;
    font-size: 16px;
    text-transform: capitalize;
    color: var(--title-color);
}
.at-mobile-menu .se-m-has-sub > details > summary::-webkit-details-marker { display: none; }
.at-mobile-menu .se-m-caret { margin-left: 8px; font-size: 13px; transition: transform .25s ease; }
.at-mobile-menu .se-m-has-sub > details[open] > summary .se-m-caret { transform: rotate(180deg); }
.at-mobile-menu .se-m-sub { list-style: none; margin: 2px 0 8px; padding: 0; }
.at-mobile-menu .se-m-sub li a { padding: 9px 18px 9px 34px !important; font-size: 14.5px !important; opacity: .85; }

/* ==========================================================================
   Top utility bar (above the header) - contact, hours, rating, social.
   Sits in normal flow above the relative header; scrolls away when the header
   becomes sticky. Dark bar with gold accents to match the brand.
   ========================================================================== */
.se-topbar {
    background: var(--title-color);
    color: #c8d0d6;
    font-size: 13.5px;
    line-height: 1.4;
    position: relative;
    z-index: 5;
}
.se-topbar a { color: inherit; }
.se-topbar .se-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px 30px;
    min-height: 46px;
    padding: 7px 0;
}
/* Desktop: taller utility bar (match reference site breathing room) */
@media (min-width: 992px) {
    .se-topbar .se-topbar-inner {
        min-height: 68px;
        padding: 16px 0;
    }
}
.se-topbar-left,
.se-topbar-right { display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; }
.se-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #c8d0d6;
    white-space: nowrap;
    font-weight: 500;
    transition: color .2s ease;
}
.se-topbar-item i { color: var(--theme-color); font-size: 13px; }
a.se-topbar-item:hover { color: #fff; }
.se-topbar-rating { font-weight: 600; }
.se-topbar-rating i { font-size: 12px; }
.se-topbar-social {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding-left: 28px;
    margin-left: 2px;
    border-left: 1px solid rgba(255, 255, 255, .14);
}
.se-topbar-social a { color: #c8d0d6; font-size: 13px; transition: color .2s ease, transform .2s ease; }
.se-topbar-social a:hover { color: var(--theme-color); transform: translateY(-1px); }

/* Tablet: drop the longest item (hours) */
@media (max-width: 991px) { .se-topbar-hide-sm { display: none; } }
/* Mobile: keep it tidy - rating + phone, centred; hide area + socials */
@media (max-width: 767px) {
    .se-topbar .se-topbar-inner { justify-content: center; gap: 10px 22px; }
    .se-topbar-left { display: none; }
    .se-topbar-social { display: none; }
    .se-topbar { font-size: 13px; }
}

/* Section eyebrow / sub-title - bold, uppercase, letter-spaced, with a gold
   accent bar. Replaces the old "(bracketed)" lowercase labels site-wide. */
.sub-title {
    display: flex;
    align-items: center;
    gap: 0;
    font-family: var(--title-font);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--title-color);
    line-height: 1.4;
    margin-bottom: 24px;
}
/* Electric accent: a lightning bolt flanks each section eyebrow on both sides,
   replacing the old flat accent bar site-wide. Drawn as a theme-tinted SVG mask
   + soft glow so it inherits brand colour and needs no markup changes. */
.sub-title::before,
.sub-title::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    flex: none;
    width: 19px;
    height: 27px;
    background-color: var(--theme-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M13%202%203%2014h9l-1%208%2010-12h-9l1-8z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M13%202%203%2014h9l-1%208%2010-12h-9l1-8z'/%3E%3C/svg%3E") no-repeat center / contain;
    filter: drop-shadow(0 0 4px rgba(244, 204, 115, 0.55));
}
.sub-title::before { margin-right: 13px; }
.sub-title::after { margin-left: 13px; }
.title-area.text-center .sub-title { justify-content: center; }
/* Keep the filled "pill" variant clean (no accent bar inside it). */
.sub-title.style2 { text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; }
.sub-title.style2::before,
.sub-title.style2::after { display: none; }

/* Quote-form honeypot + consent (the cta-area3 enquiry form, site-wide). */
#quoteForm .qf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
#quoteForm .qf-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--body-color); cursor: pointer; }
#quoteForm .qf-consent input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--title-color); }

/* NICEIC + Checkatrade accreditation badges - white backing so the logos read on
   the dark footer. Used in the footer brand column. */
.se-footer-accred { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 26px; }
.se-accred-badge { display: inline-flex; align-items: center; background: #fff; border-radius: 14px; padding: 16px 22px; box-shadow: 0 16px 38px -22px rgba(0,0,0,.5); }
.se-accred-badge img { width: auto; height: 88px; display: block; }
@media (max-width: 575px) { .se-accred-badge img { height: 70px; } }

/* Plain accreditation logos (no box/shadow) for light page sections.
   mix-blend-mode dissolves the white background baked into the Checkatrade JPEG. */
.se-accred-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; margin-top: 30px; }
.se-accred-logos img { width: auto; height: 118px; display: block; mix-blend-mode: multiply; }
@media (max-width: 575px) { .se-accred-logos img { height: 84px; } }

/* ==========================================================================
   Footer — mobile spacing (desktop layout unchanged)
   ========================================================================== */
@media (max-width: 991px) {
    .footer-wrapper.se-footer {
        overflow-x: hidden;
    }
    .footer-wrapper.se-footer .se-footer-grid {
        padding-bottom: 48px !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .footer-wrapper.se-footer .se-footer-brand,
    .footer-wrapper.se-footer .se-footer-col {
        min-width: 0;
        max-width: 100%;
    }
    .footer-layout5.se-footer .footer-middle {
        margin-top: 8px;
        margin-bottom: -12px;
        min-height: 54px;
        overflow: hidden;
    }
    .footer-layout5.se-footer .footer-middle .footer-bigtitle {
        font-size: 92px;
        padding-right: 56px;
        padding-left: 0;
        line-height: 1;
    }
    .footer-layout5.se-footer .footer-middle .footer-bigtitle span {
        width: 48px;
        height: 48px;
        font-size: 28px;
    }
    .footer-wrapper.se-footer .copyright-wrap {
        padding: 36px 0 24px;
    }
}
@media (max-width: 575px) {
    .footer-wrapper.se-footer .se-footer-grid {
        padding-bottom: 52px !important;
    }
    .footer-wrapper.se-footer .se-footer-cta {
        padding: 64px 0;
    }
    .footer-layout5.se-footer .footer-middle {
        margin-top: 16px;
        margin-bottom: -6px;
        min-height: 50px;
        overflow: visible;
    }
    .footer-layout5.se-footer .footer-middle .footer-bigtitle {
        font-size: 100px;
        padding-right: 52px;
        padding-left: 0;
        line-height: 1;
    }
    .footer-layout5.se-footer .footer-middle .footer-bigtitle span {
        width: 44px;
        height: 44px;
        font-size: 26px;
    }
    .footer-wrapper.se-footer .copyright-wrap {
        padding: 32px 0 18px;
    }
    .footer-wrapper.se-footer {
        padding-bottom: 0;
    }
}

/* Respect users who prefer reduced motion: disable animations and make sure
   any content that reveals on scroll is shown immediately. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .wow,
    .at_fade_anim,
    [class*="text-anime"],
    [class*="animate__"] {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }
}

/* ==========================================================================
   Sharp cards site-wide.
   The home page uses square cards/sections; some inner pages (case studies,
   service pages, gallery, etc.) shipped with rounded cards, icon tiles and
   images. Flatten all card/surface/media corners for one consistent look.
   Buttons, chips/pills/badges, circular UI and form inputs keep their radius
   (handled by NOT listing them here). !important so this beats the later
   per-page stylesheets and the inline radius on converted <img> tags.
   ========================================================================== */
.se-hero-card,
.se-detail-aside,
.se-about-aside,
.se-promise,
.se-steps,
.se-step,
.se-sign,
.se-svc-card,
.se-related-card,
.se-now,
.se-value,
.se-review,
.se-why-item,
.se-localsvc-card,
.se-lead-card,
.se-rates-table,
.li-temp-card,
.li-type,
.cs-card,
.cs-card-img,
.cs-meta,
.cs-quote,
.se-gal-item,
.project-card .box-img,
/* icon tiles (rounded squares behind section icons) */
.se-svc-ic,
.se-sign-ic,
.se-value-ic,
.se-why-ic,
.se-localsvc-ic,
/* media: lightbox figure + every converted image that carries an inline radius */
.se-lb-figure img,
img[style*="border-radius"] {
    border-radius: 0 !important;
}

/* FAQ accordion containers — straight edges site-wide */
.faq-card.style2,
.faq-card.style2 .accordion-button,
.faq-card.style2 .accordion-collapse,
.faq-card.style2 .accordion-body {
    border-radius: 0 !important;
}
.faq-card.style2 {
    overflow: hidden;
}

/* FAQ body links — black text, underline on hover only (site-wide) */
.faq-card-wrap2 .accordion-body a,
.faq-card.style2 .accordion-body a {
    color: var(--title-color);
    text-decoration: none;
    transition: none;
}
.faq-card-wrap2 .accordion-body a:hover,
.faq-card-wrap2 .accordion-body a:focus-visible,
.faq-card.style2 .accordion-body a:hover,
.faq-card.style2 .accordion-body a:focus-visible {
    color: var(--title-color);
    text-decoration: underline;
    text-decoration-color: var(--title-color);
    text-underline-offset: 2px;
}

/* Other services section — show 5 cards max; rest via "View all services" */
.se-related .se-related-card:nth-child(n+6) {
    display: none !important;
}

/* Service page sign/feature cards — match services grid card hover.
   Parent sections use Bootstrap .overflow-hidden { overflow:hidden !important },
   which clips the gold top bar when first-row cards translateY(-7px) on hover.
   Allow overflow only on those sections so the bar stays visible. */
section.overflow-hidden:has(.se-signs),
section.overflow-hidden:has(.se-svc-grid) {
    overflow: visible !important;
}
.se-signs,
.se-svc-grid {
    position: relative;
    z-index: 1;
}
.se-signs .se-sign {
    position: relative;
    overflow: hidden;
    background: #fff;
    transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.se-signs .se-sign:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 4px;
    width: 0;
    background: var(--theme-color);
    transition: width .45s ease;
}
.se-signs .se-sign:hover {
    z-index: 2;
    transform: translateY(-7px) !important;
    box-shadow: 0 34px 70px -34px rgba(19,26,34,.3) !important;
    border-color: transparent !important;
}
.se-signs .se-sign:hover:after {
    width: 100%;
}
.se-signs .se-sign-ic {
    transition: background .4s ease;
}
.se-signs .se-sign:hover .se-sign-ic {
    background: var(--theme-color) !important;
}

/* ==========================================================================
   Enquiry form - site-wide enhancement.
   Every contact form (the shared cta-area3 partial on 15 pages, the contact
   page form, and the Wimbledon hero lead form) shares .quote-form/.form-control.
   This block replaces the flat bordered boxes that each per-page stylesheet
   duplicated with one cohesive, premium treatment: filled fields, leading
   icons, a soft gold focus ring, straight-edged fields, and a
   confident submit button. !important so it wins over the 14 duplicated rules.
   ========================================================================== */
.quote-form { display: grid; gap: 18px !important; }
.quote-form .qf-row,
.quote-form .lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0; }
@media (max-width: 575px) {
    .quote-form .qf-row,
    .quote-form .lead-row { grid-template-columns: 1fr; }
}

/* Fields */
.quote-form .form-control {
    background-color: #fff !important;
    border: 1.5px solid rgba(19, 26, 34, 0.12) !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: 58px !important;
    padding: 17px 18px !important;
    font-size: 15.5px !important;
    font-weight: 500 !important;
    color: var(--title-color) !important;
    box-shadow: 0 1px 2px rgba(19, 26, 34, 0.03) !important;
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease !important;
}
.quote-form .form-control::placeholder { color: #9aa1a8 !important; font-weight: 400 !important; }
.quote-form .form-control:hover { border-color: rgba(19, 26, 34, 0.28) !important; }
.quote-form .form-control:focus {
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 3px rgba(244, 204, 115, 0.45) !important;
    background-color: #fff !important;
}

/* Leading icons (pure CSS, no markup change) - matched by field name */
.quote-form input[name="qname"],  .quote-form input[name="name"],
.quote-form input[name="qphone"], .quote-form input[name="phone"],
.quote-form input[name="qemail"],
.quote-form input[name="qpostcode"], .quote-form input[name="postcode"] {
    background-repeat: no-repeat !important;
    background-position: left 18px center !important;
    background-size: 18px 18px !important;
    padding-left: 50px !important;
}
.quote-form input[name="qname"], .quote-form input[name="name"] {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238B929C'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2021v-2a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v2'/%3E%3Ccircle%20cx='12'%20cy='7'%20r='4'/%3E%3C/svg%3E") !important;
}
.quote-form input[name="qphone"], .quote-form input[name="phone"] {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238B929C'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z'/%3E%3C/svg%3E") !important;
}
.quote-form input[name="qemail"] {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238B929C'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%204h16a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2z'/%3E%3Cpolyline%20points='22,6%2012,13%202,6'/%3E%3C/svg%3E") !important;
}
.quote-form input[name="qpostcode"], .quote-form input[name="postcode"] {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238B929C'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2010c0%207-9%2013-9%2013s-9-6-9-13a9%209%200%200%201%2018%200z'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='3'/%3E%3C/svg%3E") !important;
}

/* Textarea */
.quote-form textarea.form-control {
    min-height: 120px !important;
    padding-top: 16px !important;
    line-height: 1.6 !important;
    resize: vertical !important;
}

/* Select - keep the right chevron, match field sizing */
.quote-form select.form-control {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23131A22'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    background-size: 14px 14px !important;
    padding-right: 46px !important;
}

/* Consent row */
.quote-form .qf-consent { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.55; color: var(--body-color); }
.quote-form .qf-consent input {
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    flex: none;
    margin-top: 2px;
    accent-color: var(--theme-color);
}

/* Submit button - confident, with a soft gold lift on hover */
.quote-form .btn-wrap { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; align-items: center; }
.quote-form .btn-wrap .at-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.quote-form .btn-wrap a.at-btn.style-border5 {
    border: 1.5px solid var(--title-color) !important;
}
.quote-form .btn-wrap .se-btn-gold,
.quote-form .btn-wrap button[type="submit"],
.quote-form button.se-form-btn {
    border: none;
    cursor: pointer;
    /* Gold button, dark legible text. The theme's .at-btn.style2 sets BOTH
       background and color to --title-color (dark-on-dark), AND paints an
       absolutely-positioned ::after overlay (inset:0) over the button, which
       hides any background set on the element itself. Force gold + dark text
       and kill that overlay so the label is legible on every quote form. */
    background: var(--theme-color) !important;
    color: #131A22 !important;
    font-size: 16px;
    padding: 18px 36px;
    box-shadow: 0 14px 30px -14px rgba(244, 204, 115, 0.95);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.quote-form .btn-wrap button[type="submit"]::after,
.quote-form button.se-form-btn::after { display: none !important; }
/* Keep the label dark & legible on hover/focus too (theme flips it to white) */
.quote-form .btn-wrap button[type="submit"]:hover,
.quote-form .btn-wrap button[type="submit"]:focus,
.quote-form button.se-form-btn:hover,
.quote-form button.se-form-btn:focus {
    color: #131A22 !important;
    background: var(--theme-color) !important;
}
.quote-form .btn-wrap .se-btn-gold:hover,
.quote-form .btn-wrap button[type="submit"]:hover,
.quote-form button.se-form-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 40px -16px rgba(244, 204, 115, 1);
}

/* Success confirmation - a calm, branded note instead of bare text */
.quote-form .quote-sent {
    display: none !important;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 14px 18px;
    border-radius: 18px;
    background: #FFF8E8;
    border-left: 3px solid var(--theme-color);
    color: var(--title-color) !important;
    font-weight: 600;
}
.quote-form.is-sent .quote-sent { display: flex !important; }
.quote-form .quote-sent::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background: var(--theme-color) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23131A22'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='20%206%209%2017%204%2012'/%3E%3C/svg%3E") center / 12px no-repeat;
    border-radius: 50%;
}

/* ==========================================================================
   CTA section - photo fills the FULL height of the section.
   The enquiry CTA (cta-area3) pairs the form with a photo. The theme centred a
   fixed-aspect image, leaving dead space above/below it. Here the image column
   stretches to exactly match the form column's height and the photo covers it
   edge-to-edge, bleeding off the right edge of the screen on desktop. Applies
   to every CTA site-wide (#quote and the home #contact-sec) via .cta-area3.
   ========================================================================== */
.cta-area3 .cta-wrap3 .cta-text {
    font-size: 17px;
}
.cta-area3 .row { align-items: stretch !important; }
.cta-area3 .cta-thumb3-1 {
    display: flex;
    flex-direction: column;
    height: 100% !important;
    width: calc(100% + clamp(16px, 4vw, 84px)) !important;
    margin: 0 calc(-1 * clamp(16px, 4vw, 84px)) 0 0 !important;
    overflow: hidden;
}
.cta-area3 .cta-thumb3-1 .thumb {
    transform: none !important;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}
.cta-area3 .cta-thumb3-1 .thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 62% !important;
    display: block !important;
}
/* Side-by-side (≥992): form drives section height; photo fills the matching
   column. Laptop-1440 (1200–1599) is the visual reference — other bands mirror it. */

/* Stacked layout (mobile + tablet < 992) */
@media (max-width: 991px) {
    .cta-area3 .row { align-items: center !important; }
    .cta-area3 .cta-thumb3-1 {
        display: block;
        height: auto !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .cta-area3 .cta-thumb3-1 .thumb {
        aspect-ratio: 16 / 10;
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
    }
    .cta-area3 .cta-thumb3-1 .thumb,
    .cta-area3 .cta-thumb3-1 .thumb img {
        height: auto !important;
        min-height: 0;
        max-height: none;
        object-fit: cover !important;
        object-position: 18% 50% !important;
    }
    .cta-area3 .col-xxl-4.col-xl-5,
    .cta-area3 .col-xl-5 {
        width: 100%;
        max-width: 640px;
        margin-inline: auto;
        padding-left: 16px;
        padding-right: 16px;
    }
    .cta-area3 .cta-wrap3 {
        padding-top: 28px !important;
        padding-bottom: 36px !important;
        width: 100%;
        max-width: 100%;
    }
    .cta-area3 .cta-wrap3 .cta-title,
    .cta-area3 .cta-wrap3 .cta-text {
        padding-left: 30px;
        padding-right: 0;
        margin-left: 0;
    }
    .cta-area3 .cta-wrap3 [data-fillout-id] {
        margin-left: 0;
        width: 100% !important;
    }
}
@media (max-width: 575px) {
    .cta-area3 .cta-thumb3-1 .thumb { max-width: 100%; }
    .cta-area3 .col-xxl-4.col-xl-5,
    .cta-area3 .col-xl-5 {
        max-width: 100%;
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* Phone only: show the full CTA photo without cropping */
@media (max-width: 767px) {
    .cta-area3 .cta-thumb3-1 {
        overflow: visible !important;
    }
    .cta-area3 .cta-thumb3-1 .thumb {
        aspect-ratio: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    .cta-area3 .cta-thumb3-1 .thumb img {
        object-fit: contain !important;
        object-position: center center !important;
        height: auto !important;
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   Laptop-1024 (992–1199): side-by-side, same form↔photo balance as 1440.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
    body.se-fullwidth .cta-area3 > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .cta-area3 .row {
        align-items: stretch !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .cta-area3 .col-xl-6,
    .cta-area3 .col-xl-5,
    .cta-area3 .col-xxl-4.col-xl-5 {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .cta-area3 .col-xl-6 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative;
        min-height: 0;
        align-self: stretch;
    }
    .cta-area3 .col-xl-5,
    .cta-area3 .col-xxl-4.col-xl-5 {
        padding: 24px 20px;
        display: flex;
        align-items: center;
    }
    .cta-area3 .cta-thumb3-1 {
        position: absolute;
        inset: 0;
        display: block;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        overflow: hidden;
    }
    .cta-area3 .cta-thumb3-1 .thumb {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
        max-width: none;
        width: 100% !important;
        height: 100% !important;
        margin: 0;
        min-height: 0;
        transform: none !important;
    }
    .cta-area3 .cta-thumb3-1 .thumb img {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 18% 50% !important;
        display: block !important;
        max-height: none !important;
    }
    .cta-area3 .cta-wrap3 {
        padding-top: 40px;
        padding-bottom: 40px;
        width: 100%;
        max-width: 100%;
    }
    .cta-area3 .cta-wrap3 .cta-title,
    .cta-area3 .cta-wrap3 .cta-text {
        padding-left: 24px;
        padding-right: 12px;
        margin-left: 0;
    }
    .cta-area3 .cta-wrap3 [data-fillout-id] {
        margin-left: 0;
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   Laptop-1440 LOCKED (1366–1599): includes device-mode 1440 + nearby.
   Do not retune — user-confirmed perfect.
   -------------------------------------------------------------------------- */
@media (min-width: 1366px) and (max-width: 1599px) {
    body.se-fullwidth .cta-area3 > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .cta-area3 .row {
        align-items: stretch !important;
        justify-content: flex-start !important;
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .cta-area3 .col-xl-5,
    .cta-area3 .col-xxl-4.col-xl-5 {
        flex: 0 0 44%;
        max-width: 44%;
        padding-left: 40px;
        padding-right: 28px;
        display: flex;
        align-items: center;
    }
    .cta-area3 .col-xl-6 {
        flex: 0 0 56%;
        max-width: 56%;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative;
        min-height: 0;
        align-self: stretch;
    }
    .cta-area3 .cta-thumb3-1 {
        position: absolute;
        inset: 0;
        display: block;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        overflow: hidden;
    }
    .cta-area3 .cta-thumb3-1 .thumb {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        min-height: 0;
        transform: none !important;
    }
    .cta-area3 .cta-thumb3-1 .thumb img {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 18% 50% !important;
        display: block !important;
    }
    .cta-area3 .cta-wrap3 {
        padding-top: 56px;
        padding-bottom: 56px;
        max-width: 100%;
        width: 100%;
        overflow: visible;
    }
    .cta-area3 .cta-wrap3 .cta-title,
    .cta-area3 .cta-wrap3 .cta-text {
        padding-left: 32px;
        padding-right: 16px;
        margin-left: 0;
    }
    .cta-area3 .cta-wrap3 [data-fillout-id] {
        margin-left: 0;
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   Other common laptops (1200–1365): 1280 / 1360 etc.
   Same layout as 1440; heading indent tuned so title matches Fillout fields
   (Fillout inset shifts with form column width).
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1365px) {
    body.se-fullwidth .cta-area3 > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .cta-area3 .row {
        align-items: stretch !important;
        justify-content: flex-start !important;
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .cta-area3 .col-xl-5,
    .cta-area3 .col-xxl-4.col-xl-5 {
        flex: 0 0 44%;
        max-width: 44%;
        padding-left: 36px;
        padding-right: 24px;
        display: flex;
        align-items: center;
    }
    .cta-area3 .col-xl-6 {
        flex: 0 0 56%;
        max-width: 56%;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative;
        min-height: 0;
        align-self: stretch;
    }
    .cta-area3 .cta-thumb3-1 {
        position: absolute;
        inset: 0;
        display: block;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        overflow: hidden;
    }
    .cta-area3 .cta-thumb3-1 .thumb {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        min-height: 0;
        transform: none !important;
    }
    .cta-area3 .cta-thumb3-1 .thumb img {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 18% 50% !important;
        display: block !important;
    }
    .cta-area3 .cta-wrap3 {
        padding-top: 52px;
        padding-bottom: 52px;
        max-width: 100%;
        width: 100%;
        overflow: visible;
    }
    .cta-area3 .cta-wrap3 .cta-title,
    .cta-area3 .cta-wrap3 .cta-text {
        padding-left: 40px;
        padding-right: 12px;
        margin-left: 0;
    }
    .cta-area3 .cta-wrap3 [data-fillout-id] {
        margin-left: 0;
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   Mid desktop / MacBook-class (1600–1919): 1680, 1728, 1792, 1800…
   Teammate maximized windows often land here — heading↔Fillout was stepped.
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) and (max-width: 1919px) {
    body.se-fullwidth .cta-area3 > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .cta-area3 .row {
        align-items: stretch !important;
        justify-content: flex-start !important;
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .cta-area3 .col-xl-5,
    .cta-area3 .col-xxl-4.col-xl-5 {
        flex: 0 0 44%;
        max-width: 44%;
        padding-left: clamp(32px, 2.5vw, 52px);
        padding-right: clamp(20px, 2vw, 32px);
        display: block;
    }
    .cta-area3 .col-xl-6 {
        flex: 0 0 56%;
        max-width: 56%;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative;
        min-height: 0;
        align-self: stretch;
    }
    .cta-area3 .cta-thumb3-1 {
        position: absolute;
        inset: 0;
        display: block;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        overflow: hidden;
    }
    .cta-area3 .cta-thumb3-1 .thumb {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        min-height: 0;
        transform: none !important;
    }
    .cta-area3 .cta-thumb3-1 .thumb img {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: 18% 50% !important;
        display: block !important;
    }
    .cta-area3 .cta-wrap3 {
        padding-top: 56px;
        padding-bottom: 56px;
        max-width: 100%;
        width: 100%;
        overflow: visible;
    }
    .cta-area3 .cta-wrap3 .cta-title,
    .cta-area3 .cta-wrap3 .cta-text {
        padding-left: 48px;
        padding-right: 16px;
        margin-left: 0;
    }
    .cta-area3 .cta-wrap3 [data-fillout-id] {
        margin-left: 0;
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   Browser LOCKED (1920–2139): user-confirmed perfect — do not retune.
   -------------------------------------------------------------------------- */
@media (min-width: 1920px) and (max-width: 2139px) {
    body.se-fullwidth .cta-area3 > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .cta-area3 .row {
        align-items: stretch !important;
        justify-content: flex-start !important;
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .cta-area3 .col-xl-5,
    .cta-area3 .col-xxl-4.col-xl-5 {
        flex: 0 0 44%;
        max-width: 44%;
        padding-left: clamp(32px, 2.5vw, 56px);
        padding-right: clamp(20px, 2vw, 36px);
        display: block;
    }
    .cta-area3 .col-xl-6 {
        flex: 0 0 56%;
        max-width: 56%;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative;
        min-height: 0;
        align-self: stretch;
    }
    .cta-area3 .cta-thumb3-1 {
        position: absolute;
        inset: 0;
        display: block;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        overflow: hidden;
    }
    .cta-area3 .cta-thumb3-1 .thumb {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        min-height: 0;
        transform: none !important;
    }
    .cta-area3 .cta-thumb3-1 .thumb img {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: 18% 50% !important;
        display: block !important;
    }
    .cta-area3 .cta-wrap3 {
        padding-top: 56px;
        padding-bottom: 56px;
        max-width: 100%;
        width: 100%;
        overflow: visible;
    }
    .cta-area3 .cta-wrap3 .cta-title,
    .cta-area3 .cta-wrap3 .cta-text {
        padding-left: 32px;
        padding-right: 16px;
        margin-left: 0;
    }
    .cta-area3 .cta-wrap3 [data-fillout-id] {
        margin-left: 0;
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   Large desktop (2140–2559): match 2560-perfect alignment (same layout +
   title↔Fillout indent). Browser (≤2139) and 4K (2560) stay locked.
   -------------------------------------------------------------------------- */
@media (min-width: 2140px) and (max-width: 2559px) {
    body.se-fullwidth .cta-area3 > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .cta-area3 .row {
        align-items: stretch !important;
        justify-content: flex-start !important;
        --bs-gutter-x: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .cta-area3 .col-xl-5,
    .cta-area3 .col-xxl-4,
    .cta-area3 .col-xxl-4.col-xl-5 {
        flex: 0 0 44% !important;
        width: 44% !important;
        max-width: 44% !important;
        padding-left: clamp(32px, 2.5vw, 56px) !important;
        padding-right: clamp(20px, 2vw, 36px) !important;
        display: flex !important;
        align-items: center !important;
    }
    .cta-area3 .col-xl-6 {
        flex: 0 0 56% !important;
        width: 56% !important;
        max-width: 56% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative !important;
        min-height: 0 !important;
        align-self: stretch !important;
    }
    .cta-area3 .cta-thumb3-1 {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    .cta-area3 .cta-thumb3-1 .thumb {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        transform: none !important;
    }
    .cta-area3 .cta-thumb3-1 .thumb img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 18% 50% !important;
        display: block !important;
    }
    .cta-area3 .cta-wrap3 {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow: visible !important;
    }
    .cta-area3 .cta-wrap3 .cta-title,
    .cta-area3 .cta-wrap3 .cta-text {
        padding-left: clamp(72px, 2.8vw + 12px, 120px) !important;
        padding-right: 16px !important;
        margin-left: 0 !important;
    }
    .cta-area3 .cta-wrap3 [data-fillout-id] {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   4K LOCKED — exactly 2560px only. Do not retune.
   -------------------------------------------------------------------------- */
@media (min-width: 2560px) and (max-width: 2560px) {
    body.se-fullwidth .cta-area3 > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .cta-area3 .row {
        align-items: stretch !important;
        justify-content: flex-start !important;
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .cta-area3 .col-xl-5,
    .cta-area3 .col-xxl-4.col-xl-5 {
        flex: 0 0 44%;
        max-width: 44%;
        padding-left: clamp(32px, 2.5vw, 56px);
        padding-right: clamp(20px, 2vw, 36px);
        display: flex;
        align-items: center;
    }
    .cta-area3 .col-xl-6 {
        flex: 0 0 56%;
        max-width: 56%;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative;
        min-height: 0;
        align-self: stretch;
    }
    .cta-area3 .cta-thumb3-1 {
        position: absolute;
        inset: 0;
        display: block;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        overflow: hidden;
    }
    .cta-area3 .cta-thumb3-1 .thumb {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        min-height: 0;
        transform: none !important;
    }
    .cta-area3 .cta-thumb3-1 .thumb img {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 18% 50% !important;
        display: block !important;
    }
    .cta-area3 .cta-wrap3 {
        padding-top: 56px;
        padding-bottom: 56px;
        max-width: 100%;
        width: 100%;
        overflow: visible;
    }
    .cta-area3 .cta-wrap3 .cta-title,
    .cta-area3 .cta-wrap3 .cta-text {
        padding-left: 120px;
        padding-right: 16px;
        margin-left: 0;
    }
    .cta-area3 .cta-wrap3 [data-fillout-id] {
        margin-left: 0;
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   Post-4K ONLY (2561–2735): same flush form|photo layout as exact-2560,
   but title indent must track Fillout (120px overshoots at ~2731 → empty
   cream left of heading). Exact 2560 stays locked above.
   -------------------------------------------------------------------------- */
@media (min-width: 2561px) and (max-width: 2735px) {
    body.se-fullwidth .cta-area3 > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .cta-area3 .row {
        align-items: stretch !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        --bs-gutter-x: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        gap: 0 !important;
        column-gap: 0 !important;
    }
    .cta-area3 .col-xl-5,
    .cta-area3 .col-xxl-4,
    .cta-area3 .col-xxl-4.col-xl-5 {
        flex: 0 0 44% !important;
        width: 44% !important;
        max-width: 44% !important;
        padding-left: clamp(32px, 2.5vw, 56px) !important;
        padding-right: clamp(20px, 2vw, 36px) !important;
        display: flex !important;
        align-items: center !important;
    }
    .cta-area3 .col-xl-6 {
        flex: 0 0 56% !important;
        width: 56% !important;
        max-width: 56% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative !important;
        min-height: 0 !important;
        align-self: stretch !important;
    }
    .cta-area3 .cta-thumb3-1 {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        max-width: none !important;
    }
    .cta-area3 .cta-thumb3-1 .thumb {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        transform: none !important;
    }
    .cta-area3 .cta-thumb3-1 .thumb img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: 18% 50% !important;
        display: block !important;
    }
    .cta-area3 .cta-wrap3 {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow: visible !important;
        margin: 0 !important;
    }
    /* Align heading with Fillout field edge (not the overshot 120px) */
    .cta-area3 .cta-wrap3 .cta-title,
    .cta-area3 .cta-wrap3 .cta-text {
        padding-left: 32px !important;
        padding-right: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .cta-area3 .cta-wrap3 [data-fillout-id] {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   Ultra-wide past 2735: keep same clean form↔photo + field-aligned title.
   -------------------------------------------------------------------------- */
@media (min-width: 2736px) {
    body.se-fullwidth .cta-area3 > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .cta-area3 .row {
        align-items: stretch !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        --bs-gutter-x: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        gap: 0 !important;
        column-gap: 0 !important;
    }
    .cta-area3 .col-xl-5,
    .cta-area3 .col-xxl-4,
    .cta-area3 .col-xxl-4.col-xl-5 {
        flex: 0 0 44% !important;
        width: 44% !important;
        max-width: 44% !important;
        padding-left: clamp(32px, 2.5vw, 56px) !important;
        padding-right: clamp(20px, 2vw, 36px) !important;
        display: flex !important;
        align-items: center !important;
    }
    .cta-area3 .col-xl-6 {
        flex: 0 0 56% !important;
        width: 56% !important;
        max-width: 56% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative !important;
        min-height: 0 !important;
        align-self: stretch !important;
    }
    .cta-area3 .cta-thumb3-1 {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        max-width: none !important;
    }
    .cta-area3 .cta-thumb3-1 .thumb {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        transform: none !important;
    }
    .cta-area3 .cta-thumb3-1 .thumb img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: 18% 50% !important;
        display: block !important;
    }
    .cta-area3 .cta-wrap3 {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow: visible !important;
        margin: 0 !important;
    }
    .cta-area3 .cta-wrap3 .cta-title,
    .cta-area3 .cta-wrap3 .cta-text {
        padding-left: 32px !important;
        padding-right: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .cta-area3 .cta-wrap3 [data-fillout-id] {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ==========================================================================
   Header single-row guarantee (desktop, >=1200px).
   The logo + 8-item uppercase nav + "Request a quote" button wanted more than
   the available width, so on wide screens (e.g. a 16" MacBook) the CTA dropped
   to a second row. The real fix is the fluid spacing below (plus moving the
   email up into the top bar); the bar tightens smoothly instead of wrapping.

   NOTE on width: most pages set `body.se-fullwidth .container { max-width:100%
   !important }` in their page CSS, which intentionally overrides the container
   rule here. The max-width below is therefore a *fallback* for any page that
   does NOT load a full-width override, keeping the row from wrapping there too.
   Either way the fluid clamps guarantee a single row.
   ========================================================================== */
/* Full-bleed container for every se-fullwidth page — GLOBAL (2026-06-30).
   Was previously only in per-page CSS, so lean pages (areas-we-cover, gallery,
   our-rates) fell back to Bootstrap's centred .container and looked "boxed". */
body.se-fullwidth .container { max-width: 100% !important; padding-left: clamp(16px, 4vw, 84px); padding-right: clamp(16px, 4vw, 84px); }
@media (min-width: 1200px) {
    /* Fallback width for non-fullwidth pages (overridden where se-fullwidth is
       set). Scales with the viewport, never edge-to-edge. */
    .header-area.header-layout4 .container { max-width: min(1660px, 100% - 48px); }

    /* The columns (logo | nav | CTA) never wrap to a new line. */
    .header-layout4 .menu-area .row { flex-wrap: nowrap; }

    /* Fluid gaps between nav items: roomy on large screens, tightening toward
       the breakpoint. Overrides the theme's fixed 27.5px / 13px margins. */
    .header-layout4 .main-menu > ul > li { margin: 0 clamp(8px, 1vw, 26px); }

    /* Keep the nav on one line; the type eases down a touch when space is tight.
       (The mega panel resets this white-space - see .se-mega above.) */
    .header-layout4 .main-menu { white-space: nowrap; }
    .header-layout4 .main-menu > ul > li > a { font-size: clamp(13.5px, 0.92vw, 16px); }

    /* CTA shrinks its padding before anything is ever forced down a row. */
    .header-layout4 .at-btn { padding: 18px clamp(18px, 1.5vw, 30px); white-space: nowrap; }
}

/* === Mobile polish (2026-06-30) === */
@media (max-width:767px){
    a.se-topbar-item{ padding:8px 4px; }          /* topbar links: real tap height */
}

/* Service pages: tighten gap between trust bar and feature banner
   (theme .space-top is 150px — far too much after .se-trust). */
.space-top:has(.se-feature-img) {
    padding-top: 32px !important;
}

/* 4K / ultra-wide only: section intro subtext under headings */
@media (min-width: 2560px) {
    .title-area .area-intro-text,
    .title-area > .box-text,
    .se-area-intro {
        font-size: 22px !important;
        line-height: 1.7 !important;
    }
    .title-area .area-intro-text {
        max-width: 1100px;
    }
    .se-area-intro {
        max-width: 960px;
    }
}

/* Service feature banners — same frame on every service page (2392 × 480).
   Width stays fluid (responsive); height follows this shared ratio. About page
   taller crop is overridden below via .se-media-wrap. */
img.se-feature-img {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 2392 / 480;
    object-fit: cover !important;
    object-position: center center;
    border-radius: 26px;
    display: block;
}

/* About "who we are" uses a taller crop inside a half-column. */
.se-media-wrap .se-feature-img {
    aspect-ratio: 1200 / 540;
}

/* Mobile: keep the design ratio, but never shorter than a usable band. */
@media (max-width: 767px) {
    .se-feature-img {
        min-height: 200px;
    }
    .se-trust .se-trust-inner {
        gap: 10px 18px;
        padding: 16px 0;
    }
    .space-top:has(.se-feature-img) {
        padding-top: 24px !important;
        padding-bottom: 28px !important;
    }
}
@media (max-width: 480px) {
    .se-feature-img {
        min-height: 180px;
    }
}

/* Tablet: same ratio; floor height so the band doesn't feel tiny. */
@media (min-width: 768px) and (max-width: 1199px) {
    .se-feature-img {
        min-height: 260px;
    }
    .space-top:has(.se-feature-img) {
        padding-top: 28px !important;
    }
}
/* Off-canvas menu: dynamic vh so last items aren't hidden behind mobile browser chrome */
.at-mobile-menu{ max-height:calc(100dvh - 200px); overflow-y:auto; }
/* Off-canvas close: meet 44px tap target */
.at-menu-wrapper .at-menu-toggle{ width:44px; height:44px; line-height:44px; right:-22px; }


/* ==========================================================================
   Inner-page banner / hero / gold button — SHARED ACROSS ALL PAGES (2026-06-30)
   Globalized here so every .page-banner page renders identically, including
   ones whose own CSS never defined these rules (gallery, our-rates,
   case-studies, testimonials). Per-page CSS that still re-declares the same
   rules just overrides with identical values — no visual change.
   Banner padding is forced (!important) to trim the theme's 244px top
   clearance: the header is in normal flow, so there is no overlap to clear.
   Per-page background image: override --banner-bg (or set an inline
   background-image on the .page-banner element). Text stays in the HTML.
   ========================================================================== */
.se-btn-gold { display:inline-block; background:var(--theme-color); color:#131A22; font-weight:600; font-size:16px; padding:19px 38px; border-radius:60px; transition:all 0.3s ease; }
.se-btn-gold:hover { background:#fff; color:#131A22; }

/* Footer CTA: gold at rest; brush wipe to white on hover.
   Hover uses ani2 for correct gold→white; scale flips wipe to match
   reference direction (bottom-right → top-left). Mouse-out snaps back. */
.se-footer-actions .se-btn-gold {
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: var(--theme-color, #F4CC73);
    color: #131A22;
    transition: color 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.se-footer-actions .se-btn-gold:after {
    content: "";
    position: absolute;
    inset: 0;
    background: #FFFFFF;
    z-index: -1;
    transform: scale(-1, -1);
    transform-origin: center center;
    -webkit-mask-image: url(/assets/embedded/d99b391a7c43f0ae.png);
    -webkit-mask-size: 3000% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: url(/assets/embedded/d99b391a7c43f0ae.png);
    mask-size: 3000% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    animation: none;
}
.se-footer-actions .se-btn-gold:hover,
.se-footer-actions .se-btn-gold:focus,
.se-footer-actions .se-btn-gold:active {
    background: var(--theme-color, #F4CC73);
    color: #131A22;
}
.se-footer-actions .se-btn-gold:hover:after,
.se-footer-actions .se-btn-gold:focus:after,
.se-footer-actions .se-btn-gold:active:after {
    animation: ani2 0.7s steps(29) forwards;
}

.page-banner { background:var(--smoke-color); position:relative; border-bottom:1px solid var(--at-border-color); }
.page-banner:before { content:""; position:absolute; top:-80px; right:-40px; width:540px; height:540px; background:radial-gradient(circle at 60% 40%, rgba(244,204,115,.30), rgba(244,204,115,0) 62%); pointer-events:none; }
.page-banner .sub-title { display:block; margin-bottom:16px; }
.page-banner .se-hero-crumb, .page-banner .sub-title, .page-banner .page-banner-title, .page-banner .page-banner-text, .page-banner .se-hero-actions, .page-banner .se-hero-rating, .page-banner .se-hero-card { opacity:1 !important; }
.page-banner .page-banner-text { max-width:580px; font-size:17px; line-height:1.75; }

/* Banner vertical padding — single source of truth (beats theme + any per-page copy) */
.page-banner { padding-top:68px !important; padding-bottom:72px !important; }
@media (max-width:991px){ .page-banner { padding-top:44px !important; padding-bottom:52px !important; } }

.page-banner--has-bg { background-image:var(--banner-bg, url('/assets/images/others/about-banner.webp')); background-size:cover; background-position:center right; background-repeat:no-repeat; }
.page-banner.page-banner--has-bg::before { content:""; position:absolute; inset:0; width:100%; height:100%; pointer-events:none; background:linear-gradient(90deg, rgba(255,248,232,.78) 0%, rgba(255,248,232,.62) 52%, rgba(255,248,232,.22) 100%); }
.page-banner--has-bg > .container { position:relative; z-index:1; }

.se-hero-crumb { display:flex; align-items:center; gap:11px; font-family:"DM Sans",sans-serif; font-size:14px; font-weight:500; color:var(--body-color); margin-bottom:26px; }
.se-hero-crumb a { color:var(--body-color); }
.se-hero-crumb a:hover { color:var(--title-color); }
.se-hero-crumb i { font-size:11px; color:rgba(19,26,34,.42); }
.se-hero-crumb .current { color:var(--title-color); font-weight:600; }

.se-hero-actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:36px; }
.se-hero-actions .at-btn i { margin-right:9px; font-size:14px; }
.se-hero-rating { display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin-top:30px; font-family:"DM Sans",sans-serif; font-size:15px; font-weight:500; color:var(--title-color); }
.se-hero-stars { color:#D4A84A; letter-spacing:3px; font-size:15px; }

.se-hero-card { background:var(--title-color); padding:40px; box-shadow:0 40px 80px -40px rgba(19,26,34,.5); }
.se-hero-card h3 { color:#fff; font-size:24px; margin:0 0 7px; }
.se-hero-card > p { color:rgba(255,255,255,.55); font-size:16px; margin:0 0 20px; }
@media (max-width:991px){ .se-hero-card { padding:34px; } }
.se-hero-facts { list-style:none; margin:0; padding:0; }
.se-hero-facts li { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 0; border-top:1px solid rgba(255,255,255,.13); }
.se-hero-facts li:last-child { border-bottom:1px solid rgba(255,255,255,.13); }
.se-hero-facts span { color:rgba(255,255,255,.6); font-family:"DM Sans",sans-serif; font-size:16px; }
.se-hero-facts strong { color:#fff; font-family:"DM Sans",sans-serif; font-weight:600; font-size:18px; }
.se-hero-jump a { font-size:17px !important; }
.se-hero-card .se-about-list li { font-size:17px !important; }

/* Rich call button (icon + label + big number) — used in every hero (2026-06-30) */
.se-hero-actions--call { align-items:center; }
.se-call-btn { display:inline-flex; align-items:center; gap:14px; padding:14px 30px; text-align:left; }
.se-call-btn i { font-size:20px; }
.se-call-btn span { display:flex; flex-direction:column; line-height:1.2; min-height:40px; justify-content:center; }
.se-call-btn span small { font-size:12.5px; font-weight:500; opacity:.8; }
.se-call-btn span strong { font-size:21px; font-weight:700; letter-spacing:.01em; }

/* ==========================================================================
   Footer base layout — GLOBAL (2026-06-30). Was only in per-page CSS, so lean
   pages (areas-we-cover, gallery, our-rates) had an unstyled footer. The
   accreditation badges + mobile-spacing tweaks already live above; this adds
   the base grid/columns/title/phone/contact the footer needs on every page.
   ========================================================================== */
    .se-footer .se-footer-cta { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-end; justify-content: space-between; padding: 64px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    .se-footer-title { color: #fff; font-size: clamp(38px, 4.6vw, 72px); line-height: 1.05; font-weight: 800; margin: 0; letter-spacing: -0.02em; }
    .se-footer-title span { color: var(--theme-color); display: block; }
    .se-footer-actions { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; padding-bottom: 8px; }
    .se-footer-phone { display: inline-flex; align-items: center; gap: 14px; }
    .se-footer-phone-ic { width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); display: inline-flex; align-items: center; justify-content: center; color: var(--theme-color); font-size: 18px; flex: none; transition: all 0.3s ease; }
    .se-footer-phone:hover .se-footer-phone-ic { background: var(--theme-color); border-color: var(--theme-color); color: #131A22; }
    .se-footer-phone-meta { display: flex; flex-direction: column; text-align: left; }
    .se-footer-phone-meta small { color: #829592; font-size: 13px; }
    .se-footer-phone-meta strong { color: #fff; font-size: 21px; font-weight: 600; line-height: 1.25; }
    .se-footer-grid { display: grid; grid-template-columns: 1.5fr 0.9fr 1.2fr 1.4fr; gap: 48px; padding: 66px 0 96px; }
    /* Desktop: spacer track nudges Explore / Services / Get in touch slightly right (not flush) */
    .footer-wrapper.se-footer .se-footer-grid {
      grid-template-columns: 1fr minmax(96px, 0.55fr) 0.85fr 1.9fr 1.35fr;
    }
    .footer-wrapper.se-footer .se-footer-grid > .se-footer-brand {
      grid-column: 1;
    }
    .footer-wrapper.se-footer .se-footer-grid > .se-footer-col:nth-child(2) {
      grid-column: 3;
      margin-left: 0;
    }
    .footer-wrapper.se-footer .se-footer-grid > .se-footer-col:nth-child(3) {
      grid-column: 4;
    }
    .footer-wrapper.se-footer .se-footer-grid > .se-footer-col:nth-child(4) {
      grid-column: 5;
    }
    .se-footer-brand p { color: #c8d0d6; margin: 26px 0 22px; max-width: 340px; font-size: 15px; line-height: 1.75; }
    .se-footer-creds { display: flex; flex-wrap: wrap; gap: 8px; }
    .se-footer-creds span { border: 1px solid rgba(255, 255, 255, 0.16); color: #c8d0d6; font-size: 12.5px; padding: 6px 14px; border-radius: 40px; white-space: nowrap; }
    .se-footer-col h3 { color: rgba(255, 255, 255, 0.5); font-size: 13.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; margin: 8px 0 24px; }
    .se-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
    .se-footer-col ul a { color: #c8d0d6; font-size: 15.5px; transition: all 0.25s ease; }
    .se-footer-col ul li > a:hover { color: var(--theme-color); padding-left: 5px; }
    .se-footer-services {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: repeat(5, auto);
      grid-auto-flow: column;
      column-gap: 28px;
      row-gap: 13px;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .se-footer-services a { color: #c8d0d6; font-size: 15.5px; transition: all 0.25s ease; }
    .se-footer-services li > a:hover { color: var(--theme-color); padding-left: 5px; }
    .se-footer-contact li { color: #c8d0d6; font-size: 15.5px; display: flex; align-items: baseline; gap: 13px; }
    .se-footer-contact i { color: var(--theme-color); width: 18px; text-align: center; flex: none; }
    .se-footer-contact a { display: inline-flex; align-items: baseline; gap: 13px; }
    /* Laptop (~1200–1599): keep each service on one line, no wrap / no scroll */
    @media (min-width: 1200px) and (max-width: 1599px) {
      .footer-wrapper.se-footer .se-footer-grid {
        grid-template-columns: 0.9fr minmax(72px, 0.45fr) 0.8fr 2.3fr 1.2fr;
        gap: 36px;
      }
      .footer-wrapper.se-footer .se-footer-grid > .se-footer-col:nth-child(2) {
        margin-left: 0;
      }
      .se-footer-services {
        column-gap: 20px;
      }
      .se-footer-services a {
        font-size: 14.5px;
        white-space: nowrap;
      }
    }
    @media (max-width: 1199px) {
      .se-footer-grid,
      .footer-wrapper.se-footer .se-footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-wrapper.se-footer .se-footer-grid > .se-footer-brand,
      .footer-wrapper.se-footer .se-footer-grid > .se-footer-col:nth-child(2),
      .footer-wrapper.se-footer .se-footer-grid > .se-footer-col:nth-child(3),
      .footer-wrapper.se-footer .se-footer-grid > .se-footer-col:nth-child(4) {
        grid-column: auto;
      }
      .footer-wrapper.se-footer .se-footer-grid > .se-footer-col:nth-child(2) { margin-left: 0; }
    }
    /* Mobile footer — stack columns, no horizontal overflow */
    @media (max-width: 991px) {
      .se-footer-grid,
      .footer-wrapper.se-footer .se-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 36px;
        padding: 48px 0 52px;
      }
      .footer-wrapper.se-footer .se-footer-grid > .se-footer-col:nth-child(2) { margin-left: 0; }
      .se-footer-brand p { max-width: none; }
      .se-footer-services {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(5, auto);
        grid-auto-flow: column;
        column-gap: 16px;
        row-gap: 12px;
        width: 100%;
        max-width: 100%;
      }
      .se-footer-services a {
        font-size: 14.5px;
        word-break: break-word;
      }
      .se-footer-col ul a,
      .se-footer-contact li {
        font-size: 14.5px;
        word-break: break-word;
      }
      .se-footer-contact li {
        flex-wrap: wrap;
      }
    }
    @media (max-width: 575px) {
      .se-footer-grid,
      .footer-wrapper.se-footer .se-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 32px;
        padding-bottom: 48px;
      }
      .se-footer .se-footer-cta { padding: 64px 0; }
      .se-footer-creds { gap: 8px; }
      .se-footer-creds span {
        white-space: normal;
        font-size: 12px;
        padding: 6px 12px;
      }
    }