/* ==================================================
   THREE BRANCHES LANDSCAPES
   GLOBAL / MAIN CSS

   No external CSS libraries.
   Custom grid + custom global design system.
================================================== */


/* ==================================================
   LOCAL FONTS
================================================== */

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Albert Sans';
    src: url('../fonts/AlbertSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Albert Sans';
    src: url('../fonts/AlbertSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Albert Sans';
    src: url('../fonts/AlbertSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lobster';
    src: url('../fonts/Lobster-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ==================================================
   ROOT VARIABLES
================================================== */

:root {

    /* ------------------------------
       COLORS
    ------------------------------ */

    --primary: #066D04;
    --primary-dark: #1B2C15;

    --heading: #3E3F3F;
    --text: #4E4E4E;

    --black: #000000;
    --white: #FFFFFF;

    --border: #168528;

    --hero-white: #FFFFFF;


    /* ------------------------------
       FONTS
    ------------------------------ */

    --body-font: 'Manrope', sans-serif;
    --heading-font: 'Albert Sans', sans-serif;
    --script-font: 'Lobster', cursive;


    /* ------------------------------
       CONTAINER / GRID
    ------------------------------ */

    --container: 1320px;
    --container-wide: 1900px;
    --gutter: 15px;


    /* ------------------------------
       BORDER RADIUS
    ------------------------------ */

    --radius: 16px;


    /* ------------------------------
       GLOBAL SECTION SPACING
    ------------------------------ */

    --section-space: 120px;


    /* ------------------------------
       CONTENT SPACING SYSTEM
    ------------------------------ */

    --space-label-title: 12px;
    --space-title-content: 18px;
    --space-paragraph: 18px;
    --space-content-list: 22px;
    --space-list-button: 30px;


    /* ------------------------------
       GENERAL SPACING
    ------------------------------ */

    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;


    /* ------------------------------
       TRANSITIONS
    ------------------------------ */

    --transition: 0.25s ease;
}

/* ==================================================
   RESET
================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--body-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: var(--text);
    background: var(--white);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;
}

img,
picture,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    appearance: none;
    -webkit-appearance: none;
}

figure {
    margin: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* ==================================================
   SITE LOADER
================================================== */

.site-loader {
    position: fixed;
    inset: 0;

    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background: var(--white);

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;
}


/* ==================================================
   LOADER HIDDEN STATE
================================================== */

.site-loader.is-loaded {
    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


/* ==================================================
   LOADER INNER
================================================== */

.site-loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: var(--space-lg);

    text-align: center;
}


/* ==================================================
   LOADER LOGO
================================================== */

.site-loader-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 190px;

    animation:
        siteLoaderLogo 1.6s ease-in-out infinite;
}

.site-loader-logo-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 190px;
    max-height: 125px;

    object-fit: contain;
}


/* Text fallback */

.site-loader-name {
    font-family: var(--heading-font);
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;

    color: var(--heading);
}


/* ==================================================
   ANIMATED BRANCHES
================================================== */

.site-loader-branches {
    display: flex;
    align-items: flex-end;
    justify-content: center;

    gap: 7px;

    height: 30px;
}

.site-loader-branches span {
    display: block;

    width: 5px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #168528 0%,
            var(--primary) 60%,
            var(--primary-dark) 100%
        );

    transform-origin: center bottom;

    animation:
        siteLoaderBranch 0.9s ease-in-out infinite;
}


.site-loader-branches span:nth-child(1) {
    height: 16px;

    animation-delay: 0s;
}

.site-loader-branches span:nth-child(2) {
    height: 27px;

    animation-delay: 0.12s;
}

.site-loader-branches span:nth-child(3) {
    height: 20px;

    animation-delay: 0.24s;
}


/* ==================================================
   LOADER ANIMATIONS
================================================== */

@keyframes siteLoaderLogo {

    0%,
    100% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(-4px);
        opacity: 0.88;
    }

}


@keyframes siteLoaderBranch {

    0%,
    100% {
        transform: scaleY(0.55);
        opacity: 0.55;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }

}


/* ==================================================
   REDUCED MOTION
================================================== */

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

    .site-loader-logo,
    .site-loader-branches span {
        animation: none;
    }

    .site-loader {
        transition-duration: 0.15s;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {

    .site-loader-logo {
        width: 160px;
    }

    .site-loader-logo-image {
        max-width: 160px;
        max-height: 110px;
    }

}


/* ==================================================
   SELECTION
================================================== */

::selection {
    background: var(--primary);
    color: var(--white);
}


/* ==================================================
   GLOBAL TYPOGRAPHY
================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;

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

    color: var(--heading);
}

h1 {
    font-size: 65px;
    line-height: 60px;
    letter-spacing: 0;
}

h2 {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: 0;
}

h3 {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: 0;
}

h4 {
    font-size: 25px;
    line-height: 32px;
}

h5 {
    font-size: 22px;
    line-height: 28px;
}

h6 {
    font-size: 18px;
    line-height: 26px;
}

p {
    margin: 0;
    padding: 0;
}


/* ==================================================
   SCRIPT / HIGHLIGHT TEXT
================================================== */

.script-text,
.heading-script,
h1 span,
h2 span {
    font-family: var(--script-font);
    font-weight: 400;
    color: var(--primary);
}

h1 span,
h2 span {
    font-size: inherit;
    line-height: inherit;
}


/* ==================================================
   SECTION LABEL
================================================== */

.section-label {
    position: relative;
    display: inline-block;

    margin: 0 0 var(--space-label-title);
    padding-bottom: 3px;

    font-family: var(--script-font);
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;

    color: var(--primary);
}

.section-label::after {
    content: '';

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: var(--primary);
}


/* ==================================================
   SECTION TITLE
================================================== */

.section-title {
    margin: 0 0 var(--space-title-content);
}

.section-title.text-center {
    text-align: center;
}


/* ==================================================
   SECTION HEADING WRAPPER
================================================== */

.section-heading {
    margin-bottom: 70px;
}

.section-heading.text-center {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.section-heading p {
    max-width: 720px;
}

.section-heading.text-center p {
    margin-left: auto;
    margin-right: auto;
}


/* ==================================================
   BODY / CONTENT TYPOGRAPHY
================================================== */

.content-text,
.entry-content {
    font-family: var(--body-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;

    color: var(--text);
}

.content-text p + p,
.entry-content p + p {
    margin-top: 12px;
}


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

.hero-content h1 {
    color: var(--hero-white);
}

.hero-content h1 span {
    color: var(--hero-white);
}

.hero-content > p,
.hero-description {
    margin-top: 18px;

    font-family: var(--body-font);
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;

    color: var(--white);
}


/* ==================================================
   CONTENT SPACING SYSTEM
================================================== */

/* Label → Title */
.content-block .section-label + .section-title {
    margin-top: 0;
}


/* Title → Content */
.content-block .section-title + p,
.content-block h2 + p,
.content-block h3 + p {
    margin-top: var(--space-title-content);
}


/* Paragraph → Paragraph */
.content-block p + p {
    margin-top: var(--space-paragraph);
}


/* Content → List */
.content-block p + .check-list,
.content-block p + ul,
.content-block p + ol {
    margin-top: var(--space-content-list);
}


/* List → Button */
.content-block .check-list + .btn,
.content-block ul + .btn,
.content-block ol + .btn {
    margin-top: var(--space-list-button);
}


/* Paragraph → Button */
.content-block p + .btn {
    margin-top: var(--space-list-button);
}


/* ==================================================
   CONTAINER
================================================== */

.container {
    width: 100%;
    max-width: var(--container);

    margin-left: auto;
    margin-right: auto;

    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.container-wide {
    width: 100%;
    max-width: var(--container-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.container-fluid {
    width: 100%;

    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.container-narrow {
    width: 100%;
    max-width: 900px;

    margin-left: auto;
    margin-right: auto;

    padding-left: var(--gutter);
    padding-right: var(--gutter);
}


/* ==================================================
   CUSTOM GRID
================================================== */

.row {
    display: flex;
    flex-wrap: wrap;

    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
}

[class*="col-"] {
    position: relative;

    width: 100%;

    padding-left: var(--gutter);
    padding-right: var(--gutter);
}


/* ==================================================
   DESKTOP COLUMNS
================================================== */

.col-1  { width: 8.333333%; }
.col-2  { width: 16.666667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.333333%; }
.col-5  { width: 41.666667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.333333%; }
.col-8  { width: 66.666667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.333333%; }
.col-11 { width: 91.666667%; }
.col-12 { width: 100%; }


/* ==================================================
   GRID ALIGNMENT
================================================== */

.align-items-start {
    align-items: flex-start;
}

.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: flex-end;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-end {
    justify-content: flex-end;
}


/* ==================================================
   SECTION SPACING
================================================== */

.section {
    position: relative;
}

.section-padding {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
}

.section-padding-top {
    padding-top: var(--section-space);
}

.section-padding-bottom {
    padding-bottom: var(--section-space);
}

.section-gap {
    margin-top: var(--section-space);
}


/* ==================================================
   GLOBAL RADIUS
================================================== */

.radius {
    border-radius: var(--radius);
}

.radius-overflow {
    overflow: hidden;
    border-radius: var(--radius);
}


/* ==================================================
   GLOBAL BORDER
================================================== */

.green-border {
    border: 1px solid var(--border);
}


/* ==================================================
   BUTTONS
================================================== */

.btn,
/* button, */
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 48px;

    padding: 12px 22px;

    border: 0;
    border-radius: 999px;
    outline: 0;

    font-family: var(--body-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;

    color: var(--white);

    cursor: pointer;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        filter var(--transition);
}

.btn:hover,
/* button:hover, */
input[type="submit"]:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.btn:active,
/* button:active, */
input[type="submit"]:active {
    transform: translateY(0);
}


/* ==================================================
   PRIMARY / QUOTE BUTTON
================================================== */

.btn-primary,
.btn-quote {
    background:
        linear-gradient(
            180deg,
            #128420 0%,
            var(--primary) 62%,
            var(--primary-dark) 100%
        );
}


/* ==================================================
   CALL BUTTON
================================================== */

.btn-call {
    background:
        linear-gradient(
            180deg,
            #3E3F3F 0%,
            #272727 50%,
            #000000 100%
        );
}


/* ==================================================
   BUTTON ICON / ARROW
================================================== */

.btn-icon,
.btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
}

.btn svg,
.btn-icon svg,
.btn-arrow svg {
    width: 18px;
    height: 18px;
}

/* Reusable text-arrow for buttons that do not contain an SVG arrow */

.btn.btn-arrow::after {
    content: '→';

    display: inline-block;

    font-size: 20px;
    line-height: 1;

    transition: transform var(--transition);
}

.btn.btn-arrow:hover::after {
    transform: translateX(4px);
}


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

.site-header {
    position: absolute;

    top: 28px;
    left: 0;

    width: 100%;

    z-index: 100;

    background: transparent;

    pointer-events: none;
}


/* ==================================================
   HEADER WIDE CONTAINER
   Same outer width as hero
================================================== */

.site-header > .container {
    width: 100%;
    max-width: var(--container-wide);

    margin-left: auto;
    margin-right: auto;

    padding-left: 20px;
    padding-right: 20px;
}


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

.header-inner {
    position: relative;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    width: 100%;
    height: 122px;

    padding-top: 36px;

    pointer-events: none;
}


/* ==================================================
   HEADER LEFT NAVIGATION POSITION
================================================== */

.header-navigation-wrap {
    display: flex;
    align-items: center;

    margin-left: 105px;

    pointer-events: auto;
}


/* ==================================================
   DESKTOP NAVIGATION
   Figma: 416 × 46px
================================================== */

.desktop-navigation {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 416px;
    height: 46px;
    min-height: 46px;

    padding: 0 17px;

    border-radius: 16px;

    background: rgba(71, 70, 70, 0.30);

    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}


/* ==================================================
   PRIMARY MENU
================================================== */

.primary-menu {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    gap: 0;

    margin: 0;
    padding: 0;

    list-style: none;
}

.primary-menu > li {
    position: relative;

    display: flex;
    align-items: center;

    height: 100%;
}


/* ==================================================
   MENU SEPARATORS
================================================== */

.primary-menu > li:not(:last-child)::after {
    content: '';

    display: block;

    width: 1px;
    height: 20px;

    margin-left: 14px;
    margin-right: 14px;

    background: rgba(255, 255, 255, 0.85);
}


/* ==================================================
   PRIMARY MENU LINKS
================================================== */

.primary-menu > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 100%;

    padding: 0;

    font-family: var(--body-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;

    color: var(--white);

    white-space: nowrap;

    transition:
        opacity var(--transition),
        color var(--transition);
}

.primary-menu > li > a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current-menu-ancestor > a {
    color: var(--white);
    opacity: 0.8;
}


/* ==================================================
   SERVICES DROPDOWN ARROW
================================================== */

.primary-menu .menu-item-has-children > a::after {
    content: '';

    width: 6px;
    height: 6px;

    margin-left: 8px;
    margin-top: -3px;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg);

    transition: transform var(--transition);
}

.primary-menu .menu-item-has-children:hover > a::after {
    margin-top: 3px;

    transform: rotate(225deg);
}


/* ==================================================
   DESKTOP SUBMENU
================================================== */

.primary-menu .sub-menu {
    position: absolute;

    top: calc(100% + 8px);
    left: -15px;

    z-index: 120;

    min-width: 220px;

    margin: 0;
    padding: 10px;

    border-radius: var(--radius);

    background: rgba(40, 40, 40, 0.96);

    list-style: none;

    opacity: 0;
    visibility: hidden;

    transform: translateY(6px);

    transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition);
}

.primary-menu .menu-item-has-children:hover > .sub-menu,
.primary-menu .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.primary-menu .sub-menu li {
    position: relative;

    display: block;

    width: 100%;
}

.primary-menu .sub-menu li::after {
    display: none;
}

.primary-menu .sub-menu a {
    display: flex;

    width: 100%;

    padding: 9px 12px;

    border-radius: 8px;

    font-family: var(--body-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;

    color: var(--white);
}

.primary-menu .sub-menu a:hover {
    opacity: 1;

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


/* ==================================================
   HEADER CENTER LOGO
================================================== */

.header-logo-wrap {
    position: absolute;

    top: 0;
    left: 50%;

    z-index: 110;

    transform: translateX(-50%);

    pointer-events: auto;
}


/* ==================================================
   HEADER WHITE LOGO BOX
================================================== */

.header-logo-box {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 170px;
	height: 100px;
    padding: 14px 12px 30px;

    border-radius: 0 0 var(--radius) var(--radius);

    background: var(--white);
}


/* ==================================================
   WORDPRESS CUSTOM LOGO
================================================== */

.header-logo-box .custom-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
}

.header-logo-box .custom-logo {
    display: block;

    width: auto;
    height: auto;

    max-width: 145px;
    max-height: 96px;

    object-fit: contain;
}


/* ==================================================
   TEXT LOGO FALLBACK
================================================== */

.site-logo-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    font-family: var(--heading-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;

    color: var(--heading);
}


/* ==================================================
   HEADER RIGHT CONTACT INFO
================================================== */

.header-contact-wrap {
    display: flex;
    align-items: center;

    gap: 38px;

    margin-right: 95px;

    pointer-events: auto;
}

.header-contact-item {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    font-family: var(--body-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;

    color: var(--white);

    white-space: nowrap;

    transition: opacity var(--transition);
}

.header-contact-item:hover {
    opacity: 0.78;
}


/* ==================================================
   HEADER CONTACT ICON
================================================== */

.header-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
}

.header-contact-icon svg {
    width: 20px;
    height: 20px;

    color: var(--white);
}


/* ==================================================
   MOBILE NAVIGATION
   Native <details> / <summary> - No JS required
================================================== */

.mobile-navigation {
    display: none;
}


/* ==================================================
   MOBILE MENU BUTTON
================================================== */

.mobile-navigation > summary {
    position: relative;

    z-index: 1002;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(62, 63, 63, 0.55);

    cursor: pointer;
    list-style: none;

    transition:
        background var(--transition),
        border-color var(--transition);
}

.mobile-navigation > summary::-webkit-details-marker {
    display: none;
}

.mobile-navigation > summary::marker {
    content: '';
}


/* ==================================================
   MOBILE HAMBURGER ICON
================================================== */

.mobile-menu-icon {
    position: relative;

    display: block;

    width: 22px;
    height: 16px;
}

.mobile-menu-icon::before,
.mobile-menu-icon::after,
.mobile-menu-icon > span {
    content: '';

    position: absolute;
    left: 0;

    width: 100%;
    height: 2px;

    border-radius: 2px;

    background: var(--white);

    transition:
        transform var(--transition),
        top var(--transition),
        bottom var(--transition),
        opacity var(--transition),
        background var(--transition);
}

.mobile-menu-icon::before {
    top: 0;
}

.mobile-menu-icon > span {
    top: 7px;
}

.mobile-menu-icon::after {
    bottom: 0;
}


/* ==================================================
   MOBILE OPEN ICON - X
================================================== */

.mobile-navigation[open] .mobile-menu-icon::before {
    top: 7px;

    transform: rotate(45deg);
}

.mobile-navigation[open] .mobile-menu-icon > span {
    opacity: 0;
}

.mobile-navigation[open] .mobile-menu-icon::after {
    bottom: 7px;

    transform: rotate(-45deg);
}


/* ==================================================
   MOBILE FULL-SCREEN PANEL
================================================== */

.mobile-menu-panel {
    position: fixed;
    inset: 0;

    z-index: 1000;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100dvh;

    padding:
        110px
        max(30px, calc((100vw - 720px) / 2))
        40px;

    background: var(--white);

    overflow-y: auto;
    overscroll-behavior: contain;

    pointer-events: auto;
}


/* ==================================================
   MOBILE CLOSE BUTTON
================================================== */

.mobile-navigation[open] > summary {
    position: fixed;

    top: 30px;
    right: 30px;

    z-index: 1003;

    background: var(--white);

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

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.mobile-navigation[open] .mobile-menu-icon::before,
.mobile-navigation[open] .mobile-menu-icon::after,
.mobile-navigation[open] .mobile-menu-icon > span {
    background: var(--heading);
}


/* Prevent page scroll while native mobile menu is open */

body:has(.mobile-navigation[open]) {
    overflow: hidden;
}


/* ==================================================
   MOBILE MENU
================================================== */

.mobile-menu {
    display: flex;
    flex-direction: column;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}

.mobile-menu > li {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    border-bottom: 1px solid rgba(6, 109, 4, 0.16);
}

.mobile-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 16px 0;

    font-family: var(--body-font);
    font-size: 17px;
    font-weight: 500;
    line-height: 25px;

    color: var(--heading);

    transition:
        color var(--transition),
        opacity var(--transition);
}

.mobile-menu > li > a:hover {
    color: var(--primary);
}


/* ==================================================
   MOBILE CURRENT MENU ITEM
================================================== */

.mobile-menu .current-menu-item > a,
.mobile-menu .current-menu-ancestor > a,
.mobile-menu .current_page_item > a {
    color: var(--primary);
}


/* ==================================================
   MOBILE SUBMENU
================================================== */

.mobile-menu .menu-item-has-children > a {
    position: relative;

    padding-right: 34px;
}


/* Arrow */

.mobile-menu .menu-item-has-children > a::after {
    content: '';

    position: absolute;

    top: 50%;
    right: 4px;

    width: 8px;
    height: 8px;

    margin-top: -6px;

    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);

    transform: rotate(45deg);

    transition: transform var(--transition);
}


/* Submenu hidden by default */

.mobile-menu .sub-menu {
    display: none;
    width: 100%;
    margin: 0;
    padding: 0 0 0 18px;
    list-style: none;
    border-left: 1px solid rgba(6, 109, 4, 0.16);
    margin-bottom: 20px;
}


/* Open state */

.mobile-menu .menu-item-has-children.is-open > .sub-menu {
    display: block;
}


/* Arrow open state */

.mobile-menu .menu-item-has-children.is-open > a::after {
    margin-top: -2px;

    transform: rotate(225deg);
}


.mobile-menu .sub-menu li {
    width: 100%;

    margin: 0;
    padding: 0;

    border: 0;
}

.mobile-menu .sub-menu a {
    display: block;

    width: 100%;

    padding: 9px 0;

    font-family: var(--body-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 23px;

    color: var(--text);
}

.mobile-menu .sub-menu a:hover {
    color: var(--primary);
}

/* ==================================================
   THREE BRANCHES LANDSCAPES
   HOMEPAGE CSS
================================================== */


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

.hero-section {
    position: relative;

    padding: 28px 0 0;

    background: var(--white);
}


/* ==================================================
   HERO WIDE CONTAINER

   Uses global --container-wide from main.css
   Desktop maximum width: 1900px
================================================== */

.hero-section > .container {
    width: 100%;
    max-width: var(--container-wide);

    margin-left: auto;
    margin-right: auto;

    padding-left: 20px;
    padding-right: 20px;
}

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

.hero-wrapper {
    position: relative;

    width: 100%;
    height: 611px;

    overflow: hidden;

    border-radius: var(--radius);

    background: #222222;
}


/* ==================================================
   HERO CENTER LOGO NOTCH
   CLEAN CONCAVE CORNERS
================================================== */

.hero-wrapper::before,
.hero-wrapper::after {
    content: '';

    position: absolute;
    top: 0;

    z-index: 4;

    width: 16px;
    height: 16px;

    background: transparent;

    pointer-events: none;
}


/* ==================================================
   LEFT LOGO NOTCH CORNER
================================================== */

.hero-wrapper::before {
    left: calc(50% - 101px);

    border-top-right-radius: 16px;

    box-shadow:
        8px -8px 0 8px var(--white);
}


/* ==================================================
   RIGHT LOGO NOTCH CORNER
================================================== */

.hero-wrapper::after {
    right: calc(50% - 101px);

    border-top-left-radius: 16px;

    box-shadow:
        -8px -8px 0 8px var(--white);
}
/* ==================================================
   HERO BACKGROUND
================================================== */

.hero-background {
    position: absolute;
    inset: 0;

    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;
}

.hero-background img {
    position: absolute;

    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    border-radius: 0;
}


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

   Figma:
   Black #000000
   Opacity 30%
================================================== */

.hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    background: rgba(0, 0, 0, 0.30);

    pointer-events: none;
}


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

.hero-content {
    position: absolute;

    top: 49%;
    left: 50%;

    z-index: 5;

    width: min(760px, calc(100% - 40px));

    transform: translate(-50%, -50%);

    text-align: center;
}


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

.hero-content h1 {
    margin: 0;

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

    font-size: 65px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: 0;

    color: var(--white);
}

.hero-content h1 span {
    font-family: var(--script-font);

    font-size: inherit;
    font-weight: 400;
    line-height: inherit;

    color: var(--white);
}


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

.hero-content .hero-description {
    max-width: 680px;

    margin: 18px auto 0;

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

    font-size: 22px;
    font-weight: 500;
    line-height: 28px;

    color: var(--white);
}


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

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 25px;
}

/* ==================================================
   RESPONSIVE - ULTRA WIDE / 4K DESKTOP
================================================== */

@media (min-width: 2500px) {

    .hero-section > .container {
        max-width: calc(100vw - 80px);
    }

    .hero-wrapper {
        height: clamp(611px, 31.8vw, 900px);
    }

}


/* ==================================================
   RESPONSIVE - SMALL DESKTOP
================================================== */

@media (max-width: 1199px) {

    .hero-wrapper {
        height: 570px;
    }

    .hero-content {
        width: min(700px, calc(100% - 50px));
    }

    .hero-content h1 {
        font-size: 56px;
        line-height: 56px;
    }

    .hero-content .hero-description {
        max-width: 620px;

        font-size: 20px;
        line-height: 27px;
    }

}


/* ==================================================
   RESPONSIVE - TABLET
================================================== */

@media (max-width: 991px) {

    .hero-section {
        padding-top: 20px;
    }

    .hero-section > .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero-wrapper {
        height: 560px;
    }


    /* ----------------------------------------------
       Tablet logo width = 145px
       Half = 72.5px
       + 16px curve
       Total = 88.5px
    ---------------------------------------------- */

    .hero-wrapper::before {
        left: calc(50% - 88.5px);
    }

    .hero-wrapper::after {
        right: calc(50% - 88.5px);
    }

    .hero-content {
        top: 54%;

        width: min(650px, calc(100% - 50px));
    }

    .hero-content h1 {
        font-size: 50px;
        line-height: 52px;
    }

}


/* ==================================================
   RESPONSIVE - MOBILE
================================================== */

@media (max-width: 767px) {

    .hero-section {
        padding-top: 15px;
    }

    .hero-section > .container {
        width: 100%;
        max-width: 100%;

        padding-left: 15px;
        padding-right: 15px;
    }

    .hero-wrapper {
        min-height: 620px;
        height: calc(100svh - 30px);
        max-height: 720px;

        border-radius: var(--radius);
    }

    .hero-background img {
        object-position: center center;
    }

    .hero-content {
        top: 56%;

        width: calc(100% - 34px);
    }

    .hero-content h1 {
        font-size: 42px;
        line-height: 44px;
    }

    .hero-content .hero-description {
        max-width: 520px;

        margin-top: 16px;

        font-size: 19px;
        line-height: 26px;
    }

    .hero-actions {
        flex-wrap: wrap;

        margin-top: 24px;
    }

}


/* ==================================================
   RESPONSIVE - SMALL MOBILE
================================================== */

@media (max-width: 575px) {

    .hero-wrapper {
        min-height: 600px;
    }


    /* ----------------------------------------------
       Small mobile logo width = 132px
       Half = 66px
       + 16px curve
       Total = 82px
    ---------------------------------------------- */

    .hero-wrapper::before {
        left: calc(50% - 82px);
    }

    .hero-wrapper::after {
        right: calc(50% - 82px);
    }

    .hero-content {
        top: 57%;

        width: calc(100% - 30px);
    }

    .hero-content h1 {
        font-size: 36px;
        line-height: 39px;
    }

    .hero-content .hero-description {
        font-size: 18px;
        line-height: 25px;
    }

    .hero-actions {
        gap: 9px;
    }

    .hero-actions .btn {
        min-height: 46px;

        padding: 11px 18px;

        font-size: 14px;
    }

}


/* ==================================================
   RESPONSIVE - VERY SMALL MOBILE
================================================== */

@media (max-width: 380px) {

    .hero-content h1 {
        font-size: 32px;
        line-height: 36px;
    }

    .hero-actions {
        flex-direction: column;
    }

}

/* ==================================================
   MOBILE CONTACT INFO
================================================== */

.mobile-contact-info {
    display: flex;
    flex-direction: column;

    gap: 12px;

    margin-top: 30px;
}

.mobile-contact-link {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    font-family: var(--body-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 23px;

    color: var(--heading);

    transition: color var(--transition);
}

.mobile-contact-link:hover {
    color: var(--primary);
}

.mobile-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    color: var(--primary);
}

.mobile-contact-icon svg {
    width: 18px;
    height: 18px;
}


/* ==================================================
   CHECK LIST
================================================== */

.check-list {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.check-list li {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin: 0;
    padding: 0;

    font-size: 16px;
    line-height: 24px;

    color: var(--text);
}

.check-list-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 17px;

    width: 17px;
    height: 17px;

    margin-top: 3px;

    border-radius: 50%;

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


/* ==================================================
   IMAGE WRAPPERS
================================================== */

.image-wrapper {
    position: relative;

    border-radius: var(--radius);
}

.image-wrapper img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: var(--radius);
}


/* ==================================================
   DECORATIVE IMAGE BORDER
================================================== */

.image-frame {
    position: relative;

    padding: 0 0 18px 18px;
}

.image-frame::before {
    content: '';

    position: absolute;
    left: 0;
    bottom: 0;

    width: calc(100% - 18px);
    height: calc(100% - 18px);

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

    pointer-events: none;
}

.image-frame img {
    position: relative;

    z-index: 1;

    width: 100%;

    border-radius: var(--radius);
}


/* ==================================================
   COMMON CARD
================================================== */

.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);

    background: var(--white);
}


/* ==================================================
   UTILITIES
================================================== */

.d-flex {
    display: flex;
}

.d-block {
    display: block;
}

.d-inline-block {
    display: inline-block;
}

.d-none {
    display: none;
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.align-center {
    align-items: center;
}

.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.overflow-hidden {
    overflow: hidden;
}

.position-relative {
    position: relative;
}

.img-fluid {
    width: 100%;
    max-width: 100%;
    height: auto;

    display: block;
}


/* ==================================================
   FORMS
================================================== */

input,
textarea,
select {
    width: 100%;

    min-height: 52px;

    padding: 12px 16px;

    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: 0;

    background: var(--white);

    font-family: var(--body-font);
    font-size: 16px;
    font-weight: 400;

    color: var(--text);

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(6, 109, 4, 0.08);
}

textarea {
    min-height: 150px;

    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: #858585;

    opacity: 1;
}


/* ==================================================
   ACCESSIBILITY
================================================== */

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* ==================================================
   GLOBAL ICON LIST
   Reusable Figma list icon across the entire website
================================================== */

.icon-list {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.icon-list li {
    display: flex;
    align-items: center;

    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;

    font-size: 16px;
    line-height: 24px;

    color: var(--text);
}

.icon-list-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    border-radius: 50%;

    background: var(--primary);
}

.icon-list-icon img {
    display: block;

    width: 13px;
    height: 13px;

    object-fit: contain;
}

/* ==================================================
   GLOBAL FAQ
================================================== */

.faq-section .section-heading {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.faq-section .section-heading .section-label {
    margin-bottom: 20px;
}

.faq-section .section-heading h2 {
    margin: 0;
}

.faq-section .section-heading h2 span {
    font-family: var(--script-font);
    font-weight: 400;
    color: var(--primary);
}

.faq-section .section-heading p {
    max-width: 680px;

    margin: 18px auto 0;

    font-size: 16px;
    line-height: 26px;
    color: var(--text);
}


/* ==================================================
   FAQ LIST
================================================== */

.faq-list {
    width: 100%;
    max-width: 860px;

    margin: 38px auto 0;
}


/* ==================================================
   FAQ ITEM
================================================== */

.faq-item {
    margin-bottom: 20px;

    overflow: hidden;

    border: 1px solid var(--primary);
    border-radius: var(--radius);

    background: var(--white);

    box-shadow: 0 4px 4px #066D04;
}

.faq-item:last-child {
    margin-bottom: 0;
}


/* ==================================================
   FAQ QUESTION
================================================== */

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    width: 100%;
    min-height: 54px;

    margin: 0;
    padding: 14px 22px;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    color: var(--text);

    font-family: var(--body-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;

    text-align: left;

    cursor: pointer;

    transform: none;
}

.faq-question:hover {
    background: transparent;
    color: var(--text);
    transform: none;
}


/* ==================================================
   FAQ QUESTION TEXT
================================================== */

.faq-question-text {
    display: flex;
    align-items: flex-start;

    gap: 6px;
}

.faq-number {
    flex: 0 0 auto;
}


/* ==================================================
   FAQ PLUS / MINUS ICON
================================================== */

.faq-icon {
    position: relative;

    display: block;
    flex: 0 0 20px;

    width: 20px;
    height: 20px;
}

.faq-icon::before,
.faq-icon::after {
    content: '';

    position: absolute;

    top: 50%;
    left: 50%;

    background: var(--primary);

    transform: translate(-50%, -50%);

    transition: transform var(--transition);
}

.faq-icon::before {
    width: 16px;
    height: 2px;
}

.faq-icon::after {
    width: 2px;
    height: 16px;
}


/* Open = minus */

.faq-item.active .faq-icon::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}


/* ==================================================
   FAQ ANSWER
================================================== */

.faq-answer {
    max-height: 0;

    overflow: hidden;

    transition: max-height 0.3s ease;
}

.faq-answer-inner {
    padding: 0 22px 20px;
}

.faq-answer-inner p {
    max-width: 760px;

    margin: 0;

    font-size: 15px;
    line-height: 25px;

    color: var(--text);
}


/* ==================================================
   ACTIVE FAQ
================================================== */

.faq-item.active .faq-question {
    padding-bottom: 10px;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 991px) {

    .faq-list {
        max-width: 100%;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {

    .faq-section .section-heading p {
        font-size: 15px;
        line-height: 25px;
    }

    .faq-list {
        margin-top: 30px;
    }

    .faq-item {
        margin-bottom: 16px;
    }

    .faq-question {
        gap: 16px;

        padding: 14px 18px;

        font-size: 15px;
        line-height: 23px;
    }

    .faq-answer-inner {
        padding: 0 18px 18px;
    }

}


/* ==================================================
   SMALL MOBILE
================================================== */

@media (max-width: 575px) {

    .faq-question {
        padding: 13px 15px;
    }

    .faq-answer-inner {
        padding: 0 15px 16px;
    }

    .faq-icon {
        flex-basis: 18px;

        width: 18px;
        height: 18px;
    }

}


/* ==================================================
   GLOBAL FOOTER
================================================== */

.site-footer {
    position: relative;

    padding: 0 0 26px;

    background: var(--white);
}


/* ==================================================
   FOOTER WIDE CONTAINER
================================================== */

/* .site-footer > .container-wide {
    width: 100%;
    max-width: var(--container-wide);

    margin-left: auto;
    margin-right: auto;

    padding-left: 20px;
    padding-right: 20px;
} */


/* ==================================================
   FOOTER BOX
================================================== */

.footer-box {
    border: 1px solid var(--border);
    border-radius: var(--radius);

    background: var(--white);

    padding: 42px 48px 36px;
}


/* ==================================================
   FOOTER MAIN
================================================== */

.footer-main {
    display: grid;

    grid-template-columns: 280px minmax(0, 1fr);

    gap: 56px;

    align-items: center;
}


/* ==================================================
   FOOTER BRAND
================================================== */

.footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-brand .custom-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer-brand .custom-logo {
    width: auto;
    height: auto;

    max-width: 230px;
    max-height: 150px;

    object-fit: contain;
}

.footer-logo-text {
    font-family: var(--heading-font);

    font-size: 24px;
    font-weight: 700;
    line-height: 30px;

    color: var(--heading);

    text-align: center;
}


/* ==================================================
   FOOTER CONTENT
================================================== */

.footer-content {
    min-width: 0;
}


/* ==================================================
   FOOTER TOP CTA ROW
================================================== */

.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


/* ==================================================
   FOOTER CTA CONTENT
================================================== */

.footer-cta-content {
    max-width: 520px;
}

.footer-cta-title {
    margin: 0;

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

    font-size: 25px;
    font-weight: 400;
    line-height: 32px;

    color: var(--heading);
}

.footer-cta-content p {
    margin-top: 14px;

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

    font-size: 16px;
    font-weight: 500;
    line-height: 26px;

    color: var(--black);
}


/* ==================================================
   FOOTER ACTIONS
================================================== */

.footer-actions {
    display: flex;
    align-items: center;

    gap: 24px;

    flex-shrink: 0;
}


/* ==================================================
   FOOTER QUOTE BUTTON
================================================== */

.footer-actions .btn {
    min-height: 48px;

    padding: 12px 22px;

    font-size: 15px;
    font-weight: 600;
    line-height: 20px;

    white-space: nowrap;
}


/* ==================================================
   FOOTER PHONE
================================================== */

.footer-phone {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    color: var(--heading);
}

.footer-phone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    color: var(--primary);
}

.footer-phone-icon svg {
    width: 34px;
    height: 34px;
}

.footer-phone-content {
    display: flex;
    flex-direction: column;

    gap: 1px;
}

.footer-phone-label {
    font-family: var(--body-font);

    font-size: 13px;
    font-weight: 400;
    line-height: 18px;

    color: var(--text);
}

.footer-phone-content strong {
    font-family: var(--body-font);

    font-size: 15px;
    font-weight: 700;
    line-height: 20px;

    color: var(--heading);
}


/* ==================================================
   FOOTER DIVIDER
================================================== */

.footer-divider {
    width: 100%;
    height: 1px;

    margin: 28px 0 24px;

    background: var(--border);
}


/* ==================================================
   FOOTER LINKS GRID
================================================== */

.footer-links-grid {
    display: grid;

    grid-template-columns:
        minmax(150px, 1fr)
        minmax(260px, 1.45fr)
        minmax(170px, 1fr)
        minmax(160px, 0.9fr);

    gap: 38px;
}


/* ==================================================
   FOOTER COLUMN
================================================== */

.footer-column {
    min-width: 0;
}


/* ==================================================
   FOOTER HEADINGS
================================================== */

.footer-heading {
    margin: 0 0 9px;

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

    font-size: 25px;
    font-weight: 400;
    line-height: 31px;

    color: var(--primary);
}


/* ==================================================
   FOOTER LINKS
================================================== */

.footer-links {
    display: flex;
    flex-direction: column;

    gap: 3px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.footer-links li {
    margin: 0;
    padding: 0;
}

.footer-links a,
.footer-location {
    font-family: var(--body-font);

    font-size: 15px;
    font-weight: 500;
    line-height: 23px;

    color: var(--black);

    transition:
        color var(--transition),
        opacity var(--transition);
}

.footer-links a:hover {
    color: var(--primary);
}


/* ==================================================
   FOOTER LOCATION
================================================== */

.footer-location {
    margin: 0;
}


/* ==================================================
   FOOTER COPYRIGHT
================================================== */

.footer-copyright {
    padding-top: 18px;

    text-align: center;
}

.footer-copyright p {
    margin: 0;

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

    font-size: 14px;
    font-weight: 400;
    line-height: 22px;

    color: var(--text);
}


/* ==================================================
   ULTRA WIDE / 4K FOOTER
================================================== */

@media (min-width: 2500px) {

    .container-wide {
        max-width: calc(100vw - 80px);
    }

    .footer-box {
        padding-left: 70px;
        padding-right: 70px;
    }

}


/* ==================================================
   FOOTER - SMALL DESKTOP
================================================== */

@media (max-width: 1199px) {

    .footer-box {
        padding: 38px 38px 32px;
    }

    .footer-main {
        grid-template-columns: 220px minmax(0, 1fr);

        gap: 42px;
    }

    .footer-brand .custom-logo {
        max-width: 190px;
    }

    .footer-top {
        align-items: flex-start;
    }

    .footer-actions {
        gap: 18px;
    }

    .footer-links-grid {
        grid-template-columns:
            minmax(130px, 1fr)
            minmax(220px, 1.35fr)
            minmax(150px, 1fr)
            minmax(140px, 0.9fr);

        gap: 28px;
    }

}


/* ==================================================
   FOOTER - TABLET
================================================== */

@media (max-width: 991px) {

    .container-wide {
        padding-left: 20px;
        padding-right: 20px;
    }

    .footer-box {
        padding: 36px 30px 30px;
    }

    .footer-main {
        grid-template-columns: 1fr;

        gap: 34px;
    }

    .footer-brand {
        justify-content: flex-start;
    }

    .footer-brand .custom-logo {
        max-width: 190px;
    }

    .footer-top {
        flex-direction: column;
        align-items: flex-start;

        gap: 24px;
    }

    .footer-actions {
        flex-wrap: wrap;
    }

    .footer-links-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 30px 40px;
    }

}


/* ==================================================
   FOOTER - MOBILE
================================================== */

@media (max-width: 767px) {

    .site-footer {
        padding-bottom: 22px;
    }

    .container-wide {
        padding-left: 15px;
        padding-right: 15px;
    }

    .footer-box {
        padding: 30px 24px 28px;
    }

    .footer-main {
        gap: 30px;
    }

    .footer-brand .custom-logo {
        max-width: 170px;
    }

    .footer-cta-title {
        font-size: 23px;
        line-height: 30px;
    }

    .footer-cta-content p {
        margin-top: 12px;

        font-size: 15px;
        line-height: 24px;
    }

    .footer-actions {
        align-items: flex-start;
        flex-direction: column;
		width: 100%;
        gap: 18px;
    }

    .footer-divider {
        margin: 24px 0 22px;
    }

    .footer-links-grid {
        grid-template-columns: 1fr;

        gap: 24px;
    }

    .footer-heading {
        margin-bottom: 7px;

        font-size: 23px;
        line-height: 29px;
    }

    .footer-links a,
    .footer-location {
        font-size: 15px;
        line-height: 23px;
    }

    .footer-copyright {
        padding-top: 16px;
    }

    .footer-copyright p {
        font-size: 13px;
        line-height: 20px;
    }

}


/* ==================================================
   FOOTER - SMALL MOBILE
================================================== */

@media (max-width: 575px) {

    .footer-box {
        padding: 28px 20px 26px;
    }

    .footer-phone {
        align-items: flex-start;
    }

    .footer-phone-icon svg {
        width: 30px;
        height: 30px;
    }

}


/* ==================================================
   RESPONSIVE - LARGE DESKTOP
================================================== */

@media (max-width: 1399px) {

    :root {
        --container: 1140px;
    }

}


/* ==================================================
   RESPONSIVE - SMALL DESKTOP
================================================== */

@media (max-width: 1199px) {

    :root {
        --container: 960px;
        --section-space: 100px;
    }

    h1 {
        font-size: 56px;
        line-height: 56px;
    }

    h2 {
        font-size: 38px;
        line-height: 46px;
    }


    /* Header */

    .header-navigation-wrap {
        margin-left: 45px;
    }

    .header-contact-wrap {
        gap: 22px;

        margin-right: 45px;
    }

    .primary-menu > li:not(:last-child)::after {
        margin: 0 10px;
    }

    .primary-menu a {
        font-size: 12px;
    }

    .header-contact-item {
        font-size: 13px;
    }

}


/* ==================================================
   RESPONSIVE - TABLET
================================================== */

@media (max-width: 991px) {

    :root {
        --container: 720px;
        --section-space: 85px;
    }


    /* ------------------------------
       GRID
    ------------------------------ */

    .col-lg-1  { width: 8.333333%; }
    .col-lg-2  { width: 16.666667%; }
    .col-lg-3  { width: 25%; }
    .col-lg-4  { width: 33.333333%; }
    .col-lg-5  { width: 41.666667%; }
    .col-lg-6  { width: 50%; }
    .col-lg-7  { width: 58.333333%; }
    .col-lg-8  { width: 66.666667%; }
    .col-lg-9  { width: 75%; }
    .col-lg-10 { width: 83.333333%; }
    .col-lg-11 { width: 91.666667%; }
    .col-lg-12 { width: 100%; }


    /* ------------------------------
       TYPOGRAPHY
    ------------------------------ */

    h1 {
        font-size: 50px;
        line-height: 52px;
    }

    h2 {
        font-size: 36px;
        line-height: 44px;
    }

    .section-heading,
    .section-heading.text-center {
        margin-bottom: 55px;
    }


    /* ------------------------------
       HEADER
    ------------------------------ */

    .site-header {
        top: 20px;
    }

    .site-header > .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .header-inner {
        height: 100px;

        padding-top: 18px;
    }

    .header-navigation-wrap {
        display: none;
    }

    .desktop-navigation,
    .header-contact-wrap {
        display: none;
    }

    .header-logo-wrap {
        top: 0;
    }

    .header-logo-box {
        width: 145px;
        height: 100px;

        padding: 12px;
    }

    .header-logo-box .custom-logo {
        max-width: 122px;
        max-height: 78px;
    }
    /* ------------------------------
       MOBILE NAVIGATION
    ------------------------------ */

    .mobile-navigation {
        position: absolute;

        top: 22px;
        right: 24px;

        z-index: 110;

        display: block;

        pointer-events: auto;
    }

}


/* ==================================================
   RESPONSIVE - MOBILE
================================================== */

@media (max-width: 767px) {

    :root {
        --container: 540px;

        --section-space: 70px;

        --space-label-title: 10px;
        --space-title-content: 16px;
        --space-content-list: 20px;
        --space-list-button: 26px;
    }


    /* ------------------------------
       BODY
    ------------------------------ */

    body {
        font-size: 15px;
        line-height: 25px;
    }


    /* ------------------------------
       TYPOGRAPHY
    ------------------------------ */

    h1 {
        font-size: 42px;
        line-height: 44px;
    }

    h2 {
        font-size: 34px;
        line-height: 41px;
    }

    h3 {
        font-size: 27px;
        line-height: 34px;
    }

    h4 {
        font-size: 23px;
        line-height: 30px;
    }

    .section-label {
        font-size: 20px;
        line-height: 26px;
    }

    .hero-content > p,
    .hero-description {
        font-size: 19px;
        line-height: 26px;
    }


    /* ------------------------------
       GRID
    ------------------------------ */

    .col-md-1  { width: 8.333333%; }
    .col-md-2  { width: 16.666667%; }
    .col-md-3  { width: 25%; }
    .col-md-4  { width: 33.333333%; }
    .col-md-5  { width: 41.666667%; }
    .col-md-6  { width: 50%; }
    .col-md-7  { width: 58.333333%; }
    .col-md-8  { width: 66.666667%; }
    .col-md-9  { width: 75%; }
    .col-md-10 { width: 83.333333%; }
    .col-md-11 { width: 91.666667%; }
    .col-md-12 { width: 100%; }


    /* ------------------------------
       SECTION HEADINGS
    ------------------------------ */

    .section-heading,
    .section-heading.text-center {
        margin-bottom: 45px;
    }


    /* ------------------------------
       HEADER
    ------------------------------ */

    .site-header {
        top: 15px;
    }

    .site-header > .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .mobile-navigation {
        top: 20px;
        right: 20px;
    }

    .mobile-menu-panel {
        padding:
            105px
            24px
            35px;
    }

}


/* ==================================================
   RESPONSIVE - SMALL MOBILE
================================================== */

@media (max-width: 575px) {

    :root {
        --container: 100%;
        --gutter: 20px;

        --section-space: 60px;
    }


    /* ------------------------------
       GRID
    ------------------------------ */

    [class*="col-"] {
        width: 100%;
    }


    /* ------------------------------
       TYPOGRAPHY
    ------------------------------ */

    h1 {
        font-size: 36px;
        line-height: 39px;
    }

    h2 {
        font-size: 30px;
        line-height: 37px;
    }

    h3 {
        font-size: 25px;
        line-height: 31px;
    }

    .section-label {
        font-size: 19px;
        line-height: 25px;
    }

    .hero-content > p,
    .hero-description {
        font-size: 18px;
        line-height: 25px;
    }


    /* ------------------------------
       BUTTON
    ------------------------------ */

    .btn,
    button,
    input[type="submit"] {
        min-height: 46px;

        padding: 11px 19px;

        font-size: 14px;
    }


    /* ------------------------------
       MOBILE HEADER
    ------------------------------ */

    .header-logo-box {
        width: 132px;
        height: 94px;
    }

    .header-logo-box .custom-logo {
        max-width: 112px;
        max-height: 72px;
    }
    .mobile-navigation {
        top: 20px;
        right: 20px;
    }

    .mobile-navigation > summary {
        width: 44px;
        height: 44px;
    }

    .mobile-navigation[open] > summary {
        top: 24px;
        right: 24px;
    }

    .mobile-menu-panel {
        padding:
            95px
            24px
            30px;
    }

    .mobile-menu > li > a {
        padding: 15px 0;

        font-size: 16px;
        line-height: 24px;
    }

    .mobile-menu .sub-menu a {
        font-size: 14px;
        line-height: 22px;
    }
	
	.btn {
    	width: 100% !important;
	}

}


/* ==================================================
   RESPONSIVE - VERY SMALL MOBILE
================================================== */

@media (max-width: 380px) {

    .mobile-menu-panel {
        padding-left: 20px;
        padding-right: 20px;
    }

    .mobile-navigation[open] > summary {
        top: 20px;
        right: 20px;
    }

    h1 {
        font-size: 32px;
        line-height: 36px;
    }

    h2 {
        font-size: 28px;
        line-height: 35px;
    }

}

/* ==================================================
   REQUEST A QUOTE POPUP
================================================== */

.quote-popup {
    position: fixed;
    inset: 0;

    z-index: 99990;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: var(--space-lg);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity var(--transition),
        visibility var(--transition);
}

.quote-popup.is-open {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


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

.quote-popup-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.72);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* ==================================================
   POPUP DIALOG
================================================== */

.quote-popup-dialog {
    position: relative;
    z-index: 2;

    width: min(100%, 680px);
    max-height: calc(100vh - 60px);

    overflow-y: auto;

    padding: var(--space-xl);

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

    background: var(--white);

    box-shadow:
        10px 10px 0 rgba(6, 109, 4, 0.9);

    transform: translateY(20px) scale(0.98);

    transition: transform var(--transition);
}

.quote-popup.is-open .quote-popup-dialog {
    transform: translateY(0) scale(1);
}


/* ==================================================
   CLOSE BUTTON
================================================== */

.quote-popup-close {
    position: absolute;

    top: var(--space-md);
    right: var(--space-md);

    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

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

    font-size: 28px;
    line-height: 1;

    cursor: pointer;

    transition:
        background var(--transition),
        transform var(--transition);
}

.quote-popup-close:hover {
    background: var(--primary-dark);

    transform: rotate(90deg);
}


/* ==================================================
   POPUP HEADING
================================================== */

.quote-popup-heading {
    max-width: 550px;

    margin:
        0
        auto
        var(--space-xl);

    padding-right: var(--space-xl);

    text-align: center;
}

.quote-popup-heading .section-label {
    margin-bottom: var(--space-label-title);
}

.quote-popup-heading h2 {
    margin: 0;
}

.quote-popup-heading p {
    margin-top: var(--space-title-content);
}


/* ==================================================
   FORMIDABLE RESET
================================================== */

.quote-popup-form .frm_forms,
.quote-popup-form .frm_form_fields,
.quote-popup-form fieldset {
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}

.quote-popup-form legend {
    display: none !important;
}


/* ==================================================
   FORM GRID
================================================== */

.quote-popup-form .frm_fields_container {
    display: grid;

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

    gap:
        0
        var(--space-md);
}


/* Full width fields */

.quote-popup-form .frm_form_field {
    grid-column: 1 / -1;

    margin-bottom: var(--space-md) !important;
}


/* First / Last name */

.quote-popup-form .frm_first,
.quote-popup-form .frm_last,
.quote-popup-form .frm_half {
    grid-column: span 1;
}


/* ==================================================
   LABELS
================================================== */

.quote-popup-form .frm_primary_label {
    display: block;

    margin-bottom: var(--space-xs) !important;

    font-family: var(--body-font) !important;
    font-weight: 400 !important;

    color: var(--text) !important;
}


/* ==================================================
   INPUTS
================================================== */

.quote-popup-form input[type="text"],
.quote-popup-form input[type="email"],
.quote-popup-form input[type="tel"],
.quote-popup-form input[type="number"],
.quote-popup-form input[type="url"],
.quote-popup-form select,
.quote-popup-form textarea {
    width: 100% !important;

    margin: 0 !important;

    border: 1px solid var(--border) !important;
    border-radius: 12px !important;

    background: var(--white) !important;

    color: var(--text) !important;

    font-family: var(--body-font) !important;

    box-shadow: none !important;
    outline: none !important;

    transition:
        border-color var(--transition),
        box-shadow var(--transition) !important;
}


.quote-popup-form input[type="text"],
.quote-popup-form input[type="email"],
.quote-popup-form input[type="tel"],
.quote-popup-form input[type="number"],
.quote-popup-form input[type="url"],
.quote-popup-form select {
    min-height: 48px !important;

    padding:
        10px
        14px !important;
}


.quote-popup-form textarea {
    min-height: 150px !important;

    padding: 14px !important;

    resize: vertical;
}


/* ==================================================
   FOCUS
================================================== */

.quote-popup-form input:focus,
.quote-popup-form select:focus,
.quote-popup-form textarea:focus {
    border-color: var(--primary) !important;

    box-shadow:
        0 0 0 2px rgba(6, 109, 4, 0.08) !important;
}


/* ==================================================
   SUB LABELS
================================================== */

.quote-popup-form .frm_description {
    color: rgba(78, 78, 78, 0.55) !important;
}


/* ==================================================
   SUBMIT
================================================== */

.quote-popup-form .frm_submit {
    grid-column: 1 / -1;

    margin-top: var(--space-xs);
}


.quote-popup-form .frm_button_submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 46px !important;

    margin: 0 !important;

    padding:
        11px
        22px !important;

    border: 0 !important;
    border-radius: 999px !important;

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

    font-family: var(--body-font) !important;
    font-weight: 600 !important;

    box-shadow: none !important;

    cursor: pointer;

    transition:
        background var(--transition),
        transform var(--transition) !important;
}


.quote-popup-form .frm_button_submit:hover {
    transform: translateY(-1px);

    background: var(--primary-dark) !important;
}


/* ==================================================
   BODY STATE
================================================== */

body.quote-popup-open {
    overflow: hidden;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {

    .quote-popup {
        padding: var(--space-md);
    }

    .quote-popup-dialog {
        max-height: calc(100vh - 30px);

        padding: var(--space-lg);

        box-shadow:
            6px 6px 0 rgba(6, 109, 4, 0.9);
    }

    .quote-popup-heading {
        padding-right: 0;

        margin-bottom: var(--space-lg);
    }

    .quote-popup-form .frm_fields_container {
        grid-template-columns: 1fr;
    }

    .quote-popup-form .frm_first,
    .quote-popup-form .frm_last,
    .quote-popup-form .frm_half {
        grid-column: 1 / -1;
    }

    .quote-popup-close {
        width: 44px;
        height: 44px;

        font-size: 24px;
    }

}


/* ==================================================
   SMALL MOBILE
================================================== */

@media (max-width: 575px) {

    .quote-popup {
        padding: var(--space-sm);
    }

    .quote-popup-dialog {
        padding:
            var(--space-xl)
            var(--space-md)
            var(--space-md);
    }

    .quote-popup-form textarea {
        min-height: 130px !important;
    }

}