/* ============================================================
   01. BRAND VARIABLES
============================================================ */

:root {

    /* Primary Colours */

    --primary-color: #0647A5;
    --primary-dark: #10263F;
    --primary-light: #2464B5;

    /* Accent Colours */

    --accent-color: #08A9E8;
    --accent-dark-color: #078BC2;
    --accent-light-color: #E7F6FD;

    /* Backgrounds */

    --background-color: #FFFFFF;
    --surface-color: #FFFFFF;

    --light-background-color: #F5F8FB;
    --soft-background-color: #EDF3F9;

    --light-surface-color: #FFFFFF;

    /* Typography */

    --default-color: #354354;
    --heading-color: #10263F;
    --muted-color: #738296;

    /* Dark Backgrounds */

    --dark-color: #10263F;
    --dark-secondary-color: #173955;

    --dark-text-muted: rgba(255,255,255,0.75);

    /* General */

    --contrast-color: #FFFFFF;
    --border-color: #E1E8F0;

    --light-border-color: rgba(255,255,255,0.22);

    /* Navigation */

    --nav-color: #10263F;
    --nav-hover-color: #08A9E8;

    --nav-mobile-background-color: #FFFFFF;
    --nav-mobile-color: #10263F;
    --nav-mobile-hover-color: #08A9E8;

    --nav-dropdown-background-color: #FFFFFF;
    --nav-dropdown-color: #10263F;
    --nav-dropdown-hover-color: #08A9E8;

    --mobile-nav-overlay: rgba(16,38,63,0.96);

    /* Header */

    --header-background: #10263F;
    --header-scrolled-background: #10263F;
    --header-transparent-color: #FFFFFF;

    /* Buttons */

    --button-text-color: #FFFFFF;

    /* Topbar */

    --topbar-text-color: rgba(255,255,255,0.82);

    /* Footer */

    --footer-text-color: rgba(255,255,255,0.72);

    /* Transitions */

    --transition-normal: all 0.3s ease;

    /* Shadows */

    --shadow-medium: 0 18px 45px rgba(16,38,63,0.12);

}


/* ============================================================
   02. GENERAL STYLING
============================================================ */

body.site-theme {

    background-color: var(--background-color);

    color: var(--default-color);

}

body.site-theme h1,
body.site-theme h2,
body.site-theme h3,
body.site-theme h4,
body.site-theme h5,
body.site-theme h6 {

    color: var(--heading-color);

    letter-spacing: -0.4px;

}

body.site-theme .section-title h2 {

    letter-spacing: -0.8px;

}

body.site-theme .text-primary {

    color: var(--primary-color) !important;

}

body.site-theme .text-info {

    color: var(--accent-color) !important;

}


/* ============================================================
   GLOBAL — HEADING ALIGNMENT
   REMOVE ALL UNWANTED INDENTATION
============================================================ */

/* All headings */

body.site-theme h1,
body.site-theme h2,
body.site-theme h3,
body.site-theme h4,
body.site-theme h5,
body.site-theme h6 {

    margin-left: 0;
    padding-left: 0;
    text-indent: 0;

}


/* Shared section title containers */

/* ============================================================
   SECTION TITLE — CENTRED ALIGNMENT
============================================================ */

body.site-theme .section-title {
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
}

/* Headings inside section title containers */

body.site-theme .section-title h1,
body.site-theme .section-title h2,
body.site-theme .section-title h3,
body.site-theme .section-title h4 {

    padding-left: 0 !important;
    margin-left: 0 !important;
    text-indent: 0 !important;

}


/* Eyebrows */

body.site-theme .section-eyebrow {

    margin-left: 0;
    padding-left: 0;
    text-indent: 0;

}


/* ============================================================
   03. TOP BAR
============================================================ */

.site-topbar {

    background-color: var(--primary-dark);

}

.site-topbar .container-xl {

    min-height: 40px;

}

.site-topbar-item,
.site-topbar-link {

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 0.2px;

}

.site-topbar i {

    font-size: 13px;

}


/* ============================================================
   04. HEADER
============================================================ */

body.site-theme .site-header {

    background: var(--primary-dark);

    border-bottom: 1px solid rgba(255,255,255,0.12);

    box-shadow: none;

    transition:
        background 0.35s ease,
        box-shadow 0.35s ease;

}

.site-header .container-xl {

    min-height: 70px;

}

.site-header .logo {

    flex-shrink: 0;

}

.site-header .site-logo-img {

    display: block;

    max-height: 65px;

    width: auto;

    max-width: 100%;

    object-fit: contain;

}


/* ============================================================
   05. TRANSPARENT HOMEPAGE HEADER
============================================================ */

body.site-theme.home-page
.site-header.header-transparent:not(.scrolled) {

    background: rgba(16,38,63,0.35) !important;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    border-bottom: 1px solid rgba(255,255,255,0.16);

}


/* Scrolled Header */

body.site-theme .site-header.scrolled,
body.site-theme .site-header.header-scrolled {

    background: rgba(16,38,63,0.98) !important;

    box-shadow: 0 8px 30px rgba(0,0,0,0.15);

}


/* ============================================================
   06. DESKTOP NAVIGATION
============================================================ */

@media (min-width: 1200px) {

    .site-header .navmenu > ul {

        gap: 2px;

    }

    body.site-theme
    .site-header .navmenu > ul > li:not(.site-nav-cta) > a {

        position: relative;

        padding: 15px 11px;

        color: #FFFFFF !important;

        font-size: 11px;

        font-weight: 700;

        letter-spacing: 0.7px;

    }


    /* Hover and Active States */

    body.site-theme
    .site-header .navmenu > ul > li:not(.site-nav-cta) > a:hover,

    body.site-theme
    .site-header .navmenu > ul > li:not(.site-nav-cta) > a.active {

        color: var(--accent-color) !important;

    }


    /* Animated Underline */

    body.site-theme
    .site-header .navmenu > ul > li:not(.site-nav-cta) > a::after {

        content: "";

        position: absolute;

        left: 11px;

        right: 11px;

        bottom: 7px;

        height: 2px;

        background: var(--accent-color);

        transform: scaleX(0);

        transform-origin: left;

        transition: transform 0.3s ease;

    }


    body.site-theme
    .site-header .navmenu > ul > li:not(.site-nav-cta) > a:hover::after,

    body.site-theme
    .site-header .navmenu > ul > li:not(.site-nav-cta) > a.active::after {

        transform: scaleX(1);

    }


    /* Navigation CTA */

    .site-header .navmenu .site-nav-cta {

        margin-left: 12px;

    }

    body.site-theme
    .site-header .navmenu .site-nav-cta > a {

        padding: 14px 20px;

        background: var(--primary-color) !important;

        border: 1px solid rgba(255,255,255,0.2);

        border-radius: 4px;

        color: #FFFFFF !important;

    }

    body.site-theme
    .site-header .navmenu .site-nav-cta > a:hover {

        background: var(--accent-color) !important;

        border-color: var(--accent-color);

    }

}


/* ============================================================
   07. MOBILE NAVIGATION
============================================================ */

@media (max-width: 1199px) {

    body.site-theme
    .site-header .mobile-nav-toggle {

        color: #FFFFFF !important;

    }

    body.site-theme.mobile-nav-active
    .navmenu ul {

        background: #FFFFFF;

    }

    body.site-theme.mobile-nav-active
    .navmenu a {

        color: var(--primary-dark) !important;

    }

    body.site-theme.mobile-nav-active
    .navmenu a.active {

        color: var(--primary-color) !important;

    }

}


/* ============================================================
   08. BUTTONS
============================================================ */

.site-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border-radius: 4px;

    font-weight: 700;

    letter-spacing: 1px;

    transition: all 0.3s ease;

}

.site-btn:hover {

    box-shadow: 0 14px 30px rgba(6,71,165,0.18);

}

.site-btn-dark {

    background-color: var(--primary-dark);

    border-color: var(--primary-dark);

    color: var(--contrast-color);

}

.site-btn-dark:hover {

    background-color: var(--primary-color);

    border-color: var(--primary-color);

    color: var(--contrast-color);

}


/* ============================================================
   09. HOMEPAGE HERO
============================================================ */

.site-hero {

    position: relative;

    isolation: isolate;

    display: flex;

    align-items: center;

    min-height: 690px;

    padding: 110px 0;

    background-color: var(--primary-dark);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    overflow: hidden;

}


/* ============================================================
   HERO OVERLAY
============================================================ */

.site-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(8,24,44,0.94) 0%,
        rgba(8,24,44,0.78) 48%,
        rgba(8,24,44,0.25) 100%
    );

}


/* ============================================================
   HERO CONTENT LAYER
============================================================ */

.site-hero > .container,
.site-hero > .container-xl,
.site-hero > .container-fluid {

    position: relative;

    z-index: 2;

}

.site-hero-content {

    position: relative;

    max-width: 1050px;

}


/* ============================================================
   HERO EYEBROW
============================================================ */

.site-hero-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 25px;

    color: var(--accent-color);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;

}

.site-hero-eyebrow::before {

    content: "";

    display: block;

    flex-shrink: 0;

    width: 30px;

    height: 2px;

    background-color: var(--accent-color);

}


/* ============================================================
   HERO HEADING
============================================================ */

body.site-theme .site-hero h1 {

    max-width: 1000px;

    margin-bottom: 25px;

    color: var(--contrast-color);

    font-size: clamp(48px,5.3vw,86px);

    font-weight: 800;

    line-height: 1.02;

    letter-spacing: -1px;

    text-transform: uppercase;

}

body.site-theme .site-hero h1 span {

    color: var(--accent-color);

}


/* ============================================================
   HERO DESCRIPTION
============================================================ */

.site-hero p {

    max-width: 720px;

    margin-bottom: 28px;

    color: rgba(255,255,255,0.82);

    font-size: 16px;

    line-height: 1.9;

}


/* ============================================================
   HERO ACTIONS
============================================================ */

.site-hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;

}

.site-hero .text-white {

    color: var(--contrast-color) !important;

}


/* ============================================================
   HERO SERVICES SNAPSHOT
============================================================ */

.site-hero-services {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 12px 24px;

    margin: 0 0 35px;

    padding: 0;

}

.site-hero-services span {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: rgba(255,255,255,0.92);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.2px;

}

.site-hero-services i {

    color: var(--accent-color);

    font-size: 17px;

}


/* ============================================================
   HERO TAGLINE
============================================================ */

.site-hero-tagline {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 35px;

    padding-top: 22px;

    border-top: 1px solid rgba(255,255,255,0.2);

    color: #FFFFFF;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

}

.site-hero-tagline i {

    color: var(--accent-color);

    font-size: 20px;

}


/* ============================================================
   HOMEPAGE HEADER OVERLAY
============================================================ */

body.site-theme.home-page #main-content {

    padding-top: 0 !important;

    margin-top: 0 !important;

}

body.site-theme.home-page .site-hero {

    min-height: 760px;

    padding-top: 190px;

    padding-bottom: 120px;

    margin-top: 0 !important;

    background-position: center center;

}


/* ============================================================
   10. GOOGLE REVIEWS SECTION
============================================================ */

body.site-theme .site-reviews-strip {

    position: relative;

    padding: 95px 0 85px;

    background: #F5F8FC;

    border-bottom: 1px solid var(--border-color);

    overflow: hidden;

}


/* ============================================================
   LEGACY REVIEW ELEMENTS
============================================================ */

.site-reviews-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 25px;

}

.site-reviews-label {

    display: flex;

    align-items: center;

    gap: 15px;

}

.site-reviews-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 50px;

    height: 50px;

    background-color: var(--accent-light-color);

    border-radius: 50%;

    color: var(--primary-color);

    font-size: 23px;

}

.site-reviews-text strong {

    display: block;

    color: var(--heading-color);

    font-size: 14px;

    font-weight: 700;

}

.site-reviews-text span {

    display: block;

    color: var(--muted-color);

    font-size: 12px;

}


/* ============================================================
   REVIEWS HEADER
============================================================ */

.site-reviews-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;

    margin-bottom: 45px;

}

.site-reviews-heading {

    max-width: 680px;

}

body.site-theme .site-reviews-heading h2 {

    margin: 12px 0 18px;

    color: #10263F;

    font-family: var(--heading-font);

    font-size: clamp(36px,4vw,56px);

    font-weight: 800;

    line-height: 1.1;

}

.site-reviews-heading h2 span {

    color: #0647A5;

}

.site-reviews-heading p {

    margin: 0;

    color: #64748B;

    font-size: 15px;

    line-height: 1.8;

}


/* ============================================================
   GOOGLE BRAND LOGO
============================================================ */

.site-reviews-brand {

    display: flex;

    align-items: center;

    margin-bottom: 18px;

}

.site-reviews-brand-logo {

    display: block;

    width: auto;

    max-width: 160px;

    height: 42px;

    object-fit: contain;

    object-position: left center;

}


/* ============================================================
   GOOGLE RATING SUMMARY
============================================================ */

.site-reviews-summary {

    min-width: 240px;

    padding: 25px 35px;

    background: #FFFFFF;

    border: 1px solid #E5EBF2;

    border-radius: 12px;

    text-align: center;

    box-shadow: 0 10px 35px rgba(16,38,63,0.05);

}

.site-reviews-google {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: #334155;

    font-size: 13px;

    font-weight: 700;

}

.site-reviews-google i {

    color: #4285F4;

    font-size: 22px;

}

.site-reviews-rating {

    margin: 15px 0 10px;

    color: #10263F;

    font-family: var(--heading-font);

    font-size: 64px;

    font-weight: 800;

    line-height: 1;

}

.site-reviews-stars {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    margin-bottom: 12px;

    color: #F4B400;

    font-size: 17px;

}

.site-reviews-count {

    color: #64748B;

    font-size: 12px;

}


/* ============================================================
   REVIEWS CAROUSEL
============================================================ */

.site-reviews-carousel {

    width: 100%;

    overflow: hidden;

}

.site-reviews-track {

    display: flex;

    gap: 22px;

    padding: 5px 2px 20px;

    overflow-x: auto;

    scroll-behavior: smooth;

    scroll-snap-type: x mandatory;

    scrollbar-width: none;

}

.site-reviews-track::-webkit-scrollbar {

    display: none;

}


/* ============================================================
   REVIEW CARDS
============================================================ */

.site-review-card {

    display: flex;

    flex-direction: column;

    flex: 0 0 calc((100% - 44px) / 3);

    min-width: 0;

    padding: 30px;

    background: #FFFFFF;

    border: 1px solid #E5EBF2;

    border-radius: 12px;

    scroll-snap-align: start;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}

.site-review-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 18px 45px rgba(16,38,63,0.09);

}


/* ============================================================
   REVIEW AUTHOR
============================================================ */

.site-review-card-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 22px;

}

.site-review-author {

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;

}

.site-review-avatar {

    flex-shrink: 0;

    width: 46px;

    height: 46px;

    border-radius: 50%;

    object-fit: cover;

}

.site-review-avatar-placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 46px;

    height: 46px;

    background: #EDF4FF;

    border-radius: 50%;

    color: #0647A5;

    font-size: 21px;

}

.site-review-author-details {

    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;

}

.site-review-author-details strong {

    color: #10263F;

    font-size: 14px;

    font-weight: 800;

}

.site-review-author-details span {

    color: #94A3B8;

    font-size: 11px;

}

.site-review-source {

    color: #4285F4;

    font-size: 20px;

}


/* ============================================================
   REVIEW STARS
============================================================ */

.site-review-card-stars {

    display: flex;

    gap: 4px;

    margin-bottom: 18px;

    color: #F4B400;

    font-size: 15px;

}


/* ============================================================
   REVIEW CONTENT
============================================================ */

.site-review-card-content {

    flex-grow: 1;

}

.site-review-card-content p {

    margin: 0 0 25px;

    color: #475569;

    font-size: 13px;

    line-height: 1.9;

}


/* ============================================================
   REVIEW CARD FOOTER
============================================================ */

.site-review-card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 10px;

    padding-top: 18px;

    border-top: 1px solid #EDF1F5;

}

.site-review-card-footer span {

    color: #64748B;

    font-size: 11px;

    font-weight: 600;

}

.site-review-card-footer span i {

    margin-right: 5px;

    color: #16A34A;

}

.site-review-card-footer a {

    color: #0647A5;

    font-size: 11px;

    font-weight: 800;

    text-decoration: none;

}

.site-review-card-footer a:hover {

    color: #08A9E8;

}


/* ============================================================
   REVIEWS FOOTER
============================================================ */

.site-reviews-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 25px;

}

.site-reviews-controls {

    display: flex;

    gap: 10px;

}

.site-reviews-controls button {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    background: #FFFFFF;

    border: 1px solid #DCE5EF;

    border-radius: 50%;

    color: #10263F;

    transition: all 0.25s ease;

}

.site-reviews-controls button:hover {

    background: #0647A5;

    border-color: #0647A5;

    color: #FFFFFF;

}

.site-reviews-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #0647A5;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.5px;

    text-decoration: none;

    text-transform: uppercase;

    transition: color 0.3s ease;

}

.site-reviews-link:hover {

    color: #08A9E8;

}


/* ============================================================
   11. ABOUT SECTION
   PREMIUM EDITORIAL DESIGN
============================================================ */

body.site-theme .site-about {

    position: relative;

    padding: 110px 0;

    background: #F5F8FC;

    overflow: hidden;

}


/* ============================================================
   ABOUT — VISUAL CONTAINER
============================================================ */

body.site-theme .site-about-visual {

    position: relative;

    width: 100%;

    padding-bottom: 55px;

}


/* ============================================================
   ABOUT — MAIN IMAGE
============================================================ */

body.site-theme .site-about-image {

    position: relative;

    width: 100%;

    height: 570px;

    background: #E8EDF3;

    border-radius: 8px;

    overflow: hidden;

    box-shadow: none;

}


/* Remove Decorative Corner Frames */

body.site-theme .site-about-image::before,
body.site-theme .site-about-image::after {

    content: none !important;

    display: none !important;

}


/* Main Image */

body.site-theme .site-about-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition: transform 0.7s ease;

}


/* Image Hover */

body.site-theme
.site-about-visual:hover .site-about-image img {

    transform: scale(1.035);

}


/* ============================================================
   ABOUT — INTEGRATED NAVY PANEL
============================================================ */

body.site-theme .site-about-image-panel {

    position: absolute;

    left: 30px;

    right: 30px;

    bottom: 0;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 30px 34px;

    background: #10263F;

    border-left: 4px solid #08A9E8;

    border-radius: 6px;

    color: #FFFFFF;

    box-shadow: 0 15px 35px rgba(16,38,63,0.12);

}


/* ============================================================
   ABOUT — PANEL ICON
============================================================ */

body.site-theme .site-about-panel-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 50px;

    width: 50px;

    height: 50px;

    background: rgba(255,255,255,0.08);

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 6px;

    color: #08A9E8;

    font-size: 24px;

}

body.site-theme .site-about-panel-icon i {

    display: block;

    line-height: 1;

}


/* ============================================================
   ABOUT — PANEL CONTENT
============================================================ */

body.site-theme .site-about-panel-content {

    min-width: 0;

}

body.site-theme .site-about-panel-content > span {

    display: block;

    margin-bottom: 8px;

    color: #08A9E8;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}

body.site-theme .site-about-panel-content strong {

    display: block;

    margin-bottom: 8px;

    color: #FFFFFF;

    font-family: var(--heading-font);

    font-size: 26px;

    font-weight: 800;

    line-height: 1.1;

}

body.site-theme .site-about-panel-content p {

    margin: 0;

    color: rgba(255,255,255,0.72);

    font-size: 12px;

    line-height: 1.7;

}


/* ============================================================
   ABOUT — RIGHT CONTENT
============================================================ */

body.site-theme .site-about-content {

    padding-left: 30px;

}


/* Eyebrow */

body.site-theme .site-about-content .section-eyebrow {

    display: inline-block;

    margin-bottom: 18px;

    color: #0647A5;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

}


/* Heading */

body.site-theme .site-about-content h2 {

    margin-bottom: 25px;

    color: #10263F;

    font-family: var(--heading-font);

    font-size: clamp(44px,4.5vw,68px);

    font-weight: 800;

    line-height: 1.03;

    letter-spacing: -0.5px;

    text-transform: uppercase;

}

body.site-theme .site-about-content h2 span {

    color: #0647A5;

}


/* Introduction */

body.site-theme .site-about-intro {

    margin-bottom: 20px;

    color: #10263F;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.65;

}


/* Description */

body.site-theme
.site-about-content > p:not(.site-about-intro) {

    margin-bottom: 18px;

    color: #64748B;

    font-size: 14px;

    line-height: 1.9;

}


/* ============================================================
   ABOUT — SERVICE HIGHLIGHTS
============================================================ */

body.site-theme .site-about-features {

    display: grid;

    grid-template-columns: repeat(2,minmax(0,1fr));

    gap: 18px 24px;

    margin: 32px 0 38px;

    padding-top: 26px;

    border-top: 1px solid #DDE5EE;

}


/* Individual Feature */

body.site-theme .site-about-feature {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

}


/* Vertically Centred Checkmark */

body.site-theme .site-about-feature i {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 18px;

    width: 18px;

    height: 18px;

    margin: 0;

    color: #08A9E8;

    font-size: 17px;

    line-height: 1;

}


/* Feature Text */

body.site-theme .site-about-feature span {

    display: block;

    color: #334155;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.5;

}


/* ============================================================
   ABOUT — ACTIONS
============================================================ */

body.site-theme .site-about-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 25px;

}

body.site-theme .site-about-text-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #0647A5;

    font-size: 12px;

    font-weight: 800;

    text-decoration: none;

    transition: color 0.25s ease;

}

body.site-theme .site-about-text-link:hover {

    color: #08A9E8;

}


/* ============================================================
   12. SERVICES SECTION
============================================================ */

.site-services {

    background-color: var(--light-background-color);

}

.site-service-card {

    position: relative;

    display: flex;

    flex-direction: column;

    height: 100%;

    background-color: var(--surface-color);

    border: 1px solid var(--border-color);

    border-radius: 6px;

    overflow: hidden;

    transition: var(--transition-normal);

}

.site-service-card:hover {

    transform: translateY(-7px);

    box-shadow: var(--shadow-medium);

}


/* Service Image */

.site-service-image {

    position: relative;

    height: 240px;

    overflow: hidden;

}

.site-service-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}

.site-service-card:hover .site-service-image img {

    transform: scale(1.06);

}


/* Service Number */

.site-service-number {

    position: absolute;

    left: 25px;

    bottom: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 55px;

    height: 55px;

    background-color: var(--accent-color);

    color: var(--contrast-color);

    font-family: var(--heading-font);

    font-size: 27px;

    font-weight: 800;

}


/* Service Content */

.site-service-content {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 32px;

}

body.site-theme .site-service-content h3 {

    margin-bottom: 15px;

    color: var(--heading-color);

    font-size: 29px;

    font-weight: 800;

    text-transform: uppercase;

}

.site-service-content p {

    margin-bottom: 25px;

    color: var(--default-color);

    font-size: 13px;

    line-height: 1.9;

}


/* Service Link */

.site-service-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: auto;

    color: var(--primary-color);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

}

.site-service-link i {

    transition: transform 0.3s ease;

}

.site-service-link:hover {

    color: var(--accent-color);

}

.site-service-link:hover i {

    transform: translateX(5px);

}


/* ============================================================
   13. PROJECTS SECTION
============================================================ */

.site-projects {

    background-color: var(--surface-color);

}

.site-project-card {

    position: relative;

    height: 380px;

    overflow: hidden;

    border-radius: 5px;

}

.site-project-card img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;

}

.site-project-card:hover img {

    transform: scale(1.07);

}


/* Project Overlay */

.site-project-card::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background: linear-gradient(
        to top,
        rgba(8,24,44,0.95) 0%,
        rgba(8,24,44,0.05) 75%
    );

}


/* Project Content */

.site-project-content {

    position: absolute;

    left: 30px;

    right: 30px;

    bottom: 28px;

    z-index: 2;

}

.site-project-content span {

    display: block;

    margin-bottom: 10px;

    color: var(--accent-color);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

body.site-theme .site-project-content h3 {

    margin-bottom: 0;

    color: var(--contrast-color);

    font-size: 31px;

    font-weight: 800;

    text-transform: uppercase;

}


/* ============================================================
   14. SERVICE AREAS
============================================================ */

.site-areas {

    background-color: var(--light-background-color);

}

.site-areas-grid {

    display: grid;

    grid-template-columns: repeat(3,minmax(0,1fr));

    gap: 18px;

}

.site-area-item {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 22px 25px;

    background-color: var(--surface-color);

    border: 1px solid var(--border-color);

    border-radius: 5px;

    color: var(--heading-color);

    font-size: 13px;

    font-weight: 700;

    transition: var(--transition-normal);

}

.site-area-item i {

    color: var(--accent-color);

    font-size: 19px;

}

.site-area-item:hover {

    border-color: var(--accent-color);

    transform: translateY(-3px);

}


/* ============================================================
   15. CALL TO ACTION
============================================================ */

.site-cta {

    position: relative;

    isolation: isolate;

    padding: 90px 0;

    background-color: var(--primary-color);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    overflow: hidden;

}


/* CTA Overlay */

.site-cta::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background: linear-gradient(
        120deg,
        rgba(16,38,63,0.88),
        rgba(6,71,165,0.78)
    );

}


/* CTA Content Layer */

.site-cta > .container,
.site-cta > .container-xl,
.site-cta > .container-fluid {

    position: relative;

    z-index: 1;

}


/* CTA Heading */

body.site-theme .site-cta h2 {

    margin-bottom: 18px;

    color: var(--contrast-color);

    font-size: clamp(42px,4vw,65px);

    font-weight: 800;

    line-height: 1.05;

    text-transform: uppercase;

}


/* CTA Description */

.site-cta p {

    max-width: 620px;

    margin-bottom: 0;

    color: rgba(255,255,255,0.85);

    font-size: 15px;

    line-height: 1.9;

}

.site-cta .site-hero-eyebrow {

    color: var(--accent-color);

}

.site-cta .text-white {

    color: var(--contrast-color) !important;

}


/* ============================================================
   16. INNER PAGE HERO
============================================================ */

.site-page-hero {

    position: relative;

    isolation: isolate;

    padding: 110px 0;

    background-color: var(--primary-dark);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    overflow: hidden;

}


/* Inner Page Overlay */

.site-page-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(8,24,44,0.95),
        rgba(8,24,44,0.55)
    );

}


/* Inner Page Content */

.site-page-hero > .container,
.site-page-hero > .container-xl,
.site-page-hero > .container-fluid {

    position: relative;

    z-index: 1;

}


/* Inner Page Heading */

body.site-theme .site-page-hero h1 {

    margin-bottom: 20px;

    color: var(--contrast-color);

    font-size: clamp(52px,5vw,80px);

    font-weight: 800;

    line-height: 1.05;

    text-transform: uppercase;

}


/* Inner Page Description */

.site-page-hero p {

    max-width: 650px;

    margin-bottom: 0;

    color: rgba(255,255,255,0.85);

    font-size: 15px;

    line-height: 1.9;

}


/* ============================================================
   17. CONTACT SECTION
============================================================ */

.site-contact {

    background-color: var(--light-background-color);

}

.site-contact-card {

    height: 100%;

    padding: 40px;

    background-color: var(--surface-color);

    border: 1px solid var(--border-color);

    border-radius: 6px;

}

body.site-theme .site-contact-card h3 {

    margin-bottom: 25px;

    color: var(--heading-color);

    font-size: 32px;

    font-weight: 800;

    text-transform: uppercase;

}


/* Contact Item */

.site-contact-item {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    margin-bottom: 25px;

}


/* Contact Icon */

.site-contact-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 50px;

    width: 50px;

    height: 50px;

    background-color: var(--accent-light-color);

    border-radius: 5px;

    color: var(--primary-color);

    font-size: 20px;

}


/* Contact Text */

.site-contact-item strong {

    display: block;

    margin-bottom: 5px;

    color: var(--heading-color);

    font-size: 13px;

}

.site-contact-item p,
.site-contact-item a {

    margin-bottom: 0;

    color: var(--default-color);

    font-size: 13px;

}


/* ============================================================
   18. CONTACT FORM
============================================================ */

.site-contact-form {

    padding: 40px;

    background-color: var(--surface-color);

    border: 1px solid var(--border-color);

    border-radius: 6px;

}

.site-contact-form label {

    display: block;

    margin-bottom: 8px;

    color: var(--heading-color);

    font-size: 12px;

    font-weight: 700;

}

.site-contact-form .form-control,
.site-contact-form .form-select {

    min-height: 52px;

    padding: 13px 16px;

    background-color: var(--light-background-color);

    border: 1px solid var(--border-color);

    border-radius: 4px;

    color: var(--default-color);

    font-size: 13px;

    box-shadow: none;

}

.site-contact-form textarea.form-control {

    min-height: 150px;

    resize: vertical;

}

.site-contact-form .form-control:focus,
.site-contact-form .form-select:focus {

    background-color: var(--surface-color);

    border-color: var(--accent-color);

    box-shadow: none;

}


/* ============================================================
   19. FOOTER
============================================================ */

.site-footer {

    background-color: var(--primary-dark);

}

.site-footer-widget h4 {

    color: var(--contrast-color);

}

.site-footer-widget ul li a:hover {

    color: var(--accent-color);

}

.site-footer-contact i {

    color: var(--accent-color);

}


/* ============================================================
   20. SCROLL TO TOP
============================================================ */

.scroll-top {

    background-color: var(--primary-color);

}

.scroll-top:hover {

    background-color: var(--accent-color);

}


/* ============================================================
   21. LARGE TABLET RESPONSIVENESS
============================================================ */

@media (max-width: 1199px) {

    /* Header */

    .site-header .site-logo-img {

        max-height: 55px;

    }


    /* Hero */

    .site-hero {

        min-height: 600px;

        padding: 100px 0;

    }

    body.site-theme.home-page .site-hero {

        min-height: 680px;

        padding-top: 160px;

        padding-bottom: 100px;

    }


    /* About */

    body.site-theme .site-about-content {

        padding-left: 0;

    }

    body.site-theme .site-about-image {

        height: 510px;

    }


    /* Service Areas */

    .site-areas-grid {

        grid-template-columns: repeat(2,minmax(0,1fr));

    }

}


/* ============================================================
   22. TABLET RESPONSIVENESS
============================================================ */

@media (max-width: 991px) {

    /* Google Reviews */

    .site-reviews-header {

        gap: 30px;

    }

    .site-review-card {

        flex: 0 0 calc((100% - 22px) / 2);

    }


    /* About */

    body.site-theme .site-about-visual {

        max-width: 720px;

        margin: 0 auto;

    }

    body.site-theme .site-about-content {

        padding-left: 0;

    }

}


/* ============================================================
   23. MOBILE RESPONSIVENESS
============================================================ */

@media (max-width: 767px) {


    /* ========================================================
       HEADER
    ======================================================== */

    .site-header .container-xl {

        min-height: 55px;

    }

    .site-header .site-logo-img {

        max-height: 48px;

    }


    /* ========================================================
       HERO
    ======================================================== */

    .site-hero {

        min-height: 580px;

        padding: 90px 0;

    }

    .site-hero::before {

        background: linear-gradient(
            90deg,
            rgba(8,24,44,0.95),
            rgba(8,24,44,0.7)
        );

    }

    body.site-theme.home-page .site-hero {

        min-height: 650px;

        padding-top: 145px;

        padding-bottom: 90px;

    }

    body.site-theme .site-hero h1 {

        font-size: clamp(36px,8.5vw,54px);

        line-height: 1.08;

        letter-spacing: -0.5px;

        overflow-wrap: break-word;

    }

    .site-hero p {

        font-size: 14px;

    }

    .site-hero-actions {

        align-items: stretch;

        flex-direction: column;

    }

    .site-hero-actions .site-btn {

        width: 100%;

    }

    .site-hero-services {

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

    }

    .site-hero-services span {

        font-size: 12px;

    }

    .site-hero-tagline {

        font-size: 10px;

        line-height: 1.6;

    }


    /* ========================================================
       GOOGLE REVIEWS
    ======================================================== */

    body.site-theme .site-reviews-strip {

        padding: 65px 0;

    }

    .site-reviews-inner {

        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

    }

    .site-reviews-header {

        align-items: stretch;

        flex-direction: column;

        gap: 30px;

    }

    .site-reviews-summary {

        width: 100%;

    }

    .site-review-card {

        flex: 0 0 100%;

        padding: 25px;

    }

    .site-reviews-footer {

        align-items: stretch;

        flex-direction: column;

        gap: 25px;

    }

    .site-reviews-link {

        justify-content: center;

    }


    /* ========================================================
       ABOUT SECTION
    ======================================================== */

    body.site-theme .site-about {

        padding: 70px 0;

    }


    /* Visual Container */

    body.site-theme .site-about-visual {

        padding-bottom: 0;

    }


    /* Main Image */

    body.site-theme .site-about-image {

        height: 390px;

        min-height: 0;

        border-radius: 6px 6px 0 0;

    }

    body.site-theme .site-about-image img {

        min-height: 0;

    }


    /* Navy Panel */

    body.site-theme .site-about-image-panel {

        position: relative;

        left: auto;

        right: auto;

        bottom: auto;

        width: 100%;

        padding: 25px;

        border-radius: 0 0 8px 8px;

        box-shadow: none;

    }


    /* Panel Icon */

    body.site-theme .site-about-panel-icon {

        flex-basis: 44px;

        width: 44px;

        height: 44px;

        font-size: 20px;

    }


    /* Panel Heading */

    body.site-theme .site-about-panel-content strong {

        font-size: 23px;

    }


    /* Right Content */

    body.site-theme .site-about-content {

        padding: 35px 0 0;

    }

    body.site-theme .site-about-content h2 {

        font-size: clamp(42px,9vw,56px);

    }


    /* Feature Grid */

    body.site-theme .site-about-features {

        grid-template-columns: 1fr;

        gap: 15px;

    }


    /* Actions */

    body.site-theme .site-about-actions {

        align-items: flex-start;

        flex-direction: column;

        gap: 20px;

    }


    /* ========================================================
       SERVICES
    ======================================================== */

    .site-service-image {

        height: 220px;

    }

    .site-service-content {

        padding: 27px;

    }


    /* ========================================================
       PROJECTS
    ======================================================== */

    .site-project-card {

        height: 340px;

    }


    /* ========================================================
       SERVICE AREAS
    ======================================================== */

    .site-areas-grid {

        grid-template-columns: 1fr;

    }


    /* ========================================================
       CALL TO ACTION
    ======================================================== */

    .site-cta {

        padding: 75px 0;

    }

    body.site-theme .site-cta h2 {

        font-size: 43px;

    }


    /* ========================================================
       INNER PAGE HERO
    ======================================================== */

    .site-page-hero {

        padding: 85px 0;

    }

    body.site-theme .site-page-hero h1 {

        font-size: 48px;

    }


    /* ========================================================
       CONTACT
    ======================================================== */

    .site-contact-card,
    .site-contact-form {

        padding: 28px;

    }

}


/* ============================================================
   24. SMALL MOBILE RESPONSIVENESS
============================================================ */

@media (max-width: 480px) {

    /* Hero */

    body.site-theme .site-hero h1 {

        font-size: 44px;

    }


    /* About */

    body.site-theme .site-about-content h2 {

        font-size: 42px;

    }

    body.site-theme .site-about-image {

        height: 320px;

    }

    body.site-theme .site-about-image-panel {

        gap: 15px;

        padding: 22px 18px;

    }

    body.site-theme .site-about-panel-content strong {

        font-size: 21px;

    }

    body.site-theme .site-about-panel-content p {

        font-size: 11px;

    }


    /* Services */

    body.site-theme .site-service-content h3 {

        font-size: 26px;

    }


    /* Projects */

    body.site-theme .site-project-content h3 {

        font-size: 27px;

    }


    /* CTA */

    body.site-theme .site-cta h2 {

        font-size: 38px;

    }


    /* Page Hero */

    body.site-theme .site-page-hero h1 {

        font-size: 43px;

    }

}


/* ============================================================
   25. REDUCED MOTION ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .site-hero *,
    .site-about *,
    .site-services *,
    .site-projects *,
    .site-reviews-strip * {

        scroll-behavior: auto;

        transition-duration: 0.01ms;

        animation-duration: 0.01ms;

    }

}


/* ============================================================
   ARO GROUP — SERVICES PAGE
============================================================ */


/* ============================================================
   01. SERVICES INTRODUCTION
============================================================ */

body.site-theme .site-services-intro {

    padding: 110px 0;

    background: #FFFFFF;

}

body.site-theme .site-services-intro-heading {

    margin: 15px 0 0;

    padding: 0;

    color: #10263F;

    font-family: var(--heading-font);

    font-size: clamp(44px, 4.5vw, 68px);

    font-weight: 800;

    line-height: 1.05;

    text-transform: uppercase;

}

body.site-theme .site-services-intro-heading span {

    color: #0647A5;

}

.site-services-intro-lead {

    margin-bottom: 22px;

    color: #10263F;

    font-size: 19px;

    font-weight: 700;

    line-height: 1.7;

}

.site-services-intro p:not(.site-services-intro-lead) {

    color: #64748B;

    font-size: 14px;

    line-height: 1.9;

}


/* ============================================================
   02. DETAILED SERVICES
============================================================ */

.site-services-detail {

    padding: 0 0 110px;

    background: #FFFFFF;

}

.site-service-detail-row {

    padding: 90px 0;

    border-bottom: 1px solid #E5EBF2;

}

.site-service-detail-row:first-child {

    padding-top: 0;

}

.site-service-detail-row:last-child {

    padding-bottom: 0;

    border-bottom: 0;

}


/* ============================================================
   SERVICE IMAGE
============================================================ */

.site-service-detail-image {

    position: relative;

    width: 100%;

    height: 480px;

    background: #E8EDF3;

    border-radius: 8px;

    overflow: hidden;

}

.site-service-detail-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;

}

.site-service-detail-row:hover .site-service-detail-image img {

    transform: scale(1.04);

}


/* ============================================================
   SERVICE NUMBER
============================================================ */

.site-service-detail-number {

    position: absolute;

    left: 0;

    bottom: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 75px;

    height: 75px;

    background: #0647A5;

    color: #FFFFFF;

    font-family: var(--heading-font);

    font-size: 30px;

    font-weight: 800;

}


/* ============================================================
   SERVICE CONTENT
============================================================ */

.site-service-detail-content {

    padding: 0 30px;

}

body.site-theme .site-service-detail-content h2 {

    margin: 18px 0 25px;

    padding: 0;

    color: #10263F;

    font-family: var(--heading-font);

    font-size: clamp(40px, 4vw, 60px);

    font-weight: 800;

    line-height: 1.08;

    text-transform: uppercase;

}

body.site-theme .site-service-detail-content h2 span {

    color: #0647A5;

}

.site-service-detail-content > p {

    margin-bottom: 30px;

    color: #64748B;

    font-size: 14px;

    line-height: 1.9;

}


/* ============================================================
   SERVICE FEATURES
============================================================ */

.site-service-detail-features {

    display: grid;

    grid-template-columns: repeat(2,minmax(0,1fr));

    gap: 18px 20px;

    margin-bottom: 35px;

    padding-top: 28px;

    border-top: 1px solid #E5EBF2;

}

.site-service-detail-features span {

    display: flex;

    align-items: center;

    gap: 11px;

    color: #334155;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.5;

}

.site-service-detail-features i {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 18px;

    width: 18px;

    height: 18px;

    margin: 0;

    color: #08A9E8;

    font-size: 17px;

    line-height: 1;

}


/* ============================================================
   SERVICE ENQUIRY LINK
============================================================ */

.site-service-detail-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #0647A5;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.3px;

    text-decoration: none;

    transition: color 0.3s ease;

}

.site-service-detail-link i {

    transition: transform 0.3s ease;

}

.site-service-detail-link:hover {

    color: #08A9E8;

}

.site-service-detail-link:hover i {

    transform: translate(3px,-3px);

}


/* ============================================================
   03. SERVICE AREAS HEADING
============================================================ */

body.site-theme .site-services-area-heading {

    margin: 15px 0 25px;

    padding: 0;

    color: #10263F;

    font-family: var(--heading-font);

    font-size: clamp(40px,4vw,60px);

    font-weight: 800;

    line-height: 1.08;

    text-transform: uppercase;

}


/* ============================================================
   04. TABLET RESPONSIVENESS
============================================================ */

@media (max-width: 1199px) {

    .site-service-detail-content {

        padding: 0;

    }

    .site-service-detail-image {

        height: 420px;

    }

}


/* ============================================================
   05. MOBILE RESPONSIVENESS
============================================================ */

@media (max-width: 767px) {

    body.site-theme .site-services-intro {

        padding: 70px 0;

    }

    body.site-theme .site-services-intro-heading {

        font-size: 44px;

    }

    .site-services-detail {

        padding-bottom: 70px;

    }

    .site-service-detail-row {

        padding: 55px 0;

    }

    .site-service-detail-image {

        height: 320px;

    }

    .site-service-detail-number {

        width: 60px;

        height: 60px;

        font-size: 25px;

    }

    .site-service-detail-content {

        padding: 0;

    }

    body.site-theme .site-service-detail-content h2 {

        font-size: 40px;

    }

    .site-service-detail-features {

        grid-template-columns: 1fr;

        gap: 15px;

    }

    body.site-theme .site-services-area-heading {

        font-size: 40px;

    }

}


/* ============================================================
   END — SERVICES PAGE
============================================================ */


/* ============================================================
   GUTTER CLEAN SOLUTIONS — LOGO SIZING
============================================================ */

/* Desktop Header */

body.site-theme .site-header .logo img.site-logo-img {
    width: 240px;
    max-width: 100%;
    max-height: none;
    height: auto;
    object-fit: contain;
}

/* Footer Logo */

body.site-theme .site-footer-logo img.site-footer-logo-img {
    width: 240px;
    max-width: 100%;
    max-height: none;
    height: auto;
    object-fit: contain;
}

/* Tablet */

@media (max-width: 1199px) {

    body.site-theme .site-header .logo img.site-logo-img {
        width: 210px;
    }

}

/* Mobile */

@media (max-width: 767px) {

    body.site-theme .site-header .logo img.site-logo-img {
        width: 180px;
    }

    body.site-theme .site-footer-logo img.site-footer-logo-img {
        width: 210px;
    }

}


/* ============================================================
   GUTTER CLEAN SOLUTIONS — ABOUT PAGE
============================================================ */

.about-page .site-services h2,
.about-page .site-areas h2 {
    font-size: clamp(40px, 4vw, 60px);
    font-weight: 800;
    line-height: 1.08;
    text-transform: uppercase;
}

.about-page .site-services h2 span,
.about-page .site-areas h2 span {
    color: var(--primary-color);
}

.about-page .site-services p,
.about-page .site-areas p {
    font-size: 14px;
    line-height: 1.9;
}

.about-page .site-service-card {
    height: 100%;
}

@media (max-width: 767px) {

    .about-page .site-services h2,
    .about-page .site-areas h2 {
        font-size: 40px;
    }

}

/* ============================================================
   GUTTER CLEAN SOLUTIONS — SERVICES PAGE
============================================================ */


/*--------------------------------------------------------------
# Services Introduction
--------------------------------------------------------------*/

.services-page .site-services-intro {
    background: var(--surface-color);
}

.services-page .site-services-intro h2 {
    font-size: clamp(38px, 4vw, 60px);
    font-weight: 800;
    line-height: 1.08;
    text-transform: uppercase;
}

.services-page .site-services-intro h2 span {
    display: block;
    color: var(--primary-color);
}

.services-page .site-services-intro p {
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 18px;
}


/*--------------------------------------------------------------
# Service Detail Sections
--------------------------------------------------------------*/

.site-service-detail {
    scroll-margin-top: 100px;
    background: var(--surface-color);
}

.site-service-detail-alt {
    background: #f4f7fb;
}

.site-service-detail-content h2 {
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 800;
    line-height: 1.08;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.site-service-detail-content h2 span {
    display: block;
    color: var(--primary-color);
}

.site-service-detail-content p {
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 16px;
}

.site-service-detail-content .site-service-lead {
    font-size: 16px;
    font-weight: 600;
    color: var(--heading-color);
}


/*--------------------------------------------------------------
# Service Images
--------------------------------------------------------------*/

.site-service-detail-image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.site-service-detail-image img {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.site-service-detail-image:hover img {
    transform: scale(1.04);
}

.site-service-image-label {
    position: absolute;
    left: 20px;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    padding: 12px 18px;
    background: var(--primary-color);
    color: #ffffff;
    font-family: var(--nav-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 4px;
}


/*--------------------------------------------------------------
# Service Features
--------------------------------------------------------------*/

.site-service-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    margin: 28px 0 32px;
}

.site-service-features > div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--heading-color);
}

.site-service-features i {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--accent-color);
    font-size: 15px;
}


/*--------------------------------------------------------------
# Why Choose Us
--------------------------------------------------------------*/

.site-services-why {
    background: #f4f7fb;
}

.site-services-benefit {
    height: 100%;
    padding: 35px 28px;
    background: #ffffff;
    border: 1px solid rgba(16, 38, 63, 0.08);
    border-radius: 8px;
    transition: 0.3s ease;
}

.site-services-benefit:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(16, 38, 63, 0.08);
}

.site-services-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 25px;
    background: rgba(8, 169, 232, 0.1);
    color: var(--primary-color);
    border-radius: 6px;
    font-size: 25px;
}

.site-services-benefit h3 {
    margin-bottom: 14px;
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
}

.site-services-benefit p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}


/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

@media (max-width: 991px) {

    .site-service-detail-content h2 {
        font-size: 42px;
    }

}

@media (max-width: 767px) {

    .services-page .site-services-intro h2,
    .site-service-detail-content h2 {
        font-size: 36px;
    }

    .site-service-features {
        grid-template-columns: 1fr;
    }

    .site-service-detail-image img {
        aspect-ratio: 4 / 3;
    }

    .site-service-image-label {
        left: 12px;
        bottom: 12px;
        padding: 10px 12px;
        font-size: 10px;
    }

    .site-services-benefit {
        padding: 28px 24px;
    }

}


/* ============================================================
   GUTTER CLEAN SOLUTIONS — CONTACT PAGE FIXES
============================================================ */


/*--------------------------------------------------------------
# Contact Details
--------------------------------------------------------------*/

body.site-theme .site-contact-details {
    width: 100%;
}

body.site-theme .site-contact-details h2 {
    margin-bottom: 22px;
    color: var(--heading-color);
}

body.site-theme .site-contact-details h2 span {
    color: var(--primary-color);
}


/*--------------------------------------------------------------
# Contact Items
--------------------------------------------------------------*/

body.site-theme .site-contact-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
}

body.site-theme .site-contact-item {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 18px 20px;
    background-color: #f4f7fb;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

body.site-theme a.site-contact-item:hover {
    background-color: #ffffff;
    border-color: var(--accent-color);
    transform: translateX(4px);
    box-shadow: 0 8px 25px rgba(16, 38, 63, 0.06);
}

body.site-theme .site-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background-color: #e4f4fc;
    color: #0647a5;
    border-radius: 7px;
    font-size: 21px;
}

body.site-theme .site-contact-item-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

body.site-theme .site-contact-item-copy small {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

body.site-theme .site-contact-item-copy strong {
    display: block;
    color: #10263f;
    font-size: 16px;
    font-weight: 700;
}

body.site-theme .site-contact-item-copy > span {
    display: block;
    color: #10263f;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}


/*--------------------------------------------------------------
# Contact Note
--------------------------------------------------------------*/

body.site-theme .site-contact-note {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: 30px;
    padding: 25px;
    background-color: #10263f;
    border-radius: 8px;
    color: #ffffff;
}

body.site-theme .site-contact-note-icon {
    flex-shrink: 0;
    color: #08a9e8;
    font-size: 28px;
}

body.site-theme .site-contact-note strong {
    display: block;
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
}

body.site-theme .site-contact-note p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    line-height: 1.8;
}


/*--------------------------------------------------------------
# Contact Form Card
--------------------------------------------------------------*/

body.site-theme .site-contact-form-card {
    padding: 40px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    box-shadow: 0 15px 45px rgba(16, 38, 63, 0.05);
}

body.site-theme .site-contact-form-heading {
    margin-bottom: 30px;
}

body.site-theme .site-contact-form-heading h2 {
    margin-bottom: 15px;
    color: #10263f;
}

body.site-theme .site-contact-form-heading p {
    margin-bottom: 0;
}


/*--------------------------------------------------------------
# Form Fields
--------------------------------------------------------------*/

body.site-theme .site-contact-form .form-control {
    min-height: 60px;
    background-color: #f8fafc;
    border: 1px solid #dce4ed;
    border-radius: 5px;
    color: #10263f;
    font-size: 14px;
}

body.site-theme .site-contact-form .form-control:focus {
    background-color: #ffffff;
    border-color: #08a9e8;
    box-shadow: 0 0 0 3px rgba(8, 169, 232, 0.1);
}

body.site-theme .site-contact-form .form-floating > label {
    color: #64748b;
    font-size: 13px;
}

body.site-theme .site-contact-form textarea.form-control {
    min-height: 165px;
    height: 165px;
    resize: vertical;
}


/*--------------------------------------------------------------
# Submit Button
--------------------------------------------------------------*/

body.site-theme .site-contact-submit {
    margin-top: 20px;
}

body.site-theme .site-contact-submit .site-btn {
    border: none;
    cursor: pointer;
}


/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

@media (max-width: 767px) {

    body.site-theme .site-contact-item {
        padding: 16px;
        gap: 14px;
    }

    body.site-theme .site-contact-form-card {
        padding: 25px 20px;
    }

    body.site-theme .site-contact-note {
        padding: 20px;
    }

}


/* ============================================================
   GUTTER CLEAN SOLUTIONS — THANK YOU PAGE
============================================================ */


/*--------------------------------------------------------------
# Thank You Section
--------------------------------------------------------------*/

body.site-theme .site-thank-you {
    display: flex;
    align-items: center;
    min-height: 75vh;
    padding: 140px 0 100px;
    background: #f4f7fb;
}


/*--------------------------------------------------------------
# Thank You Card
--------------------------------------------------------------*/

body.site-theme .site-thank-you-card {
    padding: 65px 55px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(16, 38, 63, 0.06);
}


/*--------------------------------------------------------------
# Success Icon
--------------------------------------------------------------*/

body.site-theme .site-thank-you-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin: 0 auto 30px;
    background: rgba(8, 169, 232, 0.1);
    border: 2px solid rgba(8, 169, 232, 0.2);
    border-radius: 50%;
    color: #0647a5;
    font-size: 46px;
}


/*--------------------------------------------------------------
# Heading
--------------------------------------------------------------*/

body.site-theme .site-thank-you-card h1 {
    margin: 20px 0 25px;
    color: #10263f;
    font-family: var(--heading-font);
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

body.site-theme .site-thank-you-card h1 span {
    display: block;
    color: #0647a5;
}


/*--------------------------------------------------------------
# Description
--------------------------------------------------------------*/

body.site-theme .site-thank-you-lead {
    margin-bottom: 15px;
    color: #10263f;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.7;
}

body.site-theme .site-thank-you-description {
    max-width: 500px;
    margin: 0 auto;
    color: #64748b;
    font-size: 14px;
    line-height: 1.9;
}


/*--------------------------------------------------------------
# Divider
--------------------------------------------------------------*/

body.site-theme .site-thank-you-divider {
    width: 100%;
    height: 1px;
    margin: 35px 0;
    background: #e2e8f0;
}


/*--------------------------------------------------------------
# Additional Information
--------------------------------------------------------------*/

body.site-theme .site-thank-you-info {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    max-width: 480px;
    margin: 0 auto;
    text-align: left;
}

body.site-theme .site-thank-you-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: #e4f4fc;
    color: #0647a5;
    border-radius: 7px;
    font-size: 21px;
}

body.site-theme .site-thank-you-info-content strong {
    display: block;
    margin-bottom: 8px;
    color: #10263f;
    font-size: 16px;
    font-weight: 700;
}

body.site-theme .site-thank-you-info-content p {
    margin-bottom: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.8;
}

body.site-theme .site-thank-you-info-content a {
    color: #0647a5;
    font-weight: 700;
    text-decoration: none;
}

body.site-theme .site-thank-you-info-content a:hover {
    text-decoration: underline;
}


/*--------------------------------------------------------------
# Action Buttons
--------------------------------------------------------------*/

body.site-theme .site-thank-you-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 40px;
}

body.site-theme .site-thank-you-secondary {
    background: #10263f;
    color: #ffffff;
}

body.site-theme .site-thank-you-secondary:hover {
    background: #0647a5;
    color: #ffffff;
}


/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

@media (max-width: 767px) {

    body.site-theme .site-thank-you {
        padding: 110px 0 70px;
        min-height: auto;
    }

    body.site-theme .site-thank-you-card {
        padding: 45px 25px;
    }

    body.site-theme .site-thank-you-icon {
        width: 75px;
        height: 75px;
        font-size: 38px;
    }

    body.site-theme .site-thank-you-card h1 {
        font-size: 38px;
    }

    body.site-theme .site-thank-you-actions {
        flex-direction: column;
    }

    body.site-theme .site-thank-you-actions .site-btn {
        width: 100%;
        justify-content: center;
    }

}

/* ============================================================
   GUTTER CLEAN SOLUTIONS
   HOMEPAGE MOBILE NAVIGATION FIX
============================================================ */

@media (max-width: 1199px) {

    /* Remove backdrop filter when mobile navigation is open */

    body.site-theme.home-page.mobile-nav-active
    .site-header.header-transparent {

        backdrop-filter: none !important;

        -webkit-backdrop-filter: none !important;

    }

}

/* ============================================================
   GUTTER CLEAN SOLUTIONS — HIDE TOP BAR ON MOBILE
============================================================ */

@media (max-width: 767px) {

    body.site-theme .site-topbar {
        display: none !important;
    }

}

/* ============================================================
   END OF CSS
============================================================ */