/* =========================================
   BURBANK GARAGE DOOR CA
   LUXURY NAVBAR
========================================= */

:root {
    --primary: #243B35;
    --secondary: #607C6C;
    --accent: #B69A62;
    --light-green: #DCE4DD;
    --cream: #F5F1E8;
    --beige: #E8E1D5;
    --text: #292C2A;
    --white: #FFFFFF;
}


/* =========================================================
   BURBANK GARAGE DOOR CA
   DARK LUXURY TOPBAR
========================================================= */

.bgd-topbar {
    position: relative;
    z-index: 1050;
    min-height: 48px;
    overflow: hidden;

    background: #101816;
    color: #e8e5dc;

    border-bottom: 1px solid rgba(182, 154, 98, 0.22);
}

/* ---------------------------------------------------------
   DARK PATTERN
--------------------------------------------------------- */

.bgd-topbar-pattern {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.bgd-topbar-pattern::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            135deg,
            transparent 0%,
            transparent 47%,
            rgba(182, 154, 98, 0.07) 47.2%,
            rgba(182, 154, 98, 0.07) 47.5%,
            transparent 47.7%,
            transparent 100%
        );

    background-size: 95px 48px;
}

.bgd-topbar-pattern::after {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            90deg,
            rgba(96, 124, 108, 0.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            0deg,
            rgba(96, 124, 108, 0.05) 1px,
            transparent 1px
        );

    background-size: 38px 38px;

    opacity: 0.55;
}

.bgd-topbar-angle {
    position: absolute;

    width: 420px;
    height: 150px;

    top: -80px;
    right: 8%;

    background: #1b2924;

    transform: skewX(-28deg);

    border-left: 1px solid rgba(182, 154, 98, 0.18);
    border-right: 1px solid rgba(182, 154, 98, 0.08);

    opacity: 0.8;

    animation: bgdTopAngleMove 8s ease-in-out infinite alternate;
}

@keyframes bgdTopAngleMove {
    from {
        transform: translateX(-35px) skewX(-28deg);
    }

    to {
        transform: translateX(35px) skewX(-28deg);
    }
}


/* ---------------------------------------------------------
   DECORATIVE LINES
--------------------------------------------------------- */

.bgd-topbar-line {
    position: absolute;
    height: 1px;

    background: #b69a62;

    opacity: 0.35;
}

.bgd-topbar-line-1 {
    width: 130px;
    top: 13px;
    left: 5%;

    transform: rotate(-16deg);
}

.bgd-topbar-line-2 {
    width: 90px;
    bottom: 9px;
    right: 18%;

    transform: rotate(-16deg);

    opacity: 0.2;
}

.bgd-topbar-dot {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #b69a62;

    box-shadow:
        0 0 8px rgba(182, 154, 98, 0.7);
}

.bgd-topbar-dot-1 {
    left: 18%;
    top: 12px;
}

.bgd-topbar-dot-2 {
    right: 27%;
    bottom: 11px;
}


/* ---------------------------------------------------------
   INNER
--------------------------------------------------------- */

.bgd-topbar-inner {
    position: relative;
    z-index: 2;

    min-height: 48px;

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

    gap: 20px;
}


/* ---------------------------------------------------------
   WORKING HOURS
--------------------------------------------------------- */

.bgd-topbar-hours {
    display: flex;
    align-items: center;
    gap: 10px;

    white-space: nowrap;
}

.bgd-topbar-icon {
    width: 30px;
    height: 30px;

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

    border: 1px solid rgba(182, 154, 98, 0.45);

    color: #d0b77a;

    background: rgba(36, 59, 53, 0.65);

    transform: rotate(45deg);
}

.bgd-topbar-icon i {
    transform: rotate(-45deg);
    font-size: 13px;
}

.bgd-topbar-hours span:last-child {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bgd-topbar-hours small {
    color: #8f9b94;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.bgd-topbar-hours strong {
    color: #e8e5dc;

    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
}


/* ---------------------------------------------------------
   SOCIAL
--------------------------------------------------------- */

.bgd-topbar-social {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;
}

.bgd-topbar-follow {
    margin-right: 4px;

    color: #89958e;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.bgd-social-link {
    width: 28px;
    height: 28px;

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

    color: #b9c1bc;

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

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

    text-decoration: none;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.bgd-social-link i {
    font-size: 12px;
}

.bgd-social-link:hover {
    color: #101816;

    background: #b69a62;

    border-color: #b69a62;

    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   BLOG
--------------------------------------------------------- */

.bgd-blog-link {
    height: 28px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-left: 4px;
    padding: 0 10px;

    color: #d0b77a;

    border-left: 1px solid rgba(182, 154, 98, 0.25);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;

    text-decoration: none;

    transition:
        color 0.25s ease,
        background 0.25s ease;
}

.bgd-blog-link i {
    font-size: 12px;
}

.bgd-blog-link:hover {
    color: #ffffff;
}


/* ---------------------------------------------------------
   SAME DAY SERVICE
--------------------------------------------------------- */

.bgd-topbar-sameday {
    position: relative;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 6px 13px;

    background: #243b35;

    border-left: 2px solid #b69a62;

    clip-path: polygon(
        8px 0,
        100% 0,
        100% 100%,
        0 100%,
        0 8px
    );

    box-shadow:
        inset 0 0 0 1px rgba(182, 154, 98, 0.08);
}

.bgd-topbar-sameday > i {
    color: #d0b77a;

    font-size: 16px;

    animation: bgdLightning 1.8s ease-in-out infinite;
}

@keyframes bgdLightning {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.75;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

.bgd-topbar-sameday span:last-child {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bgd-topbar-sameday small {
    color: #8f9b94;

    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.bgd-topbar-sameday strong {
    color: #ffffff;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}


/* ---------------------------------------------------------
   PULSE DOT
--------------------------------------------------------- */

.bgd-sameday-pulse {
    position: absolute;

    width: 6px;
    height: 6px;

    top: 7px;
    left: 7px;

    border-radius: 50%;

    background: #b69a62;

    box-shadow:
        0 0 0 0 rgba(182, 154, 98, 0.65);

    animation: bgdSameDayPulse 2s infinite;
}

@keyframes bgdSameDayPulse {
    0% {
        box-shadow:
            0 0 0 0 rgba(182, 154, 98, 0.55);
    }

    70% {
        box-shadow:
            0 0 0 8px rgba(182, 154, 98, 0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(182, 154, 98, 0);
    }
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .bgd-topbar-inner {
        justify-content: center;
    }

    .bgd-topbar-hours {
        display: none;
    }

    .bgd-topbar-social {
        margin-left: auto;
    }

    .bgd-topbar-sameday {
        margin-left: auto;
    }

}


@media (max-width: 767.98px) {

    .bgd-topbar {
        min-height: 44px;
    }

    .bgd-topbar-inner {
        min-height: 44px;

        gap: 10px;
    }

    .bgd-topbar-follow {
        display: none;
    }

    .bgd-social-link {
        width: 27px;
        height: 27px;
    }

    .bgd-blog-link {
        padding: 0 7px;
        margin-left: 0;
    }

    .bgd-topbar-sameday {
        padding: 5px 9px;
    }

    .bgd-topbar-sameday small {
        display: none;
    }

    .bgd-topbar-sameday strong {
        font-size: 9px;
    }

    .bgd-topbar-sameday > i {
        font-size: 14px;
    }

}


@media (max-width: 575.98px) {

    .bgd-topbar-inner {
        justify-content: space-between;
    }

    .bgd-topbar-social {
        gap: 4px;
    }

    .bgd-social-link {
        width: 25px;
        height: 25px;
    }

    .bgd-social-link i {
        font-size: 11px;
    }

    .bgd-blog-link {
        display: none;
    }

    .bgd-topbar-sameday {
        padding: 5px 8px;
    }

    .bgd-topbar-sameday strong {
        font-size: 8px;
        letter-spacing: 0;
    }

}


@media (max-width: 380px) {

    .bgd-topbar-social .bgd-social-link:nth-of-type(4),
    .bgd-topbar-social .bgd-social-link:nth-of-type(5) {
        display: none;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

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

    .bgd-topbar-angle,
    .bgd-topbar-sameday > i,
    .bgd-sameday-pulse {
        animation: none !important;
    }

    .bgd-social-link {
        transition: none;
    }

}


/* =========================================================
   LARGER TOPBAR TEXT
========================================================= */

/* Working Hours */
.bgd-topbar-hours small {
    font-size: 10px;
    letter-spacing: 1.8px;
}

.bgd-topbar-hours strong {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
}


/* Follow Us */
.bgd-topbar-follow {
    font-size: 11px;
    letter-spacing: 1.4px;
}


/* Social Icons */
.bgd-social-link {
    width: 32px;
    height: 32px;
}

.bgd-social-link i {
    font-size: 14px;
}


/* Blog */
.bgd-blog-link {
    height: 32px;
    padding: 0 12px;

    font-size: 12px;
    letter-spacing: 0.9px;
}

.bgd-blog-link i {
    font-size: 14px;
}


/* Same Day Service */
.bgd-topbar-sameday {
    padding: 8px 15px;
}

.bgd-topbar-sameday small {
    font-size: 9px;
    letter-spacing: 1.6px;
}

.bgd-topbar-sameday strong {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.bgd-topbar-sameday > i {
    font-size: 18px;
}


/* Larger Mobile Text */
@media (max-width: 767.98px) {

    .bgd-social-link {
        width: 30px;
        height: 30px;
    }

    .bgd-social-link i {
        font-size: 13px;
    }

    .bgd-topbar-sameday {
        padding: 7px 11px;
    }

    .bgd-topbar-sameday strong {
        font-size: 11px;
    }

    .bgd-topbar-sameday > i {
        font-size: 16px;
    }
}


@media (max-width: 575.98px) {

    .bgd-topbar-sameday strong {
        font-size: 10px;
    }

    .bgd-social-link {
        width: 28px;
        height: 28px;
    }

    .bgd-social-link i {
        font-size: 12px;
    }
}







/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* =========================================
   NAVBAR
========================================= */

.bgd-navbar {
    position: relative;
    z-index: 9999;
    background: var(--white);
    border-bottom: 1px solid rgba(36, 59, 53, 0.12);
    box-shadow: 0 5px 25px rgba(36, 59, 53, 0.07);
}

.bgd-navbar .container {
    min-height: 88px;
}


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

.bgd-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.bgd-logo img {
    display: block;
    width: 205px;
    height: auto;
    max-height: 70px;
    object-fit: contain;
}


/* =========================================
   NAVIGATION
========================================= */

.bgd-navbar .navbar-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bgd-navbar .nav-link {
    position: relative;
    padding: 32px 12px !important;
    color: var(--primary);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.2px;
    white-space: nowrap;
    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}

.bgd-navbar .nav-link:hover,
.bgd-navbar .nav-link:focus,
.bgd-navbar .nav-link.active {
    color: var(--accent);
}


/* =========================================
   GOLD UNDERLINE
========================================= */

.bgd-navbar .nav-link::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 22px;
    left: 12px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

.bgd-navbar .nav-link:hover::after,
.bgd-navbar .nav-link.active::after {
    transform: scaleX(1);
}


/* =========================================
   SERVICES DOWN ARROW
========================================= */

.bgd-navbar .dropdown-toggle::after {
    display: none !important;
}

.bgd-navbar .services-arrow {
    display: inline-block;
    margin-left: 5px;
    color: var(--accent);
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    vertical-align: 1px;
    transition:
        transform 0.25s ease,
        color 0.25s ease;
}

.bgd-navbar .dropdown-toggle:hover .services-arrow {
    color: var(--primary);
}

.bgd-navbar .dropdown.show .services-arrow {
    transform: rotate(180deg);
}


/* =========================================
   DROPDOWN MENU
========================================= */

.bgd-navbar .dropdown-menu {
    min-width: 235px;
    margin-top: 0;
    padding: 10px;
    background: var(--white);
    border: 1px solid rgba(36, 59, 53, 0.10);
    border-top: 3px solid var(--accent);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 18px 40px rgba(36, 59, 53, 0.15);
}

.bgd-navbar .dropdown-item {
    display: flex;
    align-items: center;
    padding: 11px 14px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 6px;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        padding-left 0.2s ease;
}

.bgd-navbar .dropdown-item:hover,
.bgd-navbar .dropdown-item:focus {
    padding-left: 18px;
    color: var(--primary);
    background: var(--light-green);
}

.bgd-navbar .dropdown-item i {
    width: 22px;
    margin-right: 5px;
    color: var(--accent);
    font-size: 15px;
    text-align: center;
}


/* =========================================
   FREE ESTIMATE BUTTON
========================================= */

.bgd-nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    padding: 13px 22px;
    color: var(--white) !important;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.3px;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.bgd-nav-cta:hover {
    color: var(--primary) !important;
    background: var(--accent);
    border-color: var(--accent);
    transform: translateY(-1px);
}


/* =========================================
   RESPONSIVE TOGGLE
   HIDDEN ON LARGE SCREENS
========================================= */

.bgd-navbar .navbar-toggler {
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 42px;
    padding: 0;
    background: var(--cream);
    border: 1px solid rgba(36, 59, 53, 0.20);
    border-radius: 5px;
    box-shadow: none !important;
}

.bgd-navbar .navbar-toggler:hover {
    background: var(--light-green);
    border-color: var(--secondary);
}

.bgd-navbar .navbar-toggler:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(182, 154, 98, 0.15) !important;
}

.bgd-navbar .navbar-toggler-icon {
    width: 22px;
    height: 22px;
}


/* =========================================
   LARGE TABLET / SMALL DESKTOP
========================================= */

@media (max-width: 1199.98px) {

    .bgd-navbar .nav-link {
        padding-right: 9px !important;
        padding-left: 9px !important;
        font-size: 14px;
    }

    .bgd-navbar .nav-link::after {
        right: 9px;
        left: 9px;
    }

    .bgd-logo img {
        width: 180px;
    }

    .bgd-nav-cta {
        margin-left: 8px;
        padding: 11px 15px;
        font-size: 13px;
    }
}


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

@media (max-width: 991.98px) {

    .bgd-navbar .container {
        min-height: 76px;
    }

    .bgd-logo img {
        width: 190px;
        max-height: 62px;
    }


    /* SHOW TOGGLE BELOW 992PX */

    .bgd-navbar .navbar-toggler {
        display: flex;
    }


    /* MOBILE NAVIGATION */

    .bgd-navbar .navbar-collapse {
        margin-top: 12px;
        padding: 12px 0 18px;
        background: var(--white);
        border-top: 1px solid rgba(36, 59, 53, 0.10);
    }


    /* STACK LINKS */

    .bgd-navbar .navbar-nav {
        display: block;
        width: 100%;
    }

    .bgd-navbar .nav-item {
        width: 100%;
    }

    .bgd-navbar .nav-link {
        display: block;
        width: 100%;
        padding: 14px 14px !important;
        font-size: 15px;
        border-bottom: 1px solid rgba(36, 59, 53, 0.07);
    }

    .bgd-navbar .nav-link::after {
        display: none;
    }

    .bgd-navbar .nav-link:hover,
    .bgd-navbar .nav-link:focus,
    .bgd-navbar .nav-link.active {
        padding-left: 18px !important;
        color: var(--primary);
        background: var(--light-green);
    }


    /* MOBILE SERVICES ARROW */

    .bgd-navbar .services-arrow {
        margin-left: 6px;
        font-size: 17px;
    }


    /* MOBILE DROPDOWN */

    .bgd-navbar .dropdown-menu {
        min-width: 0;
        margin: 0 12px 8px;
        padding: 7px;
        background: var(--cream);
        border: 1px solid rgba(36, 59, 53, 0.10);
        border-top: 2px solid var(--accent);
        border-radius: 6px;
        box-shadow: none;
    }

    .bgd-navbar .dropdown-item {
        padding: 11px 13px;
        font-size: 14px;
    }

    .bgd-navbar .dropdown-item:hover {
        padding-left: 17px;
    }


    /* MOBILE FREE ESTIMATE */

    .bgd-nav-cta {
        display: flex;
        width: 100%;
        margin: 15px 0 0;
        padding: 13px 18px;
        font-size: 14px;
    }
}


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

@media (max-width: 575.98px) {

    .bgd-navbar .container {
        min-height: 70px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .bgd-logo img {
        width: 170px;
        max-height: 58px;
    }

    .bgd-navbar .navbar-toggler {
        width: 43px;
        height: 40px;
    }

    .bgd-navbar .navbar-collapse {
        margin-top: 8px;
    }
}


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

@media (max-width: 380px) {

    .bgd-logo img {
        width: 150px;
    }

    .bgd-navbar .navbar-toggler {
        width: 40px;
        height: 40px;
    }

    .bgd-navbar .nav-link {
        font-size: 14px;
    }
}


/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

/* =========================================================
   BURBANK GARAGE DOOR CA
   DARK ANGLED LUXURY HERO
========================================================= */

.bgd-dark-hero {

    --dark-bg: #101816;
    --dark-bg-2: #14201C;
    --dark-bg-3: #1B2924;

    --dark-green: #243B35;
    --dark-sage: #607C6C;

    --dark-gold: #B69A62;
    --dark-gold-light: #D0B77A;

    --dark-text: #E8E5DC;
    --dark-muted: #AEB6B0;

    --dark-white: #FFFFFF;

    position: relative;

    overflow: hidden;

    min-height: 850px;

    background:
        #101816;

    padding:
        95px 0 135px;
}


/* =========================================================
   ANGLED BACKGROUND MASTER
========================================================= */

.bgd-angle-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

    background:
        #101816;
}


/* =========================================================
   ANGLED COLOR PLANES
========================================================= */

.bgd-angle-plane {

    position: absolute;

    pointer-events: none;
}


/* Deep forest plane */

.bgd-angle-plane-1 {

    top: -20%;

    left: -15%;

    width: 78%;

    height: 145%;

    background:
        #17231F;

    transform:
        rotate(-8deg);

    transform-origin:
        center;

    opacity: 0.95;
}


/* Sage / green architectural plane */

.bgd-angle-plane-2 {

    top: -25%;

    left: 31%;

    width: 46%;

    height: 150%;

    background:
        #1D3029;

    transform:
        skewX(-14deg)
        rotate(-3deg);

    opacity: 0.68;

    animation:
        bgdAnglePlaneTwo
        14s
        ease-in-out
        infinite
        alternate;
}


@keyframes bgdAnglePlaneTwo {

    0% {

        transform:
            skewX(-14deg)
            rotate(-3deg)
            translateX(0);
    }

    100% {

        transform:
            skewX(-14deg)
            rotate(-3deg)
            translateX(35px);
    }
}


/* Right dark plane */

.bgd-angle-plane-3 {

    top: -25%;

    right: -20%;

    width: 58%;

    height: 155%;

    background:
        #0C1210;

    transform:
        skewX(-13deg);

    opacity: 0.95;
}


/* =========================================================
   THIN GOLD ANGLED ACCENT
========================================================= */

.bgd-angle-gold {

    position: absolute;

    top: -20%;

    left: 66%;

    width: 2px;

    height: 145%;

    background:
        var(--dark-gold);

    opacity: 0.20;

    transform:
        rotate(17deg);

    box-shadow:
        0 0 18px
        rgba(182,154,98,0.18);

    animation:
        bgdGoldDiagonal
        8s
        ease-in-out
        infinite;
}


@keyframes bgdGoldDiagonal {

    0%,
    100% {

        opacity:
            0.08;

        transform:
            rotate(17deg)
            translateX(-15px);
    }

    50% {

        opacity:
            0.28;

        transform:
            rotate(17deg)
            translateX(20px);
    }
}


/* =========================================================
   LARGE GEOMETRIC PANEL
========================================================= */

.bgd-angle-panel {

    position: absolute;

    top: 5%;

    right: -12%;

    width: 55%;

    height: 90%;

    border:
        1px solid
        rgba(182,154,98,0.10);

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

    transform:
        skewX(-13deg);

    box-shadow:
        inset 0 0 100px
        rgba(182,154,98,0.015);

    animation:
        bgdAnglePanel
        12s
        ease-in-out
        infinite
        alternate;
}


@keyframes bgdAnglePanel {

    0% {

        transform:
            skewX(-13deg)
            translateX(0);
    }

    100% {

        transform:
            skewX(-13deg)
            translateX(-25px);
    }
}


/* =========================================================
   LARGE TECHNICAL GRID
========================================================= */

.bgd-dark-grid {

    position: absolute;

    inset: 0;

    opacity: 0.28;

    background-image:

        linear-gradient(
            rgba(182,154,98,0.055) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(182,154,98,0.055) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

    animation:
        bgdDarkGridMove
        24s
        linear
        infinite;

    mask-image:
        linear-gradient(
            90deg,
            black 0%,
            rgba(0,0,0,0.85) 55%,
            transparent 100%
        );
}


@keyframes bgdDarkGridMove {

    0% {

        background-position:
            0 0,
            0 0;
    }

    100% {

        background-position:
            80px 80px,
            80px 80px;
    }
}


/* =========================================================
   FINE PERSPECTIVE GRID
========================================================= */

.bgd-dark-fine-grid {

    position: absolute;

    inset:
        -100px;

    opacity:
        0.10;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        );

    background-size:
        25px 25px;

    transform:
        perspective(600px)
        rotateX(60deg)
        translateY(-100px)
        scale(1.8);

    transform-origin:
        center bottom;

    animation:
        bgdFineGrid
        18s
        linear
        infinite;
}


@keyframes bgdFineGrid {

    0% {

        background-position:
            0 0,
            0 0;
    }

    100% {

        background-position:
            0 100px,
            0 100px;
    }
}


/* =========================================================
   GARAGE DOOR PANEL PATTERN
========================================================= */

.bgd-dark-door-pattern {

    position: absolute;

    top:
        -80px;

    right:
        -170px;

    width:
        760px;

    height:
        900px;

    opacity:
        0.12;

    transform:
        perspective(1000px)
        rotateY(-18deg)
        rotateZ(-3deg);

    animation:
        bgdDoorFloat
        14s
        ease-in-out
        infinite
        alternate;
}


.bgd-dark-door-pattern span {

    position: relative;

    display: block;

    width: 100%;

    height: 112px;

    margin-bottom: 12px;

    border:
        1px solid
        rgba(182,154,98,0.22);

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


.bgd-dark-door-pattern span::before {

    content: "";

    position: absolute;

    top: 14px;
    right: 14px;
    bottom: 14px;
    left: 14px;

    border:
        1px solid
        rgba(96,124,108,0.16);
}


.bgd-dark-door-pattern span::after {

    content: "";

    position: absolute;

    top: 50%;

    left: 5%;

    width: 90%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(182,154,98,0.22),
            transparent
        );

    transform:
        scaleX(0);

    animation:
        bgdPanelLine
        5s
        ease-in-out
        infinite;
}


.bgd-dark-door-pattern span:nth-child(2)::after {
    animation-delay: .7s;
}

.bgd-dark-door-pattern span:nth-child(3)::after {
    animation-delay: 1.4s;
}

.bgd-dark-door-pattern span:nth-child(4)::after {
    animation-delay: 2.1s;
}

.bgd-dark-door-pattern span:nth-child(5)::after {
    animation-delay: 2.8s;
}

.bgd-dark-door-pattern span:nth-child(6)::after {
    animation-delay: 3.5s;
}

.bgd-dark-door-pattern span:nth-child(7)::after {
    animation-delay: 4.2s;
}


@keyframes bgdPanelLine {

    0%,
    100% {

        opacity:
            0;

        transform:
            scaleX(0);
    }

    45% {

        opacity:
            1;

        transform:
            scaleX(1);
    }

    70% {

        opacity:
            0;

        transform:
            scaleX(1);
    }
}


@keyframes bgdDoorFloat {

    0% {

        transform:
            perspective(1000px)
            rotateY(-18deg)
            rotateZ(-3deg)
            translateY(0);
    }

    100% {

        transform:
            perspective(1000px)
            rotateY(-18deg)
            rotateZ(-3deg)
            translateY(30px);
    }
}


/* =========================================================
   LARGE ORBS
========================================================= */

.bgd-dark-orb {

    position: absolute;

    border-radius:
        50%;

    border:
        1px solid
        rgba(182,154,98,0.16);

    box-shadow:
        0 0 80px
        rgba(182,154,98,0.035),

        inset 0 0 80px
        rgba(182,154,98,0.025);
}


.bgd-dark-orb-1 {

    width:
        650px;

    height:
        650px;

    right:
        -330px;

    top:
        -210px;

    animation:
        bgdOrbFloat
        15s
        ease-in-out
        infinite
        alternate;
}


.bgd-dark-orb-2 {

    width:
        390px;

    height:
        390px;

    left:
        -250px;

    bottom:
        -250px;

    border-color:
        rgba(96,124,108,0.14);

    animation:
        bgdOrbFloat
        12s
        ease-in-out
        infinite
        alternate-reverse;
}


@keyframes bgdOrbFloat {

    0% {

        transform:
            scale(1)
            rotate(0deg);
    }

    100% {

        transform:
            scale(1.08)
            rotate(10deg);
    }
}


/* =========================================================
   MOVING DIAGONAL BEAMS
========================================================= */

.bgd-dark-beam {

    position: absolute;

    width:
        600px;

    height:
        1px;

    opacity:
        0.16;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--dark-gold),
            transparent
        );

    transform-origin:
        center;
}


.bgd-dark-beam-1 {

    top:
        25%;

    left:
        -200px;

    transform:
        rotate(-28deg);

    animation:
        bgdBeamOne
        9s
        ease-in-out
        infinite;
}


.bgd-dark-beam-2 {

    top:
        70%;

    right:
        -250px;

    transform:
        rotate(-32deg);

    animation:
        bgdBeamTwo
        11s
        ease-in-out
        infinite;
}


.bgd-dark-beam-3 {

    top:
        46%;

    left:
        35%;

    width:
        420px;

    transform:
        rotate(38deg);

    opacity:
        0.08;

    animation:
        bgdBeamThree
        8s
        ease-in-out
        infinite;
}


@keyframes bgdBeamOne {

    0%,
    100% {

        opacity:
            0.04;

        transform:
            rotate(-28deg)
            translateX(-80px);
    }

    50% {

        opacity:
            0.22;

        transform:
            rotate(-28deg)
            translateX(180px);
    }
}


@keyframes bgdBeamTwo {

    0%,
    100% {

        opacity:
            0.04;

        transform:
            rotate(-32deg)
            translateX(80px);
    }

    50% {

        opacity:
            0.20;

        transform:
            rotate(-32deg)
            translateX(-180px);
    }
}


@keyframes bgdBeamThree {

    0%,
    100% {

        opacity:
            0.03;

        transform:
            rotate(38deg)
            translateX(-50px);
    }

    50% {

        opacity:
            0.14;

        transform:
            rotate(38deg)
            translateX(100px);
    }
}


/* =========================================================
   TECHNICAL CIRCLES
========================================================= */

.bgd-tech-circle {

    position: absolute;

    border:
        1px dashed
        rgba(182,154,98,0.14);

    border-radius:
        50%;
}


.bgd-tech-circle-1 {

    width:
        260px;

    height:
        260px;

    left:
        37%;

    top:
        8%;

    animation:
        bgdTechCircle
        18s
        linear
        infinite;
}


.bgd-tech-circle-2 {

    width:
        150px;

    height:
        150px;

    left:
        42%;

    top:
        14%;

    border-color:
        rgba(96,124,108,0.16);

    animation:
        bgdTechCircle
        12s
        linear
        infinite reverse;
}


@keyframes bgdTechCircle {

    from {

        transform:
            rotate(0deg);
    }

    to {

        transform:
            rotate(360deg);
    }
}


/* =========================================================
   PARTICLES
========================================================= */

.bgd-particle {

    position:
        absolute;

    width:
        4px;

    height:
        4px;

    background:
        var(--dark-gold);

    border-radius:
        50%;

    box-shadow:
        0 0 12px
        rgba(182,154,98,0.5);

    animation:
        bgdParticleFloat
        5s
        ease-in-out
        infinite;
}


.bgd-particle-1 {
    left: 8%;
    top: 24%;
}

.bgd-particle-2 {
    left: 25%;
    top: 15%;
    animation-delay: 1s;
}

.bgd-particle-3 {
    left: 42%;
    top: 72%;
    animation-delay: 2s;
}

.bgd-particle-4 {
    left: 58%;
    top: 17%;
    animation-delay: 3s;
}

.bgd-particle-5 {
    right: 20%;
    top: 34%;
    animation-delay: 1.5s;
}

.bgd-particle-6 {
    right: 8%;
    top: 70%;
    animation-delay: 2.5s;
}

.bgd-particle-7 {
    left: 67%;
    bottom: 13%;
    animation-delay: 3.5s;
}

.bgd-particle-8 {
    left: 14%;
    bottom: 22%;
    animation-delay: 4s;
}


@keyframes bgdParticleFloat {

    0%,
    100% {

        opacity:
            0.2;

        transform:
            translateY(0)
            scale(.7);
    }

    50% {

        opacity:
            1;

        transform:
            translateY(-22px)
            scale(1.4);
    }
}


/* =========================================================
   TECHNICAL GOLD LINES
========================================================= */

.bgd-tech-line {

    position:
        absolute;

    height:
        1px;

    background:
        var(--dark-gold);

    opacity:
        .15;

    transform-origin:
        left center;
}


.bgd-tech-line-1 {

    width:
        280px;

    top:
        16%;

    left:
        48%;

    transform:
        rotate(-18deg);

    animation:
        bgdTechLine
        7s
        ease-in-out
        infinite;
}


.bgd-tech-line-2 {

    width:
        180px;

    right:
        5%;

    bottom:
        26%;

    transform:
        rotate(-38deg);

    animation:
        bgdTechLine
        9s
        ease-in-out
        infinite reverse;
}


.bgd-tech-line-3 {

    width:
        200px;

    left:
        8%;

    bottom:
        17%;

    transform:
        rotate(25deg);

    animation:
        bgdTechLine
        8s
        ease-in-out
        infinite;
}


@keyframes bgdTechLine {

    0%,
    100% {

        opacity:
            .06;

        transform:
            rotate(-18deg)
            scaleX(.6);
    }

    50% {

        opacity:
            .28;

        transform:
            rotate(-18deg)
            scaleX(1);
    }
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.bgd-dark-photo {

    position:
        absolute;

    top:
        0;

    right:
        0;

    width:
        55%;

    height:
        100%;

    opacity:
        .035;



    background-size:
        cover;

    background-position:
        center;

    filter:
        grayscale(100%)
        contrast(1.15)
        brightness(.6);

    mix-blend-mode:
        screen;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,0,0,.4) 35%,
            black
        );

    animation:
        bgdDarkPhoto
        20s
        ease-in-out
        infinite
        alternate;
}


@keyframes bgdDarkPhoto {

    0% {
        transform:
            scale(1);
    }

    100% {
        transform:
            scale(1.06);
    }
}


/* =========================================================
   FLOATING ICONS
========================================================= */

.bgd-dark-floating {

    position:
        absolute;

    z-index:
        2;

    color:
        var(--dark-gold);

    opacity:
        .18;

    pointer-events:
        none;

    font-size:
        25px;
}


.bgd-dark-floating-1 {

    top:
        17%;

    left:
        48%;

    animation:
        bgdFloatingIcon
        7s
        ease-in-out
        infinite;
}


.bgd-dark-floating-2 {

    right:
        44%;

    bottom:
        18%;

    font-size:
        20px;

    animation:
        bgdFloatingIcon
        9s
        ease-in-out
        infinite reverse;
}


.bgd-dark-floating-3 {

    right:
        5%;

    bottom:
        17%;

    font-size:
        28px;

    animation:
        bgdFloatingIcon
        8s
        ease-in-out
        infinite;
}


@keyframes bgdFloatingIcon {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {

        transform:
            translateY(-18px)
            rotate(8deg);
    }
}


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

.bgd-dark-content {

    position:
        relative;

    z-index:
        5;

    padding-right:
        45px;
}


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

.bgd-dark-label {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        27px;

    color:
        var(--dark-gold-light);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        2.5px;
}


.bgd-dark-label-dot {

    width:
        8px;

    height:
        8px;

    flex-shrink:
        0;

    background:
        var(--dark-gold);

    border-radius:
        50%;

    box-shadow:
        0 0 15px
        rgba(182,154,98,.6);

    animation:
        bgdDarkPulse
        2s
        ease-in-out
        infinite;
}


.bgd-dark-label-line {

    width:
        45px;

    height:
        1px;

    margin-left:
        4px;

    background:
        var(--dark-gold);
}


@keyframes bgdDarkPulse {

    0%,
    100% {

        opacity:
            1;

        transform:
            scale(1);
    }

    50% {

        opacity:
            .45;

        transform:
            scale(.65);
    }
}


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

.bgd-dark-title {

    max-width:
        720px;

    margin:
        0;

    color:
        var(--dark-white);

    font-size:
        clamp(
            55px,
            6vw,
            82px
        );

    font-weight:
        700;

    line-height:
        .97;

    letter-spacing:
        -4px;
}


.bgd-dark-title span {

    display:
        block;

    color:
        #91A89A;
}


.bgd-dark-title em {

    display:
        block;

    margin-top:
        13px;

    color:
        var(--dark-gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        .55em;

    font-weight:
        400;

    font-style:
        italic;

    line-height:
        1.1;

    letter-spacing:
        -1px;
}


/* =========================================================
   ACCENT
========================================================= */

.bgd-dark-accent {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        27px;
}


.bgd-dark-accent span {

    display:
        block;

    width:
        105px;

    height:
        3px;

    background:
        var(--dark-gold);

    box-shadow:
        0 0 15px
        rgba(182,154,98,.25);

    transform-origin:
        left;

    animation:
        bgdDarkAccent
        2.5s
        ease-in-out
        infinite;
}


.bgd-dark-accent i {

    color:
        var(--dark-gold);

    font-size:
        18px;

    animation:
        bgdDarkArrow
        1.7s
        ease-in-out
        infinite;
}


@keyframes bgdDarkAccent {

    0%,
    100% {
        transform:
            scaleX(.65);
    }

    50% {
        transform:
            scaleX(1);
    }
}


@keyframes bgdDarkArrow {

    0%,
    100% {
        transform:
            translateX(0);
    }

    50% {
        transform:
            translateX(7px);
    }
}


/* =========================================================
   TEXT
========================================================= */

.bgd-dark-text {

    max-width:
        650px;

    margin:
        28px 0 0;

    color:
        var(--dark-muted);

    font-size:
        19px;

    line-height:
        1.8;
}


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

.bgd-dark-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        14px;

    margin-top:
        35px;
}


/* =========================================================
   PHONE BUTTON
========================================================= */

.bgd-dark-phone {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    min-width:
        325px;

    padding:
        10px 12px;

    color:
        var(--dark-white);

    background:
        rgba(36,59,53,.94);

    border:
        1px solid
        rgba(182,154,98,.30);

    text-decoration:
        none;

    overflow:
        hidden;

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.22);

    transition:
        .3s ease;
}


.bgd-dark-phone::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -100%;

    width:
        70%;

    height:
        100%;

    background:
        rgba(255,255,255,.07);

    transform:
        skewX(-25deg);

    transition:
        left .5s ease;
}


.bgd-dark-phone:hover::before {
    left:
        140%;
}


.bgd-dark-phone:hover {

    color:
        var(--dark-white);

    background:
        #2D4840;

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.32);
}


.bgd-dark-phone-icon {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        54px;

    height:
        54px;

    flex-shrink:
        0;

    color:
        #15201C;

    background:
        var(--dark-gold);

    font-size:
        20px;
}


.bgd-dark-phone-text {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    gap:
        4px;

    line-height:
        1;
}


.bgd-dark-phone-text small {

    color:
        rgba(255,255,255,.58);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1.5px;
}


.bgd-dark-phone-text strong {

    color:
        var(--dark-white);

    font-size:
        25px;

    font-weight:
        900;

    white-space:
        nowrap;
}


.bgd-dark-phone-arrow {

    position:
        relative;

    color:
        var(--dark-gold);

    font-size:
        20px;
}


/* =========================================================
   ESTIMATE
========================================================= */

.bgd-dark-estimate {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        74px;

    padding:
        0 25px;

    color:
        var(--dark-white);

    background:
        rgba(255,255,255,.025);

    border:
        1px solid
        rgba(255,255,255,.18);

    font-size:
        14px;

    font-weight:
        800;

    text-decoration:
        none;

    backdrop-filter:
        blur(8px);

    transition:
        .3s ease;
}


.bgd-dark-estimate i {

    color:
        var(--dark-gold);

    font-size:
        17px;
}


.bgd-dark-estimate:hover {

    color:
        #15201C;

    background:
        var(--dark-gold);

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

    transform:
        translateY(-3px);
}


.bgd-dark-estimate:hover i {
    color:
        #15201C;
}


/* =========================================================
   TRUST
========================================================= */

.bgd-dark-trust {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    max-width:
        650px;

    margin-top:
        31px;

    padding-top:
        21px;

    border-top:
        1px solid
        rgba(255,255,255,.10);
}


.bgd-dark-check {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        37px;

    height:
        37px;

    flex-shrink:
        0;

    color:
        #15201C;

    background:
        var(--dark-gold);

    border-radius:
        50%;
}


.bgd-dark-trust strong {

    display:
        block;

    color:
        var(--dark-white);

    font-size:
        13px;
}


.bgd-dark-trust span {

    display:
        block;

    margin-top:
        3px;

    color:
        #8E9993;

    font-size:
        11px;

    line-height:
        1.5;
}


/* =========================================================
   STATS
========================================================= */

.bgd-dark-stats {

    display:
        flex;

    align-items:
        center;

    margin-top:
        27px;
}


.bgd-dark-stat {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.bgd-dark-stat strong {

    color:
        var(--dark-gold);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        25px;

    font-weight:
        400;
}


.bgd-dark-stat span {

    color:
        #B1B9B4;

    font-size:
        10px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        1px;
}


.bgd-dark-stat-separator {

    width:
        28px;

    height:
        1px;

    margin:
        0 16px;

    background:
        rgba(255,255,255,.15);
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.bgd-dark-visual {

    position:
        relative;

    min-height:
        670px;

    margin-left:
        15px;
}


.bgd-dark-image-wrap {

    position:
        absolute;

    top:
        0;

    right:
        20px;

    bottom:
        0;

    left:
        55px;

    overflow:
        hidden;

    background:
        #1B2824;

    border:
        1px solid
        rgba(182,154,98,.18);

    box-shadow:
        0 30px 70px
        rgba(0,0,0,.35);
}


.bgd-dark-image {

    display:
        block;

    width:
        100%;

    height:
        100%;

    min-height:
        670px;

    object-fit:
        cover;

    object-position:
        center;

    animation:
        bgdDarkImageZoom
        11s
        ease-in-out
        infinite alternate;
}


@keyframes bgdDarkImageZoom {

    0% {
        transform:
            scale(1.01);
    }

    100% {
        transform:
            scale(1.065);
    }
}


.bgd-dark-image-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            135deg,
            rgba(16,24,22,.04),
            rgba(16,24,22,.24)
        );
}


.bgd-dark-image-border {

    position:
        absolute;

    top:
        18px;

    right:
        18px;

    bottom:
        18px;

    left:
        18px;

    border:
        1px solid
        rgba(255,255,255,.34);
}


.bgd-dark-image-scan {

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        2px;

    background:
        var(--dark-gold);

    box-shadow:
        0 0 15px
        rgba(182,154,98,.65);

    animation:
        bgdDarkScan
        5s
        ease-in-out
        infinite;
}


@keyframes bgdDarkScan {

    0% {
        top:
            5%;

        opacity:
            0;
    }

    15% {
        opacity:
            .75;
    }

    70% {
        opacity:
            .75;
    }

    100% {

        top:
            95%;

        opacity:
            0;
    }
}


/* =========================================================
   $25 OFF
========================================================= */

.bgd-dark-offer {

    position:
        absolute;

    top:
        50%;

    left:
        -35px;

    z-index:
        12;

    width:
        125px;

    height:
        125px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    animation:
        bgdDarkOfferFloat
        3.8s
        ease-in-out
        infinite;
}


.bgd-dark-offer-ring {

    position:
        absolute;

    inset:
        0;

    border:
        2px solid
        var(--dark-gold);

    border-radius:
        50%;

    background:
        #17211E;

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.38),

        0 0 0 7px
        rgba(182,154,98,.07);

    animation:
        bgdDarkOfferRing
        10s
        linear
        infinite;
}


.bgd-dark-offer-ring::before {

    content:
        "";

    position:
        absolute;

    inset:
        7px;

    border:
        1px dashed
        rgba(182,154,98,.75);

    border-radius:
        50%;
}


.bgd-dark-offer-ring::after {

    content:
        "•   •   •   •   •   •";

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--dark-gold);

    font-size:
        8px;

    letter-spacing:
        8px;

    transform:
        rotate(45deg);
}


.bgd-dark-offer-content {

    position:
        relative;

    z-index:
        3;

    width:
        91px;

    height:
        91px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    color:
        #15201C;

    background:
        var(--dark-gold);

    border-radius:
        50%;

    text-align:
        center;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.30);
}


.bgd-dark-offer-content small {

    margin-bottom:
        2px;

    color:
        #15201C;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        1.8px;
}


.bgd-dark-offer-content strong {

    display:
        block;

    color:
        #15201C;

    font-size:
        31px;

    font-weight:
        900;

    line-height:
        .9;
}


.bgd-dark-offer-content span {

    display:
        block;

    margin-top:
        5px;

    color:
        #15201C;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        3px;
}


@keyframes bgdDarkOfferFloat {

    0%,
    100% {

        transform:
            translateY(-50%)
            rotate(-3deg);
    }

    50% {

        transform:
            translateY(
                calc(-50% - 10px)
            )
            rotate(3deg);
    }
}


@keyframes bgdDarkOfferRing {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }
}


/* =========================================================
   VISUAL LABEL
========================================================= */

.bgd-dark-visual-label {

    position:
        absolute;

    top:
        38px;

    right:
        -5px;

    z-index:
        7;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-width:
        225px;

    padding:
        13px 15px;

    background:
        rgba(16,24,22,.92);

    border:
        1px solid
        rgba(182,154,98,.30);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.35);

    backdrop-filter:
        blur(10px);
}


.bgd-dark-visual-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        37px;

    height:
        37px;

    color:
        #15201C;

    background:
        var(--dark-gold);
}


.bgd-dark-visual-label small {

    display:
        block;

    color:
        var(--dark-gold);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.2px;
}


.bgd-dark-visual-label strong {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--dark-white);

    font-size:
        12px;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.bgd-dark-service-card {

    position:
        absolute;

    right:
        -5px;

    bottom:
        40px;

    z-index:
        7;

    width:
        310px;

    padding:
        20px;

    color:
        var(--dark-white);

    background:
        rgba(16,24,22,.96);

    border:
        1px solid
        rgba(182,154,98,.28);

    box-shadow:
        0 25px 55px
        rgba(0,0,0,.42);
}


.bgd-dark-service-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        var(--dark-gold);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.5px;
}


.bgd-dark-service-top i {
    font-size:
        16px;
}


.bgd-dark-service-title {

    margin-top:
        14px;

    color:
        rgba(255,255,255,.72);

    font-size:
        19px;

    line-height:
        1.25;
}


.bgd-dark-service-title strong {

    display:
        block;

    color:
        var(--dark-white);

    font-size:
        22px;
}


.bgd-dark-progress {

    width:
        100%;

    height:
        2px;

    margin-top:
        17px;

    background:
        rgba(255,255,255,.10);

    overflow:
        hidden;
}


.bgd-dark-progress span {

    display:
        block;

    width:
        65%;

    height:
        100%;

    background:
        var(--dark-gold);

    animation:
        bgdDarkProgress
        3s
        ease-in-out
        infinite;
}


@keyframes bgdDarkProgress {

    0%,
    100% {
        width:
            35%;
    }

    50% {
        width:
            85%;
    }
}


.bgd-dark-service-bottom {

    display:
        flex;

    gap:
        14px;

    margin-top:
        13px;
}


.bgd-dark-service-bottom span {

    color:
        rgba(255,255,255,.58);

    font-size:
        8px;
}


.bgd-dark-service-bottom i {

    margin-right:
        3px;

    color:
        var(--dark-gold);
}


/* =========================================================
   CORNERS
========================================================= */

.bgd-dark-corner {

    position:
        absolute;

    z-index:
        6;

    width:
        75px;

    height:
        75px;

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

    border-style:
        solid;
}


.bgd-dark-corner-tl {

    top:
        -12px;

    left:
        38px;

    border-width:
        3px 0 0 3px;
}


.bgd-dark-corner-br {

    right:
        4px;

    bottom:
        -12px;

    border-width:
        0 3px 3px 0;
}


/* =========================================================
   MARQUEE
========================================================= */

.bgd-dark-marquee {

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    left:
        0;

    z-index:
        10;

    height:
        68px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    color:
        var(--dark-white);

    background:
        #090D0C;

    border-top:
        1px solid
        rgba(182,154,98,.35);
}


.bgd-dark-marquee-track {

    display:
        flex;

    align-items:
        center;

    gap:
        34px;

    width:
        max-content;

    padding-left:
        20px;

    white-space:
        nowrap;

    animation:
        bgdDarkMarquee
        28s
        linear
        infinite;
}


.bgd-dark-marquee-track span {

    font-size:
        14px;

    font-weight:
        900;

    letter-spacing:
        2.2px;
}


.bgd-dark-marquee-track i {

    color:
        var(--dark-gold);

    font-size:
        8px;
}


@keyframes bgdDarkMarquee {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-50%);
    }
}


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

@media (max-width: 1199.98px) {

    .bgd-dark-hero {

        padding-top:
            75px;
    }

    .bgd-dark-title {

        font-size:
            62px;
    }

    .bgd-dark-text {

        font-size:
            17px;
    }

    .bgd-dark-visual {

        min-height:
            600px;
    }

    .bgd-dark-image {

        min-height:
            600px;
    }

    .bgd-dark-offer {

        left:
            -25px;
    }

    .bgd-dark-door-pattern {

        right:
            -330px;

        opacity:
            .07;
    }
}


/* =========================================================
   991px
========================================================= */

@media (max-width: 991.98px) {

    .bgd-dark-hero {

        padding:
            65px 0 135px;
    }

    .bgd-dark-content {

        padding-right:
            0;

        padding-bottom:
            55px;
    }

    .bgd-dark-title {

        font-size:
            clamp(
                52px,
                8vw,
                70px
            );
    }

    .bgd-dark-text {

        max-width:
            720px;

        font-size:
            18px;
    }

    .bgd-dark-visual {

        min-height:
            560px;

        margin-left:
            0;
    }

    .bgd-dark-image-wrap {

        left:
            35px;

        right:
            35px;
    }

    .bgd-dark-image {

        min-height:
            560px;
    }

    .bgd-dark-offer {

        left:
            -5px;

        width:
            105px;

        height:
            105px;
    }

    .bgd-dark-offer-content {

        width:
            77px;

        height:
            77px;
    }

    .bgd-dark-offer-content strong {

        font-size:
            26px;
    }

    .bgd-dark-photo {

        width:
            75%;

        opacity:
            .02;
    }

    .bgd-dark-marquee {

        height:
            64px;
    }

    .bgd-dark-marquee-track span {

        font-size:
            13px;
    }
}


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

@media (max-width: 767.98px) {

    .bgd-dark-hero {

        padding:
            50px 0 120px;
    }


    /* Simplify angled planes */

    .bgd-angle-plane-1 {

        left:
            -50%;

        width:
            125%;

        opacity:
            .9;
    }

    .bgd-angle-plane-2 {

        left:
            20%;

        width:
            80%;

        opacity:
            .38;
    }

    .bgd-angle-plane-3 {

        right:
            -45%;

        width:
            100%;

        opacity:
            .7;
    }

    .bgd-angle-gold {

        left:
            88%;

        opacity:
            .12;
    }

    .bgd-angle-panel {

        right:
            -55%;

        width:
            90%;

        opacity:
            .5;
    }


    /* Grid */

    .bgd-dark-grid {

        opacity:
            .17;

        background-size:
            55px 55px;
    }

    .bgd-dark-fine-grid {

        opacity:
            .05;
    }


    /* Door pattern */

    .bgd-dark-door-pattern {

        top:
            20%;

        right:
            -560px;

        opacity:
            .025;
    }


    /* Floating icons */

    .bgd-dark-floating {

        display:
            none;
    }


    /* Content */

    .bgd-dark-content {

        padding-bottom:
            45px;
    }

    .bgd-dark-label {

        font-size:
            9px;

        letter-spacing:
            1.5px;
    }

    .bgd-dark-title {

        font-size:
            46px;

        line-height:
            1;

        letter-spacing:
            -2px;
    }

    .bgd-dark-title em {

        font-size:
            .62em;
    }

    .bgd-dark-text {

        margin-top:
            23px;

        font-size:
            16px;

        line-height:
            1.75;
    }


    /* Buttons */

    .bgd-dark-actions {

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            10px;
    }

    .bgd-dark-phone,
    .bgd-dark-estimate {

        width:
            100%;
    }

    .bgd-dark-phone {

        min-width:
            0;
    }


    /* Visual */

    .bgd-dark-visual {

        min-height:
            470px;
    }

    .bgd-dark-image-wrap {

        top:
            15px;

        right:
            15px;

        bottom:
            15px;

        left:
            15px;
    }

    .bgd-dark-image {

        min-height:
            470px;
    }


    /* Label */

    .bgd-dark-visual-label {

        top:
            0;

        right:
            0;
    }


    /* Service */

    .bgd-dark-service-card {

        right:
            0;

        bottom:
            5px;

        width:
            255px;
    }


    /* Badge */

    .bgd-dark-offer {

        top:
            50%;

        left:
            -8px;

        width:
            88px;

        height:
            88px;
    }

    .bgd-dark-offer-content {

        width:
            66px;

        height:
            66px;
    }

    .bgd-dark-offer-content strong {

        font-size:
            22px;
    }

    .bgd-dark-offer-content small {

        font-size:
            6px;

        letter-spacing:
            1px;
    }

    .bgd-dark-offer-content span {

        margin-top:
            3px;

        font-size:
            8px;

        letter-spacing:
            2px;
    }


    /* Marquee */

    .bgd-dark-marquee {

        height:
            60px;
    }

    .bgd-dark-marquee-track {

        gap:
            28px;
    }

    .bgd-dark-marquee-track span {

        font-size:
            12px;

        letter-spacing:
            1.7px;
    }
}


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

@media (max-width: 480px) {

    .bgd-dark-title {

        font-size:
            39px;
    }

    .bgd-dark-text {

        font-size:
            15px;
    }

    .bgd-dark-trust {

        align-items:
            flex-start;
    }

    .bgd-dark-stats {

        margin-top:
            23px;
    }

    .bgd-dark-stat-separator {

        width:
            16px;

        margin:
            0 7px;
    }

    .bgd-dark-stat strong {

        font-size:
            20px;
    }

    .bgd-dark-stat span {

        font-size:
            8px;

        letter-spacing:
            .5px;
    }

    .bgd-dark-visual {

        min-height:
            400px;
    }

    .bgd-dark-image {

        min-height:
            400px;
    }

    .bgd-dark-service-card {

        width:
            225px;

        padding:
            13px;
    }

    .bgd-dark-service-bottom {

        display:
            none;
    }

    .bgd-dark-offer {

        left:
            -5px;

        width:
            76px;

        height:
            76px;
    }

    .bgd-dark-offer-content {

        width:
            57px;

        height:
            57px;
    }

    .bgd-dark-offer-content strong {

        font-size:
            19px;
    }

    .bgd-dark-offer-content small {

        font-size:
            5px;
    }

    .bgd-dark-offer-content span {

        font-size:
            7px;

        letter-spacing:
            1.5px;
    }

    .bgd-dark-phone-text strong {

        font-size:
            22px;
    }

    .bgd-dark-marquee {

        height:
            58px;
    }

    .bgd-dark-marquee-track span {

        font-size:
            11px;

        letter-spacing:
            1.4px;
    }
}


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

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

    .bgd-dark-hero *,
    .bgd-dark-hero *::before,
    .bgd-dark-hero *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}


/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */



/* =========================================================
   BURBANK GARAGE DOOR CA
   BEFORE & AFTER TRANSFORMATION
========================================================= */

.bgd-before-after {
    position: relative;
    overflow: hidden;

    padding: 110px 0;

    background: #f5f1e8;

    color: #292c2a;
}


/* =========================================================
   BACKGROUND
========================================================= */

.bgd-ba-bg {
    position: absolute;
    inset: 0;

    overflow: hidden;
    pointer-events: none;
}

.bgd-ba-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(36, 59, 53, 0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(36, 59, 53, 0.055) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    opacity: 0.55;
}

.bgd-ba-line {
    position: absolute;

    height: 1px;

    background: #b69a62;

    opacity: 0.35;
}

.bgd-ba-line-1 {
    width: 420px;

    top: 16%;
    left: -80px;

    transform: rotate(-18deg);
}

.bgd-ba-line-2 {
    width: 320px;

    right: -70px;
    bottom: 19%;

    transform: rotate(-18deg);
}

.bgd-ba-orb {
    position: absolute;

    border: 1px solid rgba(96, 124, 108, 0.16);

    border-radius: 50%;
}

.bgd-ba-orb-1 {
    width: 460px;
    height: 460px;

    top: -250px;
    right: -180px;
}

.bgd-ba-orb-2 {
    width: 330px;
    height: 330px;

    bottom: -190px;
    left: -130px;
}


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

.bgd-ba-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-bottom: 16px;

    color: #607c6c;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.bgd-ba-eyebrow span {
    width: 38px;
    height: 1px;

    background: #b69a62;
}

.bgd-ba-title {
    margin: 0;

    color: #243b35;

    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.04;
    font-weight: 400;
    letter-spacing: -1.8px;
}

.bgd-ba-title strong {
    display: block;

    color: #607c6c;

    font-weight: 700;
}

.bgd-ba-intro {
    max-width: 720px;

    margin: 22px auto 55px;

    color: #66706b;

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


/* =========================================================
   SHOWCASE
========================================================= */

.bgd-ba-showcase {
    position: relative;

    padding: 18px;

    background: #243b35;

    border: 1px solid rgba(182, 154, 98, 0.45);

    box-shadow:
        0 30px 80px rgba(36, 59, 53, 0.18);
}

.bgd-ba-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 2px 6px 15px;

    color: #9da9a3;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.bgd-ba-topline span:last-child {
    color: #d0b77a;
}


/* =========================================================
   IMAGE FRAME
========================================================= */

.bgd-ba-frame {
    position: relative;

    height: min(54vw, 590px);

    min-height: 360px;

    overflow: hidden;

    background: #101816;

    isolation: isolate;
}


/* Both images */
.bgd-ba-side {
    position: absolute;
    inset: 0;

    overflow: hidden;
}

.bgd-ba-side img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* BEFORE */
.bgd-ba-before {
    z-index: 1;
}

.bgd-ba-before img {
    filter:
        grayscale(0.35)
        brightness(0.72)
        contrast(1.08);
}


/* AFTER */
.bgd-ba-after {
    z-index: 2;

    width: 50%;

    animation:
        bgdBeforeAfterReveal 5s
        cubic-bezier(.65,0,.35,1)
        infinite alternate;
}

.bgd-ba-after img {
    width: 200%;
    max-width: none;
}


/* =========================================================
   BEFORE / AFTER ANIMATION
========================================================= */

@keyframes bgdBeforeAfterReveal {

    0% {
        width: 20%;
    }

    45% {
        width: 50%;
    }

    70% {
        width: 72%;
    }

    100% {
        width: 50%;
    }
}


/* =========================================================
   IMAGE OVERLAYS
========================================================= */

.bgd-ba-image-overlay {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.bgd-ba-before .bgd-ba-image-overlay {
    background: rgba(16, 24, 22, 0.12);
}

.bgd-ba-after .bgd-ba-image-overlay {
    background: rgba(36, 59, 53, 0.04);
}


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

.bgd-ba-label {
    position: absolute;

    top: 22px;
    left: 22px;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 8px 12px;

    color: #ffffff;

    background: rgba(16, 24, 22, 0.78);

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

    backdrop-filter: blur(8px);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.bgd-ba-label-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #b69a62;
}

.bgd-ba-after .bgd-ba-label {
    left: auto;
    right: 22px;

    background: rgba(36, 59, 53, 0.88);
}

.bgd-ba-condition {
    position: absolute;

    left: 22px;
    bottom: 22px;

    display: flex;
    align-items: center;
    gap: 8px;

    color: #ffffff;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;

    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.bgd-ba-condition i {
    color: #d0b77a;
}

.bgd-ba-after .bgd-ba-condition {
    left: auto;
    right: 22px;
}


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

.bgd-ba-divider {
    position: absolute;
    z-index: 10;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 2px;

    transform: translateX(-50%);

    pointer-events: none;

    animation:
        bgdDividerMove 5s
        cubic-bezier(.65,0,.35,1)
        infinite alternate;
}

@keyframes bgdDividerMove {

    0% {
        left: 20%;
    }

    45% {
        left: 50%;
    }

    70% {
        left: 72%;
    }

    100% {
        left: 50%;
    }
}

.bgd-ba-divider-line {
    position: absolute;
    inset: 0;

    width: 1px;

    margin: auto;

    background: #ffffff;

    box-shadow:
        0 0 0 1px rgba(182,154,98,.7),
        0 0 20px rgba(255,255,255,.35);
}


/* =========================================================
   HANDLE
========================================================= */

.bgd-ba-handle {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

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

    border: 1px solid #d0b77a;

    border-radius: 50%;

    color: #243b35;

    background: #ffffff;

    box-shadow:
        0 8px 30px rgba(0,0,0,.28);
}

.bgd-ba-handle i {
    font-size: 12px;
}

.bgd-ba-handle span {
    width: 1px;
    height: 20px;

    background: #b69a62;
}




@keyframes bgdScan {

    0% {
        top: -5%;
    }

    50% {
        top: 100%;
    }

    100% {
        top: -5%;
    }
}


/* =========================================================
   RESULT CARD
========================================================= */

.bgd-ba-result {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 20px 8px 4px;
}

.bgd-ba-result-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    color: #243b35;

    background: #d0b77a;

    font-size: 19px;
}

.bgd-ba-result-content {
    display: flex;
    flex-direction: column;
    gap: 4px;

    flex: 1;
}

.bgd-ba-result-content > span {
    color: #91a099;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.bgd-ba-result-content strong {
    color: #ffffff;

    font-size: 17px;
    font-weight: 500;
}

.bgd-ba-result-content em {
    color: #d0b77a;

    font-style: normal;
    font-weight: 700;
}


/* =========================================================
   RESULT STATS
========================================================= */

.bgd-ba-result-stats {
    display: flex;
    align-items: center;
    gap: 18px;
}

.bgd-ba-result-stats > div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bgd-ba-result-stats strong {
    color: #d0b77a;

    font-size: 15px;
}

.bgd-ba-result-stats span {
    color: #aeb7b2;

    font-size: 10px;
    font-weight: 600;
}


/* =========================================================
   FEATURE CARDS
========================================================= */

.bgd-ba-feature {
    position: relative;

    min-height: 92px;

    display: flex;
    align-items: center;
    gap: 15px;

    padding: 17px 20px;

    background: rgba(255,255,255,.72);

    border: 1px solid rgba(36,59,53,.10);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.bgd-ba-feature:hover {
    transform: translateY(-4px);

    border-color: rgba(182,154,98,.55);

    box-shadow:
        0 15px 35px rgba(36,59,53,.10);
}

.bgd-ba-feature-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    color: #b69a62;

    background: #243b35;

    font-size: 17px;
}

.bgd-ba-feature div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bgd-ba-feature span {
    color: #89958e;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.bgd-ba-feature strong {
    color: #243b35;

    font-size: 14px;
    font-weight: 700;
}


/* =========================================================
   CTA
========================================================= */

.bgd-ba-cta {
    position: relative;

    margin-top: 45px;
    padding: 24px 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    background: #243b35;

    border-left: 4px solid #b69a62;

    overflow: hidden;
}

.bgd-ba-cta::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 180px;

    right: -100px;
    top: -90px;

    border: 1px solid rgba(182,154,98,.2);

    transform: rotate(35deg);
}

.bgd-ba-cta > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bgd-ba-cta span {
    color: #9ba7a1;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.bgd-ba-cta strong {
    color: #ffffff;

    font-size: 20px;
    font-weight: 600;
}

.bgd-ba-cta a {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 13px 20px;

    color: #243b35;

    background: #d0b77a;

    font-size: 14px;
    font-weight: 800;

    text-decoration: none;

    transition:
        background .25s ease,
        transform .25s ease;
}

.bgd-ba-cta a:hover {
    background: #ffffff;

    transform: translateY(-2px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .bgd-before-after {
        padding: 85px 0;
    }

    .bgd-ba-intro {
        margin-bottom: 40px;
    }

    .bgd-ba-frame {
        height: 52vw;
        min-height: 330px;
    }

    .bgd-ba-result {
        flex-wrap: wrap;
    }

    .bgd-ba-result-stats {
        width: 100%;
        padding-top: 4px;
        padding-left: 66px;
    }

}


@media (max-width: 767.98px) {

    .bgd-before-after {
        padding: 70px 0;
    }

    .bgd-ba-title {
        font-size: 38px;
    }

    .bgd-ba-intro {
        font-size: 14px;
        line-height: 1.7;
    }

    .bgd-ba-showcase {
        padding: 10px;
    }

    .bgd-ba-topline {
        padding-bottom: 10px;
        font-size: 7px;
    }

    .bgd-ba-frame {
        height: 68vw;
        min-height: 270px;
    }

    .bgd-ba-label {
        top: 12px;
        left: 12px;

        padding: 6px 9px;

        font-size: 8px;
        letter-spacing: 1.4px;
    }

    .bgd-ba-after .bgd-ba-label {
        right: 12px;
    }

    .bgd-ba-condition {
        left: 12px;
        bottom: 12px;

        font-size: 9px;
    }

    .bgd-ba-after .bgd-ba-condition {
        right: 12px;
    }

    .bgd-ba-handle {
        width: 46px;
        height: 46px;
    }

    .bgd-ba-result {
        gap: 12px;
        padding-top: 15px;
    }

    .bgd-ba-result-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .bgd-ba-result-content strong {
        font-size: 14px;
    }

    .bgd-ba-result-stats {
        padding-left: 52px;
        gap: 12px;
    }

    .bgd-ba-result-stats span {
        font-size: 8px;
    }

    .bgd-ba-cta {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .bgd-ba-cta strong {
        font-size: 17px;
    }

}


@media (max-width: 480px) {

    .bgd-ba-title {
        font-size: 32px;
    }

    .bgd-ba-eyebrow {
        font-size: 9px;
        letter-spacing: 1.8px;
    }

    .bgd-ba-frame {
        height: 72vw;
        min-height: 230px;
    }

    .bgd-ba-result-stats {
        display: none;
    }

    .bgd-ba-cta a {
        width: 100%;
        justify-content: center;
    }

}


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

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

    .bgd-ba-after,
    .bgd-ba-divider,
    .bgd-ba-scan {
        animation: none !important;
    }

    .bgd-ba-after {
        width: 50%;
    }

    .bgd-ba-divider {
        left: 50%;
    }

    .bgd-ba-feature,
    .bgd-ba-cta a {
        transition: none;
    }

}
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

/* =========================================================
   BURBANK GARAGE DOOR CA
   SPECIAL OFFER SECTION
========================================================= */

.bgd-offer-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: #101816;
    color: #ffffff;
}

.bgd-offer-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* =========================================================
   BACKGROUND GRID
========================================================= */

.bgd-offer-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(96,124,108,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(96,124,108,.055) 1px,
            transparent 1px
        );
    background-size: 55px 55px;
    opacity: .7;
}

/* =========================================================
   ANGLED BACKGROUND
========================================================= */

.bgd-offer-angle {
    position: absolute;
    width: 550px;
    height: 180px;
    transform: rotate(-22deg);
    border-top: 1px solid rgba(182,154,98,.18);
    border-bottom: 1px solid rgba(182,154,98,.08);
}

.bgd-offer-angle-1 {
    top: -20px;
    left: -130px;
    background: #17231f;
}

.bgd-offer-angle-2 {
    right: -180px;
    bottom: -20px;
    background: #1b2924;
}

/* =========================================================
   BACKGROUND RINGS
========================================================= */

.bgd-offer-ring {
    position: absolute;
    border: 1px solid rgba(182,154,98,.12);
    border-radius: 50%;
}

.bgd-offer-ring-1 {
    width: 600px;
    height: 600px;
    top: -340px;
    right: -180px;
}

.bgd-offer-ring-2 {
    width: 380px;
    height: 380px;
    bottom: -230px;
    left: -180px;
}

/* =========================================================
   FLOATING DOTS
========================================================= */

.bgd-offer-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #b69a62;
    box-shadow: 0 0 12px rgba(182,154,98,.65);
    animation: bgdOfferDot 3s ease-in-out infinite alternate;
}

.bgd-offer-dot-1 {
    top: 24%;
    left: 8%;
}

.bgd-offer-dot-2 {
    right: 11%;
    bottom: 25%;
    animation-delay: 1.2s;
}

@keyframes bgdOfferDot {
    from {
        transform: translateY(0);
        opacity: .35;
    }

    to {
        transform: translateY(-12px);
        opacity: 1;
    }
}

/* =========================================================
   MAIN OFFER CARD
========================================================= */

.bgd-offer-card {
    position: relative;
    z-index: 2;
    min-height: 410px;
    display: flex;
    align-items: center;
    padding: 45px 55px;
    background: #243b35;
    border: 1px solid rgba(182,154,98,.42);
    box-shadow: 0 30px 80px rgba(0,0,0,.28);
    overflow: hidden;
}

.bgd-offer-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #b69a62;
}

/* =========================================================
   OFFER CONTENT
========================================================= */

.bgd-offer-content-link {
    display: block;
    width: 61%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.bgd-offer-content-link:hover {
    color: inherit;
    text-decoration: none;
}

.bgd-offer-content {
    position: relative;
    z-index: 10;
    width: 100%;
}

.bgd-offer-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: #d0b77a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.2px;
}

.bgd-offer-eyebrow span {
    width: 35px;
    height: 1px;
    background: #b69a62;
}

/* =========================================================
   $25 OFF
========================================================= */

.bgd-offer-heading {
    display: flex;
    align-items: flex-start;
    height: 105px;
    margin-bottom: 3px;
}

.bgd-offer-dollar {
    margin-top: 13px;
    color: #d0b77a;
    font-size: 36px;
    font-weight: 600;
}

.bgd-offer-heading > div {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.bgd-offer-heading strong {
    color: #ffffff;
    font-size: 105px;
    line-height: .82;
    font-weight: 800;
    letter-spacing: -7px;
}

.bgd-offer-heading div span {
    margin-bottom: 7px;
    color: #d0b77a;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: 2px;
}

/* =========================================================
   OFFER TITLE
========================================================= */

.bgd-offer-content h2 {
    margin: 0 0 13px;
    color: #ffffff;
    font-size: 30px;
    line-height: 1.12;
    font-weight: 400;
}

.bgd-offer-content h2 strong {
    color: #d0b77a;
    font-weight: 700;
}

.bgd-offer-content p {
    max-width: 580px;
    margin: 0 0 25px;
    color: #aeb8b2;
    font-size: 14px;
    line-height: 1.75;
}

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

.bgd-offer-actions {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 12px;
    width: 100%;
}

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

.bgd-offer-call {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    gap: 11px;
    padding: 7px 14px 7px 7px;
    color: #243b35;
    background: #d0b77a;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.bgd-offer-call:hover {
    color: #243b35;
    background: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,.2);
}

.bgd-offer-call-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #243b35;
    color: #d0b77a;
    font-size: 15px;
}

.bgd-offer-call-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: max-content;
    white-space: nowrap;
}

.bgd-offer-call small {
    display: block;
    margin: 0;
    font-size: 8px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 1.3px;
    white-space: nowrap;
}

.bgd-offer-call strong {
    display: block;
    margin: 0;
    color: #243b35;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
}

.bgd-offer-call > i {
    flex: 0 0 auto;
    margin-left: 8px;
    font-size: 15px;
}

/* =========================================================
   CLAIM BUTTON
========================================================= */

.bgd-offer-claim {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    padding: 0 19px;
    color: #ffffff;
    border: 1px solid rgba(208,183,122,.6);
    background: transparent;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease;
}

.bgd-offer-claim:hover {
    color: #243b35;
    background: #ffffff;
    transform: translateY(-3px);
}

.bgd-offer-claim i:first-child {
    color: #d0b77a;
    font-size: 17px;
}

.bgd-offer-claim i:last-child {
    font-size: 13px;
}

/* =========================================================
   RIGHT VISUAL
========================================================= */

.bgd-offer-visual {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    width: 43%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   TECHNICAL GRID
========================================================= */

.bgd-visual-grid {
    position: absolute;
    width: 430px;
    height: 340px;
    background-image:
        linear-gradient(
            rgba(182,154,98,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(182,154,98,.08) 1px,
            transparent 1px
        );
    background-size: 25px 25px;
    transform:
        perspective(600px)
        rotateX(58deg);
    opacity: .45;
}

/* =========================================================
   RADAR
========================================================= */

.bgd-visual-radar {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(208,183,122,.13) 0%,
            rgba(96,124,108,.08) 35%,
            transparent 70%
        );
    animation: bgdRadarPulse 5s ease-in-out infinite;
}

@keyframes bgdRadarPulse {
    0%,
    100% {
        transform: scale(.92);
        opacity: .55;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

/* =========================================================
   GARAGE DOOR FRAME
========================================================= */

.bgd-offer-visual-frame {
    position: relative;
    z-index: 4;
    width: 310px;
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            135deg,
            rgba(16,24,22,.94),
            rgba(36,59,53,.72)
        );
    border: 1px solid rgba(182,154,98,.38);
    box-shadow:
        0 25px 60px rgba(0,0,0,.35),
        inset 0 0 50px rgba(182,154,98,.04);
    transform:
        perspective(900px)
        rotateY(-7deg);
    animation: bgdOfferVisualFloat 6s ease-in-out infinite;
}

@keyframes bgdOfferVisualFloat {
    0%,
    100% {
        transform:
            perspective(900px)
            rotateY(-7deg)
            translateY(0);
    }

    50% {
        transform:
            perspective(900px)
            rotateY(-4deg)
            translateY(-7px);
    }
}

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

.bgd-door-header {
    position: absolute;
    top: 12px;
    left: 15px;
    display: flex;
    gap: 5px;
}

.bgd-door-header span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #607c6c;
    box-shadow: 0 0 8px rgba(142,174,150,.6);
}

/* =========================================================
   TORSION SPRING ASSEMBLY
========================================================= */

.bgd-torsion-assembly {
    position: absolute;
    top: 34px;
    left: 42px;
    width: 225px;
    height: 24px;
    z-index: 8;
}

.bgd-spring-shaft {
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    height: 3px;
    background: #607c6c;
    box-shadow: 0 0 8px rgba(96,124,108,.5);
}

.bgd-torsion-spring {
    position: absolute;
    top: 1px;
    left: 72px;
    width: 82px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px;
    z-index: 3;
}

.bgd-torsion-spring span {
    width: 6px;
    height: 20px;
    border: 1px solid #d0b77a;
    border-radius: 50%;
    background: rgba(208,183,122,.08);
    box-shadow: 0 0 5px rgba(208,183,122,.25);
}

.bgd-torsion-spring::before,
.bgd-torsion-spring::after {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: 2px;
    background: #d0b77a;
    opacity: .7;
}

.bgd-torsion-spring::before {
    left: -5px;
}

.bgd-torsion-spring::after {
    right: -5px;
}

.bgd-spring-mount {
    position: absolute;
    top: 3px;
    width: 14px;
    height: 17px;
    background: #243b35;
    border: 1px solid #607c6c;
    z-index: 5;
}

.spring-mount-left {
    left: 52px;
}

.spring-mount-right {
    right: 52px;
}

/* =========================================================
   GARAGE DOOR
========================================================= */

.bgd-offer-door {
    position: relative;
    z-index: 4;
    width: 210px;
    height: 145px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 7px;
    background: #101816;
    border: 2px solid #607c6c;
    box-shadow: inset 0 0 30px rgba(0,0,0,.45);
}

.bgd-offer-door span {
    display: block;
    width: 100%;
    height: 17px;
    border: 1px solid rgba(182,154,98,.3);
    background:
        linear-gradient(
            90deg,
            #1a2521,
            #30483f,
            #1a2521
        );
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

/* =========================================================
   EXTENSION SPRINGS
========================================================= */

.bgd-extension-spring {
    position: absolute;
    top: 72px;
    width: 20px;
    height: 105px;
    z-index: 9;
}

.bgd-extension-left {
    left: 30px;
}

.bgd-extension-right {
    right: 30px;
}

.bgd-extension-coil {
    position: absolute;
    top: 0;
    left: 4px;
    width: 12px;
    height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bgd-extension-coil span {
    width: 12px;
    height: 7px;
    border: 1px solid #b7c9bd;
    border-radius: 50%;
    background: rgba(183,201,189,.08);
    box-shadow: 0 0 4px rgba(183,201,189,.18);
}

.bgd-extension-cable {
    position: absolute;
    top: 64px;
    left: 9px;
    width: 2px;
    height: 41px;
    background: #d0b77a;
    opacity: .55;
    box-shadow: 0 0 5px rgba(208,183,122,.25);
}

/* =========================================================
   GARAGE DOOR OPENER
========================================================= */

.bgd-opener-system {
    position: absolute;
    z-index: 10;
    top: 57px;
    left: 92px;
    width: 125px;
    height: 54px;
}

.bgd-opener-rail {
    position: absolute;
    top: 4px;
    left: -12px;
    width: 104px;
    height: 5px;
    background: #607c6c;
    border: 1px solid rgba(208,183,122,.4);
    box-shadow: 0 0 7px rgba(96,124,108,.35);
}

.bgd-opener-rail::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 7px;
    width: 76px;
    height: 1px;
    background: #d0b77a;
    opacity: .6;
}

.bgd-opener-trolley {
    position: absolute;
    top: -4px;
    left: 48px;
    width: 19px;
    height: 13px;
    background: #243b35;
    border: 1px solid #d0b77a;
    box-shadow: 0 0 8px rgba(208,183,122,.2);
}

.bgd-opener-motor {
    position: absolute;
    top: 9px;
    right: 0;
    width: 55px;
    height: 37px;
    background: #17231f;
    border: 1px solid #607c6c;
    box-shadow: 0 7px 15px rgba(0,0,0,.25);
}

.bgd-opener-motor::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    width: 40px;
    height: 2px;
    background: #d0b77a;
    opacity: .45;
}

.bgd-opener-light {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d0b77a;
    box-shadow: 0 0 9px rgba(208,183,122,.9);
    animation: bgdOpenerLight 2s ease-in-out infinite;
}

@keyframes bgdOpenerLight {
    0%,
    100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }
}

.bgd-opener-lines {
    position: absolute;
    left: 7px;
    bottom: 7px;
    display: flex;
    gap: 3px;
}

.bgd-opener-lines span {
    width: 7px;
    height: 2px;
    background: #607c6c;
    opacity: .7;
}

/* =========================================================
   DOOR HIGHLIGHT
========================================================= */

.bgd-offer-door::after {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    width: 2px;
    height: 100%;
    background: #d0b77a;
    opacity: .6;
    animation: bgdDoorLight 3.5s ease-in-out infinite;
}

@keyframes bgdDoorLight {
    0%,
    100% {
        opacity: .2;
        box-shadow: none;
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 18px rgba(208,183,122,.8);
    }
}

/* =========================================================
   DOOR BOTTOM LINE
========================================================= */

.bgd-door-bottom-line {
    position: absolute;
    left: 48px;
    right: 48px;
    bottom: 19px;
    height: 1px;
    background: rgba(182,154,98,.5);
    box-shadow: 0 0 10px rgba(182,154,98,.4);
}

/* =========================================================
   DOOR LABEL
========================================================= */

.bgd-offer-door-label {
    position: absolute;
    right: -35px;
    bottom: -25px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: #101816;
    border: 1px solid rgba(182,154,98,.4);
    transform: rotate(-3deg);
    box-shadow: 0 12px 30px rgba(0,0,0,.3);
}

.bgd-offer-door-label i {
    color: #f0d78f;
    font-size: 18px;
    filter: drop-shadow(0 0 6px rgba(240,215,143,.6));
}

.bgd-offer-door-label div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bgd-offer-door-label small {
    color: #89958e;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.bgd-offer-door-label strong {
    color: #ffffff;
    font-size: 9px;
    letter-spacing: .7px;
}

/* =========================================================
   SCATTERED TOOLS
========================================================= */

.bgd-scattered-tools {
    position: absolute;
    z-index: 7;
    inset: 0;
    pointer-events: none;
}

.bgd-scattered-tool {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(36,59,53,.35);
    backdrop-filter: blur(3px);
    pointer-events: none;
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

.bgd-scattered-tool i {
    filter: drop-shadow(0 0 5px rgba(208,183,122,.35));
}

/* =========================================================
   WRENCHES
========================================================= */

.bgd-tool-wrench-large {
    width: 72px;
    height: 72px;
    top: 10%;
    left: 5%;
    color: #f0d78f;
    border: 1px solid rgba(240,215,143,.6);
    background: rgba(208,183,122,.09);
    font-size: 31px;
    opacity: .9;
    animation: bgdScatteredFloat1 5s ease-in-out infinite;
}

.bgd-tool-wrench-small {
    width: 34px;
    height: 34px;
    top: 29%;
    left: 1%;
    color: #dce4dd;
    border: 1px solid rgba(220,228,221,.3);
    background: rgba(220,228,221,.04);
    font-size: 15px;
    opacity: .48;
    animation: bgdScatteredFloat2 4.5s ease-in-out infinite;
}

/* =========================================================
   GEARS
========================================================= */

.bgd-tool-gear-large {
    width: 62px;
    height: 62px;
    top: 7%;
    right: 7%;
    color: #b7c9bd;
    border: 1px solid rgba(183,201,189,.45);
    background: rgba(96,124,108,.12);
    font-size: 28px;
    opacity: .72;
    animation: bgdScatteredGear 12s linear infinite;
}

.bgd-tool-gear-small {
    width: 30px;
    height: 30px;
    top: 35%;
    right: 2%;
    color: #d0b77a;
    border: 1px solid rgba(208,183,122,.3);
    background: rgba(208,183,122,.04);
    font-size: 14px;
    opacity: .38;
    animation: bgdScatteredGearReverse 9s linear infinite;
}

/* =========================================================
   SCREWDRIVER
========================================================= */

.bgd-tool-screwdriver {
    width: 43px;
    height: 43px;
    bottom: 22%;
    left: 4%;
    color: #e5dfcf;
    border: 1px solid rgba(229,223,207,.35);
    background: rgba(229,223,207,.04);
    font-size: 20px;
    opacity: .55;
    animation: bgdScatteredFloat3 4.8s ease-in-out infinite;
}

/* =========================================================
   HAMMER
========================================================= */

.bgd-tool-hammer {
    width: 55px;
    height: 55px;
    right: 7%;
    bottom: 12%;
    color: #d0b77a;
    border: 1px solid rgba(208,183,122,.42);
    background: rgba(208,183,122,.06);
    font-size: 24px;
    opacity: .64;
    animation: bgdScatteredFloat4 5.5s ease-in-out infinite;
}

/* =========================================================
   TOOLS
========================================================= */

.bgd-tool-tools {
    width: 39px;
    height: 39px;
    left: 18%;
    bottom: 7%;
    color: #9fb5a6;
    border: 1px solid rgba(159,181,166,.3);
    background: rgba(96,124,108,.06);
    font-size: 17px;
    opacity: .42;
    animation: bgdScatteredFloat5 4.2s ease-in-out infinite;
}

/* =========================================================
   SMALL NUT
========================================================= */

.bgd-tool-small {
    width: 25px;
    height: 25px;
    right: 22%;
    top: 18%;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.025);
    font-size: 11px;
    opacity: .25;
    animation: bgdScatteredFloat6 6s ease-in-out infinite;
}

/* =========================================================
   FLOATING SPRING SHAPES
========================================================= */

.bgd-floating-spring {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #d0b77a;
    border: 1px solid rgba(208,183,122,.3);
    background: rgba(208,183,122,.035);
    box-shadow: 0 0 20px rgba(208,183,122,.08);
    pointer-events: none;
}

.bgd-floating-spring i {
    filter: drop-shadow(0 0 6px rgba(208,183,122,.4));
}

.bgd-floating-spring-1 {
    width: 48px;
    height: 48px;
    top: 49%;
    left: 7%;
    font-size: 22px;
    opacity: .45;
    transform: rotate(-25deg);
    animation: bgdSpringFloat1 5s ease-in-out infinite;
}

.bgd-floating-spring-2 {
    width: 27px;
    height: 27px;
    right: 12%;
    bottom: 26%;
    color: #b7c9bd;
    border-color: rgba(183,201,189,.28);
    font-size: 13px;
    opacity: .3;
    animation: bgdSpringFloat2 4.2s ease-in-out infinite;
}

@keyframes bgdSpringFloat1 {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(-25deg);
    }

    50% {
        transform:
            translateY(-9px)
            rotate(8deg);
    }
}

@keyframes bgdSpringFloat2 {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(15deg);
    }

    50% {
        transform:
            translateY(6px)
            rotate(-15deg);
    }
}

/* =========================================================
   FLOATING OPENER SHAPES
========================================================= */

.bgd-floating-opener {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b7c9bd;
    border: 1px solid rgba(183,201,189,.25);
    background: rgba(96,124,108,.045);
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0,0,0,.18);
    pointer-events: none;
}

.bgd-floating-opener-1 {
    width: 42px;
    height: 30px;
    left: 25%;
    top: 5%;
    font-size: 17px;
    opacity: .36;
    transform: rotate(-8deg);
    animation: bgdOpenerFloat1 5.5s ease-in-out infinite;
}

.bgd-floating-opener-2 {
    width: 30px;
    height: 30px;
    right: 27%;
    bottom: 8%;
    color: #d0b77a;
    border-color: rgba(208,183,122,.24);
    font-size: 14px;
    opacity: .28;
    animation: bgdOpenerFloat2 4.5s ease-in-out infinite;
}

@keyframes bgdOpenerFloat1 {
    0%,
    100% {
        transform:
            translate(0,0)
            rotate(-8deg);
    }

    50% {
        transform:
            translate(5px,-7px)
            rotate(4deg);
    }
}

@keyframes bgdOpenerFloat2 {
    0%,
    100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(-5px,6px);
    }
}

/* =========================================================
   TOOL FLOATING ANIMATIONS
========================================================= */

@keyframes bgdScatteredFloat1 {
    0%,
    100% {
        transform:
            translate(0,0)
            rotate(-15deg);
    }

    50% {
        transform:
            translate(5px,-10px)
            rotate(5deg);
    }
}

@keyframes bgdScatteredFloat2 {
    0%,
    100% {
        transform:
            translate(0,0)
            rotate(10deg);
    }

    50% {
        transform:
            translate(-4px,7px)
            rotate(-10deg);
    }
}

@keyframes bgdScatteredFloat3 {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(-20deg);
    }

    50% {
        transform:
            translateY(-8px)
            rotate(-8deg);
    }
}

@keyframes bgdScatteredFloat4 {
    0%,
    100% {
        transform:
            translate(0,0)
            rotate(12deg);
    }

    50% {
        transform:
            translate(-6px,-8px)
            rotate(-3deg);
    }
}

@keyframes bgdScatteredFloat5 {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(-5deg);
    }

    50% {
        transform:
            translateY(6px)
            rotate(8deg);
    }
}

@keyframes bgdScatteredFloat6 {
    0%,
    100% {
        transform: translate(0,0);
    }

    50% {
        transform:
            translate(-5px,-6px);
    }
}

/* =========================================================
   GEAR ROTATION
========================================================= */

@keyframes bgdScatteredGear {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes bgdScatteredGearReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

/* =========================================================
   SOFT TOOL GLOW
========================================================= */

.bgd-scattered-tools::before {
    content: "";
    position: absolute;
    top: 5%;
    right: 0;
    width: 180px;
    height: 90%;
    background:
        radial-gradient(
            ellipse,
            rgba(208,183,122,.08),
            transparent 68%
        );
    filter: blur(18px);
    pointer-events: none;
}

/* =========================================================
   TECHNICAL CIRCLES
========================================================= */

.bgd-offer-tech-circle {
    position: absolute;
    border: 1px solid rgba(182,154,98,.25);
    border-radius: 50%;
}

.bgd-offer-tech-circle span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    margin: -2.5px;
    border-radius: 50%;
    background: #f0d78f;
    box-shadow: 0 0 12px rgba(240,215,143,.8);
}

.bgd-offer-tech-circle-1 {
    width: 85px;
    height: 85px;
    top: 8%;
    right: 4%;
    animation: bgdOfferRotate 12s linear infinite;
}

.bgd-offer-tech-circle-2 {
    width: 50px;
    height: 50px;
    bottom: 8%;
    left: 3%;
    opacity: .55;
    animation: bgdOfferRotateReverse 9s linear infinite;
}

@keyframes bgdOfferRotate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes bgdOfferRotateReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0);
    }
}

/* =========================================================
   TECHNICAL CROSSES
========================================================= */

.bgd-offer-cross {
    position: absolute;
    width: 20px;
    height: 20px;
}

.bgd-offer-cross::before,
.bgd-offer-cross::after {
    content: "";
    position: absolute;
    background: #d0b77a;
    box-shadow: 0 0 5px rgba(208,183,122,.4);
}

.bgd-offer-cross::before {
    width: 100%;
    height: 1px;
    top: 50%;
    left: 0;
}

.bgd-offer-cross::after {
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
}

.bgd-offer-cross-1 {
    top: 17%;
    right: 18%;
}

.bgd-offer-cross-2 {
    bottom: 13%;
    right: 43%;
    transform: scale(.6);
    opacity: .5;
}

/* =========================================================
   FAST RESPONSE
========================================================= */

.bgd-offer-status {
    position: absolute;
    z-index: 10;
    top: 8%;
    left: 2%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    background: rgba(16,24,22,.9);
    border: 1px solid rgba(182,154,98,.3);
    color: #aeb8b2;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.bgd-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8eae96;
    box-shadow: 0 0 10px rgba(142,174,150,.8);
    animation: bgdStatusPulse 1.8s ease-in-out infinite;
}

@keyframes bgdStatusPulse {
    0%,
    100% {
        opacity: .35;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

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

@media (max-width:1199.98px) {

    .bgd-offer-card {
        padding: 40px;
    }

    .bgd-offer-content-link {
        width: 62%;
    }

    .bgd-offer-visual {
        width: 42%;
    }

    .bgd-offer-visual-frame {
        width: 275px;
        height: 210px;
    }

    .bgd-offer-door {
        width: 185px;
        height: 128px;
    }

    .bgd-torsion-assembly {
        transform: scale(.88);
    }

    .bgd-opener-system {
        transform: scale(.88);
    }

    .bgd-offer-call {
        gap: 8px;
        padding-right: 10px;
    }

    .bgd-offer-call strong {
        font-size: 16px;
    }

    .bgd-offer-call > i {
        margin-left: 3px;
    }

    .bgd-offer-claim {
        padding: 0 14px;
        font-size: 11px;
    }
}

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

@media (max-width:991.98px) {

    .bgd-offer-section {
        padding: 70px 0;
    }

    .bgd-offer-card {
        min-height: auto;
        padding: 40px;
        display: block;
    }

    .bgd-offer-content-link {
        width: 100%;
        max-width: 650px;
    }

    .bgd-offer-visual {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: 310px;
        margin-top: 40px;
    }

    .bgd-offer-visual-frame {
        width: 300px;
        height: 220px;
    }

    .bgd-offer-status {
        left: 5%;
    }

    .bgd-tool-wrench-large {
        left: 10%;
    }

    .bgd-tool-wrench-small {
        left: 6%;
    }

    .bgd-tool-screwdriver {
        left: 9%;
    }

    .bgd-tool-gear-large {
        right: 10%;
    }

    .bgd-tool-gear-small {
        right: 7%;
    }

    .bgd-tool-hammer {
        right: 11%;
    }

    .bgd-floating-spring-1 {
        left: 12%;
    }

    .bgd-floating-opener-1 {
        left: 22%;
    }

    .bgd-offer-actions {
        width: auto;
        max-width: 620px;
    }
}

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

@media (max-width:767.98px) {

    .bgd-offer-section {
        padding: 60px 0;
    }

    .bgd-offer-card {
        padding: 30px 25px;
    }

    .bgd-offer-heading {
        height: 85px;
    }

    .bgd-offer-heading strong {
        font-size: 82px;
    }

    .bgd-offer-heading div span {
        font-size: 22px;
    }

    .bgd-offer-dollar {
        font-size: 28px;
    }

    .bgd-offer-content h2 {
        font-size: 25px;
    }

    /*
       Keep both buttons on one line where possible.
       The buttons only stack on very narrow screens.
    */
    .bgd-offer-actions {
        display: flex;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 8px;
        width: 100%;
    }

    .bgd-offer-call {
        flex: 1 1 auto;
        min-width: 0;
        padding: 7px 9px 7px 7px;
    }

    .bgd-offer-call-icon {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    .bgd-offer-call-text {
        min-width: 0;
    }

    .bgd-offer-call-text small {
        font-size: 7px;
    }

    .bgd-offer-call-text strong {
        font-size: 14px;
    }

    .bgd-offer-call > i {
        display: none;
    }

    .bgd-offer-claim {
        flex: 0 0 auto;
        min-height: 52px;
        padding: 0 11px;
        font-size: 10px;
        gap: 6px;
    }

    .bgd-offer-claim i:first-child {
        font-size: 15px;
    }

    .bgd-offer-claim i:last-child {
        display: none;
    }

    .bgd-offer-visual {
        height: 285px;
    }

    .bgd-offer-visual-frame {
        width: 270px;
        height: 200px;
    }

    .bgd-offer-door {
        width: 175px;
        height: 120px;
    }

    .bgd-offer-door-label {
        right: -25px;
        bottom: -23px;
    }

    .bgd-offer-status {
        left: 1%;
        top: 3%;
    }

    .bgd-torsion-assembly {
        top: 31px;
        left: 36px;
        transform: scale(.78);
    }

    .bgd-opener-system {
        top: 55px;
        left: 78px;
        transform: scale(.78);
    }

    .bgd-extension-spring {
        top: 70px;
        transform: scale(.8);
    }

    .bgd-extension-left {
        left: 25px;
    }

    .bgd-extension-right {
        right: 25px;
    }

    .bgd-tool-wrench-large {
        width: 58px;
        height: 58px;
        left: 3%;
    }

    .bgd-tool-wrench-small {
        width: 29px;
        height: 29px;
        left: 1%;
    }

    .bgd-tool-gear-large {
        width: 51px;
        height: 51px;
        right: 4%;
    }

    .bgd-tool-gear-small {
        width: 26px;
        height: 26px;
        right: 1%;
    }

    .bgd-tool-screwdriver {
        width: 37px;
        height: 37px;
        left: 5%;
    }

    .bgd-tool-hammer {
        width: 46px;
        height: 46px;
        right: 5%;
    }

    .bgd-tool-tools {
        width: 33px;
        height: 33px;
        left: 17%;
    }

    .bgd-tool-small {
        width: 22px;
        height: 22px;
        right: 20%;
    }

    .bgd-floating-spring-1 {
        width: 38px;
        height: 38px;
        left: 7%;
        font-size: 17px;
    }

    .bgd-floating-spring-2 {
        right: 9%;
    }

    .bgd-floating-opener-1 {
        width: 36px;
        height: 26px;
        left: 21%;
        font-size: 14px;
    }

    .bgd-floating-opener-2 {
        right: 23%;
    }
}

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

@media (max-width:575.98px) {

    .bgd-offer-card {
        padding: 25px 18px;
    }

    .bgd-offer-heading {
        height: 75px;
    }

    .bgd-offer-heading strong {
        font-size: 70px;
        letter-spacing: -5px;
    }

    .bgd-offer-dollar {
        font-size: 25px;
    }

    .bgd-offer-heading div span {
        font-size: 19px;
    }

    .bgd-offer-content h2 {
        font-size: 22px;
    }

    .bgd-offer-content p {
        font-size: 13px;
    }

    /*
       Phone button and claim button remain
       on the same line.
    */
    .bgd-offer-actions {
        gap: 6px;
    }

    .bgd-offer-call {
        flex: 1 1 auto;
        min-width: 0;
        padding: 7px 7px 7px 6px;
        gap: 7px;
    }

    .bgd-offer-call-icon {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        font-size: 12px;
    }

    .bgd-offer-call-text {
        min-width: 0;
        overflow: visible;
    }

    .bgd-offer-call-text small {
        font-size: 6px;
        letter-spacing: .8px;
    }

    .bgd-offer-call-text strong {
        font-size: 12px;
        letter-spacing: -.2px;
    }

    .bgd-offer-claim {
        flex: 0 0 auto;
        min-height: 46px;
        padding: 0 8px;
        gap: 5px;
        font-size: 8px;
        letter-spacing: .3px;
    }

    .bgd-offer-claim i:first-child {
        font-size: 13px;
    }

    .bgd-offer-visual {
        height: 255px;
    }

    .bgd-offer-visual-frame {
        width: 235px;
        height: 175px;
    }

    .bgd-offer-door {
        width: 150px;
        height: 105px;
    }

    .bgd-offer-door span {
        height: 12px;
    }

    .bgd-offer-door-label {
        right: -20px;
        bottom: -22px;
        padding: 8px 10px;
    }

    .bgd-offer-door-label strong {
        font-size: 7px;
    }

    .bgd-offer-status {
        left: 0;
    }

    .bgd-torsion-assembly {
        top: 27px;
        left: 27px;
        transform: scale(.63);
    }

    .bgd-opener-system {
        top: 49px;
        left: 61px;
        transform: scale(.63);
    }

    .bgd-extension-spring {
        top: 62px;
        transform: scale(.65);
    }

    .bgd-extension-left {
        left: 19px;
    }

    .bgd-extension-right {
        right: 19px;
    }

    .bgd-tool-wrench-large {
        width: 49px;
        height: 49px;
        left: 0;
        font-size: 21px;
    }

    .bgd-tool-wrench-small {
        width: 25px;
        height: 25px;
        left: -2px;
        font-size: 12px;
    }

    .bgd-tool-gear-large {
        width: 43px;
        height: 43px;
        right: 1%;
        font-size: 20px;
    }

    .bgd-tool-gear-small {
        width: 23px;
        height: 23px;
        right: -2px;
        font-size: 11px;
    }

    .bgd-tool-screwdriver {
        width: 32px;
        height: 32px;
        left: 2%;
        font-size: 15px;
    }

    .bgd-tool-hammer {
        width: 39px;
        height: 39px;
        right: 2%;
        font-size: 18px;
    }

    .bgd-tool-tools {
        width: 29px;
        height: 29px;
        left: 14%;
        font-size: 13px;
    }

    .bgd-tool-small {
        width: 19px;
        height: 19px;
        right: 17%;
        font-size: 9px;
    }

    .bgd-floating-spring-1 {
        width: 31px;
        height: 31px;
        left: 4%;
        font-size: 14px;
    }

    .bgd-floating-spring-2 {
        width: 23px;
        height: 23px;
        right: 7%;
        font-size: 10px;
    }

    .bgd-floating-opener-1 {
        width: 31px;
        height: 23px;
        left: 17%;
        font-size: 12px;
    }

    .bgd-floating-opener-2 {
        width: 25px;
        height: 25px;
        right: 17%;
        font-size: 11px;
    }
}

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

@media (max-width:400px) {

    .bgd-offer-call-text strong {
        font-size: 11px;
    }

    .bgd-offer-call-text small {
        font-size: 5.5px;
    }

    .bgd-offer-call-icon {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
    }

    .bgd-offer-claim {
        padding: 0 7px;
        font-size: 7.5px;
    }

    .bgd-offer-claim i:first-child {
        display: none;
    }
}

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

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

    .bgd-offer-dot,
    .bgd-offer-visual-frame,
    .bgd-offer-tech-circle,
    .bgd-status-dot,
    .bgd-offer-door::after,
    .bgd-scattered-tool,
    .bgd-floating-spring,
    .bgd-floating-opener,
    .bgd-opener-light,
    .bgd-visual-radar {
        animation: none !important;
    }
}

/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */


/* =========================================================
   BURBANK GARAGE DOOR CA
   IMAGE STORY SECTION
========================================================= */

.bgd-story-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0;

    background: #f5f1e8;

    color: #292c2a;
}


/* =========================================================
   BACKGROUND
========================================================= */

.bgd-story-bg {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.bgd-story-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(36, 59, 53, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(36, 59, 53, .035) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    opacity: .8;
}


/* =========================================================
   BACKGROUND CIRCLES
========================================================= */

.bgd-story-circle {
    position: absolute;

    border: 1px solid rgba(182, 154, 98, .18);

    border-radius: 50%;
}


.bgd-story-circle-1 {
    width: 500px;
    height: 500px;

    top: -280px;
    right: -150px;
}


.bgd-story-circle-2 {
    width: 350px;
    height: 350px;

    bottom: -220px;
    left: -180px;
}


/* =========================================================
   BACKGROUND ANGLED LINES
========================================================= */

.bgd-story-line {
    position: absolute;

    height: 1px;

    background: #b69a62;

    opacity: .2;
}


.bgd-story-line-1 {
    width: 300px;

    top: 18%;
    left: -100px;

    transform: rotate(-27deg);
}


.bgd-story-line-2 {
    width: 250px;

    right: -80px;
    bottom: 18%;

    transform: rotate(-27deg);
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.bgd-story-wrap {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 75px;

    align-items: center;
}


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

.bgd-story-content {
    max-width: 650px;
}


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

.bgd-story-eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 16px;

    color: #607c6c;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2.3px;
}


.bgd-story-eyebrow span {
    width: 38px;
    height: 2px;

    background: #b69a62;
}


/* =========================================================
   MAIN TITLE
========================================================= */

.bgd-story-content h2 {
    margin: 0;

    color: #243b35;

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

    line-height: 1.08;

    font-weight: 400;

    letter-spacing: -1.7px;
}


.bgd-story-content h2 strong {
    display: block;

    color: #607c6c;

    font-weight: 700;
}


/* =========================================================
   TITLE DECORATION
========================================================= */

.bgd-story-heading-line {
    display: flex;
    align-items: center;

    gap: 10px;

    margin: 20px 0 22px;
}


.bgd-story-heading-line::before {
    content: "";

    width: 55px;
    height: 1px;

    background: #b69a62;
}


.bgd-story-heading-line::after {
    content: "";

    width: 35px;
    height: 1px;

    background: #607c6c;
}


.bgd-story-heading-line i {
    color: #b69a62;

    font-size: 14px;
}


/* =========================================================
   H3
========================================================= */

.bgd-story-content h3 {
    margin: 0 0 15px;

    color: #243b35;

    font-size: 25px;

    line-height: 1.2;

    font-weight: 800;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.bgd-story-content p {
    max-width: 650px;

    margin: 0 0 15px;

    color: #59625d;

    font-size: 15px;

    line-height: 1.85;
}


/* =========================================================
   SERVICE POINTS
========================================================= */

.bgd-story-points {
    display: grid;

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

    gap: 12px;

    margin-top: 30px;
}


.bgd-story-point {
    min-height: 92px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 14px;

    background: #ffffff;

    border: 1px solid rgba(96, 124, 108, .16);

    box-shadow:
        0 12px 30px rgba(36, 59, 53, .07);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.bgd-story-point:hover {
    transform: translateY(-5px);

    border-color: rgba(182, 154, 98, .5);

    box-shadow:
        0 18px 40px rgba(36, 59, 53, .13);
}


/* =========================================================
   SERVICE ICON
========================================================= */

.bgd-story-point-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    background: #243b35;

    color: #d0b77a;

    font-size: 18px;
}


/* =========================================================
   BOX TEXT
========================================================= */

.bgd-story-point div {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.bgd-story-point strong {
    color: #243b35;

    font-size: 13px;

    line-height: 1.25;

    font-weight: 800;
}


.bgd-story-point small {
    color: #68726c;

    font-size: 10px;

    line-height: 1.4;
}


/* =========================================================
   LARGE PHONE BUTTON
========================================================= */

.bgd-story-button {
    min-height: 72px;

    display: inline-flex;
    align-items: center;

    gap: 13px;

    margin-top: 30px;

    padding: 7px 9px 7px 8px;

    color: #ffffff;

    background: #243b35;

    border: 1px solid #243b35;

    text-decoration: none;

    box-shadow:
        0 14px 35px rgba(36, 59, 53, .18);

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.bgd-story-button-icon {
    width: 56px;
    height: 56px;

    flex: 0 0 56px;

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

    color: #243b35;

    background: #d0b77a;

    font-size: 19px;
}


.bgd-story-button-text {
    display: flex;
    flex-direction: column;

    gap: 2px;

    padding: 0 12px 0 2px;
}


.bgd-story-button-text small {
    color: #b7c9bd;

    font-size: 8px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: 1.3px;
}


.bgd-story-button-text strong {
    color: #ffffff;

    font-size: 24px;

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: .3px;
}


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

.bgd-story-button-arrow {
    width: 42px;
    height: 42px;

    margin-left: 8px;

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

    color: #243b35;

    background: #ffffff;

    font-size: 16px;

    transition:
        background .25s ease,
        transform .25s ease;
}


.bgd-story-button:hover {
    color: #243b35;

    background: #d0b77a;

    transform: translateY(-4px);

    box-shadow:
        0 18px 40px rgba(36, 59, 53, .23);
}


.bgd-story-button:hover .bgd-story-button-icon {
    background: #ffffff;
}


.bgd-story-button:hover .bgd-story-button-text small {
    color: #52665b;
}


.bgd-story-button:hover .bgd-story-button-text strong {
    color: #243b35;
}


.bgd-story-button:hover .bgd-story-button-arrow {
    background: #243b35;

    color: #d0b77a;

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


/* =========================================================
   IMAGE AREA
========================================================= */

.bgd-story-image-area {
    position: relative;

    min-height: 620px;

    display: flex;
    align-items: stretch;
    justify-content: flex-end;

    margin-right: -12vw;
}


/* =========================================================
   DARK ANGLED BACKDROP
========================================================= */

.bgd-story-image-backdrop {
    position: absolute;

    top: -8%;
    right: -8%;

    width: 105%;
    height: 116%;

    background: #243b35;

    clip-path: polygon(
        18% 0,
        100% 0,
        100% 100%,
        0 100%
    );

    opacity: .95;
}


/* =========================================================
   SECOND DARK ANGLED LAYER
========================================================= */

.bgd-story-image-backdrop::before {
    content: "";

    position: absolute;

    inset: 0;

    background: #101816;

    clip-path: polygon(
        32% 0,
        100% 0,
        100% 100%,
        14% 100%
    );

    opacity: .55;
}


/* =========================================================
   GOLD ANGLED LINE
========================================================= */

.bgd-story-image-backdrop::after {
    content: "";

    position: absolute;

    top: 0;
    left: 19%;

    width: 2px;
    height: 100%;

    background: #b69a62;

    opacity: .35;

    transform: skewX(-18deg);
}


/* =========================================================
   MAIN IMAGE FRAME
========================================================= */

.bgd-story-image-frame {
    position: relative;

    z-index: 3;

    width: 78%;
    height: 620px;

    overflow: hidden;

    background: #243b35;

    border: none;

    box-shadow:
        0 30px 80px rgba(16, 24, 22, .28);

    clip-path: polygon(
        15% 0,
        100% 0,
        100% 100%,
        0 100%
    );

    transform: none;

    transition:
        transform .5s ease;
}


.bgd-story-image-frame:hover {
    transform: translateX(-5px);
}


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

.bgd-story-image-frame img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform .8s ease;
}


.bgd-story-image-frame:hover img {
    transform: scale(1.035);
}


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

.bgd-story-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(16, 24, 22, .25),
            transparent 35%,
            rgba(16, 24, 22, .08)
        ),
        linear-gradient(
            to top,
            rgba(16, 24, 22, .65),
            transparent 38%
        );

    pointer-events: none;
}


/* =========================================================
   IMAGE CORNER DETAILS
========================================================= */

.bgd-story-image-corner {
    position: absolute;

    z-index: 4;

    width: 55px;
    height: 55px;

    border-color: #d0b77a;

    border-style: solid;
}


.bgd-story-image-corner-tl {
    top: 22px;
    left: 18%;

    border-width: 2px 0 0 2px;
}


.bgd-story-image-corner-br {
    right: 22px;
    bottom: 22px;

    border-width: 0 2px 2px 0;
}


/* =========================================================
   IMAGE LABEL
========================================================= */

.bgd-story-image-label {
    position: absolute;

    z-index: 5;

    left: 20%;
    bottom: 35px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 11px 15px;

    background: rgba(16, 24, 22, .9);

    border: 1px solid rgba(208, 183, 122, .38);

    backdrop-filter: blur(6px);
}


.bgd-story-image-label > div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.bgd-story-image-label small {
    color: #aab5ae;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.4px;
}


.bgd-story-image-label strong {
    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .8px;
}


/* =========================================================
   STATUS DOT
========================================================= */

.bgd-story-live-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #8eae96;

    box-shadow:
        0 0 10px rgba(142, 174, 150, .9);

    animation:
        bgdStoryPulse 1.8s ease-in-out infinite;
}


/* =========================================================
   FLOATING CARD
========================================================= */

.bgd-story-floating-card {
    position: absolute;

    z-index: 8;

    right: 3%;
    bottom: 55px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 13px 17px;

    background: #ffffff;

    border: 1px solid rgba(182, 154, 98, .4);

    box-shadow:
        0 18px 45px rgba(16, 24, 22, .25);

    transform: rotate(-3deg);
}


.bgd-story-floating-icon {
    width: 42px;
    height: 42px;

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

    background: #243b35;

    color: #d0b77a;

    font-size: 17px;
}


.bgd-story-floating-card div:last-child {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.bgd-story-floating-card small {
    color: #7c857f;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.bgd-story-floating-card strong {
    color: #243b35;

    font-size: 12px;

    font-weight: 800;
}


/* =========================================================
   FLOATING WRENCH
========================================================= */

.bgd-story-decor-wrench {
    position: absolute;

    z-index: 9;

    left: 9%;
    top: 18%;

    width: 62px;
    height: 62px;

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

    border-radius: 50%;

    color: #d0b77a;

    background: rgba(36, 59, 53, .95);

    border: 1px solid rgba(208, 183, 122, .5);

    box-shadow:
        0 15px 35px rgba(16, 24, 22, .3);

    font-size: 25px;

    animation:
        bgdStoryToolFloat 5s ease-in-out infinite;
}


/* =========================================================
   FLOATING GEAR
========================================================= */

.bgd-story-decor-gear {
    position: absolute;

    z-index: 9;

    right: 2%;
    top: 30%;

    width: 43px;
    height: 43px;

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

    border-radius: 50%;

    color: #607c6c;

    background: #ffffff;

    border: 1px solid rgba(96, 124, 108, .35);

    font-size: 17px;

    animation:
        bgdStoryGearRotate 12s linear infinite;
}


/* =========================================================
   SPRING
========================================================= */

.bgd-story-decor-spring {
    position: absolute;

    z-index: 8;

    left: 14%;
    bottom: 20%;

    width: 38px;

    display: flex;
    flex-direction: column;

    gap: 3px;

    opacity: .6;
}


.bgd-story-decor-spring span {
    width: 38px;
    height: 9px;

    border: 2px solid #b69a62;

    border-radius: 50%;

    background: rgba(208, 183, 122, .04);
}


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

@keyframes bgdStoryPulse {

    0%,
    100% {
        opacity: .35;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}


@keyframes bgdStoryToolFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-8deg);
    }

    50% {
        transform: translateY(-9px) rotate(4deg);
    }
}


@keyframes bgdStoryGearRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


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

@media (max-width: 1199.98px) {

    .bgd-story-wrap {
        gap: 50px;
    }


    .bgd-story-image-area {
        margin-right: -7vw;
    }


    .bgd-story-image-frame {
        width: 82%;
    }


    .bgd-story-image-label {
        left: 18%;
    }


    .bgd-story-point {
        padding: 12px;
    }


    .bgd-story-point-icon {
        width: 44px;
        height: 44px;

        flex-basis: 44px;
    }


    .bgd-story-point strong {
        font-size: 12px;
    }


    .bgd-story-point small {
        font-size: 9px;
    }

}


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

@media (max-width: 991.98px) {

    .bgd-story-section {
        padding: 75px 0;
    }


    .bgd-story-wrap {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .bgd-story-content {
        max-width: 750px;
    }


    .bgd-story-points {
        grid-template-columns: repeat(3, 1fr);
    }


    .bgd-story-image-area {
        min-height: 560px;

        margin-right: 0;

        justify-content: center;
    }


    .bgd-story-image-backdrop {
        right: 0;

        width: 100%;

        clip-path: polygon(
            10% 0,
            100% 0,
            100% 100%,
            0 100%
        );
    }


    .bgd-story-image-frame {
        width: 90%;
        height: 560px;

        clip-path: polygon(
            10% 0,
            100% 0,
            100% 100%,
            0 100%
        );
    }


    .bgd-story-image-label {
        left: 13%;
    }


    .bgd-story-decor-wrench {
        left: 5%;
    }


    .bgd-story-decor-spring {
        left: 10%;
    }

}


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

@media (max-width: 767.98px) {

    .bgd-story-section {
        padding: 60px 0;
    }


    .bgd-story-content h2 {
        font-size: 35px;
    }


    .bgd-story-content h3 {
        font-size: 22px;
    }


    .bgd-story-content p {
        font-size: 14px;

        line-height: 1.8;
    }


    .bgd-story-points {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .bgd-story-point {
        min-height: 82px;

        padding: 14px;
    }


    .bgd-story-point-icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;
    }


    .bgd-story-point strong {
        font-size: 14px;
    }


    .bgd-story-point small {
        font-size: 10px;
    }


    .bgd-story-button {
        width: 100%;

        justify-content: flex-start;

        margin-top: 25px;
    }


    .bgd-story-button-text strong {
        font-size: 23px;
    }


    .bgd-story-button-arrow {
        margin-left: auto;
    }


    .bgd-story-image-area {
        min-height: 500px;
    }


    .bgd-story-image-frame {
        width: 94%;
        height: 500px;

        clip-path: polygon(
            8% 0,
            100% 0,
            100% 100%,
            0 100%
        );
    }


    .bgd-story-image-label {
        left: 11%;
        bottom: 25px;
    }


    .bgd-story-floating-card {
        right: 2%;
        bottom: 25px;

        padding: 10px 12px;
    }


    .bgd-story-floating-icon {
        width: 36px;
        height: 36px;

        font-size: 14px;
    }


    .bgd-story-floating-card strong {
        font-size: 10px;
    }


    .bgd-story-decor-wrench {
        left: 1%;
        top: 15%;

        width: 50px;
        height: 50px;

        font-size: 20px;
    }


    .bgd-story-decor-gear {
        right: 0;
        top: 27%;

        width: 36px;
        height: 36px;

        font-size: 14px;
    }


    .bgd-story-decor-spring {
        left: 6%;
        bottom: 18%;

        transform: scale(.8);
    }

}


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

@media (max-width: 480px) {

    .bgd-story-content h2 {
        font-size: 30px;
    }


    .bgd-story-content h3 {
        font-size: 20px;
    }


    .bgd-story-image-area {
        min-height: 430px;
    }


    .bgd-story-image-frame {
        width: 100%;
        height: 430px;

        clip-path: polygon(
            7% 0,
            100% 0,
            100% 100%,
            0 100%
        );
    }


    .bgd-story-image-label {
        left: 10%;
        bottom: 20px;
    }


    .bgd-story-floating-card {
        right: 0;
        bottom: 15px;
    }


    .bgd-story-decor-spring {
        display: none;
    }


    .bgd-story-button {
        min-height: 68px;
    }


    .bgd-story-button-icon {
        width: 50px;
        height: 50px;

        flex-basis: 50px;
    }


    .bgd-story-button-text {
        padding-left: 0;
    }


    .bgd-story-button-text small {
        font-size: 7px;
    }


    .bgd-story-button-text strong {
        font-size: 20px;
    }


    .bgd-story-button-arrow {
        width: 36px;
        height: 36px;

        font-size: 13px;
    }

}


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

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

    .bgd-story-image-frame,
    .bgd-story-live-dot,
    .bgd-story-decor-wrench,
    .bgd-story-decor-gear {
        animation: none !important;
    }

}


/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */


:root {
--primary: #243B35;
--secondary: #607C6C;
--accent: #B69A62;
--light-green: #DCE4DD;
--cream: #F5F1E8;
--beige: #E8E1D5;
--text: #292C2A;
--white: #FFFFFF;
}

.burbank-property-section {
position: relative;
overflow: hidden;
background: var(--cream);
}

.burbank-property-section .row {
min-height: 680px;
}

/* IMAGE */

.property-image {
position: relative;
height: 100%;
min-height: 680px;
overflow: hidden;
background: var(--primary);
}

.property-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.7s ease;
}

.property-image:hover img {
transform: scale(1.04);
}

.image-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(36, 59, 53, 0.08) 0%,
rgba(36, 59, 53, 0.12) 45%,
rgba(36, 59, 53, 0.72) 100%
);
}

.property-image::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 95px;
height: 100%;
background: var(--cream);
clip-path: polygon(100% 0, 100% 100%, 0 100%);
opacity: 0.95;
}

/* IMAGE BADGE */

.image-badge {
position: absolute;
left: 45px;
bottom: 45px;
z-index: 3;
display: flex;
align-items: center;
gap: 15px;
padding: 15px 22px;
background: rgba(36, 59, 53, 0.94);
border-left: 3px solid var(--accent);
color: var(--white);
backdrop-filter: blur(8px);
}

.badge-icon {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(182, 154, 98, 0.6);
color: var(--accent);
font-size: 22px;
}

.image-badge strong {
display: block;
margin-bottom: 3px;
color: var(--white);
font-size: 15px;
font-weight: 700;
}

.image-badge small {
display: block;
color: rgba(255, 255, 255, 0.65);
font-size: 11px;
letter-spacing: 0.5px;
}

.image-number {
position: absolute;
top: 40px;
left: 45px;
z-index: 3;
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
font-weight: 700;
letter-spacing: 3px;
}

/* CONTENT */

.property-content {
position: relative;
height: 100%;
min-height: 680px;
padding: 90px 10% 85px 11%;
display: flex;
flex-direction: column;
justify-content: center;
background: var(--cream);
}

.content-top-line {
width: 70px;
height: 3px;
margin-bottom: 22px;
background: var(--accent);
}

.property-eyebrow {
display: block;
margin-bottom: 17px;
color: var(--secondary);
font-size: 12px;
font-weight: 700;
letter-spacing: 2.2px;
}

.property-content h2 {
max-width: 680px;
margin: 0 0 27px;
color: var(--primary);
font-size: clamp(34px, 4vw, 52px);
line-height: 1.1;
font-weight: 700;
letter-spacing: -1px;
}

.property-content p {
max-width: 680px;
margin: 0 0 17px;
color: var(--text);
font-size: 16px;
line-height: 1.8;
}

.property-content p:last-of-type {
margin-bottom: 28px;
}

/* DETAILS */

.property-details {
display: flex;
flex-wrap: wrap;
gap: 12px 25px;
padding-top: 25px;
border-top: 1px solid var(--beige);
}

.detail-item {
display: flex;
align-items: center;
gap: 8px;
color: var(--primary);
font-size: 13px;
font-weight: 700;
}

.detail-item i {
color: var(--accent);
font-size: 18px;
}

/* DECORATIVE SIDE SHAPE */

.property-content::before {
content: "";
position: absolute;
top: 0;
left: -1px;
width: 1px;
height: 100%;
background: var(--beige);
}

/* LARGE DESKTOP */

@media (min-width: 1400px) {

.property-content {
    padding-left: 12%;
    padding-right: 12%;
}

.property-content h2 {
    font-size: 54px;
}

.property-content p {
    font-size: 17px;
}

}

/* TABLET */

@media (max-width: 991.98px) {

.burbank-property-section .row {
    min-height: auto;
}

.property-image {
    min-height: 520px;
}

.property-content {
    min-height: auto;
    padding: 75px 8%;
}

.property-image::after {
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 65px;
    clip-path: polygon(100% 100%, 100% 0, 0 100%);
}

.property-content::before {
    display: none;
}

.property-content h2 {
    max-width: 800px;
}

.property-content p {
    max-width: 850px;
}

}

/* MOBILE */

@media (max-width: 575.98px) {

.property-image {
    min-height: 390px;
}

.image-number {
    top: 25px;
    left: 25px;
    font-size: 11px;
}

.image-badge {
    left: 20px;
    bottom: 25px;
    right: 20px;
    padding: 12px 15px;
}

.badge-icon {
    width: 40px;
    height: 40px;
    font-size: 19px;
}

.property-image::after {
    height: 40px;
}

.property-content {
    padding: 60px 25px 65px;
}

.content-top-line {
    width: 50px;
    margin-bottom: 18px;
}

.property-eyebrow {
    font-size: 10px;
    letter-spacing: 1.6px;
}

.property-content h2 {
    font-size: 31px;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.property-content p {
    font-size: 15px;
    line-height: 1.75;
}

.property-details {
    gap: 12px;
    padding-top: 20px;
}

.detail-item {
    font-size: 12px;
}

}

/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

:root {
--primary: #243B35;
--secondary: #607C6C;
--accent: #B69A62;
--light-green: #DCE4DD;
--cream: #F5F1E8;
--beige: #E8E1D5;
--text: #292C2A;
--white: #FFFFFF;
}

.why-burbank-section {
position: relative;
overflow: hidden;
padding: 110px 0 100px;
background: var(--cream);
}

.why-burbank-shape {
position: absolute;
top: 0;
right: 0;
width: 32%;
height: 100%;
background: var(--light-green);
clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
opacity: .65;
}

.why-burbank-heading {
position: relative;
z-index: 2;
margin-bottom: 65px;
}

.why-burbank-eyebrow {
display: block;
margin-bottom: 18px;
color: var(--secondary);
font-size: 12px;
font-weight: 700;
letter-spacing: 2.8px;
}

.why-burbank-heading h2 {
max-width: 720px;
margin: 0;
color: var(--primary);
font-size: clamp(38px, 5vw, 62px);
line-height: 1.06;
font-weight: 700;
letter-spacing: -1.5px;
}

.why-burbank-intro {
max-width: 510px;
margin: 0 0 5px auto;
color: var(--text);
font-size: 16px;
line-height: 1.85;
}

.why-burbank-grid {
position: relative;
z-index: 2;
border-top: 1px solid rgba(36, 59, 53, .18);
border-left: 1px solid rgba(36, 59, 53, .18);
}

.why-burbank-card {
position: relative;
min-height: 360px;
padding: 48px 42px 45px;
overflow: hidden;
background: var(--primary);
border-right: 1px solid rgba(255, 255, 255, .12);
border-bottom: 1px solid rgba(255, 255, 255, .12);
transition: transform .35s ease, box-shadow .35s ease;
}

.why-burbank-card:hover {
transform: translateY(-7px);
box-shadow: 0 20px 45px rgba(36, 59, 53, .16);
}

.why-burbank-card-light {
background: var(--white);
border-right-color: rgba(36, 59, 53, .12);
border-bottom-color: rgba(36, 59, 53, .12);
}

.why-burbank-card-featured {
background: var(--secondary);
}

.why-burbank-number {
position: absolute;
top: 28px;
right: 35px;
color: rgba(255, 255, 255, .25);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}

.why-burbank-card-light .why-burbank-number {
color: rgba(36, 59, 53, .2);
}

.why-burbank-icon {
width: 58px;
height: 58px;
margin-bottom: 35px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(182, 154, 98, .65);
color: var(--accent);
font-size: 24px;
}

.why-burbank-card h3 {
max-width: 280px;
margin: 0 0 17px;
color: var(--white);
font-size: 23px;
line-height: 1.25;
font-weight: 700;
}

.why-burbank-card p {
max-width: 330px;
margin: 0;
color: rgba(255, 255, 255, .72);
font-size: 14px;
line-height: 1.8;
}

.why-burbank-card-light h3 {
color: var(--primary);
}

.why-burbank-card-light p {
color: var(--text);
}

.why-burbank-bottom {
position: relative;
z-index: 2;
display: flex;
align-items: flex-start;
gap: 25px;
max-width: 900px;
margin: 55px auto 0;
padding-top: 28px;
border-top: 1px solid rgba(36, 59, 53, .2);
}

.why-burbank-bottom-line {
flex: 0 0 55px;
width: 55px;
height: 3px;
margin-top: 10px;
background: var(--accent);
}

.why-burbank-bottom p {
margin: 0;
color: var(--text);
font-size: 15px;
line-height: 1.8;
}

.why-burbank-bottom strong {
color: var(--primary);
}

@media (min-width: 1400px) {
.why-burbank-section {
padding: 125px 0 110px;
}

.why-burbank-card {
    min-height: 380px;
    padding: 52px 48px;
}

.why-burbank-card h3 {
    font-size: 25px;
}

.why-burbank-card p {
    font-size: 15px;
}

}

@media (max-width: 991.98px) {
.why-burbank-section {
padding: 90px 0 80px;
}

.why-burbank-shape {
    width: 45%;
}

.why-burbank-heading {
    margin-bottom: 50px;
}

.why-burbank-heading h2 {
    font-size: 46px;
}

.why-burbank-intro {
    max-width: 700px;
    margin: 25px 0 0;
}

.why-burbank-card {
    min-height: 340px;
}

}

@media (max-width: 767.98px) {
.why-burbank-section {
padding: 75px 0 65px;
}

.why-burbank-shape {
    width: 70%;
    opacity: .45;
}

.why-burbank-heading {
    margin-bottom: 40px;
}

.why-burbank-heading h2 {
    font-size: 38px;
    letter-spacing: -.8px;
}

.why-burbank-intro {
    font-size: 15px;
    line-height: 1.75;
}

.why-burbank-card {
    min-height: auto;
    padding: 40px 32px;
}

.why-burbank-icon {
    margin-bottom: 27px;
}

.why-burbank-card h3 {
    font-size: 21px;
}

.why-burbank-bottom {
    margin-top: 40px;
    gap: 18px;
}

}

@media (max-width: 575.98px) {
.why-burbank-section {
padding: 65px 0 55px;
}

.why-burbank-shape {
    width: 100%;
    clip-path: polygon(55% 0, 100% 0, 100% 100%, 0 100%);
}

.why-burbank-eyebrow {
    font-size: 10px;
    letter-spacing: 2px;
}

.why-burbank-heading h2 {
    font-size: 33px;
    line-height: 1.12;
}

.why-burbank-intro {
    font-size: 14px;
}

.why-burbank-card {
    padding: 35px 25px;
}

.why-burbank-number {
    top: 23px;
    right: 25px;
}

.why-burbank-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 25px;
    font-size: 21px;
}

.why-burbank-card h3 {
    font-size: 20px;
}

.why-burbank-card p {
    font-size: 14px;
    line-height: 1.75;
}

.why-burbank-bottom {
    display: block;
    margin-top: 35px;
}

.why-burbank-bottom-line {
    margin-bottom: 18px;
}

.why-burbank-bottom p {
    font-size: 14px;
}

}


/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */


.burbank-expert-section {
position: relative;
overflow: hidden;
background: var(--cream);
}

.burbank-expert-section .row {
min-height: 760px;
}

/* =========================
TEXT CONTENT
========================= */

.expert-content {
position: relative;
min-height: 760px;
padding: 90px 11% 85px 10%;
display: flex;
flex-direction: column;
justify-content: center;
background: var(--cream);
overflow: hidden;
}

/* Large diagonal light-green field */
.expert-content::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 58%;
height: 100%;
background: var(--light-green);
clip-path: polygon(
0 0,
62% 0,
100% 100%,
0 100%
);
z-index: 0;
}

/* Dark green diagonal field */
.expert-content::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 28%;
height: 100%;
background: var(--secondary);
clip-path: polygon(
0 0,
42% 0,
100% 100%,
0 100%
);
opacity: .9;
z-index: 0;
}

/* Keep all content above shapes */
.expert-content > * {
position: relative;
z-index: 2;
}

/* Small accent line */
.expert-content-line {
width: 65px;
height: 3px;
background: var(--accent);
margin-bottom: 20px;
}

/* Eyebrow */
.expert-eyebrow {
display: block;
margin-bottom: 15px;
color: var(--secondary);
font-size: 11px;
font-weight: 700;
letter-spacing: 2.4px;
line-height: 1.4;
}

/* Heading */
.expert-content h2 {
max-width: 720px;
margin: 0 0 24px;
color: var(--primary);
font-size: clamp(35px, 4vw, 54px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -1px;
}

/* Intro */
.expert-intro {
max-width: 700px;
margin: 0 0 32px;
color: var(--text);
font-size: 15px;
line-height: 1.8;
}

/* =========================
SERVICE LIST
========================= */

.expert-services {
max-width: 720px;
border-top: 1px solid rgba(36, 59, 53, .18);
}

.expert-service {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 22px 0;
border-bottom: 1px solid rgba(36, 59, 53, .18);
}

.expert-service-icon {
flex: 0 0 46px;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--accent);
background: rgba(255, 255, 255, .55);
color: var(--accent);
font-size: 19px;
}

.expert-service h3 {
margin: 0 0 7px;
color: var(--primary);
font-size: 17px;
font-weight: 700;
line-height: 1.3;
}

.expert-service p {
margin: 0;
color: var(--text);
font-size: 13px;
line-height: 1.7;
}

/* =========================
BOTTOM CTA
========================= */

.expert-bottom {
max-width: 720px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
margin-top: 30px;
}

.expert-bottom p {
margin: 0;
color: var(--text);
font-size: 13px;
line-height: 1.7;
}

.expert-bottom strong {
color: var(--primary);
}

.expert-link {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 20px;
background: var(--primary);
color: var(--white);
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition:
background .3s ease,
transform .3s ease;
}

.expert-link i {
font-size: 15px;
transition: transform .3s ease;
}

.expert-link:hover {
background: var(--secondary);
color: var(--white);
transform: translateY(-2px);
}

.expert-link:hover i {
transform: translateX(4px);
}

/* =========================
IMAGE SIDE
========================= */

.expert-image-wrap {
position: relative;
width: 100%;
height: 100%;
min-height: 760px;
overflow: hidden;
background: var(--primary);
}

.expert-image-wrap img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform .8s ease;
}

.expert-image-wrap:hover img {
transform: scale(1.04);
}

/* Dark image overlay */
.expert-image-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(36, 59, 53, 0) 35%,
rgba(36, 59, 53, .18) 55%,
rgba(36, 59, 53, .72) 100%
);
pointer-events: none;
}

/* Diagonal cream transition from text to image */
.expert-image-wrap::after {
content: "";
position: absolute;
top: 0;
left: -1px;
right: auto;
width: 110px;
height: 100%;
background: var(--cream);
clip-path: polygon(
0 0,
100% 0,
0 100%
);
z-index: 3;
}

/* =========================
IMAGE LABEL
========================= */

.expert-image-label {
position: absolute;
top: 42px;
left: 45px;
z-index: 4;
display: flex;
align-items: center;
gap: 12px;
color: rgba(255, 255, 255, .9);
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
line-height: 1.4;
}

.expert-label-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid rgba(255, 255, 255, .55);
color: var(--white);
font-size: 11px;
}

/* =========================
IMAGE BADGE
========================= */

.expert-image-badge {
position: absolute;
left: 45px;
bottom: 45px;
z-index: 4;
display: flex;
align-items: center;
gap: 13px;
min-width: 205px;
padding: 15px 18px;
background: rgba(36, 59, 53, .9);
border-left: 3px solid var(--accent);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
color: var(--white);
}

.expert-image-badge > i {
color: var(--accent);
font-size: 24px;
}

.expert-image-badge strong {
display: block;
margin-bottom: 2px;
font-size: 13px;
font-weight: 700;
}

.expert-image-badge small {
display: block;
color: rgba(255, 255, 255, .7);
font-size: 10px;
letter-spacing: .5px;
}

/* =========================
LARGE DESKTOP
========================= */

@media (min-width: 1400px) {

.expert-content {
    padding-left: 11%;
    padding-right: 13%;
}

.expert-content h2 {
    font-size: 56px;
}

.expert-intro {
    font-size: 16px;
}

.expert-service p {
    font-size: 14px;
}

}

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

@media (max-width: 991.98px) {

.burbank-expert-section .row {
    min-height: auto;
}

.expert-content {
    min-height: auto;
    padding: 75px 8% 80px;
}

.expert-content::before {
    width: 65%;
}

.expert-content::after {
    width: 32%;
}

.expert-content h2 {
    max-width: 800px;
}

.expert-intro {
    max-width: 800px;
}

.expert-services {
    max-width: 800px;
}

.expert-bottom {
    max-width: 800px;
}

.expert-image-wrap {
    min-height: 560px;
}

/* Diagonal transition moves to bottom */
.expert-image-wrap::after {
    top: auto;
    left: 0;
    right: auto;
    bottom: -1px;
    width: 100%;
    height: 70px;
    background: var(--cream);
    clip-path: polygon(
        0 100%,
        100% 0,
        100% 100%
    );
}

}

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

@media (max-width: 767.98px) {

.expert-image-wrap {
    min-height: 480px;
}

.expert-image-label {
    top: 28px;
    left: 28px;
}

.expert-image-badge {
    left: 25px;
    bottom: 30px;
}

.expert-content {
    padding: 65px 7% 70px;
}

.expert-content::before {
    width: 85%;
}

.expert-content::after {
    width: 40%;
}

.expert-content h2 {
    font-size: 38px;
    line-height: 1.1;
}

.expert-intro {
    font-size: 14px;
    line-height: 1.75;
}

.expert-service {
    gap: 15px;
    padding: 20px 0;
}

.expert-service h3 {
    font-size: 16px;
}

.expert-service p {
    font-size: 13px;
}

.expert-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

}

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

@media (max-width: 575.98px) {

.expert-image-wrap {
    min-height: 390px;
}

.expert-image-wrap::after {
    height: 45px;
}

.expert-image-label {
    top: 22px;
    left: 20px;
    gap: 8px;
    font-size: 9px;
    letter-spacing: 1.5px;
}

.expert-label-number {
    width: 29px;
    height: 29px;
    font-size: 9px;
}

.expert-image-badge {
    left: 20px;
    right: 20px;
    bottom: 22px;
    min-width: 0;
    padding: 12px 14px;
}

.expert-image-badge > i {
    font-size: 21px;
}

.expert-image-badge strong {
    font-size: 12px;
}

.expert-image-badge small {
    font-size: 9px;
}

.expert-content {
    padding: 55px 25px 60px;
}

.expert-content::before {
    width: 100%;
    clip-path: polygon(
        0 0,
        78% 0,
        100% 55%,
        72% 100%,
        0 100%
    );
}

.expert-content::after {
    width: 55%;
    clip-path: polygon(
        0 0,
        55% 0,
        100% 50%,
        65% 100%,
        0 100%
    );
}

.expert-content-line {
    width: 50px;
    height: 2px;
    margin-bottom: 16px;
}

.expert-eyebrow {
    font-size: 9px;
    letter-spacing: 1.8px;
}

.expert-content h2 {
    font-size: 32px;
    line-height: 1.12;
    letter-spacing: -.5px;
    margin-bottom: 20px;
}

.expert-intro {
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 25px;
}

.expert-service {
    gap: 13px;
    padding: 18px 0;
}

.expert-service-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    font-size: 16px;
}

.expert-service h3 {
    font-size: 15px;
    margin-bottom: 5px;
}

.expert-service p {
    font-size: 12.5px;
    line-height: 1.65;
}

.expert-bottom {
    margin-top: 25px;
}

.expert-bottom p {
    font-size: 12.5px;
}

.expert-link {
    width: 100%;
    padding: 13px 18px;
}

}

/* =========================
EXTRA SMALL DEVICES
========================= */

@media (max-width: 380px) {

.expert-content {
    padding-left: 20px;
    padding-right: 20px;
}

.expert-content h2 {
    font-size: 29px;
}

.expert-service-icon {
    flex-basis: 35px;
    width: 35px;
    height: 35px;
}

.expert-service h3 {
    font-size: 14px;
}

.expert-service p {
    font-size: 12px;
}

.expert-image-wrap {
    min-height: 350px;
}

}

/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

.burbank-care-section {
position: relative;
padding: 115px 0 105px;
background: var(--cream);
overflow: hidden;
}

.care-top-shape {
position: absolute;
top: 0;
right: 0;
width: 38%;
height: 430px;
background: var(--light-green);
clip-path: polygon(
32% 0,
100% 0,
100% 100%,
0 100%
);
pointer-events: none;
}

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

.care-header {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 80px;
align-items: end;
margin-bottom: 60px;
}

.care-header-left {
position: relative;
}

.care-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
color: var(--secondary);
font-size: 10px;
font-weight: 700;
letter-spacing: 2.5px;
}

.care-eyebrow::before {
content: "";
width: 42px;
height: 2px;
background: var(--accent);
}

.care-header h2 {
max-width: 750px;
margin: 0;
color: var(--primary);
font-size: clamp(44px, 5vw, 68px);
font-weight: 400;
line-height: .98;
letter-spacing: -2px;
}

.care-header h2 span {
display: block;
color: var(--secondary);
font-weight: 700;
}

.care-header-right {
padding-bottom: 4px;
}

.care-header-right > p {
max-width: 470px;
margin: 0 0 25px;
color: var(--text);
font-size: 16px;
line-height: 1.85;
}

.care-service-area {
display: flex;
align-items: center;
gap: 10px;
padding-top: 18px;
border-top: 1px solid rgba(36, 59, 53, .18);
color: var(--secondary);
font-size: 12px;
font-weight: 700;
letter-spacing: .7px;
}

.care-service-area i {
color: var(--accent);
font-size: 18px;
}

/* =========================
FEATURE IMAGE
========================= */

.care-feature {
position: relative;
z-index: 2;
}

.care-image {
position: relative;
width: 100%;
height: 550px;
overflow: hidden;
background: var(--primary);
}

.care-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform .8s ease;
}

.care-feature:hover .care-image img {
transform: scale(1.035);
}

.care-image-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(36, 59, 53, .62) 0%,
rgba(36, 59, 53, .12) 55%,
rgba(36, 59, 53, .2) 100%
),
linear-gradient(
0deg,
rgba(36, 59, 53, .7) 0%,
transparent 42%
);
}

.care-image-label {
position: absolute;
top: 32px;
left: 35px;
z-index: 2;
display: flex;
align-items: center;
gap: 12px;
}

.care-image-label span {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid rgba(255, 255, 255, .65);
color: var(--white);
font-size: 10px;
}

.care-image-label small {
color: var(--white);
font-size: 9px;
font-weight: 700;
letter-spacing: 2px;
}

.care-image-caption {
position: absolute;
left: 35px;
bottom: 100px;
z-index: 2;
}

.care-image-caption strong {
display: block;
max-width: 430px;
margin-bottom: 8px;
color: var(--white);
font-size: 23px;
font-weight: 600;
line-height: 1.25;
}

.care-image-caption span {
color: var(--accent);
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
}

/* =========================
SERVICE PANELS
========================= */

.care-panels {
position: relative;
z-index: 5;
display: grid;
grid-template-columns: repeat(3, 1fr);
max-width: 1080px;
margin: -85px auto 0;
}

.care-panel {
position: relative;
min-height: 310px;
padding: 32px 30px 30px;
background: var(--white);
border-top: 4px solid var(--accent);
box-shadow: 0 15px 45px rgba(36, 59, 53, .08);
}

.care-panel:nth-child(2) {
margin-top: 30px;
}

.care-panel:nth-child(3) {
margin-top: 60px;
}

.care-panel-featured {
background: var(--primary);
border-top-color: var(--accent);
}

.care-panel-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 45px;
}

.care-panel-top span {
color: var(--secondary);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
}

.care-panel-top i {
color: var(--accent);
font-size: 22px;
}

.care-panel-featured .care-panel-top span {
color: rgba(255, 255, 255, .4);
}

.care-panel h3 {
margin: 0 0 14px;
color: var(--primary);
font-size: 25px;
font-weight: 700;
}

.care-panel-featured h3 {
color: var(--white);
}

.care-panel p {
margin: 0;
color: var(--text);
font-size: 14px;
line-height: 1.8;
}

.care-panel-featured p {
color: rgba(255, 255, 255, .72);
}

.care-panel a {
position: absolute;
left: 30px;
bottom: 28px;
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--secondary);
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
}

.care-panel a i {
transition: transform .3s ease;
}

.care-panel a:hover {
color: var(--accent);
}

.care-panel a:hover i {
transform: translateX(5px);
}

.care-panel-featured a {
color: var(--accent);
}

/* =========================
BOTTOM CTA AREA
========================= */

.care-bottom {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 70px 1fr auto;
align-items: center;
gap: 25px;
margin-top: 70px;
padding-top: 30px;
border-top: 1px solid rgba(36, 59, 53, .16);
}

.care-bottom-line {
display: flex;
align-items: center;
justify-content: center;
}

.care-bottom-line span {
display: block;
width: 42px;
height: 3px;
background: var(--accent);
}

.care-bottom-copy strong {
display: block;
margin-bottom: 6px;
color: var(--primary);
font-size: 14px;
}

.care-bottom-copy p {
max-width: 720px;
margin: 0;
color: var(--text);
font-size: 14px;
line-height: 1.8;
}

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

.care-buttons {
display: flex;
align-items: center;
gap: 12px;
}

.care-call-button,
.care-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 200px;
padding: 15px 22px;
font-size: 11px;
font-weight: 700;
letter-spacing: .5px;
text-decoration: none;
transition:
background .3s ease,
color .3s ease,
transform .3s ease;
}

.care-call-button {
background: var(--accent);
color: var(--white);
}

.care-call-button:hover {
background: var(--primary);
color: var(--white);
transform: translateY(-2px);
}

.care-call-button i {
font-size: 15px;
}

.care-button {
background: var(--primary);
color: var(--white);
}

.care-button:hover {
background: var(--secondary);
color: var(--white);
transform: translateY(-2px);
}

.care-button i {
transition: transform .3s ease;
}

.care-button:hover i {
transform: translate(3px, -3px);
}

/* =========================
LARGE DESKTOP
========================= */

@media (min-width: 1400px) {

.burbank-care-section {
    padding-top: 130px;
}

.care-header {
    gap: 110px;
    margin-bottom: 70px;
}

.care-header h2 {
    font-size: 72px;
}

.care-header-right > p {
    font-size: 17px;
}

.care-image {
    height: 610px;
}

.care-panel {
    min-height: 330px;
    padding: 36px 35px 32px;
}

.care-panel h3 {
    font-size: 27px;
}

.care-panel p {
    font-size: 14.5px;
}

.care-panel a {
    left: 35px;
}

.care-bottom-copy p {
    font-size: 14.5px;
}

}

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

@media (max-width: 991.98px) {

.burbank-care-section {
    padding: 90px 0;
}

.care-top-shape {
    width: 60%;
    height: 360px;
}

.care-header {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 45px;
}

.care-header h2 {
    max-width: 700px;
}

.care-header-right {
    max-width: 650px;
}

.care-header-right > p {
    font-size: 15px;
}

.care-image {
    height: 500px;
}

.care-panels {
    max-width: 900px;
    margin-top: -55px;
}

.care-panel {
    min-height: 290px;
    padding: 28px 24px;
}

.care-panel:nth-child(2) {
    margin-top: 20px;
}

.care-panel:nth-child(3) {
    margin-top: 40px;
}

.care-panel h3 {
    font-size: 23px;
}

.care-panel p {
    font-size: 13.5px;
}

.care-panel a {
    left: 24px;
}

.care-bottom {
    grid-template-columns: 50px 1fr;
}

.care-bottom-copy p {
    font-size: 13.5px;
}

.care-buttons {
    grid-column: 2;
    flex-wrap: wrap;
    margin-top: 5px;
}

}

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

@media (max-width: 767.98px) {

.burbank-care-section {
    padding: 70px 0 75px;
}

.care-top-shape {
    width: 100%;
    height: 40%;
    top: auto;
    bottom: 0;
    clip-path: polygon(
        30% 0,
        100% 0,
        100% 100%,
        0 100%
    );
}

.care-header {
    gap: 25px;
    margin-bottom: 35px;
}

.care-eyebrow {
    font-size: 9px;
    letter-spacing: 2px;
}

.care-header h2 {
    font-size: 43px;
    line-height: 1;
    letter-spacing: -1px;
}

.care-header-right > p {
    font-size: 14px;
    line-height: 1.8;
}

.care-service-area {
    font-size: 10px;
}

.care-image {
    height: 430px;
}

.care-image-label {
    top: 25px;
    left: 22px;
}

.care-image-caption {
    left: 22px;
    right: 22px;
    bottom: 25px;
}

.care-image-caption strong {
    font-size: 19px;
}

.care-panels {
    display: block;
    max-width: 92%;
    margin: -40px auto 0;
}

.care-panel,
.care-panel:nth-child(2),
.care-panel:nth-child(3) {
    min-height: 270px;
    margin: 0 0 12px;
    padding: 27px 25px;
}

.care-panel-top {
    margin-bottom: 35px;
}

.care-panel h3 {
    font-size: 21px;
}

.care-panel p {
    font-size: 13px;
    line-height: 1.75;
}

.care-panel a {
    left: 25px;
    bottom: 25px;
}

.care-bottom {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 40px;
}

.care-bottom-line {
    justify-content: flex-start;
}

.care-bottom-copy strong {
    font-size: 13px;
}

.care-bottom-copy p {
    font-size: 13px;
    line-height: 1.75;
}

.care-buttons {
    grid-column: auto;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    margin-top: 3px;
}

.care-call-button,
.care-button {
    width: 100%;
    min-width: 0;
    padding: 15px 20px;
}

}

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

@media (max-width: 575.98px) {

.burbank-care-section {
    padding: 60px 0 65px;
}

.care-header h2 {
    font-size: 36px;
}

.care-header-right > p {
    font-size: 13px;
}

.care-service-area {
    font-size: 9px;
}

.care-image {
    height: 360px;
}

.care-image-label {
    top: 20px;
    left: 18px;
}

.care-image-label span {
    width: 32px;
    height: 32px;
}

.care-image-label small {
    font-size: 7px;
    letter-spacing: 1.4px;
}

.care-image-caption {
    left: 18px;
    bottom: 20px;
}

.care-image-caption strong {
    font-size: 17px;
}

.care-image-caption span {
    font-size: 8px;
}

.care-panels {
    max-width: 94%;
}

.care-panel {
    min-height: 250px;
    padding: 24px 22px;
}

.care-panel h3 {
    font-size: 19px;
}

.care-panel p {
    font-size: 12px;
}

.care-panel a {
    left: 22px;
    bottom: 22px;
    font-size: 9px;
}

.care-bottom-copy strong {
    font-size: 11px;
}

.care-bottom-copy p {
    font-size: 12px;
}

.care-call-button,
.care-button {
    padding: 14px 18px;
    font-size: 10px;
}

}

.care-call-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 180px;
padding: 15px 24px;
background: var(--accent);
color: var(--white);
border: 1px solid var(--accent);
font-size: 19px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
transition: all .3s ease;
}

.care-call-button i {
font-size: 15px;
transition: transform .3s ease;
}

.care-call-button:hover {
background: var(--primary);
border-color: var(--primary);
color: var(--white);
transform: translateY(-2px);
}

.care-call-button:hover i {
transform: scale(1.1);
}

/* Mobile */
@media (max-width: 767.98px) {

.care-call-button {
    width: 100%;
    min-width: 0;
    padding: 15px 20px;
}

}

/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

.burbank-location-section {
position: relative;
padding: 120px 0;
background: var(--primary);
overflow: hidden;
}

.location-shape {
position: absolute;
pointer-events: none;
}

.location-shape-one {
top: -120px;
right: -80px;
width: 520px;
height: 520px;
background: var(--secondary);
opacity: .28;
clip-path: polygon(
35% 0,
100% 0,
100% 65%,
0 100%
);
}

.location-shape-two {
bottom: -180px;
left: -100px;
width: 480px;
height: 420px;
background: var(--accent);
opacity: .12;
clip-path: polygon(
0 35%,
65% 0,
100% 100%,
0 100%
);
}

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

.location-header {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 90px;
align-items: end;
margin-bottom: 65px;
}

.location-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
color: var(--accent);
font-size: 10px;
font-weight: 700;
letter-spacing: 2.5px;
}

.location-eyebrow span {
width: 42px;
height: 2px;
background: var(--accent);
}

.location-heading h2 {
max-width: 700px;
margin: 0;
color: var(--white);
font-size: clamp(44px, 5vw, 70px);
font-weight: 400;
line-height: .98;
letter-spacing: -2px;
}

.location-heading h2 span {
display: block;
color: var(--light-green);
font-weight: 700;
}

.location-intro {
padding-bottom: 5px;
}

.location-intro p {
max-width: 470px;
margin: 0 0 28px;
color: rgba(255, 255, 255, .72);
font-size: 16px;
line-height: 1.85;
}

.location-call {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 21px;
background: var(--accent);
color: var(--white);
font-size: 11px;
font-weight: 700;
letter-spacing: .8px;
text-decoration: none;
text-transform: uppercase;
transition: all .3s ease;
}

.location-call:hover {
background: var(--white);
color: var(--primary);
transform: translateY(-2px);
}

/* =========================
LOCATION CONTENT
========================= */

.location-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.05fr .95fr;
background: var(--white);
}

/* =========================
LOCATION LIST
========================= */

.location-list {
padding: 45px;
background: var(--white);
}

.location-list-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--beige);
}

.location-list-heading > div > span {
display: block;
margin-bottom: 7px;
color: var(--secondary);
font-size: 9px;
font-weight: 700;
letter-spacing: 2px;
}

.location-list-heading h3 {
margin: 0;
color: var(--primary);
font-size: 25px;
font-weight: 700;
}

.location-list-heading > i {
color: var(--accent);
font-size: 22px;
}

/* LOCATION GRID */

.location-items {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 30px;
}

.location-item {
display: grid;
grid-template-columns: 25px 1fr 16px;
align-items: center;
gap: 10px;
min-height: 92px;
padding: 13px 0;
border-bottom: 1px solid var(--beige);
color: inherit;
text-decoration: none;
transition:
padding .3s ease,
background .3s ease;
}

.location-item:hover {
padding-left: 7px;
}

.location-item > span {
color: var(--accent);
font-size: 8px;
font-weight: 700;
letter-spacing: 1px;
}

.location-item h4 {
margin: 0 0 4px;
color: var(--primary);
font-size: 16px;
font-weight: 700;
transition: color .3s ease;
}

.location-item p {
margin: 0;
color: var(--text);
font-size: 10.5px;
line-height: 1.5;
}

.location-item > i {
color: var(--secondary);
font-size: 12px;
transition:
transform .3s ease,
color .3s ease;
}

.location-item:hover h4 {
color: var(--accent);
}

.location-item:hover > i {
color: var(--accent);
transform: translate(3px, -3px);
}

/* =========================
ADDRESS
========================= */

.location-address {
display: flex;
align-items: center;
gap: 15px;
margin-top: 25px;
padding: 20px;
background: var(--cream);
}

.location-address-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
background: var(--primary);
color: var(--accent);
}

.location-address-icon i {
font-size: 18px;
}

.location-address small {
display: block;
margin-bottom: 5px;
color: var(--secondary);
font-size: 8px;
font-weight: 700;
letter-spacing: 1.5px;
}

.location-address strong {
color: var(--primary);
font-size: 13px;
font-weight: 700;
line-height: 1.5;
}

/* =========================
MAP
========================= */

.location-map {
position: relative;
min-height: 100%;
background: #dfe4e1;
overflow: hidden;
}

.location-map iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
filter: grayscale(15%) contrast(.95);
}

/* MAP CARD */

.map-overlay-card {
position: absolute;
left: 30px;
bottom: 30px;
z-index: 2;
display: flex;
align-items: center;
gap: 14px;
min-width: 260px;
padding: 16px 19px;
background: rgba(255, 255, 255, .96);
box-shadow: 0 15px 40px rgba(36, 59, 53, .15);
}

.map-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex-shrink: 0;
background: var(--primary);
color: var(--accent);
}

.map-card-icon i {
font-size: 17px;
}

.map-overlay-card span {
display: block;
margin-bottom: 4px;
color: var(--secondary);
font-size: 7px;
font-weight: 700;
letter-spacing: 1.4px;
}

.map-overlay-card strong {
display: block;
color: var(--primary);
font-size: 13px;
}

.map-overlay-card small {
display: block;
margin-top: 2px;
color: var(--text);
font-size: 10px;
}

/* =========================
BOTTOM CTA
========================= */

.location-bottom {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
margin-top: 55px;
padding-top: 35px;
border-top: 1px solid rgba(255, 255, 255, .16);
}

.location-bottom-copy > span {
display: block;
margin-bottom: 8px;
color: var(--accent);
font-size: 9px;
font-weight: 700;
letter-spacing: 2px;
}

.location-bottom-copy h3 {
margin: 0;
color: var(--white);
font-size: 25px;
font-weight: 600;
line-height: 1.3;
}

.location-buttons {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}

.location-call-button,
.location-estimate-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-width: 185px;
padding: 15px 20px;
font-size: 10px;
font-weight: 700;
letter-spacing: .7px;
text-decoration: none;
text-transform: uppercase;
transition: all .3s ease;
}

.location-call-button {
background: var(--accent);
color: var(--white);
}

.location-call-button:hover {
background: var(--white);
color: var(--primary);
transform: translateY(-2px);
}

.location-estimate-button {
background: transparent;
color: var(--white);
border: 1px solid rgba(255, 255, 255, .35);
}

.location-estimate-button:hover {
background: var(--secondary);
border-color: var(--secondary);
color: var(--white);
transform: translateY(-2px);
}

.location-estimate-button i {
transition: transform .3s ease;
}

.location-estimate-button:hover i {
transform: translate(3px, -3px);
}

/* =========================
LARGE DESKTOP
========================= */

@media (min-width: 1400px) {

.burbank-location-section {
    padding: 135px 0;
}

.location-header {
    gap: 120px;
    margin-bottom: 75px;
}

.location-heading h2 {
    font-size: 74px;
}

.location-intro p {
    font-size: 17px;
}

.location-list {
    padding: 50px;
}

.location-list-heading h3 {
    font-size: 28px;
}

.location-item {
    min-height: 98px;
}

.location-item h4 {
    font-size: 17px;
}

.location-item p {
    font-size: 11px;
}

}

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

@media (max-width: 1199.98px) {

.location-header {
    gap: 60px;
}

.location-list {
    padding: 35px;
}

.location-items {
    column-gap: 20px;
}

.location-item {
    grid-template-columns: 22px 1fr 14px;
    gap: 8px;
}

.location-item h4 {
    font-size: 15px;
}

.location-item p {
    font-size: 10px;
}

}

@media (max-width: 991.98px) {

.burbank-location-section {
    padding: 90px 0;
}

.location-header {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 50px;
}

.location-intro {
    max-width: 650px;
}

.location-content {
    grid-template-columns: 1fr;
}

.location-list {
    padding: 40px 35px;
}

.location-items {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 35px;
}

.location-map {
    min-height: 500px;
    height: 500px;
}

.location-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 25px;
}

.location-buttons {
    width: 100%;
}

}

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

@media (max-width: 767.98px) {

.burbank-location-section {
    padding: 70px 0;
}

.location-shape-one {
    width: 350px;
    height: 350px;
}

.location-shape-two {
    width: 300px;
    height: 300px;
}

.location-header {
    gap: 25px;
    margin-bottom: 35px;
}

.location-eyebrow {
    font-size: 9px;
    letter-spacing: 2px;
}

.location-heading h2 {
    font-size: 42px;
    letter-spacing: -1px;
}

.location-intro p {
    font-size: 14px;
    line-height: 1.8;
}

.location-list {
    padding: 30px 22px;
}

.location-list-heading {
    margin-bottom: 10px;
}

.location-list-heading h3 {
    font-size: 22px;
}

.location-items {
    grid-template-columns: 1fr;
}

.location-item {
    min-height: 82px;
    grid-template-columns: 27px 1fr 18px;
    gap: 10px;
}

.location-item h4 {
    font-size: 16px;
}

.location-item p {
    font-size: 11px;
}

.location-address {
    margin-top: 20px;
    padding: 17px;
}

.location-map {
    height: 400px;
    min-height: 400px;
}

.map-overlay-card {
    left: 18px;
    right: 18px;
    bottom: 18px;
    min-width: 0;
}

.location-bottom {
    margin-top: 40px;
    padding-top: 28px;
}

.location-bottom-copy h3 {
    font-size: 22px;
    line-height: 1.3;
}

.location-buttons {
    flex-direction: column;
    width: 100%;
}

.location-call-button,
.location-estimate-button {
    width: 100%;
}

}

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

@media (max-width: 575.98px) {

.burbank-location-section {
    padding: 60px 0;
}

.location-heading h2 {
    font-size: 36px;
}

.location-intro p {
    font-size: 13px;
}

.location-list {
    padding: 25px 18px;
}

.location-list-heading h3 {
    font-size: 20px;
}

.location-item {
    grid-template-columns: 24px 1fr 15px;
}

.location-item h4 {
    font-size: 15px;
}

.location-item p {
    font-size: 10.5px;
}

.location-address strong {
    font-size: 12px;
}

.location-map {
    height: 350px;
    min-height: 350px;
}

.map-overlay-card {
    padding: 13px;
}

.map-card-icon {
    width: 36px;
    height: 36px;
}

.map-overlay-card strong {
    font-size: 12px;
}

.location-bottom-copy h3 {
    font-size: 20px;
}

}

.location-call {
font-size: 16px;
font-weight: 700;
letter-spacing: .4px;
}

.location-call-button {
font-size: 16px;
font-weight: 700;
letter-spacing: .4px;
}

/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */


.burbank-hardware-alt {
    position: relative;
    padding: 125px 0;
    background: var(--cream);
    overflow: hidden;
    font-size: 16px;
}

.hardware-alt-line {
    position: absolute;
    top: 0;
    right: 0;
    width: 43%;
    height: 100%;
    background: var(--light-green);
    clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%);
    opacity: .65;
    pointer-events: none;
}

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

.hardware-alt-header {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .8fr 1.35fr .85fr;
    gap: 55px;
    align-items: end;
    margin-bottom: 65px;
}

.hardware-alt-label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.4px;
}

.hardware-alt-label span {
    width: 38px;
    height: 2px;
    background: var(--accent);
}

.hardware-alt-heading {
    color: var(--primary);
    font-size: clamp(46px, 5vw, 70px);
    font-weight: 300;
    line-height: .95;
    letter-spacing: -2.5px;
}

.hardware-alt-heading span {
    display: block;
}

.hardware-alt-heading strong {
    display: block;
    color: var(--secondary);
    font-weight: 700;
}

.hardware-alt-intro {
    padding-bottom: 4px;
}

.hardware-alt-intro p {
    max-width: 430px;
    margin: 0;
    color: var(--text);
    font-size: 17px;
    line-height: 1.85;
}


/* =========================
   FEATURE AREA
========================= */

.hardware-alt-feature {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    min-height: 570px;
}


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

.hardware-alt-image {
    position: relative;
    min-height: 570px;
    overflow: hidden;
    background: var(--primary);
    clip-path: polygon(
        0 0,
        94% 0,
        100% 12%,
        100% 100%,
        0 100%
    );
}

.hardware-alt-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(36, 59, 53, .05),
            rgba(36, 59, 53, .25)
        );
}

.hardware-alt-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .8s ease;
}

.hardware-alt-feature:hover .hardware-alt-image img {
    transform: scale(1.04);
}

.hardware-alt-image-label {
    position: absolute;
    left: 35px;
    bottom: 35px;
    z-index: 2;
    padding: 17px 20px;
    background: rgba(36, 59, 53, .92);
    border-left: 3px solid var(--accent);
}

.hardware-alt-image-label span {
    display: block;
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.hardware-alt-image-label strong {
    color: var(--white);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .5px;
}


/* =========================
   CONTENT PANEL
========================= */

.hardware-alt-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 65px 55px 65px 75px;
    background: var(--primary);
    color: var(--white);
}

.hardware-alt-panel-number {
    position: absolute;
    top: 30px;
    right: 35px;
    color: rgba(255, 255, 255, .08);
    font-size: 90px;
    font-weight: 300;
    line-height: 1;
}

.hardware-alt-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 25px;
    background: var(--accent);
    color: var(--white);
}

.hardware-alt-panel-icon i {
    font-size: 21px;
}

.hardware-alt-panel-eyebrow {
    display: block;
    margin-bottom: 16px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.hardware-alt-panel h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 22px;
    color: var(--white);
    font-size: clamp(30px, 3vw, 43px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -1px;
}

.hardware-alt-panel h3 span {
    display: block;
    color: var(--light-green);
    font-weight: 700;
}

.hardware-alt-panel > p {
    position: relative;
    z-index: 2;
    max-width: 560px;
    margin: 0 0 19px;
    color: rgba(255, 255, 255, .7);
    font-size: 16px;
    line-height: 1.85;
}


/* =========================
   PHONE CTA
========================= */

.hardware-alt-phone {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding: 17px 19px;
    background: var(--accent);
    color: var(--white);
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
    transition: all .3s ease;
}

.hardware-alt-phone:hover {
    background: var(--white);
    color: var(--primary);
    transform: translateY(-2px);
}

.hardware-alt-phone span {
    display: flex;
    flex-direction: column;
}

.hardware-alt-phone small {
    margin-bottom: 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.hardware-alt-phone i {
    font-size: 17px;
    transition: transform .3s ease;
}

.hardware-alt-phone:hover i {
    transform: translate(3px, -3px);
}


/* =========================
   HARDWARE SERVICE STRIP
========================= */

.hardware-alt-services {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: -1px;
    background: var(--white);
    box-shadow: 0 20px 45px rgba(36, 59, 53, .08);
}

.hardware-alt-service {
    position: relative;
    display: grid;
    grid-template-columns: 25px 1fr;
    gap: 12px;
    min-height: 170px;
    padding: 28px 25px;
    border-right: 1px solid var(--beige);
}

.hardware-alt-service:last-child {
    border-right: 0;
}

.hardware-alt-service > span {
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.hardware-alt-service i {
    display: block;
    margin-bottom: 13px;
    color: var(--secondary);
    font-size: 23px;
}

.hardware-alt-service h4 {
    margin: 0 0 8px;
    color: var(--primary);
    font-size: 16px;
    font-weight: 700;
}

.hardware-alt-service p {
    margin: 0;
    color: #626762;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================
   SERVICE AREA
========================= */

.hardware-alt-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 45px;
    padding-top: 30px;
    border-top: 1px solid rgba(36, 59, 53, .18);
}

.hardware-alt-bottom-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: var(--secondary);
    color: var(--white);
}

.hardware-alt-bottom-mark i {
    font-size: 17px;
}

.hardware-alt-bottom-copy {
    flex: 1;
}

.hardware-alt-bottom-copy span {
    display: block;
    margin-bottom: 4px;
    color: var(--accent);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.hardware-alt-bottom-copy p {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
}

.hardware-alt-estimate {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--primary);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .3s ease;
}

.hardware-alt-estimate:hover {
    background: var(--accent);
    color: var(--white);
    transform: translateY(-2px);
}

.hardware-alt-estimate i {
    transition: transform .3s ease;
}

.hardware-alt-estimate:hover i {
    transform: translate(3px, -3px);
}


/* =========================
   LARGE DESKTOP
========================= */

@media (min-width: 1400px) {

    .burbank-hardware-alt {
        padding: 145px 0;
    }

    .hardware-alt-header {
        gap: 75px;
        margin-bottom: 75px;
    }

    .hardware-alt-heading {
        font-size: 76px;
    }

    .hardware-alt-intro p {
        font-size: 18px;
    }

    .hardware-alt-feature,
    .hardware-alt-image {
        min-height: 640px;
    }

    .hardware-alt-panel {
        padding: 75px 65px 75px 85px;
    }

    .hardware-alt-panel > p {
        font-size: 17px;
    }

    .hardware-alt-service {
        min-height: 185px;
    }

    .hardware-alt-service h4 {
        font-size: 17px;
    }

    .hardware-alt-service p {
        font-size: 14px;
    }

}


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

@media (max-width: 1199.98px) {

    .hardware-alt-header {
        grid-template-columns: .7fr 1.2fr .9fr;
        gap: 35px;
    }

    .hardware-alt-heading {
        font-size: 57px;
    }

    .hardware-alt-intro p {
        font-size: 16px;
    }

    .hardware-alt-feature,
    .hardware-alt-image {
        min-height: 540px;
    }

    .hardware-alt-panel {
        padding: 50px 40px 50px 55px;
    }

    .hardware-alt-panel h3 {
        font-size: 34px;
    }

    .hardware-alt-panel > p {
        font-size: 15px;
    }

    .hardware-alt-service {
        padding: 23px 18px;
    }

    .hardware-alt-service p {
        font-size: 12px;
    }

}


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

@media (max-width: 991.98px) {

    .burbank-hardware-alt {
        padding: 90px 0;
    }

    .hardware-alt-line {
        width: 60%;
    }

    .hardware-alt-header {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-bottom: 50px;
    }

    .hardware-alt-heading {
        font-size: 62px;
    }

    .hardware-alt-intro p {
        max-width: 650px;
        font-size: 16px;
    }

    .hardware-alt-feature {
        grid-template-columns: 1fr;
    }

    .hardware-alt-image {
        min-height: 500px;
        clip-path: polygon(
            0 0,
            100% 0,
            100% 94%,
            94% 100%,
            0 100%
        );
    }

    .hardware-alt-panel {
        padding: 55px;
    }

    .hardware-alt-panel > p {
        font-size: 15px;
    }

    .hardware-alt-services {
        grid-template-columns: repeat(2, 1fr);
    }

    .hardware-alt-service:nth-child(2) {
        border-right: 0;
    }

    .hardware-alt-service:nth-child(-n+2) {
        border-bottom: 1px solid var(--beige);
    }

}


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

@media (max-width: 767.98px) {

    .burbank-hardware-alt {
        padding: 70px 0;
    }

    .hardware-alt-line {
        width: 75%;
    }

    .hardware-alt-label {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .hardware-alt-heading {
        font-size: 46px;
        letter-spacing: -1.5px;
    }

    .hardware-alt-intro p {
        font-size: 15px;
        line-height: 1.8;
    }

    .hardware-alt-image {
        min-height: 400px;
    }

    .hardware-alt-image-label {
        left: 20px;
        bottom: 20px;
    }

    .hardware-alt-image-label span {
        font-size: 8px;
    }

    .hardware-alt-image-label strong {
        font-size: 17px;
    }

    .hardware-alt-panel {
        padding: 45px 25px;
    }

    .hardware-alt-panel-number {
        top: 20px;
        right: 20px;
        font-size: 70px;
    }

    .hardware-alt-panel-eyebrow {
        font-size: 9px;
    }

    .hardware-alt-panel h3 {
        font-size: 34px;
    }

    .hardware-alt-panel > p {
        font-size: 14px;
        line-height: 1.85;
    }

    .hardware-alt-phone {
        font-size: 18px;
    }

    .hardware-alt-phone small {
        font-size: 8px;
    }

    .hardware-alt-services {
        grid-template-columns: 1fr;
    }

    .hardware-alt-service {
        min-height: auto;
        padding: 25px 20px;
        border-right: 0;
        border-bottom: 1px solid var(--beige);
    }

    .hardware-alt-service:last-child {
        border-bottom: 0;
    }

    .hardware-alt-service h4 {
        font-size: 15px;
    }

    .hardware-alt-service p {
        font-size: 12px;
        line-height: 1.7;
    }

    .hardware-alt-bottom {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .hardware-alt-bottom-copy {
        width: calc(100% - 60px);
        flex: none;
    }

    .hardware-alt-bottom-copy p {
        font-size: 13px;
        line-height: 1.7;
    }

    .hardware-alt-estimate {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }

}


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

@media (max-width: 575.98px) {

    .burbank-hardware-alt {
        padding: 60px 0;
    }

    .hardware-alt-heading {
        font-size: 38px;
    }

    .hardware-alt-intro p {
        font-size: 14px;
    }

    .hardware-alt-image {
        min-height: 340px;
    }

    .hardware-alt-image-label {
        padding: 13px 15px;
    }

    .hardware-alt-image-label strong {
        font-size: 14px;
    }

    .hardware-alt-panel {
        padding: 35px 20px;
    }

    .hardware-alt-panel h3 {
        font-size: 29px;
    }

    .hardware-alt-panel > p {
        font-size: 13px;
        line-height: 1.8;
    }

    .hardware-alt-phone {
        padding: 15px;
        font-size: 17px;
    }

    .hardware-alt-service {
        padding: 22px 18px;
    }

    .hardware-alt-service h4 {
        font-size: 14px;
    }

    .hardware-alt-service p {
        font-size: 11.5px;
    }

    .hardware-alt-bottom-copy p {
        font-size: 12px;
    }

}


/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

.burbank-faq-editorial {
position: relative;
padding: 130px 0;
background: var(--cream);
overflow: hidden;
}

.faq-editorial-shape {
position: absolute;
top: -15%;
right: -8%;
width: 48%;
height: 130%;
background: var(--light-green);
opacity: .58;
clip-path: polygon(32% 0, 100% 0, 100% 100%, 0 100%);
pointer-events: none;
}

.faq-editorial-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: .72fr 1.28fr;
gap: 85px;
align-items: start;
}

/* ================================
SIDEBAR
================================ */

.faq-editorial-sidebar {
position: sticky;
top: 40px;
min-height: 650px;
padding: 48px 45px;
background: var(--primary);
overflow: hidden;
}

.faq-editorial-sidebar::before {
content: "";
position: absolute;
right: -100px;
bottom: -100px;
width: 330px;
height: 330px;
border: 1px solid rgba(255,255,255,.12);
transform: rotate(45deg);
}

.faq-editorial-sidebar::after {
content: "";
position: absolute;
right: -80px;
bottom: -80px;
width: 230px;
height: 230px;
background: var(--secondary);
opacity: .15;
transform: rotate(45deg);
}

.faq-editorial-index {
position: relative;
z-index: 2;
margin-bottom: 55px;
color: rgba(255,255,255,.08);
font-size: 115px;
font-weight: 300;
line-height: .7;
letter-spacing: -7px;
}

.faq-editorial-label {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
color: var(--accent);
font-size: 9px;
font-weight: 700;
letter-spacing: 2px;
}

.faq-editorial-label i {
display: block;
width: 38px;
height: 2px;
background: var(--accent);
}

.faq-editorial-sidebar h2 {
position: relative;
z-index: 2;
margin: 0 0 28px;
color: var(--white);
font-size: clamp(44px, 4vw, 62px);
font-weight: 300;
line-height: .98;
letter-spacing: -2.5px;
}

.faq-editorial-sidebar h2 strong {
display: block;
color: var(--light-green);
font-weight: 700;
}

.faq-editorial-sidebar > p {
position: relative;
z-index: 2;
max-width: 430px;
margin: 0 0 40px;
color: rgba(255,255,255,.74);
font-size: 16px;
line-height: 1.85;
}

.faq-editorial-call {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 15px;
padding-top: 25px;
border-top: 1px solid rgba(255,255,255,.15);
}

.faq-editorial-call-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: var(--accent);
color: var(--white);
flex-shrink: 0;
}

.faq-editorial-call-icon i {
font-size: 18px;
}

.faq-editorial-call span {
display: block;
margin-bottom: 4px;
color: rgba(255,255,255,.55);
font-size: 8px;
font-weight: 700;
letter-spacing: 1.7px;
}

.faq-editorial-call a {
color: var(--white);
font-size: 19px;
font-weight: 700;
text-decoration: none;
}

.faq-editorial-mark {
position: absolute;
right: 35px;
bottom: 28px;
z-index: 3;
color: rgba(255,255,255,.2);
font-size: 8px;
font-weight: 700;
line-height: 1.6;
letter-spacing: 2px;
text-align: right;
}

/* ================================
ACCORDION
================================ */

.faq-editorial-accordion {
border-top: 1px solid rgba(36,59,53,.18);
}

.faq-editorial-item {
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid rgba(36,59,53,.18) !important;
border-radius: 0 !important;
}

.faq-editorial-button {
position: relative;
display: grid !important;
grid-template-columns: 55px 1fr 48px;
gap: 22px;
align-items: center;
width: 100%;
min-height: 145px;
padding: 28px 10px;
background: transparent !important;
color: var(--primary) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
text-align: left;
}

.faq-editorial-button::after {
display: none !important;
}

.faq-editorial-button::before {
content: "";
position: absolute;
left: 0;
top: 22px;
bottom: 22px;
width: 3px;
background: var(--accent);
opacity: 0;
transform: scaleY(.2);
transition: all .35s ease;
}

.faq-editorial-button:not(.collapsed)::before {
opacity: 1;
transform: scaleY(1);
}

.faq-editorial-button:hover {
background: rgba(255,255,255,.35) !important;
}

.faq-editorial-number {
align-self: start;
padding-top: 5px;
color: var(--accent);
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
}

.faq-editorial-question {
display: block;
}

.faq-editorial-question small {
display: block;
margin-bottom: 10px;
color: var(--secondary);
font-size: 8px;
font-weight: 700;
letter-spacing: 2px;
}

.faq-editorial-question strong {
display: block;
max-width: 720px;
color: var(--primary);
font-size: 22px;
font-weight: 600;
line-height: 1.4;
}

.faq-editorial-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid rgba(36,59,53,.25);
color: var(--primary);
transition: all .35s ease;
}

.faq-editorial-toggle i {
font-size: 18px;
transition: transform .35s ease;
}

.faq-editorial-button:not(.collapsed) .faq-editorial-toggle {
background: var(--accent);
border-color: var(--accent);
color: var(--white);
}

.faq-editorial-button:not(.collapsed) .faq-editorial-toggle i {
transform: rotate(45deg);
}

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

.faq-editorial-answer {
display: grid;
grid-template-columns: 55px 1fr;
gap: 22px;
padding: 0 58px 38px 87px !important;
background: rgba(255,255,255,.42);
}

.faq-editorial-answer-line {
width: 1px;
min-height: 100%;
background: var(--beige);
}

.faq-editorial-answer p {
max-width: 720px;
margin: 0 0 16px;
color: #505853;
font-size: 15px;
line-height: 1.9;
}

.faq-editorial-answer p:last-child {
margin-bottom: 0;
}

/* ================================
CTA
================================ */

.faq-editorial-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-top: 45px;
padding: 30px 0 0;
border-top: 1px solid rgba(36,59,53,.18);
}

.faq-editorial-cta > div:first-child span {
display: block;
margin-bottom: 6px;
color: var(--accent);
font-size: 8px;
font-weight: 700;
letter-spacing: 2px;
}

.faq-editorial-cta h3 {
margin: 0;
color: var(--primary);
font-size: 25px;
font-weight: 600;
}

.faq-editorial-actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}

.faq-editorial-actions a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 50px;
padding: 0 20px;
background: var(--primary);
color: var(--white);
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
text-decoration: none;
transition: all .3s ease;
}

.faq-editorial-actions a:first-child {
background: var(--accent);
}

.faq-editorial-actions a:hover {
background: var(--secondary);
color: var(--white);
transform: translateY(-2px);
}

.faq-editorial-actions .faq-editorial-estimate {
background: var(--primary);
}

.faq-editorial-actions .faq-editorial-estimate:hover {
background: var(--secondary);
}

.faq-editorial-estimate i {
transition: transform .3s ease;
}

.faq-editorial-estimate:hover i {
transform: translate(3px,-3px);
}

/* ================================
LARGE
================================ */

@media (min-width: 1400px) {

.burbank-faq-editorial {
    padding: 150px 0;
}

.faq-editorial-grid {
    gap: 110px;
}

.faq-editorial-sidebar {
    min-height: 700px;
    padding: 55px 50px;
}

.faq-editorial-sidebar > p {
    font-size: 17px;
}

.faq-editorial-question strong {
    font-size: 24px;
}

.faq-editorial-answer p {
    font-size: 16px;
}

}

/* ================================
LAPTOP
================================ */

@media (max-width: 1199.98px) {

.faq-editorial-grid {
    grid-template-columns: .75fr 1.25fr;
    gap: 55px;
}

.faq-editorial-sidebar {
    padding: 40px 35px;
}

.faq-editorial-index {
    font-size: 90px;
}

.faq-editorial-sidebar h2 {
    font-size: 50px;
}

.faq-editorial-sidebar > p {
    font-size: 15px;
}

.faq-editorial-button {
    grid-template-columns: 42px 1fr 42px;
    gap: 15px;
}

.faq-editorial-question strong {
    font-size: 19px;
}

.faq-editorial-answer {
    grid-template-columns: 42px 1fr;
    padding-left: 57px !important;
    padding-right: 30px !important;
}

}

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

@media (max-width: 991.98px) {

.burbank-faq-editorial {
    padding: 90px 0;
}

.faq-editorial-shape {
    width: 70%;
}

.faq-editorial-grid {
    grid-template-columns: 1fr;
    gap: 55px;
}

.faq-editorial-sidebar {
    position: relative;
    top: auto;
    min-height: auto;
    padding: 45px;
}

.faq-editorial-index {
    margin-bottom: 35px;
}

.faq-editorial-sidebar h2 {
    font-size: 60px;
}

.faq-editorial-sidebar > p {
    max-width: 700px;
    font-size: 16px;
}

.faq-editorial-mark {
    display: none;
}

.faq-editorial-question strong {
    font-size: 21px;
}

.faq-editorial-answer p {
    font-size: 15px;
}

}

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

@media (max-width: 767.98px) {

.burbank-faq-editorial {
    padding: 70px 0;
}

.faq-editorial-shape {
    width: 90%;
}

.faq-editorial-sidebar {
    padding: 35px 25px;
}

.faq-editorial-index {
    margin-bottom: 30px;
    font-size: 75px;
}

.faq-editorial-label {
    font-size: 8px;
    letter-spacing: 1.5px;
}

.faq-editorial-sidebar h2 {
    font-size: 45px;
    letter-spacing: -1px;
}

.faq-editorial-sidebar > p {
    font-size: 14px;
    line-height: 1.85;
}

.faq-editorial-call a {
    font-size: 18px;
}

.faq-editorial-button {
    grid-template-columns: 30px 1fr 36px;
    gap: 10px;
    min-height: 115px;
    padding: 22px 5px;
}

.faq-editorial-button::before {
    top: 15px;
    bottom: 15px;
}

.faq-editorial-number {
    font-size: 9px;
}

.faq-editorial-question small {
    margin-bottom: 7px;
    font-size: 7px;
    letter-spacing: 1.3px;
}

.faq-editorial-question strong {
    font-size: 16px;
    line-height: 1.5;
}

.faq-editorial-toggle {
    width: 32px;
    height: 32px;
}

.faq-editorial-toggle i {
    font-size: 15px;
}

.faq-editorial-answer {
    grid-template-columns: 20px 1fr;
    gap: 12px;
    padding: 0 10px 28px 45px !important;
}

.faq-editorial-answer p {
    font-size: 13px;
    line-height: 1.85;
}

.faq-editorial-cta {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
}

.faq-editorial-cta h3 {
    font-size: 21px;
}

.faq-editorial-actions {
    width: 100%;
    flex-direction: column;
}

.faq-editorial-actions a {
    width: 100%;
}

}

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

@media (max-width: 575.98px) {

.burbank-faq-editorial {
    padding: 60px 0;
}

.faq-editorial-sidebar {
    padding: 30px 20px;
}

.faq-editorial-index {
    font-size: 62px;
}

.faq-editorial-sidebar h2 {
    font-size: 37px;
}

.faq-editorial-sidebar > p {
    font-size: 13px;
}

.faq-editorial-button {
    grid-template-columns: 24px 1fr 32px;
    gap: 8px;
    min-height: 105px;
}

.faq-editorial-question strong {
    font-size: 15px;
}

.faq-editorial-toggle {
    width: 29px;
    height: 29px;
}

.faq-editorial-answer {
    padding-left: 32px !important;
    padding-right: 5px !important;
}

.faq-editorial-answer p {
    font-size: 12px;
}

.faq-editorial-cta h3 {
    font-size: 19px;
}

}


/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */


.burbank-footer {
position: relative;
background: var(--primary);
color: var(--white);
overflow: hidden;
}

.burbank-footer::before {
content: "";
position: absolute;
top: 0;
right: -160px;
width: 480px;
height: 480px;
border: 1px solid rgba(255,255,255,.08);
transform: rotate(45deg);
pointer-events: none;
}

.burbank-footer::after {
content: "";
position: absolute;
bottom: -180px;
left: -150px;
width: 430px;
height: 430px;
background: var(--secondary);
opacity: .08;
transform: rotate(45deg);
pointer-events: none;
}

/* ========================================
TOP FOOTER
======================================== */

.burbank-footer-top {
position: relative;
z-index: 2;
padding: 100px 0 85px;
border-bottom: 1px solid rgba(255,255,255,.13);
}

.burbank-footer-grid {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 110px;
align-items: start;
}

/* ========================================
LEFT COLUMN
======================================== */

.burbank-footer-brand {
max-width: 650px;
}

.burbank-footer-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
color: var(--accent);
font-size: 9px;
font-weight: 700;
letter-spacing: 2.5px;
}

.burbank-footer-eyebrow::before {
content: "";
width: 38px;
height: 2px;
flex-shrink: 0;
background: var(--accent);
}

.burbank-footer-brand h2 {
margin: 0 0 25px;
color: var(--white);
font-size: clamp(48px, 5vw, 72px);
font-weight: 300;
line-height: .95;
letter-spacing: -3px;
}

.burbank-footer-brand h2 strong {
color: var(--light-green);
font-weight: 700;
}

.burbank-footer-description {
max-width: 560px;
margin: 0 0 45px;
color: rgba(255,255,255,.68);
font-size: 15px;
line-height: 1.85;
}

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

.burbank-footer-contact {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid rgba(255,255,255,.14);
}

.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 14px;
min-height: 90px;
padding: 22px 20px 22px 0;
color: var(--white);
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.1);
transition: all .3s ease;
}

.footer-contact-item:nth-child(odd) {
border-right: 1px solid rgba(255,255,255,.1);
}

.footer-contact-item:nth-child(even) {
padding-left: 20px;
}

.footer-contact-item:last-child,
.footer-contact-item:nth-last-child(2) {
border-bottom: 0;
}

.footer-contact-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
background: rgba(182,154,98,.15);
color: var(--accent);
transition: all .3s ease;
}

.footer-contact-icon i {
font-size: 15px;
}

.footer-contact-item > span:last-child {
color: rgba(255,255,255,.82);
font-size: 14px;
line-height: 1.6;
}

.footer-contact-item small {
display: block;
margin-bottom: 4px;
color: rgba(255,255,255,.42);
font-size: 7px;
font-weight: 700;
letter-spacing: 1.8px;
}

.footer-contact-item:hover {
color: var(--white);
}

.footer-contact-item:hover .footer-contact-icon {
background: var(--accent);
color: var(--primary);
}

/* ========================================
RIGHT COLUMN
======================================== */

.burbank-footer-right {
padding-top: 12px;
}

.footer-right-heading {
margin-bottom: 30px;
}

.footer-right-heading > span {
display: block;
margin-bottom: 12px;
color: var(--accent);
font-size: 8px;
font-weight: 700;
letter-spacing: 2px;
}

.footer-right-heading h3 {
max-width: 470px;
margin: 0;
color: var(--white);
font-size: 31px;
font-weight: 400;
line-height: 1.25;
}

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

.burbank-footer-form {
margin-top: 30px;
}

.burbank-footer-form fieldset {
margin: 0;
padding: 0;
border: 0;
}

.burbank-footer-form legend {
margin-bottom: 20px;
color: rgba(255,255,255,.45);
font-size: 8px;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
}

.footer-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 11px;
}

.footer-form-field,
.footer-form-full {
min-width: 0;
}

.footer-form-wide,
.footer-form-full {
grid-column: 1 / -1;
}

/* INPUTS */

.burbank-footer-form input,
.burbank-footer-form textarea,
.burbank-footer-form select {
display: block;
width: 100%;
border: 1px solid rgba(255,255,255,.15);
border-radius: 0;
outline: none;
background: rgba(255,255,255,.055);
color: var(--white);
font-family: inherit;
font-size: 12px;
transition:
border-color .3s ease,
background .3s ease,
box-shadow .3s ease;
}

.burbank-footer-form input,
.burbank-footer-form select {
height: 48px;
padding: 0 14px;
}

.burbank-footer-form textarea {
min-height: 105px;
padding: 14px;
resize: vertical;
}

.burbank-footer-form input::placeholder,
.burbank-footer-form textarea::placeholder {
color: rgba(255,255,255,.45);
}

.burbank-footer-form select {
color: rgba(255,255,255,.7);
appearance: auto;
}

.burbank-footer-form select option {
color: var(--text);
background: var(--white);
}

.burbank-footer-form input:focus,
.burbank-footer-form textarea:focus,
.burbank-footer-form select:focus {
border-color: var(--accent);
background: rgba(255,255,255,.09);
box-shadow: 0 0 0 2px rgba(182,154,98,.08);
}

/* FORM LABELS */

.footer-form-full > label {
display: block;
margin: 2px 0 7px;
color: rgba(255,255,255,.5);
font-size: 8px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}

/* SERVICE DATE */

.footer-service-date {
display: grid;
grid-template-columns: 1.2fr .65fr .75fr;
gap: 8px;
}

/* SUBMIT */

.footer-form-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 52px;
margin-top: 3px;
padding: 0 20px;
border: 0;
border-radius: 0;
background: var(--accent);
color: var(--white);
font-family: inherit;
font-size: 11px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
cursor: pointer;
transition:
background .3s ease,
color .3s ease,
transform .3s ease;
}

.footer-form-submit i {
font-size: 13px;
transition: transform .3s ease;
}

.footer-form-submit:hover {
background: var(--white);
color: var(--primary);
transform: translateY(-2px);
}

.footer-form-submit:hover i {
transform: translate(3px,-3px);
}

/* ========================================
BOTTOM FOOTER
======================================== */

.burbank-footer-bottom {
position: relative;
z-index: 2;
padding: 55px 0 30px;
text-align: center;
}

.burbank-footer-bottom-inner {
max-width: 1050px;
margin: 0 auto;
}

.footer-service-area {
margin: 0 auto 40px;
}

.footer-bottom-label {
display: inline-flex;
align-items: center;
gap: 13px;
margin-bottom: 18px;
color: var(--accent);
font-size: 8px;
font-weight: 700;
letter-spacing: 2.3px;
}

.footer-bottom-label::before,
.footer-bottom-label::after {
content: "";
width: 32px;
height: 1px;
background: var(--accent);
}

.footer-service-area p {
max-width: 1000px;
margin: 0 auto;
color: rgba(255,255,255,.6);
font-size: 14px;
line-height: 1.9;
}

.footer-copyright {
padding-top: 25px;
border-top: 1px solid rgba(255,255,255,.1);
}

.footer-copyright span {
color: rgba(255,255,255,.38);
font-size: 11px;
letter-spacing: .4px;
}

/* ========================================
LARGE DESKTOP
======================================== */

@media (min-width: 1400px) {

.burbank-footer-top {
    padding: 120px 0 95px;
}

.burbank-footer-grid {
    gap: 140px;
}

.burbank-footer-brand h2 {
    font-size: 76px;
}

.burbank-footer-description {
    font-size: 16px;
}

.footer-contact-item > span:last-child {
    font-size: 15px;
}

.footer-right-heading h3 {
    font-size: 34px;
}

.burbank-footer-form input,
.burbank-footer-form textarea,
.burbank-footer-form select {
    font-size: 13px;
}

.footer-service-area p {
    font-size: 15px;
}

}

/* ========================================
LAPTOP
======================================== */

@media (max-width: 1199.98px) {

.burbank-footer-grid {
    gap: 70px;
}

.burbank-footer-brand h2 {
    font-size: 58px;
}

.footer-right-heading h3 {
    font-size: 27px;
}

.footer-form-grid {
    gap: 9px;
}

.burbank-footer-form input,
.burbank-footer-form select {
    height: 46px;
}

.burbank-footer-form textarea {
    min-height: 100px;
}

}

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

@media (max-width: 991.98px) {

.burbank-footer-top {
    padding: 80px 0 70px;
}

.burbank-footer-grid {
    grid-template-columns: 1fr;
    gap: 65px;
}

.burbank-footer-brand {
    max-width: 100%;
}

.burbank-footer-brand h2 {
    font-size: 62px;
}

.burbank-footer-description {
    max-width: 750px;
}

.burbank-footer-right {
    padding-top: 0;
}

.footer-right-heading h3 {
    max-width: 600px;
    font-size: 32px;
}

.footer-service-area p {
    max-width: 850px;
}

}

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

@media (max-width: 767.98px) {

.burbank-footer-top {
    padding: 65px 0 55px;
}

.burbank-footer-grid {
    gap: 55px;
}

.burbank-footer-brand h2 {
    font-size: 45px;
    letter-spacing: -1.5px;
}

.burbank-footer-description {
    font-size: 14px;
}

.burbank-footer-contact {
    grid-template-columns: 1fr;
}

.footer-contact-item,
.footer-contact-item:nth-child(even) {
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.footer-contact-item:last-child {
    border-bottom: 0;
}

.footer-right-heading h3 {
    font-size: 26px;
}

.footer-form-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.footer-form-wide,
.footer-form-full {
    grid-column: 1 / -1;
}

.burbank-footer-form input,
.burbank-footer-form select {
    height: 48px;
}

.burbank-footer-form textarea {
    min-height: 115px;
}

.footer-service-date {
    grid-template-columns: 1.2fr .65fr .75fr;
}

.burbank-footer-bottom {
    padding: 45px 0 25px;
}

.footer-service-area p {
    font-size: 13px;
    line-height: 1.85;
}

}

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

@media (max-width: 575.98px) {

.burbank-footer-top {
    padding: 55px 0 45px;
}

.burbank-footer-brand h2 {
    font-size: 37px;
    letter-spacing: -1px;
}

.burbank-footer-eyebrow {
    font-size: 8px;
    letter-spacing: 1.7px;
}

.burbank-footer-description {
    font-size: 13px;
}

.footer-contact-item > span:last-child {
    font-size: 13px;
}

.footer-right-heading h3 {
    font-size: 23px;
}

.burbank-footer-form legend {
    font-size: 7px;
}

.footer-form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}

.footer-form-wide,
.footer-form-full {
    grid-column: auto;
}

.footer-service-date {
    grid-template-columns: 1fr;
    gap: 10px;
}

.burbank-footer-form input,
.burbank-footer-form select {
    height: 48px;
}

.burbank-footer-form textarea {
    min-height: 110px;
}

.footer-form-submit {
    height: 50px;
    font-size: 10px;
}

.footer-service-area p {
    font-size: 12px;
}

.footer-bottom-label {
    font-size: 7px;
    letter-spacing: 1.8px;
}

.footer-bottom-label::before,
.footer-bottom-label::after {
    width: 22px;
}

.footer-copyright span {
    font-size: 10px;
}

}