/* =========================================================
   GARAGE DOORS REPAIR SOUTH HOUSTON
   TOPBAR + NAVBAR

   BREAKPOINT:
   DESKTOP NAV = 992px AND ABOVE
   TOGGLE MENU = 991.98px AND BELOW
========================================================= */

:root {

    /* DARK / CHARCOAL */
    --color-dark: #1d2127;
    --color-dark-soft: #3a3f4a;
    --color-dark-light: #5f6467;

    /* GRAYS */
    --color-gray-dark: #7e8388;
    --color-gray: #a1a7ad;
    --color-gray-soft: #bdc2c8;
    --color-gray-light: #d4d7dd;

    /* BACKGROUNDS */
    --color-section-bg: #eceef1;
    --color-light: #f5f6f8;
    --color-off-white: #fdfdfe;
    --color-white: #ffffff;

    /* CORAL / SALMON */
    --color-accent: #e8a289;
    --color-accent-dark: #d98c72;
    --color-accent-light: #f2b6a1;

    --color-accent-soft: rgba(232, 162, 137, 0.14);
    --color-accent-border: rgba(232, 162, 137, 0.35);

    /* TEXT */
    --color-heading: #1d2127;
    --color-text: #5f6467;
    --color-text-muted: #7e8388;

    /* BORDERS */
    --color-border: #d4d7dd;
    --color-border-light: rgba(29, 33, 39, 0.10);

    /* TRANSITION */
    --transition: 250ms ease;
}


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

.site-header {
    position: relative;

    width: 100%;

    z-index: 1050;

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


.custom-container {
    width: 100%;
    max-width: 1680px;

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

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


/* =========================================================
   TOP BAR
========================================================= */

.topbar {
    display: flex;
    align-items: center;

    min-height: 42px;

    background: var(--color-dark);

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


.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 42px;

    gap: 20px;
}


.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
}


.topbar-text {
    color: rgba(255, 255, 255, 0.76);

    font-size: 13px;
    font-weight: 500;

    letter-spacing: 0.2px;
}


.topbar-right {
    gap: 9px;
}


.topbar-call-label {
    color: rgba(255, 255, 255, 0.65);

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


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

    gap: 7px;

    color: var(--color-accent);

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

    text-decoration: none;

    transition:
        color var(--transition);
}


.topbar-phone svg {
    flex-shrink: 0;
}


.topbar-phone:hover,
.topbar-phone:focus {
    color: var(--color-accent-light);
}


/* =========================================================
   MAIN NAVBAR
========================================================= */

.custom-navbar {
    position: relative;

    min-height: 100px;

    padding-top: 8px;
    padding-bottom: 8px;

    background: var(--color-white);

    border-bottom:
        1px solid rgba(29, 33, 39, 0.08);

    box-shadow:
        0 5px 24px rgba(29, 33, 39, 0.05);
}


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

.navbar-brand {
    display: flex;
    align-items: center;

    flex-shrink: 0;

    margin: 0;

    padding: 0;
}


.navbar-logo {
    display: block;

    width: 100%;
    max-width: 270px;
    height: auto;

    object-fit: contain;
}


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

.navbar-nav {
    gap: 1px;
}


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

.custom-navbar .nav-link {
    position: relative;

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

    padding:
        32px 10px !important;

    color:
        var(--color-dark-soft);

    font-size:
        17px !important;

    font-weight: 650;

    line-height: 1;

    white-space: nowrap;

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


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


/* =========================================================
   NAVBAR LINK UNDERLINE
========================================================= */

.custom-navbar .nav-item:not(.dropdown)>.nav-link::before {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 21px;

    width: 0;
    height: 2px;

    border-radius: 10px;

    background:
        var(--color-accent);

    transform:
        translateX(-50%);

    transition:
        width var(--transition);
}


.custom-navbar .nav-item:not(.dropdown)>.nav-link:hover::before,

.custom-navbar .nav-item:not(.dropdown)>.nav-link:focus::before,

.custom-navbar .nav-item:not(.dropdown)>.nav-link.active::before {

    width: 25px;
}


/* =========================================================
   BOOTSTRAP DROPDOWN ARROW
========================================================= */

.custom-navbar .dropdown-toggle::after {
    margin-left: 6px;

    vertical-align: middle;

    border-top-width: 4px;
    border-right-width: 4px;
    border-left-width: 4px;

    transition:
        transform var(--transition);
}


@media (min-width: 992px) {

    .custom-navbar .dropdown:hover>.dropdown-toggle::after {

        transform:
            rotate(180deg);
    }

}


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

.custom-navbar .dropdown {
    position: relative;
}


.custom-navbar .dropdown-menu {
    min-width: 270px;

    margin: 0;

    padding: 10px;

    background:
        var(--color-white);

    border:
        1px solid rgba(29, 33, 39, 0.09);

    border-radius: 10px;

    box-shadow:
        0 18px 50px rgba(29, 33, 39, 0.14);
}


/* =========================================================
   DROPDOWN ITEMS
========================================================= */

.custom-navbar .dropdown-item {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 45px;

    padding:
        11px 15px 11px 20px;

    border-radius: 7px;

    color:
        var(--color-dark-soft);

    font-size: 14.5px;
    font-weight: 550;

    white-space: nowrap;

    transition:
        color var(--transition),
        background-color var(--transition),
        padding-left var(--transition);
}


.custom-navbar .dropdown-item::before {
    content: "";

    position: absolute;

    left: 9px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--color-accent);

    opacity: 0;

    transform:
        scale(0);

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


.custom-navbar .dropdown-item:hover,

.custom-navbar .dropdown-item:focus,

.custom-navbar .dropdown-item.active {

    color:
        var(--color-dark);

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

    padding-left: 25px;
}


.custom-navbar .dropdown-item:hover::before,

.custom-navbar .dropdown-item:focus::before,

.custom-navbar .dropdown-item.active::before {

    opacity: 1;

    transform:
        scale(1);
}


/* =========================================================
   DESKTOP DROPDOWN HOVER
   STARTS AT 992PX
========================================================= */

@media (min-width: 992px) {

    .custom-navbar .dropdown-menu {
        display: block;

        top:
            calc(100% - 10px);

        left: 0;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translateY(12px);

        transition:
            opacity 180ms ease,
            visibility 180ms ease,
            transform 180ms ease;
    }


    /* Invisible bridge fixes dropdown disappearing
       while cursor moves from link to menu */

    .custom-navbar .dropdown-menu::before {
        content: "";

        position: absolute;

        top: -22px;
        left: 0;
        right: 0;

        height: 24px;
    }


    .custom-navbar .dropdown:hover>.dropdown-menu,

    .custom-navbar .dropdown:focus-within>.dropdown-menu,

    .custom-navbar .dropdown-menu.show {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0);
    }

}


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

.nav-cta-item {
    display: flex;
    align-items: center;

    margin-left: 10px;
}


.nav-estimate-btn {
    position: relative;

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

    gap: 9px;

    min-width: 165px;

    padding:
        11px 17px;

    overflow: hidden;

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

    border-radius: 8px;

    background:
        var(--color-accent);

    color:
        var(--color-dark);

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

    line-height: 1;

    white-space: nowrap;

    text-decoration: none;

    box-shadow:
        0 7px 20px rgba(217, 140, 114, 0.16);

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


/* BUTTON SHINE */

.nav-estimate-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -80%;

    width: 45%;
    height: 100%;

    background:
        linear-gradient(110deg,
            transparent,
            rgba(255, 255, 255, 0.28),
            transparent);

    transform:
        skewX(-20deg);

    animation:
        estimateShine 3.4s ease-in-out infinite;
}


@keyframes estimateShine {

    0%,
    45% {
        left: -80%;
    }

    80%,
    100% {
        left: 130%;
    }

}


.nav-estimate-btn:hover,
.nav-estimate-btn:focus {
    color:
        var(--color-dark);

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

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

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px rgba(217, 140, 114, 0.28);
}


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

.estimate-icon {
    position: relative;

    z-index: 2;

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

    width: 32px;
    height: 32px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--color-dark);

    color:
        var(--color-white);

    animation:
        estimatePulse 2.1s ease-in-out infinite;
}


.estimate-icon svg {
    display: block;

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


.estimate-text {
    position: relative;

    z-index: 2;
}


@keyframes estimatePulse {

    0%,
    100% {
        transform:
            scale(1);

        box-shadow:
            0 0 0 0 rgba(29, 33, 39, 0.18);
    }

    50% {
        transform:
            scale(1.07);

        box-shadow:
            0 0 0 7px rgba(29, 33, 39, 0);
    }

}


@keyframes estimateWrite {

    0%,
    100% {
        transform:
            translate(0, 0) rotate(0deg);
    }

    25% {
        transform:
            translate(1px, -1px) rotate(-5deg);
    }

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

    75% {
        transform:
            translate(1px, 0) rotate(-3deg);
    }

}


.nav-estimate-btn:hover .estimate-icon {

    animation:
        estimateIconHover 550ms ease-in-out infinite alternate;
}


@keyframes estimateIconHover {

    from {
        transform:
            scale(1);
    }

    to {
        transform:
            scale(1.12);
    }

}


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

.mobile-phone {
    display: none;

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

    width: 42px;
    height: 42px;

    margin-left: auto;
    margin-right: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--color-accent);

    color:
        var(--color-dark);

    text-decoration: none;

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


.mobile-phone:hover,
.mobile-phone:focus {
    color:
        var(--color-dark);

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

    transform:
        translateY(-1px);
}


/* =========================================================
   HAMBURGER
========================================================= */

.custom-toggler {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 42px;

    padding: 8px;

    border:
        1px solid rgba(29, 33, 39, 0.12);

    border-radius: 7px;

    box-shadow:
        none !important;
}


.custom-toggler span {
    display: block;

    width: 23px;
    height: 2px;

    margin:
        2.5px 0;

    border-radius: 20px;

    background:
        var(--color-dark);

    transition:
        var(--transition);
}


/* =========================================================
   FULL DESKTOP
   1600PX+
========================================================= */

@media (min-width: 1600px) {

    .custom-navbar .navbar-collapse {
        min-width: 0;
    }


    .custom-navbar .navbar-nav {
        flex-wrap: nowrap;
    }

}


/* =========================================================
   LAPTOP
   1400PX - 1599PX
========================================================= */

@media (max-width: 1599.98px) and (min-width: 1400px) {

    .custom-container {
        padding-left: 18px;
        padding-right: 18px;
    }


    .navbar-logo {
        max-width: 235px;
    }


    .custom-navbar .nav-link {
        padding-left:
            7px !important;

        padding-right:
            7px !important;

        font-size:
            14px !important;
    }


    .nav-cta-item {
        margin-left: 7px;
    }


    .nav-estimate-btn {
        min-width: 150px;

        padding:
            10px 13px;

        font-size: 13px;
    }


    .estimate-icon {
        width: 29px;
        height: 29px;
    }

}


/* =========================================================
   SMALL LAPTOP
   1200PX - 1399PX
========================================================= */

@media (max-width: 1399.98px) and (min-width: 1200px) {

    .custom-container {
        padding-left: 12px;
        padding-right: 12px;
    }


    .navbar-logo {
        max-width: 205px;
    }


    .custom-navbar .nav-link {
        padding-left:
            5px !important;

        padding-right:
            5px !important;

        font-size:
            13.2px !important;
    }


    .nav-cta-item {
        margin-left: 5px;
    }


    .nav-estimate-btn {
        min-width: 130px;

        gap: 6px;

        padding:
            9px 10px;

        font-size: 12px;
    }


    .estimate-icon {
        width: 27px;
        height: 27px;
    }


    .estimate-icon svg {
        width: 15px;
        height: 15px;
    }

}


/* =========================================================
   COMPACT DESKTOP
   992PX - 1199PX

   NAVIGATION IS STILL FULL / VISIBLE
========================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {

    .custom-navbar {
        min-height: 86px;

        padding:
            8px 0;
    }


    .custom-container {
        padding-left: 10px;
        padding-right: 10px;
    }


    .navbar-brand {
        margin-right: 8px;
    }


    .navbar-logo {
        max-width: 165px;
    }


    /*
       Make sure Bootstrap collapse
       is always visible in desktop mode
    */

    .custom-navbar .navbar-collapse {
        display: flex !important;

        flex-basis: auto;

        flex-grow: 1;

        min-width: 0;
    }


    .custom-navbar .navbar-nav {
        display: flex;

        flex-direction: row;

        flex-wrap: nowrap;

        align-items:
            center !important;

        justify-content:
            flex-end;

        width: 100%;

        gap: 0;
    }


    .custom-navbar .nav-item {
        flex-shrink: 0;
    }


    .custom-navbar .nav-link {
        min-height: 44px;

        padding:
            13px 4px !important;

        font-size:
            11.8px !important;

        font-weight: 650;

        line-height: 1.15;
    }


    /* UNDERLINE CLOSER TO TEXT */

    .custom-navbar .nav-item:not(.dropdown)>.nav-link::before {

        bottom: 4px;
    }


    .custom-navbar .nav-item:not(.dropdown)>.nav-link:hover::before,

    .custom-navbar .nav-item:not(.dropdown)>.nav-link:focus::before,

    .custom-navbar .nav-item:not(.dropdown)>.nav-link.active::before {

        width: 20px;
    }


    /* DROPDOWN */

    .custom-navbar .dropdown-menu {
        min-width: 240px;
    }


    .custom-navbar .dropdown-item {
        font-size: 13.5px;
    }


    /* CTA */

    .nav-cta-item {
        margin-left: 4px;
    }


    .nav-estimate-btn {
        min-width: 112px;

        gap: 5px;

        padding:
            8px 8px;

        font-size: 10.5px;
    }


    .estimate-icon {
        width: 25px;
        height: 25px;
    }


    .estimate-icon svg {
        width: 14px;
        height: 14px;
    }


    /* DESKTOP ONLY */

    .mobile-phone {
        display: none !important;
    }


    .custom-toggler {
        display: none !important;
    }

}


/* =========================================================
   DESKTOP NAVIGATION
   992PX AND ABOVE
========================================================= */

@media (min-width: 992px) {

    .custom-navbar .navbar-toggler {
        display: none !important;
    }


    .custom-navbar .navbar-collapse {
        display: flex !important;

        flex-basis: auto;

        flex-grow: 1;
    }


    .mobile-phone {
        display: none !important;
    }

}


/* =========================================================
   TABLET + MOBILE
   991.98PX AND BELOW

   HAMBURGER STARTS HERE
========================================================= */

@media (max-width: 991.98px) {

    .custom-navbar {
        min-height: 82px;

        padding:
            10px 0;
    }


    .navbar-logo {
        max-width: 250px;
    }


    /* SHOW MOBILE CONTROLS */

    .mobile-phone {
        display: flex;
    }


    .custom-navbar .navbar-toggler {
        display: flex !important;
    }


    /*
       Hide menu until Bootstrap
       adds .show
    */

    .custom-navbar .navbar-collapse:not(.show):not(.collapsing) {

        display: none !important;
    }


    .custom-navbar .navbar-collapse.show {

        display: block !important;
    }


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

    .navbar-collapse {
        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

        max-height:
            calc(100vh - 120px);

        overflow-y: auto;

        padding:
            12px 22px 22px;

        background:
            var(--color-white);

        border-top:
            1px solid rgba(29, 33, 39, 0.08);

        border-bottom:
            1px solid rgba(29, 33, 39, 0.08);

        box-shadow:
            0 18px 35px rgba(29, 33, 39, 0.12);
    }


    .navbar-nav {
        align-items:
            stretch !important;

        width: 100%;

        gap: 0;
    }


    .custom-navbar .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;

        min-height: 52px;

        padding:
            15px 7px !important;

        border-bottom:
            1px solid rgba(29, 33, 39, 0.07);

        font-size:
            16px !important;

        font-weight: 650;

        text-align: left;
    }


    /* REMOVE DESKTOP UNDERLINE */

    .custom-navbar .nav-item:not(.dropdown)>.nav-link::before {

        display: none;
    }


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

    .custom-navbar .dropdown-menu {
        position:
            static !important;

        width: 100%;

        margin: 0;

        padding:
            5px 5px 8px 13px;

        border: 0;

        border-radius: 0;

        background:
            var(--color-light);

        box-shadow: none;

        transform:
            none !important;
    }


    .custom-navbar .dropdown-item {
        min-height: 46px;

        padding:
            12px 14px;

        border-bottom:
            1px solid rgba(29, 33, 39, 0.05);

        border-radius: 5px;

        font-size: 14.5px;

        white-space: normal;
    }


    .custom-navbar .dropdown-item:hover,

    .custom-navbar .dropdown-item:focus {

        padding-left: 22px;
    }


    /* =====================================================
       MOBILE FREE ESTIMATE
    ====================================================== */

    .nav-cta-item {
        width: 100%;

        margin:
            18px 0 0;
    }


    .nav-estimate-btn {
        width: 100%;

        min-width: 0;

        padding:
            12px 20px;

        font-size: 15px;

        border-radius: 8px;
    }


    .estimate-icon {
        width: 34px;
        height: 34px;
    }

}


/* =========================================================
   MOBILE
   767PX AND BELOW
========================================================= */

@media (max-width: 767.98px) {

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


    .topbar-left {
        display: none;
    }


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


    .topbar {
        min-height: 38px;
    }


    .topbar-inner {
        min-height: 38px;
    }


    .topbar-call-label {
        display: none;
    }


    .topbar-phone {
        font-size: 13px;
    }


    .custom-navbar {
        min-height: 75px;
    }


    .navbar-logo {
        max-width: 210px;
    }


    .navbar-collapse {
        padding:
            10px 15px 20px;
    }


    .custom-navbar .nav-link {
        font-size:
            15.5px !important;
    }

}


/* =========================================================
   TABLET ONLY
   768PX - 991PX
========================================================= */

@media (min-width: 768px) and (max-width: 991.98px) {

    .topbar-left {
        display: none;
    }


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


    .navbar-logo {
        max-width: 250px;
    }

}


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

@media (max-width: 575.98px) {

    .navbar-logo {
        max-width: 180px;
    }


    .mobile-phone {
        width: 39px;
        height: 39px;

        margin-right: 7px;
    }


    .custom-toggler {
        width: 41px;
        height: 39px;

        padding: 7px;
    }


    .custom-toggler span {
        width: 21px;
    }


    .custom-navbar .nav-link {
        font-size:
            15px !important;
    }


    .nav-estimate-btn {
        padding:
            11px 18px;

        font-size: 14.5px;
    }

}


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

@media (max-width: 399.98px) {

    .custom-container {
        padding-left: 10px;
        padding-right: 10px;
    }


    .navbar-logo {
        max-width: 150px;
    }


    .mobile-phone {
        width: 36px;
        height: 36px;
    }


    .custom-toggler {
        width: 38px;
        height: 36px;
    }


    .custom-toggler span {
        width: 19px;
    }


    .custom-navbar .nav-link {
        font-size:
            14.5px !important;
    }

}


/* =========================================================
   SMOOTH SCROLL
========================================================= */

html {
    scroll-behavior: smooth;
}


/* CONTACT SECTION OFFSET */

#contact {
    scroll-margin-top: 145px;
}


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

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

    html {
        scroll-behavior: auto;
    }


    .estimate-icon,
    .estimate-icon svg,
    .nav-estimate-btn::before {
        animation:
            none !important;
    }


    .custom-navbar *,
    .nav-estimate-btn,
    .mobile-phone {
        transition:
            none !important;
    }

}


/* =========================================================
   BIGGER DESKTOP NAVIGATION LINKS
========================================================= */

/* Large desktop: 1600px and above */
@media (min-width: 1600px) {
    .custom-navbar .nav-link {
        font-size: 21px !important;
        padding-left: 13px !important;
        padding-right: 13px !important;
    }
}

/* Desktop: 1400px - 1599px */
@media (min-width: 1400px) and (max-width: 1599.98px) {
    .custom-navbar .nav-link {
        font-size: 18px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* Smaller desktop: 1200px - 1399px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .custom-navbar .nav-link {
        font-size: 16px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* ______________________________________________________________________________________________________________ */

/* =========================================================
   HERO V6
   GARAGE DOORS REPAIR SOUTH HOUSTON
   DARK BACKGROUND + OUTLINED ANIMATED SHAPES
========================================================= */

:root {

    /* DARK / CHARCOAL */
    --color-dark: #1d2127;
    --color-dark-soft: #3a3f4a;
    --color-dark-light: #5f6467;

    /* GRAYS */
    --color-gray-dark: #7e8388;
    --color-gray: #a1a7ad;
    --color-gray-soft: #bdc2c8;
    --color-gray-light: #d4d7dd;

    /* BACKGROUNDS */
    --color-section-bg: #eceef1;
    --color-light: #f5f6f8;
    --color-off-white: #fdfdfe;
    --color-white: #ffffff;

    /* CORAL / SALMON */
    --color-accent: #e8a289;
    --color-accent-dark: #d98c72;
    --color-accent-light: #f2b6a1;

    --color-accent-soft:
        rgba(232, 162, 137, 0.14);

    --color-accent-border:
        rgba(232, 162, 137, 0.35);

    /* TEXT */
    --color-heading: #1d2127;
    --color-text: #5f6467;
    --color-text-muted: #7e8388;
    --color-text-light: #a1a7ad;

    /* BORDERS */
    --color-border: #d4d7dd;

    --color-border-light:
        rgba(29, 33, 39, 0.10);

    --color-border-dark:
        rgba(29, 33, 39, 0.20);

    /* SHADOWS */
    --shadow-soft:
        0 10px 30px rgba(29, 33, 39, 0.08);

    --shadow-card:
        0 15px 40px rgba(29, 33, 39, 0.12);

    /* TRANSITION */
    --transition: 250ms ease;
}


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

.sh6-hero {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 72px 0;


}


/* =========================================================
   DARK BACKGROUND OVERLAY
========================================================= */

.sh6-bg-overlay {
    position: absolute;

    inset: 0;

    z-index: 0;

    background:
        linear-gradient(105deg,
            rgba(29, 33, 39, 0.95) 0%,
            rgba(29, 33, 39, 0.91) 46%,
            rgba(58, 63, 74, 0.82) 100%);

    pointer-events: none;
}


/* =========================================================
   OUTLINED ANIMATED SHAPES WRAPPER
========================================================= */

.sh6-outline-shapes {
    position: absolute;

    inset: 0;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;
}


.sh6-outline {
    position: absolute;

    display: block;

    pointer-events: none;
}


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

.sh6-outline-door {
    top: 8%;
    left: 2%;

    width: 155px;
    height: 118px;

    border:
        2px solid rgba(232, 162, 137, 0.31);

    border-radius: 8px;

    filter:
        drop-shadow(0 0 9px rgba(232, 162, 137, 0.08));

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


.sh6-outline-door::before {
    content: "";

    position: absolute;

    top: 12px;
    left: 12px;
    right: 12px;

    height: 15px;

    border:
        1px solid rgba(242, 182, 161, 0.25);
}


.sh6-outline-door i {
    position: absolute;

    left: 12px;
    right: 12px;

    height: 1px;

    background:
        rgba(232, 162, 137, 0.30);
}


.sh6-outline-door i:nth-child(1) {
    top: 37%;
}


.sh6-outline-door i:nth-child(2) {
    top: 59%;
}


.sh6-outline-door i:nth-child(3) {
    top: 81%;
}


@keyframes sh6OutlineDoor {

    0%,
    100% {
        transform:
            translateY(0) rotate(-8deg);
    }

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


/* =========================================================
   OUTLINED BRACKET
========================================================= */

.sh6-outline-bracket {
    top: 14%;
    right: 3%;

    width: 125px;
    height: 125px;

    border-top:
        3px solid rgba(242, 182, 161, 0.33);

    border-right:
        3px solid rgba(242, 182, 161, 0.33);

    filter:
        drop-shadow(0 0 8px rgba(232, 162, 137, 0.07));

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


.sh6-outline-bracket::before {
    content: "";

    position: absolute;

    top: 18px;
    right: 18px;

    width: 58px;
    height: 58px;

    border-top:
        1px solid rgba(232, 162, 137, 0.28);

    border-right:
        1px solid rgba(232, 162, 137, 0.28);
}


.sh6-outline-bracket::after {
    content: "";

    position: absolute;

    top: -6px;
    right: -6px;

    width: 10px;
    height: 10px;

    border:
        2px solid rgba(242, 182, 161, 0.4);

    border-radius: 50%;
}


@keyframes sh6BracketMove {

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

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


/* =========================================================
   OUTLINED HARDWARE DIAMOND
========================================================= */

.sh6-outline-diamond {
    left: 43%;
    top: 8%;

    width: 68px;
    height: 68px;

    border:
        2px solid rgba(232, 162, 137, 0.26);

    filter:
        drop-shadow(0 0 8px rgba(232, 162, 137, 0.06));

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


.sh6-outline-diamond::before {
    content: "";

    position: absolute;

    inset: 13px;

    border:
        1px solid rgba(242, 182, 161, 0.25);
}


.sh6-outline-diamond::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    border:
        1px solid rgba(242, 182, 161, 0.40);

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


@keyframes sh6DiamondMove {

    0%,
    100% {
        transform:
            translateY(0) rotate(45deg);
    }

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


/* =========================================================
   OUTLINED GARAGE TRACK
========================================================= */

.sh6-outline-track {
    right: 1%;
    bottom: 8%;

    width: 170px;
    height: 100px;

    border-left:
        2px solid rgba(232, 162, 137, 0.28);

    border-bottom:
        2px solid rgba(232, 162, 137, 0.28);

    border-radius:
        0 0 0 30px;

    filter:
        drop-shadow(0 0 8px rgba(232, 162, 137, 0.07));

    animation:
        sh6TrackMove 8.5s ease-in-out infinite;
}


.sh6-outline-track::before {
    content: "";

    position: absolute;

    left: 14px;
    bottom: 14px;

    width: 118px;
    height: 58px;

    border-left:
        1px solid rgba(242, 182, 161, 0.25);

    border-bottom:
        1px solid rgba(242, 182, 161, 0.25);

    border-radius:
        0 0 0 20px;
}


.sh6-outline-track::after {
    content: "";

    position: absolute;

    left: -6px;
    bottom: -6px;

    width: 11px;
    height: 11px;

    border:
        2px solid rgba(242, 182, 161, 0.38);

    border-radius: 50%;
}


@keyframes sh6TrackMove {

    0%,
    100% {
        transform:
            translateX(0) rotate(-8deg);
    }

    50% {
        transform:
            translateX(-13px) rotate(-4deg);
    }
}


/* =========================================================
   SMALL GARAGE PANEL OUTLINE
========================================================= */

.sh6-outline-panel {
    left: 7%;
    bottom: 8%;

    width: 110px;
    height: 60px;

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

    border-radius: 6px;

    animation:
        sh6PanelFloat 6.5s ease-in-out infinite;
}


.sh6-outline-panel::before,
.sh6-outline-panel::after {
    content: "";

    position: absolute;

    left: 10px;
    right: 10px;

    height: 1px;

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


.sh6-outline-panel::before {
    top: 19px;
}


.sh6-outline-panel::after {
    bottom: 18px;
}


@keyframes sh6PanelFloat {

    0%,
    100% {
        transform:
            translateY(0) rotate(7deg);
    }

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


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

.sh6-container {
    position: relative;

    z-index: 2;

    max-width: 1480px;

    margin: 0 auto;

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


.sh6-row {
    align-items: stretch;
}


.sh6-col {
    display: flex;
}


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

.sh6-content-card {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: 620px;

    min-height: 575px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    margin: 0 auto;

    padding: 35px 0;
}


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

.sh6-eyebrow {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

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

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

    letter-spacing: 0.8px;

    text-transform: uppercase;

    opacity: 0;

    animation:
        sh6EnterDown 0.7s 0.05s forwards;
}


.sh6-live-dot {
    width: 10px;
    height: 10px;

    flex-shrink: 0;

    border-radius: 2px;

    background:
        var(--color-accent);

    transform:
        rotate(45deg);

    animation:
        sh6StatusPulse 1.8s ease-out infinite;
}


@keyframes sh6StatusPulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(232, 162, 137, 0.45);
    }

    70% {
        box-shadow:
            0 0 0 8px rgba(232, 162, 137, 0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(232, 162, 137, 0);
    }
}


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

.sh6-title {
    max-width: 610px;

    margin: 0 0 20px;

    color:
        var(--color-white);

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

    font-weight: 850;

    line-height: 1.02;

    letter-spacing: -1.8px;

    opacity: 0;

    text-shadow:
        0 4px 18px rgba(0, 0, 0, 0.18);

    animation:
        sh6EnterLeft 0.8s 0.15s forwards;
}


.sh6-title span {
    display: block;

    margin-top: 6px;

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


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

.sh6-description {
    max-width: 605px;

    margin: 0 0 26px;

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

    font-size: 16px;

    line-height: 1.7;

    opacity: 0;

    animation:
        sh6EnterLeft 0.8s 0.28s forwards;
}


/* =========================================================
   SERVICE GRID
========================================================= */

.sh6-service-grid {
    display: grid;

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

    gap: 10px;

    margin-bottom: 28px;

    opacity: 0;

    animation:
        sh6EnterUp 0.8s 0.40s forwards;
}


.sh6-service {
    position: relative;

    min-height: 62px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 10px 12px;

    overflow: hidden;

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

    border-radius: 12px;

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

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.12);

    backdrop-filter:
        blur(12px);

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

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


.sh6-service::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 3px;

    background:
        var(--color-accent);

    transition:
        width 350ms ease;
}


.sh6-service:hover {
    transform:
        translateY(-4px);

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

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

    box-shadow:
        0 16px 30px rgba(0, 0, 0, 0.18);
}


.sh6-service:hover::after {
    width: 100%;
}


.sh6-service-icon {
    width: 39px;
    height: 39px;

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

    flex-shrink: 0;

    border-radius: 10px;

    background:
        rgba(232, 162, 137, 0.16);

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


.sh6-service-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.sh6-service>span:last-child {
    display: flex;
    flex-direction: column;

    line-height: 1.15;
}


.sh6-service small {
    margin-bottom: 4px;

    color:
        var(--color-gray-soft);

    font-size: 9px;
    font-weight: 750;

    letter-spacing: 0.65px;

    text-transform: uppercase;
}


.sh6-service strong {
    color:
        var(--color-white);

    font-size: 13px;

    font-weight: 800;
}


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

.sh6-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 13px;

    margin-bottom: 27px;

    opacity: 0;

    animation:
        sh6EnterUp 0.8s 0.53s forwards;
}


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

.sh6-phone {
    min-height: 59px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 9px 17px;

    border-radius: 10px;

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

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

    color:
        var(--color-white);

    text-decoration: none;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.16);

    backdrop-filter:
        blur(10px);

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

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


.sh6-phone:hover {
    color:
        var(--color-white);

    transform:
        translateY(-4px);

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

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

    box-shadow:
        0 17px 36px rgba(0, 0, 0, 0.23);
}


.sh6-phone-icon {
    position: relative;

    width: 40px;
    height: 40px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background:
        var(--color-accent);

    color:
        var(--color-dark);

    animation:
        sh6Phone 2.7s ease-in-out infinite;
}


.sh6-phone-icon::after {
    content: "";

    position: absolute;

    inset: -5px;

    border:
        1px solid rgba(232, 162, 137, 0.55);

    border-radius: 12px;

    animation:
        sh6PhonePulse 2s ease-out infinite;
}


.sh6-phone-icon svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.sh6-phone>span:last-child {
    display: flex;
    flex-direction: column;

    line-height: 1.12;
}


.sh6-phone small {
    margin-bottom: 3px;

    color:
        var(--color-gray-soft);

    font-size: 9px;
    font-weight: 750;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.sh6-phone strong {
    color:
        var(--color-white);

    font-size: 16px;

    font-weight: 850;
}


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

.sh6-estimate {
    position: relative;

    min-height: 59px;

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

    gap: 10px;

    padding: 10px 20px;

    overflow: hidden;

    border-radius: 10px;

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

    background:
        var(--color-accent);

    color:
        var(--color-dark);

    text-decoration: none;

    font-size: 15px;

    font-weight: 850;

    box-shadow:
        0 13px 30px rgba(217, 140, 114, 0.30);

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


.sh6-estimate::after {
    content: "";

    position: absolute;

    top: 0;
    left: -65%;

    width: 35%;
    height: 100%;

    background:
        linear-gradient(110deg,
            transparent,
            rgba(255, 255, 255, 0.50),
            transparent);

    transform:
        skewX(-20deg);

    animation:
        sh6Shine 3.8s infinite;
}


.sh6-estimate>* {
    position: relative;

    z-index: 2;
}


.sh6-estimate:hover {
    color:
        var(--color-dark);

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

    transform:
        translateY(-4px);

    box-shadow:
        0 17px 38px rgba(217, 140, 114, 0.40);
}


.sh6-pencil {
    width: 35px;
    height: 35px;

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

    flex-shrink: 0;

    border-radius: 8px;

    background:
        var(--color-dark);

    color:
        var(--color-white);

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


.sh6-pencil svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.sh6-arrow {
    font-size: 20px;

    transition:
        transform var(--transition);
}


.sh6-estimate:hover .sh6-arrow {
    transform:
        translateX(5px);
}


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

.sh6-trust {
    display: flex;
    flex-wrap: wrap;

    gap: 14px 20px;

    opacity: 0;

    animation:
        sh6EnterUp 0.8s 0.65s forwards;
}


.sh6-trust>div {
    display: flex;
    align-items: center;

    gap: 9px;

    color:
        var(--color-white);

    font-size: 17px;

    font-weight: 750;
}


.sh6-trust>div>span:first-child {
    width: 30px;
    height: 30px;

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

    flex-shrink: 0;

    border-radius: 8px;

    background:
        rgba(232, 162, 137, 0.16);

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

    font-size: 15px;

    font-weight: 900;

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


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

.sh6-visual {
    position: relative;

    width: 100%;
    max-width: 590px;

    min-height: 575px;

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

    margin: 0 auto;

    padding:
        34px 34px 45px 60px;
}


/* =========================================================
   MAIN 1:1 IMAGE
========================================================= */

.sh6-image-shell {
    position: relative;

    z-index: 2;

    width:
        min(100%, 510px);

    aspect-ratio:
        1 / 1;

    overflow: hidden;

    border-radius: 20px;

    border:
        7px solid rgba(255, 255, 255, 0.90);

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

    box-shadow:
        0 30px 75px rgba(0, 0, 0, 0.32);

    opacity: 0;

    animation:
        sh6ImageEnter 0.9s 0.18s forwards,
        sh6ImageFloat 5s 1.2s ease-in-out infinite;
}


.sh6-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    animation:
        sh6Zoom 10s ease-in-out infinite;
}


.sh6-photo-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(to bottom,
            rgba(29, 33, 39, 0.02) 35%,
            rgba(29, 33, 39, 0.12) 58%,
            rgba(29, 33, 39, 0.82) 100%);

    pointer-events: none;
}


/* =========================================================
   TOOL RAIL
========================================================= */

.sh6-tool-rail {
    position: absolute;

    z-index: 4;

    left: 3px;
    top: 50%;

    display: flex;
    flex-direction: column;

    gap: 15px;

    transform:
        translateY(-50%);
}


.sh6-tool {
    width: 58px;
    height: 58px;

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

    border:
        1px solid rgba(232, 162, 137, 0.38);

    background:
        rgba(29, 33, 39, 0.92);

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

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.25);

    backdrop-filter:
        blur(10px);

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


.sh6-tool:nth-child(1) {
    border-radius:
        17px 5px 17px 5px;
}


.sh6-tool:nth-child(2) {
    border-radius:
        5px 17px 5px 17px;
}


.sh6-tool:nth-child(3) {
    border-radius:
        17px 17px 5px 17px;
}


.sh6-tool svg {
    width: 27px;
    height: 27px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.sh6-tool-one {
    animation:
        sh6ToolOne 4s ease-in-out infinite;
}


.sh6-tool-two {
    animation:
        sh6ToolTwo 4.6s ease-in-out infinite;
}


.sh6-tool-three {
    animation:
        sh6ToolThree 5s ease-in-out infinite;
}


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

.sh6-location {
    position: absolute;

    top: 18px;
    left: 18px;

    z-index: 4;

    padding: 9px 13px;

    border-radius: 7px;

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

    background:
        rgba(29, 33, 39, 0.82);

    color:
        var(--color-white);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.7px;

    text-transform: uppercase;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.18);

    backdrop-filter:
        blur(8px);

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


/* =========================================================
   IMAGE CAPTION
========================================================= */

.sh6-photo-caption {
    position: absolute;

    z-index: 4;

    left: 22px;
    right: 22px;
    bottom: 22px;

    display: flex;
    flex-direction: column;
}


.sh6-photo-caption small {
    margin-bottom: 5px;

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

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.sh6-photo-caption strong {
    color:
        var(--color-white);

    font-size: 19px;

    font-weight: 850;
}


/* =========================================================
   SAME DAY SERVICE FLOATING CARD
========================================================= */

.sh6-availability {
    position: absolute;

    z-index: 5;

    top: 16px;
    right: 0;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 11px 14px;

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

    border-radius: 11px;

    background:
        rgba(29, 33, 39, 0.94);

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.26);

    backdrop-filter:
        blur(10px);

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

    animation:
        sh6Availability 3.5s ease-in-out infinite;
}


.sh6-time-icon {
    width: 37px;
    height: 37px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background:
        var(--color-accent);

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


.sh6-time-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.sh6-availability>span:last-child {
    display: flex;
    flex-direction: column;
}


.sh6-availability small {
    margin-bottom: 3px;

    color:
        var(--color-gray-soft);

    font-size: 9px;

    font-weight: 750;

    letter-spacing: 0.5px;

    text-transform: uppercase;
}


.sh6-availability strong {
    color:
        var(--color-white);

    font-size: 12px;

    font-weight: 850;
}


/* =========================================================
   FLOATING IMAGE PHONE
========================================================= */

.sh6-image-phone {
    position: absolute;

    z-index: 6;

    right: 9px;
    bottom: 6px;

    min-width: 200px;

    display: grid;

    grid-template-columns:
        1fr auto;

    padding: 13px 16px;

    border-radius: 10px;

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

    border-left:
        4px solid var(--color-accent);

    background:
        var(--color-dark);

    color:
        var(--color-white);

    text-decoration: none;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.32);

    animation:
        sh6PhoneCard 4s ease-in-out infinite;

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


.sh6-image-phone:hover {
    color:
        var(--color-white);

    background:
        var(--color-dark-soft);
}


.sh6-image-phone small {
    grid-column: 1;

    margin-bottom: 2px;

    color:
        var(--color-gray-soft);

    font-size: 9px;

    font-weight: 750;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.sh6-image-phone strong {
    grid-column: 1;

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

    font-size: 16px;

    font-weight: 850;
}


.sh6-image-phone>span {
    grid-column: 2;
    grid-row: 1 / span 2;

    align-self: center;

    margin-left: 14px;

    color:
        var(--color-accent);

    font-size: 22px;
}


/* =========================================================
   GENERAL ENTRANCE ANIMATIONS
========================================================= */

@keyframes sh6EnterDown {

    from {
        opacity: 0;

        transform:
            translateY(-16px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes sh6EnterLeft {

    from {
        opacity: 0;

        transform:
            translateX(-25px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}


@keyframes sh6EnterUp {

    from {
        opacity: 0;

        transform:
            translateY(22px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   IMAGE ANIMATIONS
========================================================= */

@keyframes sh6ImageEnter {

    from {
        opacity: 0;

        transform:
            translateX(38px) scale(0.95);
    }

    to {
        opacity: 1;

        transform:
            translateX(0) scale(1);
    }
}


@keyframes sh6ImageFloat {

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

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


@keyframes sh6Zoom {

    0%,
    100% {
        transform:
            scale(1.02);
    }

    50% {
        transform:
            scale(1.07);
    }
}


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

@keyframes sh6ToolOne {

    0%,
    100% {
        transform:
            translateY(0) rotate(0deg);
    }

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


@keyframes sh6ToolTwo {

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

    50% {
        transform:
            translateX(-6px) rotate(4deg);
    }
}


@keyframes sh6ToolThree {

    0%,
    100% {
        transform:
            translateY(0) rotate(0deg);
    }

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


/* =========================================================
   FLOATING CARD ANIMATIONS
========================================================= */

@keyframes sh6Availability {

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

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


@keyframes sh6PhoneCard {

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

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


/* =========================================================
   BUTTON ANIMATIONS
========================================================= */

@keyframes sh6Shine {

    0%,
    48% {
        left: -65%;
    }

    80%,
    100% {
        left: 140%;
    }
}


@keyframes sh6Pencil {

    0%,
    100% {
        transform:
            rotate(0deg);
    }

    25% {
        transform:
            rotate(-5deg) translateY(-1px);
    }

    55% {
        transform:
            rotate(5deg) translateY(1px);
    }
}


@keyframes sh6Phone {

    0%,
    80%,
    100% {
        transform:
            rotate(0deg);
    }

    84% {
        transform:
            rotate(10deg);
    }

    89% {
        transform:
            rotate(-10deg);
    }

    94% {
        transform:
            rotate(6deg);
    }
}


@keyframes sh6PhonePulse {

    0% {
        opacity: 0.8;

        transform:
            scale(0.85);
    }

    100% {
        opacity: 0;

        transform:
            scale(1.5);
    }
}


@keyframes sh6Check {

    0%,
    100% {
        box-shadow:
            0 0 0 0 rgba(232, 162, 137, 0.18);
    }

    50% {
        box-shadow:
            0 0 0 7px rgba(232, 162, 137, 0);
    }
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .sh6-content-card,
    .sh6-visual {
        min-height: 590px;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1399.98px) {

    .sh6-container {
        padding-left: 28px;
        padding-right: 28px;
    }


    .sh6-content-card,
    .sh6-visual {
        min-height: 530px;
    }


    .sh6-image-shell {
        width:
            min(100%, 470px);
    }


    .sh6-title {
        font-size:
            clamp(37px, 4vw, 52px);
    }


    .sh6-trust>div {
        font-size: 15px;
    }
}


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

@media (max-width: 991.98px) {

    .sh6-hero {
        padding:
            55px 0 68px;

        background-position:
            center center;
    }


    .sh6-bg-overlay {
        background:
            linear-gradient(180deg,
                rgba(29, 33, 39, 0.96) 0%,
                rgba(29, 33, 39, 0.93) 55%,
                rgba(58, 63, 74, 0.89) 100%);
    }


    .sh6-col {
        display: block;
    }


    .sh6-content-card,
    .sh6-visual {
        min-height: auto;
    }


    .sh6-content-card {
        max-width: 750px;

        margin-bottom: 36px;

        text-align: center;
    }


    .sh6-eyebrow {
        margin-left: auto;
        margin-right: auto;
    }


    .sh6-description {
        margin-left: auto;
        margin-right: auto;
    }


    .sh6-service-grid {
        max-width: 610px;

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


    .sh6-actions,
    .sh6-trust {
        justify-content: center;
    }


    .sh6-visual {
        max-width: 540px;
    }


    /* OUTLINE SHAPES */

    .sh6-outline-door {
        width: 120px;
        height: 90px;

        left: -25px;
    }


    .sh6-outline-bracket {
        width: 95px;
        height: 95px;

        right: -20px;
    }


    .sh6-outline-diamond {
        width: 55px;
        height: 55px;

        left: 78%;
        top: 35%;
    }


    .sh6-outline-track {
        width: 125px;
        height: 75px;

        right: -30px;
    }
}


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

@media (max-width: 767.98px) {

    .sh6-hero {
        padding:
            44px 0 58px;
    }


    .sh6-container {
        padding-left: 17px;
        padding-right: 17px;
    }


    .sh6-title {
        font-size:
            clamp(34px, 9vw, 43px);

        letter-spacing: -1.2px;
    }


    .sh6-description {
        font-size: 15px;

        line-height: 1.65;
    }


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


    .sh6-actions {
        max-width: 420px;

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

        flex-direction: column;
    }


    .sh6-phone,
    .sh6-estimate {
        width: 100%;

        justify-content: center;
    }


    .sh6-trust {
        width: fit-content;

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

        flex-direction: column;

        align-items: flex-start;
    }


    .sh6-trust>div {
        font-size: 16px;
    }


    .sh6-visual {
        max-width: 430px;

        padding:
            30px 10px 48px 42px;
    }


    .sh6-image-shell {
        width:
            min(84vw, 380px);
    }


    .sh6-tool {
        width: 49px;
        height: 49px;
    }


    .sh6-tool svg {
        width: 23px;
        height: 23px;
    }


    .sh6-availability {
        right: 0;
        top: 12px;
    }


    .sh6-image-phone {
        right: 0;
        bottom: 12px;
    }


    /* OUTLINED SHAPES */

    .sh6-outline-shapes {
        opacity: 0.68;
    }


    .sh6-outline-door {
        width: 90px;
        height: 68px;

        top: 3%;
        left: -30px;
    }


    .sh6-outline-bracket {
        width: 75px;
        height: 75px;

        top: 19%;
        right: -25px;
    }


    .sh6-outline-diamond {
        width: 42px;
        height: 42px;

        top: 47%;
        left: 87%;
    }


    .sh6-outline-track {
        width: 100px;
        height: 60px;

        bottom: 3%;
        right: -30px;
    }


    .sh6-outline-panel {
        width: 75px;
        height: 42px;

        left: -15px;
        bottom: 25%;
    }
}


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

@media (max-width: 575.98px) {

    .sh6-title {
        font-size:
            clamp(32px, 9vw, 39px);
    }


    .sh6-image-shell {
        width:
            min(82vw, 335px);

        border-radius: 16px;
    }


    .sh6-tool-rail {
        left: 0;

        gap: 10px;
    }


    .sh6-tool {
        width: 44px;
        height: 44px;
    }


    .sh6-availability {
        transform:
            scale(0.90);

        transform-origin:
            top right;
    }


    .sh6-image-phone {
        min-width: 175px;

        transform:
            scale(0.90);

        transform-origin:
            bottom right;
    }


    .sh6-photo-caption strong {
        font-size: 16px;
    }


    .sh6-outline-door {
        opacity: 0.70;
    }


    .sh6-outline-diamond {
        opacity: 0.60;
    }
}


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

@media (max-width: 399.98px) {

    .sh6-container {
        padding-left: 12px;
        padding-right: 12px;
    }


    .sh6-title {
        font-size: 32px;
    }


    .sh6-visual {
        padding-left: 38px;
    }


    .sh6-image-shell {
        width:
            min(80vw, 310px);
    }


    .sh6-availability {
        right: -3px;
    }


    .sh6-image-phone {
        right: -3px;
    }


    .sh6-outline-diamond {
        display: none;
    }
}


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

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

    .sh6-eyebrow,
    .sh6-live-dot,
    .sh6-title,
    .sh6-description,
    .sh6-service-grid,
    .sh6-actions,
    .sh6-trust,
    .sh6-estimate::after,
    .sh6-pencil,
    .sh6-phone-icon,
    .sh6-phone-icon::after,
    .sh6-image-shell,
    .sh6-image,
    .sh6-tool,
    .sh6-availability,
    .sh6-image-phone,
    .sh6-trust>div>span:first-child,
    .sh6-outline-door,
    .sh6-outline-bracket,
    .sh6-outline-diamond,
    .sh6-outline-track,
    .sh6-outline-panel {
        animation: none !important;
    }


    .sh6-eyebrow,
    .sh6-title,
    .sh6-description,
    .sh6-service-grid,
    .sh6-actions,
    .sh6-trust,
    .sh6-image-shell {
        opacity: 1 !important;
    }
}


/* ______________________________________________________________________________________________________________________________________________________________ */





/* =========================================================
   BEFORE / AFTER SECTION
========================================================= */

.shba-section {
    position: relative;
    overflow: hidden;
    padding: 95px 0;
    background: var(--color-off-white, #fdfdfe);
}


/* subtle background detail */

.shba-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(135deg,
            rgba(232, 162, 137, 0.06) 0%,
            transparent 32%,
            rgba(29, 33, 39, 0.025) 100%);
}


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

.shba-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

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


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

.shba-heading {
    max-width: 820px;
    margin: 0 auto 52px;
    text-align: center;
}


.shba-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 14px;

    color: var(--color-accent-dark, #d98c72);

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;

    text-transform: uppercase;
}


.shba-eyebrow::before,
.shba-eyebrow::after {
    content: "";

    width: 30px;
    height: 2px;

    background: var(--color-accent, #e8a289);
}


.shba-title {
    margin: 0 0 18px;

    color: var(--color-dark, #1d2127);

    font-size: clamp(34px, 4vw, 52px);
    font-weight: 850;
    line-height: 1.08;

    letter-spacing: -1.5px;
}


.shba-title span {
    color: var(--color-accent-dark, #d98c72);
}


.shba-intro {
    max-width: 750px;
    margin: 0 auto;

    color: var(--color-text, #5f6467);

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


/* =========================================================
   BEFORE / AFTER GRID
========================================================= */

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

    gap: 26px;

    max-width: 1180px;

    margin: 0 auto;
}


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

.shba-card {
    position: relative;

    overflow: hidden;

    border:
        1px solid var(--color-border-light, rgba(29, 33, 39, 0.10));

    border-radius: 22px;

    background: var(--color-white, #ffffff);

    box-shadow:
        0 18px 45px rgba(29, 33, 39, 0.09);

    transition:
        transform 300ms ease,
        box-shadow 300ms ease,
        border-color 300ms ease;
}


.shba-card:hover {
    transform: translateY(-7px);

    border-color:
        var(--color-accent-border, rgba(232, 162, 137, 0.35));

    box-shadow:
        0 25px 58px rgba(29, 33, 39, 0.14);
}


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

.shba-image-wrap {
    position: relative;

    width: 100%;
    aspect-ratio: 4 / 3;

    overflow: hidden;

    background:
        var(--color-gray-light, #d4d7dd);
}


.shba-image {
    width: 100%;
    height: 100%;

    display: block;

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

    transition:
        transform 800ms ease;
}


.shba-card:hover .shba-image {
    transform: scale(1.045);
}


/* image gradient */

.shba-image-wrap::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(to bottom,
            transparent 45%,
            rgba(29, 33, 39, 0.08) 65%,
            rgba(29, 33, 39, 0.55) 100%);
}


/* =========================================================
   BEFORE / AFTER LABEL
========================================================= */

.shba-label {
    position: absolute;
    z-index: 3;

    top: 18px;
    left: 18px;

    min-width: 86px;

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

    gap: 7px;

    padding: 9px 14px;

    border-radius: 50px;

    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.9px;

    text-transform: uppercase;

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


.shba-label-before {
    color: var(--color-white, #ffffff);

    background:
        rgba(29, 33, 39, 0.87);

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


.shba-label-after {
    color: var(--color-dark, #1d2127);

    background:
        rgba(232, 162, 137, 0.94);

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


.shba-label-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: currentColor;

    animation:
        shbaLabelPulse 2s ease-out infinite;
}


@keyframes shbaLabelPulse {

    0% {
        box-shadow:
            0 0 0 0 currentColor;
    }

    70% {
        box-shadow:
            0 0 0 7px transparent;
    }

    100% {
        box-shadow:
            0 0 0 0 transparent;
    }
}


/* =========================================================
   IMAGE BOTTOM TAG
========================================================= */

.shba-image-tag {
    position: absolute;

    z-index: 3;

    left: 20px;
    bottom: 18px;

    color: var(--color-white, #ffffff);

    font-size: 12px;
    font-weight: 750;

    letter-spacing: 0.5px;
}


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

.shba-card-content {
    padding: 27px 27px 30px;
}


.shba-card-kicker {
    display: block;

    margin-bottom: 7px;

    color: var(--color-accent-dark, #d98c72);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.9px;

    text-transform: uppercase;
}


.shba-card-title {
    margin: 0 0 12px;

    color: var(--color-dark, #1d2127);

    font-size: 23px;
    font-weight: 820;
    line-height: 1.25;
}


.shba-card-text {
    margin: 0 0 20px;

    color: var(--color-text, #5f6467);

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


/* =========================================================
   DETAIL LIST
========================================================= */

.shba-details {
    display: grid;
    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.shba-details li {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    color: var(--color-dark-soft, #3a3f4a);

    font-size: 14px;
    font-weight: 650;
    line-height: 1.45;
}


.shba-check {
    width: 23px;
    height: 23px;

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

    flex-shrink: 0;

    border-radius: 7px;

    background:
        var(--color-accent-soft, rgba(232, 162, 137, 0.14));

    color:
        var(--color-accent-dark, #d98c72);

    font-size: 12px;
    font-weight: 900;
}


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

.shba-cta {
    position: relative;

    max-width: 1180px;

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

    gap: 25px;

    margin: 35px auto 0;

    padding: 25px 28px;

    overflow: hidden;

    border-radius: 20px;

    background:
        var(--color-dark, #1d2127);

    box-shadow:
        0 18px 45px rgba(29, 33, 39, 0.18);
}


.shba-cta::before {
    content: "";

    position: absolute;

    width: 210px;
    height: 210px;

    right: -115px;
    top: -115px;

    border:
        2px solid rgba(232, 162, 137, 0.23);

    transform: rotate(28deg);

    pointer-events: none;
}


.shba-cta-content {
    position: relative;
    z-index: 2;
}


.shba-cta-content small {
    display: block;

    margin-bottom: 5px;

    color: var(--color-accent-light, #f2b6a1);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;

    text-transform: uppercase;
}


.shba-cta-content strong {
    display: block;

    margin-bottom: 5px;

    color: var(--color-white, #ffffff);

    font-size: clamp(20px, 2.3vw, 28px);
    font-weight: 850;
    line-height: 1.2;
}


.shba-cta-content p {
    margin: 0;

    color: var(--color-gray-soft, #bdc2c8);

    font-size: 14px;
    line-height: 1.6;
}


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

.shba-call {
    position: relative;
    z-index: 2;

    min-width: 225px;
    min-height: 60px;

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

    gap: 11px;

    padding: 10px 20px;

    flex-shrink: 0;

    overflow: hidden;

    border:
        1px solid var(--color-accent, #e8a289);

    border-radius: 12px;

    background:
        var(--color-accent, #e8a289);

    color:
        var(--color-dark, #1d2127);

    text-decoration: none;

    transition:
        transform 250ms ease,
        background-color 250ms ease,
        box-shadow 250ms ease;
}


.shba-call::before {
    content: "";

    position: absolute;

    top: 0;
    left: -70%;

    width: 35%;
    height: 100%;

    background:
        linear-gradient(110deg,
            transparent,
            rgba(255, 255, 255, 0.48),
            transparent);

    transform: skewX(-20deg);

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


.shba-call:hover {
    color:
        var(--color-dark, #1d2127);

    background:
        var(--color-accent-light, #f2b6a1);

    transform: translateY(-4px);

    box-shadow:
        0 16px 35px rgba(217, 140, 114, 0.32);
}


.shba-call>* {
    position: relative;
    z-index: 2;
}


.shba-call-icon {
    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background:
        var(--color-dark, #1d2127);

    color:
        var(--color-accent-light, #f2b6a1);

    animation:
        shbaPhoneRing 2.8s ease-in-out infinite;
}


.shba-call-icon svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shba-call-text {
    display: flex;
    flex-direction: column;

    text-align: left;

    line-height: 1.1;
}


.shba-call-text small {
    margin-bottom: 4px;

    color:
        var(--color-dark-soft, #3a3f4a);

    font-size: 9px;
    font-weight: 750;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.shba-call-text strong {
    color:
        var(--color-dark, #1d2127);

    font-size: 16px;
    font-weight: 850;
}


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

@keyframes shbaButtonShine {

    0%,
    48% {
        left: -70%;
    }

    82%,
    100% {
        left: 140%;
    }
}


@keyframes shbaPhoneRing {

    0%,
    80%,
    100% {
        transform: rotate(0deg);
    }

    84% {
        transform: rotate(9deg);
    }

    88% {
        transform: rotate(-9deg);
    }

    93% {
        transform: rotate(6deg);
    }
}


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

@media (max-width: 991.98px) {

    .shba-section {
        padding: 75px 0;
    }


    .shba-grid {
        gap: 20px;
    }


    .shba-card-title {
        font-size: 21px;
    }


    .shba-cta {
        flex-direction: column;

        align-items: flex-start;
    }


    .shba-call {
        min-width: 230px;
    }
}


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

@media (max-width: 767.98px) {

    .shba-section {
        padding: 60px 0;
    }


    .shba-container {
        padding-left: 17px;
        padding-right: 17px;
    }


    .shba-heading {
        margin-bottom: 35px;
    }


    .shba-title {
        font-size: clamp(31px, 8vw, 40px);
    }


    .shba-intro {
        font-size: 15px;
        line-height: 1.65;
    }


    .shba-grid {
        grid-template-columns: 1fr;

        max-width: 600px;
    }


    .shba-card-content {
        padding: 23px 20px 26px;
    }


    .shba-cta {
        max-width: 600px;

        padding: 24px 20px;
    }


    .shba-call {
        width: 100%;
    }
}


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

@media (max-width: 575.98px) {

    .shba-eyebrow {
        font-size: 10px;
    }


    .shba-eyebrow::before,
    .shba-eyebrow::after {
        width: 20px;
    }


    .shba-card {
        border-radius: 17px;
    }


    .shba-image-wrap {
        aspect-ratio: 1 / 1;
    }


    .shba-card-title {
        font-size: 20px;
    }


    .shba-cta-content strong {
        font-size: 21px;
    }
}


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

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

    .shba-label-dot,
    .shba-call::before,
    .shba-call-icon {
        animation: none !important;
    }


    .shba-card,
    .shba-image,
    .shba-call {
        transition: none !important;
    }
}

/* _________________________________________________________________________________________________________________________________________________________________ */


/* =========================================================
   SPECIAL OFFER SECTION
   GARAGE DOORS REPAIR SOUTH HOUSTON
========================================================= */

.shoff-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0;

    background:
        linear-gradient(135deg,
            var(--color-section-bg, #eceef1) 0%,
            var(--color-light, #f5f6f8) 55%,
            var(--color-off-white, #fdfdfe) 100%);
}


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

.shoff-section::before {
    content: "";
    position: absolute;

    width: 320px;
    height: 320px;

    top: -190px;
    left: -130px;

    border: 2px solid rgba(232, 162, 137, 0.14);

    transform: rotate(28deg);

    pointer-events: none;

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


.shoff-section::after {
    content: "";
    position: absolute;

    width: 230px;
    height: 230px;

    right: -100px;
    bottom: -120px;

    border: 2px solid rgba(29, 33, 39, 0.06);

    transform: rotate(45deg);

    pointer-events: none;

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


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

.shoff-container {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1380px;

    margin: 0 auto;

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


/* =========================================================
   MAIN CARD - BALANCED 50 / 50
========================================================= */

.shoff-card {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 42px;

    padding: 45px;

    overflow: hidden;

    border:
        1px solid rgba(29, 33, 39, 0.08);

    border-radius: 26px;

    background:
        var(--color-white, #ffffff);

    box-shadow:
        0 24px 65px rgba(29, 33, 39, 0.12);
}


.shoff-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(90deg,
            var(--color-accent-dark, #d98c72),
            var(--color-accent, #e8a289),
            var(--color-accent-light, #f2b6a1));
}


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

.shoff-content {
    position: relative;

    z-index: 2;

    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


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

.shoff-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    width: fit-content;

    margin-bottom: 15px;

    color:
        var(--color-accent-dark, #d98c72);

    font-size: 12px;
    font-weight: 850;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.shoff-eyebrow-icon {
    width: 12px;
    height: 12px;

    display: inline-block;

    flex-shrink: 0;

    border:
        2px solid var(--color-accent, #e8a289);

    transform: rotate(45deg);

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


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

.shoff-title {
    max-width: 650px;

    margin: 0 0 15px;

    color:
        var(--color-dark, #1d2127);

    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.1;

    font-weight: 850;



    letter-spacing: -1.4px;
}


.shoff-title span {
    color:
        var(--color-accent-dark, #d98c72);
}


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

.shoff-description {
    max-width: 650px;

    margin: 0 0 25px;

    color:
        var(--color-text, #5f6467);

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   OFFER BOX
========================================================= */

.shoff-offer {
    position: relative;

    width: 100%;

    display: flex;
    align-items: center;

    gap: 25px;

    margin-bottom: 27px;

    padding: 24px 26px;

    overflow: hidden;

    border:
        1px solid var(--color-accent-border,
            rgba(232, 162, 137, 0.35));

    border-radius: 18px;

    background:
        var(--color-accent-soft,
            rgba(232, 162, 137, 0.14));
}


.shoff-offer::after {
    content: "";

    position: absolute;

    top: 0;
    left: -60%;

    width: 34%;
    height: 100%;

    background:
        linear-gradient(110deg,
            transparent,
            rgba(255, 255, 255, 0.50),
            transparent);

    transform: skewX(-20deg);

    animation:
        shoffOfferSweep 4.5s ease-in-out infinite;
}


/* =========================================================
   LARGE DISCOUNT
========================================================= */

.shoff-discount {
    position: relative;

    z-index: 2;

    min-width: 155px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    flex-shrink: 0;

    line-height: 0.85;
}


.shoff-discount strong {
    display: block;

    margin: 0;

    color:
        var(--color-dark, #1d2127);

    font-size:
        clamp(68px, 6vw, 90px);

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -4px;

    white-space: nowrap;

    text-shadow:
        0 5px 18px rgba(29, 33, 39, 0.07);

    animation:
        shoffDiscountPulse 3.6s ease-in-out infinite;
}


.shoff-discount span {
    display: block;

    margin-top: 14px;
    margin-left: 4px;

    color:
        var(--color-accent-dark, #d98c72);

    font-size: 18px;

    font-weight: 900;

    line-height: 1;

    letter-spacing: 2px;

    text-transform: uppercase;
}


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

.shoff-offer-info {
    position: relative;

    z-index: 2;

    padding-left: 24px;

    border-left:
        1px solid rgba(29, 33, 39, 0.12);
}


.shoff-offer-info small {
    display: block;

    margin-bottom: 7px;

    color:
        var(--color-text-muted, #7e8388);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.9px;

    text-transform: uppercase;
}


.shoff-offer-info strong {
    display: block;

    max-width: 360px;

    color:
        var(--color-dark, #1d2127);

    font-size: 19px;

    font-weight: 850;

    line-height: 1.35;
}


/* =========================================================
   BENEFITS
========================================================= */

.shoff-benefits {
    width: 100%;

    display: flex;
    flex-wrap: wrap;

    gap: 11px 18px;

    margin: 0 0 28px;

    padding: 0;

    list-style: none;
}


.shoff-benefits li {
    display: flex;
    align-items: center;

    gap: 8px;

    color:
        var(--color-dark-soft, #3a3f4a);

    font-size: 14px;

    font-weight: 700;
}


.shoff-benefit-check {
    width: 26px;
    height: 26px;

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

    flex-shrink: 0;

    border-radius: 7px;

    background:
        var(--color-accent-soft,
            rgba(232, 162, 137, 0.14));

    color:
        var(--color-accent-dark, #d98c72);

    font-size: 12px;

    font-weight: 900;
}


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

.shoff-actions {
    width: 100%;

    display: flex;
    align-items: stretch;

    flex-wrap: wrap;

    gap: 12px;
}


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

.shoff-phone {
    min-height: 62px;

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

    gap: 11px;

    padding: 9px 18px;

    border:
        1px solid var(--color-dark, #1d2127);

    border-radius: 11px;

    background:
        var(--color-dark, #1d2127);

    color:
        var(--color-white, #ffffff);

    text-decoration: none;

    box-shadow:
        0 13px 30px rgba(29, 33, 39, 0.18);

    transition:
        transform 250ms ease,
        background-color 250ms ease,
        box-shadow 250ms ease;
}


.shoff-phone:hover {
    color:
        var(--color-white, #ffffff);

    background:
        var(--color-dark-soft, #3a3f4a);

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 38px rgba(29, 33, 39, 0.25);
}


.shoff-phone-icon {
    position: relative;

    width: 40px;
    height: 40px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background:
        var(--color-accent, #e8a289);

    color:
        var(--color-dark, #1d2127);

    animation:
        shoffPhoneRing 2.8s ease-in-out infinite;
}


.shoff-phone-icon::after {
    content: "";

    position: absolute;

    inset: -5px;

    border:
        1px solid rgba(232, 162, 137, 0.45);

    border-radius: 12px;

    animation:
        shoffPhonePulse 2s ease-out infinite;
}


.shoff-phone-icon svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shoff-phone-text {
    display: flex;
    flex-direction: column;

    line-height: 1.1;
}


.shoff-phone-text small {
    margin-bottom: 4px;

    color:
        var(--color-gray-soft, #bdc2c8);

    font-size: 9px;

    font-weight: 750;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.shoff-phone-text strong {
    color:
        var(--color-white, #ffffff);

    font-size: 16px;

    font-weight: 850;
}


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

.shoff-claim {
    position: relative;

    min-height: 62px;

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

    gap: 10px;

    padding: 10px 21px;

    overflow: hidden;

    border:
        1px solid var(--color-accent, #e8a289);

    border-radius: 11px;

    background:
        var(--color-accent, #e8a289);

    color:
        var(--color-dark, #1d2127);

    text-decoration: none;

    font-size: 15px;

    font-weight: 850;

    box-shadow:
        0 13px 30px rgba(217, 140, 114, 0.27);

    transition:
        transform 250ms ease,
        background-color 250ms ease,
        box-shadow 250ms ease;
}


.shoff-claim::before {
    content: "";

    position: absolute;

    top: 0;
    left: -70%;

    width: 36%;
    height: 100%;

    background:
        linear-gradient(110deg,
            transparent,
            rgba(255, 255, 255, 0.52),
            transparent);

    transform:
        skewX(-20deg);

    animation:
        shoffClaimShine 3.7s ease-in-out infinite;
}


.shoff-claim>* {
    position: relative;

    z-index: 2;
}


.shoff-claim:hover {
    color:
        var(--color-dark, #1d2127);

    background:
        var(--color-accent-light, #f2b6a1);

    transform:
        translateY(-4px);

    box-shadow:
        0 17px 38px rgba(217, 140, 114, 0.38);
}


.shoff-claim-icon {
    width: 36px;
    height: 36px;

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

    flex-shrink: 0;

    border-radius: 8px;

    background:
        var(--color-dark, #1d2127);

    color:
        var(--color-white, #ffffff);
}


.shoff-claim-icon svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;

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


.shoff-claim-arrow {
    font-size: 20px;

    transition:
        transform 250ms ease;
}


.shoff-claim:hover .shoff-claim-arrow {
    transform:
        translateX(5px);
}


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

.shoff-visual {
    position: relative;

    width: 100%;
    max-width: 540px;

    min-width: 0;

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

    margin: 0 auto;
}


/* =========================================================
   1:1 IMAGE LINK
========================================================= */

.shoff-image-link {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 20px;

    background:
        var(--color-light, #f5f6f8);

    border:
        7px solid var(--color-white, #ffffff);

    box-shadow:
        0 24px 55px rgba(29, 33, 39, 0.15);

    text-decoration: none;

    transition:
        transform 300ms ease,
        box-shadow 300ms ease;
}


.shoff-image-link:hover {
    transform:
        translateY(-7px) rotate(-0.5deg);

    box-shadow:
        0 32px 70px rgba(29, 33, 39, 0.20);
}


/* LIGHT SWEEP */

.shoff-image-link::before {
    content: "";

    position: absolute;

    z-index: 4;

    top: 0;
    left: -70%;

    width: 34%;
    height: 100%;

    pointer-events: none;

    background:
        linear-gradient(110deg,
            transparent,
            rgba(255, 255, 255, 0.27),
            transparent);

    transform:
        skewX(-18deg);

    animation:
        shoffImageSweep 5.5s ease-in-out infinite;
}


/* =========================================================
   1:1 IMAGE
========================================================= */

.shoff-image {
    width: 100%;
    height: 100%;

    display: block;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    object-position: center;

    transition:
        transform 700ms ease;
}


.shoff-image-link:hover .shoff-image {
    transform:
        scale(1.035);
}


/* =========================================================
   IMAGE BADGE
========================================================= */

.shoff-image-badge {
    position: absolute;

    z-index: 5;

    top: 18px;
    right: 18px;

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

    gap: 7px;

    padding: 9px 13px;

    border-radius: 50px;

    background:
        rgba(29, 33, 39, 0.91);

    color:
        var(--color-white, #ffffff);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.8px;

    text-transform: uppercase;

    box-shadow:
        0 10px 25px rgba(29, 33, 39, 0.15);

    backdrop-filter:
        blur(8px);

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

    animation:
        shoffBadgeFloat 3.5s ease-in-out infinite;
}


.shoff-image-badge-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--color-accent, #e8a289);

    animation:
        shoffBadgePulse 1.8s ease-out infinite;
}


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

.shoff-image-accent {
    position: absolute;

    z-index: -1;

    width: 82%;
    height: 82%;

    right: -18px;
    bottom: -18px;

    border:
        2px solid rgba(232, 162, 137, 0.40);

    border-radius: 22px;

    pointer-events: none;

    animation:
        shoffAccentFloat 6s ease-in-out infinite;
}


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

@keyframes shoffBgShapeOne {

    0%,
    100% {
        transform:
            translate(0, 0) rotate(28deg);
    }

    50% {
        transform:
            translate(15px, 14px) rotate(34deg);
    }
}


@keyframes shoffBgShapeTwo {

    0%,
    100% {
        transform:
            translate(0, 0) rotate(45deg);
    }

    50% {
        transform:
            translate(-16px, -12px) rotate(38deg);
    }
}


@keyframes shoffEyebrowIcon {

    0%,
    100% {
        transform:
            rotate(45deg) scale(1);
    }

    50% {
        transform:
            rotate(135deg) scale(1.12);
    }
}


@keyframes shoffOfferSweep {

    0%,
    50% {
        left: -60%;
    }

    82%,
    100% {
        left: 140%;
    }
}


@keyframes shoffDiscountPulse {

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

    50% {
        transform: scale(1.035);
    }
}


@keyframes shoffPhoneRing {

    0%,
    80%,
    100% {
        transform: rotate(0deg);
    }

    84% {
        transform: rotate(9deg);
    }

    88% {
        transform: rotate(-9deg);
    }

    93% {
        transform: rotate(6deg);
    }
}


@keyframes shoffPhonePulse {

    0% {
        opacity: 0.8;

        transform:
            scale(0.85);
    }

    100% {
        opacity: 0;

        transform:
            scale(1.45);
    }
}


@keyframes shoffClaimShine {

    0%,
    48% {
        left: -70%;
    }

    82%,
    100% {
        left: 140%;
    }
}


@keyframes shoffTicketMove {

    0%,
    100% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(-5deg);
    }

    65% {
        transform: rotate(5deg);
    }
}


@keyframes shoffImageSweep {

    0%,
    55% {
        left: -70%;
    }

    86%,
    100% {
        left: 140%;
    }
}


@keyframes shoffBadgeFloat {

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

    50% {
        transform: translateY(-7px);
    }
}


@keyframes shoffBadgePulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(232, 162, 137, 0.50);
    }

    70% {
        box-shadow:
            0 0 0 7px rgba(232, 162, 137, 0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(232, 162, 137, 0);
    }
}


@keyframes shoffAccentFloat {

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

    50% {
        transform:
            translate(8px, 8px);
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .shoff-card {
        gap: 32px;

        padding: 38px;
    }


    .shoff-discount {
        min-width: 135px;
    }


    .shoff-discount strong {
        font-size: 72px;
    }


    .shoff-offer-info {
        padding-left: 18px;
    }


    .shoff-title {
        font-size:
            clamp(32px, 4vw, 44px);
    }
}


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

@media (max-width: 991.98px) {

    .shoff-section {
        padding: 75px 0;
    }


    .shoff-card {
        grid-template-columns: 1fr;

        gap: 42px;

        padding: 38px;
    }


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


    .shoff-eyebrow {
        margin-left: auto;
        margin-right: auto;
    }


    .shoff-title,
    .shoff-description,
    .shoff-offer {
        margin-left: auto;
        margin-right: auto;
    }


    .shoff-benefits,
    .shoff-actions {
        justify-content: center;
    }


    .shoff-visual {
        max-width: 520px;
    }
}


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

@media (max-width: 767.98px) {

    .shoff-section {
        padding: 60px 0;
    }


    .shoff-container {
        padding-left: 17px;
        padding-right: 17px;
    }


    .shoff-card {
        padding: 28px 20px;

        border-radius: 20px;
    }


    .shoff-title {

        font-size: clamp(26px, 7vw, 34px);
    }


    .shoff-description {
        font-size: 15px;

        line-height: 1.65;
    }


    .shoff-offer {
        gap: 18px;

        padding: 20px 18px;

        text-align: left;
    }


    .shoff-discount {
        min-width: 125px;
    }


    .shoff-discount strong {
        font-size: 68px;

        letter-spacing: -3px;
    }


    .shoff-offer-info {
        padding-left: 18px;
    }


    .shoff-offer-info strong {
        font-size: 16px;
    }


    .shoff-benefits {
        max-width: 430px;

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

        justify-content: flex-start;
    }


    .shoff-actions {
        max-width: 430px;

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

        flex-direction: column;
    }


    .shoff-phone,
    .shoff-claim {
        width: 100%;

        justify-content: center;
    }


    .shoff-visual {
        width: 100%;

        max-width: 480px;
    }
}


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

@media (max-width: 575.98px) {

    .shoff-card {
        padding: 25px 16px;
    }


    .shoff-offer {
        flex-direction: column;

        align-items: flex-start;
    }


    .shoff-discount {
        width: 100%;
    }


    .shoff-discount strong {
        font-size:
            clamp(72px, 22vw, 92px);
    }


    .shoff-offer-info {
        width: 100%;

        padding-left: 0;
        padding-top: 16px;

        border-left: 0;

        border-top:
            1px solid rgba(29, 33, 39, 0.10);
    }


    .shoff-image-link {
        border-width: 5px;

        border-radius: 16px;
    }


    .shoff-image-accent {
        right: -10px;
        bottom: -10px;

        border-radius: 18px;
    }


    .shoff-image-badge {
        top: 12px;
        right: 12px;

        padding: 7px 10px;

        font-size: 8px;
    }
}


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

@media (max-width: 399.98px) {

    .shoff-title {
        font-size: 29px;
    }


    .shoff-discount strong {
        font-size: 72px;
    }
}


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

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

    .shoff-section::before,
    .shoff-section::after,
    .shoff-eyebrow-icon,
    .shoff-offer::after,
    .shoff-discount strong,
    .shoff-phone-icon,
    .shoff-phone-icon::after,
    .shoff-claim::before,
    .shoff-claim-icon svg,
    .shoff-image-link::before,
    .shoff-image-badge,
    .shoff-image-badge-dot,
    .shoff-image-accent {
        animation: none !important;
    }


    .shoff-phone,
    .shoff-claim,
    .shoff-image-link,
    .shoff-image {
        transition: none !important;
    }
}

/* _____________________________________________________________________________________________________________________________________________________________________________ */


/* =========================================================
   COMPLETE GARAGE DOOR REPAIR SOLUTIONS
   DARK BACKGROUND
   BALANCED HEIGHT + LARGER TYPOGRAPHY
========================================================= */

.shsol-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0;

    background:
        linear-gradient(135deg,
            #1d2127 0%,
            #303640 55%,
            #252a31 100%);
}


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

.shsol-section::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -250px;
    left: -160px;

    border: 2px solid rgba(232, 162, 137, 0.13);

    transform: rotate(35deg);

    pointer-events: none;

    animation: shsolBgMoveOne 10s ease-in-out infinite;
}


.shsol-section::after {
    content: "";

    position: absolute;

    width: 310px;
    height: 310px;

    right: -170px;
    bottom: -190px;

    border: 2px solid rgba(255, 255, 255, 0.05);

    transform: rotate(45deg);

    pointer-events: none;

    animation: shsolBgMoveTwo 12s ease-in-out infinite;
}


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

.shsol-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1380px;

    margin: 0 auto;

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


/* =========================================================
   BALANCED TWO COLUMN GRID
========================================================= */

.shsol-grid {
    display: grid;

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

    /*
       IMPORTANT:
       Makes both columns exactly the same height.
    */
    align-items: stretch;

    gap: 55px;

    width: 100%;
}


/* =========================================================
   LEFT VISUAL COLUMN
========================================================= */

.shsol-visual {
    position: relative;

    width: 100%;
    min-width: 0;

    /*
       Fill entire grid row height
    */
    height: 100%;

    display: flex;
    align-items: stretch;

    margin: 0;
}


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

.shsol-image-accent {
    position: absolute;

    z-index: 0;

    width: 82%;
    height: 82%;

    left: -20px;
    bottom: -20px;

    border: 2px solid rgba(232, 162, 137, 0.45);

    border-radius: 24px;

    pointer-events: none;

    animation: shsolAccentMove 6s ease-in-out infinite;
}


/* =========================================================
   IMAGE WRAPPER
   MATCHES RIGHT COLUMN HEIGHT
========================================================= */

.shsol-image-wrap {
    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    /*
       Remove square restriction on desktop.
       This allows the image to match the full
       height of the right content column.
    */
    min-height: 100%;

    margin: 0;

    overflow: hidden;

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

    border-radius: 24px;

    background: #3a3f4a;

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


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

.shsol-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

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

    transition: transform 800ms ease;
}


.shsol-image-wrap:hover .shsol-image {
    transform: scale(1.04);
}


/* IMAGE OVERLAY */

.shsol-image-wrap::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(to bottom,
            rgba(29, 33, 39, 0.01) 35%,
            rgba(29, 33, 39, 0.08) 58%,
            rgba(29, 33, 39, 0.74) 100%);
}


/* =========================================================
   IMAGE LOCATION BADGE
========================================================= */

.shsol-image-location {
    position: absolute;

    z-index: 4;

    top: 20px;
    left: 20px;

    padding: 10px 15px;

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

    border-radius: 50px;

    background: rgba(29, 33, 39, 0.92);

    color: #ffffff;

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

    line-height: 1;

    letter-spacing: 0.8px;

    text-transform: uppercase;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   FLOATING IMAGE CARD
========================================================= */

.shsol-image-card {
    position: absolute;

    z-index: 5;

    right: 20px;
    bottom: 20px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px 17px;

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

    border-radius: 14px;

    background: rgba(29, 33, 39, 0.95);

    box-shadow:
        0 16px 35px rgba(0, 0, 0, 0.28);

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

    animation:
        shsolImageCardFloat 3.7s ease-in-out infinite;
}


.shsol-image-card-icon {
    width: 44px;
    height: 44px;

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

    flex-shrink: 0;

    border-radius: 10px;

    background: #e8a289;

    color: #1d2127;
}


.shsol-image-card-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shsol-image-card>span:last-child {
    display: flex;
    flex-direction: column;

    line-height: 1.15;
}


.shsol-image-card small {
    margin-bottom: 5px;

    color: #a1a7ad;

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

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.shsol-image-card strong {
    color: #ffffff;

    font-size: 15px;
    font-weight: 850;
}


/* =========================================================
   RIGHT CONTENT COLUMN
========================================================= */

.shsol-content {
    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 5px 0;
}


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

.shsol-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    width: fit-content;

    margin-bottom: 16px;

    color: #f2b6a1;

    font-size: 13px;
    font-weight: 850;

    line-height: 1.3;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.shsol-eyebrow-icon {
    width: 12px;
    height: 12px;

    display: inline-block;

    flex-shrink: 0;

    border: 2px solid #e8a289;

    transform: rotate(45deg);

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


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

.shsol-title {
    width: 100%;

    margin: 0 0 22px;

    color: #ffffff;

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

    font-weight: 850;

    line-height: 1.08;

    letter-spacing: -1.5px;
}


.shsol-title span {
    display: block;

    color: #e8a289;
}


/* =========================================================
   INTRO + BODY TEXT
========================================================= */

.shsol-intro,
.shsol-text {
    width: 100%;

    color: #d4d7dd;

    font-size: 17px;

    line-height: 1.75;
}


.shsol-intro {
    margin: 0 0 16px;
}


.shsol-text {
    margin: 0 0 30px;
}


.shsol-text strong {
    color: #ffffff;

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


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

.shsol-services {
    width: 100%;

    display: grid;

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

    gap: 12px;

    margin: 0 0 28px;

    padding: 0;

    list-style: none;
}


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

.shsol-services li {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 12px;

    min-height: 82px;

    padding: 15px 15px;

    overflow: hidden;

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

    border-radius: 13px;

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

    box-shadow:
        0 9px 24px rgba(0, 0, 0, 0.11);

    transition:
        transform 250ms ease,
        border-color 250ms ease,
        background-color 250ms ease,
        box-shadow 250ms ease;
}


.shsol-services li::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 3px;

    background: #e8a289;

    transition: width 350ms ease;
}


.shsol-services li:hover {
    transform: translateY(-4px);

    border-color:
        rgba(232, 162, 137, 0.42);

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

    box-shadow:
        0 16px 30px rgba(0, 0, 0, 0.20);
}


.shsol-services li:hover::after {
    width: 100%;
}


/* =========================================================
   SERVICE CHECK
========================================================= */

.shsol-check {
    width: 32px;
    height: 32px;

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

    flex-shrink: 0;

    border:
        1px solid rgba(232, 162, 137, 0.20);

    border-radius: 8px;

    background:
        rgba(232, 162, 137, 0.16);

    color: #f2b6a1;

    font-size: 15px;
    font-weight: 900;
}


.shsol-services li>span:last-child {
    display: flex;
    flex-direction: column;

    min-width: 0;

    line-height: 1.25;
}


/* SERVICE TITLE */

.shsol-services strong {
    margin-bottom: 5px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 850;

    line-height: 1.25;
}


/* SERVICE DESCRIPTION */

.shsol-services small {
    color: #bdc2c8;

    font-size: 13px;

    line-height: 1.45;
}


/* =========================================================
   SYSTEM NOTE
========================================================= */

.shsol-note {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 27px;

    padding: 17px 18px;

    border:
        1px solid rgba(232, 162, 137, 0.18);

    border-left:
        4px solid #e8a289;

    border-radius:
        0 12px 12px 0;

    background:
        rgba(232, 162, 137, 0.11);
}


.shsol-note-icon {
    width: 39px;
    height: 39px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: #e8a289;

    color: #1d2127;
}


.shsol-note-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shsol-note p {
    margin: 0;

    color: #e1e3e6;

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

    line-height: 1.6;
}


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

.shsol-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}


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

.shsol-call {
    position: relative;

    min-height: 70px;

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

    gap: 13px;

    padding: 10px 20px;

    overflow: hidden;

    border: 1px solid #e8a289;

    border-radius: 12px;

    background: #e8a289;

    color: #1d2127;

    text-decoration: none;

    box-shadow:
        0 15px 34px rgba(0, 0, 0, 0.25);

    transition:
        transform 250ms ease,
        background-color 250ms ease,
        box-shadow 250ms ease;
}


.shsol-call::before {
    content: "";

    position: absolute;

    top: 0;
    left: -65%;

    width: 32%;
    height: 100%;

    background:
        linear-gradient(110deg,
            transparent,
            rgba(255, 255, 255, 0.46),
            transparent);

    transform: skewX(-18deg);

    animation:
        shsolCallSweep 4s ease-in-out infinite;
}


.shsol-call>* {
    position: relative;

    z-index: 2;
}


.shsol-call:hover {
    color: #1d2127;

    background: #f2b6a1;

    transform: translateY(-4px);

    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.32);
}


/* =========================================================
   CALL ICON
========================================================= */

.shsol-call-icon {
    position: relative;

    width: 46px;
    height: 46px;

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

    flex-shrink: 0;

    border-radius: 10px;

    background: #1d2127;

    color: #f2b6a1;

    animation:
        shsolPhoneRing 2.8s ease-in-out infinite;
}


.shsol-call-icon::after {
    content: "";

    position: absolute;

    inset: -5px;

    border:
        1px solid rgba(29, 33, 39, 0.35);

    border-radius: 13px;

    animation:
        shsolPhonePulse 2s ease-out infinite;
}


.shsol-call-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


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

.shsol-call-text {
    display: flex;
    flex-direction: column;

    line-height: 1.1;
}


.shsol-call-text small {
    margin-bottom: 5px;

    color: rgba(29, 33, 39, 0.72);

    font-size: 10px;
    font-weight: 850;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.shsol-call-text strong {
    color: #1d2127;

    font-size: 19px;
    font-weight: 900;
}


.shsol-call-arrow {
    margin-left: 8px;

    color: #1d2127;

    font-size: 23px;

    transition:
        transform 250ms ease;
}


.shsol-call:hover .shsol-call-arrow {
    transform:
        translateX(5px);
}


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

@keyframes shsolBgMoveOne {

    0%,
    100% {
        transform:
            translate(0, 0) rotate(35deg);
    }

    50% {
        transform:
            translate(16px, 13px) rotate(41deg);
    }
}


@keyframes shsolBgMoveTwo {

    0%,
    100% {
        transform:
            translate(0, 0) rotate(45deg);
    }

    50% {
        transform:
            translate(-15px, -12px) rotate(39deg);
    }
}


@keyframes shsolAccentMove {

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

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


@keyframes shsolEyebrowMove {

    0%,
    100% {
        transform:
            rotate(45deg) scale(1);
    }

    50% {
        transform:
            rotate(135deg) scale(1.10);
    }
}


@keyframes shsolImageCardFloat {

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

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


@keyframes shsolCallSweep {

    0%,
    50% {
        left: -65%;
    }

    82%,
    100% {
        left: 140%;
    }
}


@keyframes shsolPhoneRing {

    0%,
    80%,
    100% {
        transform:
            rotate(0deg);
    }

    84% {
        transform:
            rotate(9deg);
    }

    88% {
        transform:
            rotate(-9deg);
    }

    93% {
        transform:
            rotate(6deg);
    }
}


@keyframes shsolPhonePulse {
    0% {
        opacity: 0.7;

        transform:
            scale(0.85);
    }

    100% {
        opacity: 0;

        transform:
            scale(1.45);
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .shsol-grid {
        gap: 40px;
    }


    .shsol-title {
        font-size:
            clamp(38px, 4vw, 48px);
    }


    .shsol-intro,
    .shsol-text {
        font-size: 16px;
    }


    .shsol-services strong {
        font-size: 14px;
    }


    .shsol-services small {
        font-size: 12px;
    }
}


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

@media (max-width: 991.98px) {

    .shsol-section {
        padding:
            80px 0;
    }


    .shsol-grid {
        grid-template-columns:
            1fr;

        align-items: initial;

        gap: 50px;
    }


    .shsol-visual {
        width: 100%;
        max-width: 620px;

        height: auto;

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


    /*
       Return to 1:1 image on tablet
    */

    .shsol-image-wrap {
        height: auto;
        min-height: 0;

        aspect-ratio: 1 / 1;
    }


    .shsol-content {
        width: 100%;
        max-width: 780px;

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

        text-align: center;
    }


    .shsol-eyebrow {
        margin-left: auto;
        margin-right: auto;
    }


    .shsol-title,
    .shsol-intro,
    .shsol-text {
        margin-left: auto;
        margin-right: auto;
    }


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


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


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


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

@media (max-width: 767.98px) {

    .shsol-section {
        padding:
            65px 0;
    }


    .shsol-container {
        padding-left: 17px;
        padding-right: 17px;
    }


    .shsol-grid {
        gap: 42px;
    }


    .shsol-title {
        font-size:
            clamp(32px, 8vw, 40px);
    }


    .shsol-intro,
    .shsol-text {
        font-size: 16px;

        line-height: 1.7;
    }


    .shsol-services {
        grid-template-columns:
            1fr;

        max-width: 580px;

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


    .shsol-services li {
        min-height: 78px;
    }


    .shsol-services strong {
        font-size: 15px;
    }


    .shsol-services small {
        font-size: 13px;
    }


    .shsol-actions {
        width: 100%;

        max-width: 450px;

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


    .shsol-call {
        width: 100%;

        justify-content: center;
    }
}


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

@media (max-width: 575.98px) {

    .shsol-image-wrap {
        border-width: 5px;

        border-radius: 18px;
    }


    .shsol-image-accent {
        left: -10px;
        bottom: -10px;

        border-radius: 19px;
    }


    .shsol-image-location {
        top: 12px;
        left: 12px;

        font-size: 9px;
    }


    .shsol-image-card {
        right: 12px;
        bottom: 12px;

        padding:
            10px 12px;
    }


    .shsol-image-card-icon {
        width: 37px;
        height: 37px;
    }


    .shsol-image-card strong {
        font-size: 12px;
    }


    .shsol-note {
        align-items: flex-start;

        padding:
            15px;
    }


    .shsol-note p {
        font-size: 13px;
    }


    .shsol-call-text strong {
        font-size: 17px;
    }
}


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

@media (max-width: 399.98px) {

    .shsol-title {
        font-size: 30px;
    }


    .shsol-call {
        padding:
            9px 12px;
    }


    .shsol-call-text strong {
        font-size: 16px;
    }
}


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

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

    .shsol-section::before,
    .shsol-section::after,
    .shsol-image-accent,
    .shsol-eyebrow-icon,
    .shsol-image-card,
    .shsol-call::before,
    .shsol-call-icon,
    .shsol-call-icon::after {
        animation: none !important;
    }


    .shsol-image,
    .shsol-services li,
    .shsol-call,
    .shsol-call-arrow {
        transition: none !important;
    }
}

/* _________________________________________________________________________________________________________________________________________________________________________ */


/* =========================================================
   RESIDENTIAL GARAGE DOOR SERVICES
========================================================= */

.shres-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0;

    background:
        linear-gradient(135deg,
            #fdfdfe 0%,
            #f5f6f8 58%,
            #eceef1 100%);
}


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

.shres-section::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    top: -230px;
    right: -150px;

    border:
        2px solid rgba(232, 162, 137, 0.16);

    transform:
        rotate(35deg);

    pointer-events: none;

    animation:
        shresBgFloat 10s ease-in-out infinite;
}


.shres-section::after {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    left: -130px;
    bottom: -130px;

    border:
        2px solid rgba(29, 33, 39, 0.06);

    transform:
        rotate(45deg);

    pointer-events: none;
}


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

.shres-container {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1380px;

    margin: 0 auto;

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


/* =========================================================
   BALANCED GRID
========================================================= */

.shres-grid {
    display: grid;

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

    align-items: stretch;

    gap: 55px;

    width: 100%;
}


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

.shres-content {
    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


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

.shres-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    width: fit-content;

    margin-bottom: 15px;

    color: #d98c72;

    font-size: 13px;
    font-weight: 850;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.shres-eyebrow-icon {
    width: 12px;
    height: 12px;

    display: inline-block;

    flex-shrink: 0;

    border:
        2px solid #e8a289;

    transform:
        rotate(45deg);

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


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

.shres-title {
    width: 100%;

    margin: 0 0 20px;

    color: #1d2127;

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

    font-weight: 850;

    line-height: 1.08;

    letter-spacing: -1.5px;
}


.shres-title span {
    display: block;

    color: #d98c72;
}


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

.shres-intro,
.shres-text,
.shres-bottom-text {
    width: 100%;

    color: #5f6467;

    font-size: 16px;

    line-height: 1.75;
}


.shres-intro {
    margin: 0 0 15px;
}


.shres-text {
    margin: 0 0 28px;
}


.shres-text strong {
    color: #1d2127;

    font-weight: 850;
}


.shres-bottom-text {
    margin:
        0 0 27px;
}


/* =========================================================
   SERVICE GRID
========================================================= */

.shres-services {
    display: grid;

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

    gap: 12px;

    margin-bottom: 25px;
}


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

.shres-service-card {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 12px;

    min-height: 92px;

    padding: 16px;

    overflow: hidden;

    border:
        1px solid rgba(29, 33, 39, 0.09);

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 10px 28px rgba(29, 33, 39, 0.07);

    transition:
        transform 250ms ease,
        border-color 250ms ease,
        box-shadow 250ms ease;
}


.shres-service-card::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 3px;

    background: #e8a289;

    transition:
        width 350ms ease;
}


.shres-service-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(232, 162, 137, 0.40);

    box-shadow:
        0 17px 35px rgba(29, 33, 39, 0.12);
}


.shres-service-card:hover::after {
    width: 100%;
}


/* =========================================================
   SERVICE ICON
========================================================= */

.shres-service-icon {
    width: 42px;
    height: 42px;

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

    flex-shrink: 0;

    border-radius: 10px;

    background:
        rgba(232, 162, 137, 0.14);

    color: #d98c72;
}


.shres-service-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shres-service-card>div {
    display: flex;
    flex-direction: column;
}


.shres-service-card strong {
    margin-bottom: 5px;

    color: #1d2127;

    font-size: 15px;
    font-weight: 850;

    line-height: 1.25;
}


.shres-service-card small {
    color: #7e8388;

    font-size: 12px;

    line-height: 1.45;
}


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

.shres-highlight {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 20px;

    padding: 16px 17px;

    border-left:
        4px solid #e8a289;

    border-radius:
        0 12px 12px 0;

    background:
        rgba(232, 162, 137, 0.12);
}


.shres-highlight-icon {
    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: #1d2127;

    color: #f2b6a1;
}


.shres-highlight-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shres-highlight p {
    margin: 0;

    color: #3a3f4a;

    font-size: 13px;
    font-weight: 650;

    line-height: 1.55;
}


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

.shres-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}


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

.shres-call {
    position: relative;

    min-height: 66px;

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

    gap: 12px;

    padding: 9px 18px;

    overflow: hidden;

    border:
        1px solid #1d2127;

    border-radius: 12px;

    background: #1d2127;

    color: #ffffff;

    text-decoration: none;

    box-shadow:
        0 14px 32px rgba(29, 33, 39, 0.20);

    transition:
        transform 250ms ease,
        box-shadow 250ms ease,
        background-color 250ms ease;
}


.shres-call::before {
    content: "";

    position: absolute;

    top: 0;
    left: -70%;

    width: 34%;
    height: 100%;

    background:
        linear-gradient(110deg,
            transparent,
            rgba(255, 255, 255, 0.20),
            transparent);

    transform:
        skewX(-18deg);

    animation:
        shresCallSweep 4s ease-in-out infinite;
}


.shres-call>* {
    position: relative;

    z-index: 2;
}


.shres-call:hover {
    color: #ffffff;

    background: #3a3f4a;

    transform:
        translateY(-4px);

    box-shadow:
        0 19px 40px rgba(29, 33, 39, 0.27);
}


/* PHONE ICON */

.shres-call-icon {
    width: 43px;
    height: 43px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: #e8a289;

    color: #1d2127;
}


.shres-call-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shres-call-text {
    display: flex;
    flex-direction: column;

    line-height: 1.1;
}


.shres-call-text small {
    margin-bottom: 5px;

    color: #bdc2c8;

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

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.shres-call-text strong {
    color: #ffffff;

    font-size: 18px;
    font-weight: 900;
}


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

.shres-service-link {
    min-height: 66px;

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

    gap: 12px;

    padding:
        10px 21px;

    border:
        1px solid #e8a289;

    border-radius: 12px;

    background: #e8a289;

    color: #1d2127;

    text-decoration: none;

    font-size: 15px;
    font-weight: 850;

    box-shadow:
        0 13px 30px rgba(217, 140, 114, 0.24);

    transition:
        transform 250ms ease,
        background-color 250ms ease,
        box-shadow 250ms ease;
}


.shres-service-link:hover {
    color: #1d2127;

    background: #f2b6a1;

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 36px rgba(217, 140, 114, 0.34);
}


.shres-link-arrow {
    font-size: 21px;

    transition:
        transform 250ms ease;
}


.shres-service-link:hover .shres-link-arrow {
    transform:
        translateX(5px);
}


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

.shres-visual {
    position: relative;

    width: 100%;
    min-width: 0;

    height: 100%;

    display: flex;
    align-items: stretch;
}


/* IMAGE DECORATION */

.shres-image-accent {
    position: absolute;

    z-index: 0;

    width: 84%;
    height: 85%;

    right: -19px;
    bottom: -19px;

    border:
        2px solid rgba(232, 162, 137, 0.42);

    border-radius: 24px;

    pointer-events: none;

    animation:
        shresAccent 6s ease-in-out infinite;
}


/* =========================================================
   IMAGE LINK
========================================================= */

.shres-image-link {
    position: relative;

    z-index: 2;

    display: block;

    width: 100%;
    height: 100%;

    min-height: 680px;

    overflow: hidden;

    border:
        7px solid #ffffff;

    border-radius: 24px;

    background: #d4d7dd;

    box-shadow:
        0 28px 65px rgba(29, 33, 39, 0.16);

    text-decoration: none;

    transition:
        transform 300ms ease,
        box-shadow 300ms ease;
}


.shres-image-link:hover {
    transform:
        translateY(-6px);

    box-shadow:
        0 35px 75px rgba(29, 33, 39, 0.22);
}


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

.shres-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

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

    transition:
        transform 800ms ease;
}


.shres-image-link:hover .shres-image {
    transform:
        scale(1.04);
}


/* IMAGE GRADIENT */

.shres-image-link::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(to bottom,
            rgba(29, 33, 39, 0.01) 35%,
            rgba(29, 33, 39, 0.08) 58%,
            rgba(29, 33, 39, 0.68) 100%);
}


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

.shres-location {
    position: absolute;

    z-index: 3;

    top: 20px;
    left: 20px;

    padding:
        9px 14px;

    border-radius: 50px;

    background:
        rgba(29, 33, 39, 0.90);

    color: #ffffff;

    font-size: 10px;
    font-weight: 850;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


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

.shres-image-info {
    position: absolute;

    z-index: 3;

    right: 20px;
    bottom: 20px;

    display: flex;
    align-items: center;

    gap: 11px;

    max-width: calc(100% - 40px);

    padding:
        13px 16px;

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

    border-radius: 13px;

    background:
        rgba(29, 33, 39, 0.94);

    color: #ffffff;

    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.22);

    animation:
        shresInfoFloat 4s ease-in-out infinite;
}


.shres-image-info-icon {
    width: 40px;
    height: 40px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: #e8a289;

    color: #1d2127;
}


.shres-image-info-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shres-image-info>span:last-child {
    display: flex;
    flex-direction: column;
}


.shres-image-info small {
    margin-bottom: 4px;

    color: #bdc2c8;

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

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.shres-image-info strong {
    color: #ffffff;

    font-size: 13px;
    font-weight: 850;

    line-height: 1.3;
}


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

@keyframes shresBgFloat {

    0%,
    100% {
        transform:
            translate(0, 0) rotate(35deg);
    }

    50% {
        transform:
            translate(-15px, 12px) rotate(40deg);
    }
}


@keyframes shresEyebrow {

    0%,
    100% {
        transform:
            rotate(45deg) scale(1);
    }

    50% {
        transform:
            rotate(135deg) scale(1.1);
    }
}


@keyframes shresAccent {

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

    50% {
        transform:
            translate(8px, 8px);
    }
}


@keyframes shresInfoFloat {

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

    50% {
        transform:
            translateY(-7px);
    }
}


@keyframes shresCallSweep {

    0%,
    50% {
        left: -70%;
    }

    82%,
    100% {
        left: 140%;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .shres-grid {
        gap: 40px;
    }


    .shres-title {
        font-size:
            clamp(34px, 4vw, 44px);
    }


    .shres-image-link {
        min-height: 640px;
    }
}


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

@media (max-width: 991.98px) {

    .shres-section {
        padding:
            80px 0;
    }


    .shres-grid {
        grid-template-columns:
            1fr;

        gap: 50px;
    }


    .shres-content {
        max-width: 780px;

        margin:
            0 auto;

        text-align: center;
    }


    .shres-eyebrow {
        margin-left: auto;
        margin-right: auto;
    }


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


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


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


    .shres-visual {
        width: 100%;
        max-width: 620px;

        height: auto;

        margin:
            0 auto;
    }


    .shres-image-link {
        height: auto;
        min-height: 0;

        aspect-ratio: 1 / 1;
    }
}


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

@media (max-width: 767.98px) {

    .shres-section {
        padding:
            65px 0;
    }


    .shres-container {
        padding-left: 17px;
        padding-right: 17px;
    }


    .shres-title {
        font-size:
            clamp(31px, 8vw, 39px);
    }


    .shres-intro,
    .shres-text,
    .shres-bottom-text {
        font-size: 15px;

        line-height: 1.7;
    }


    .shres-services {
        grid-template-columns:
            1fr;
    }


    .shres-actions {
        width: 100%;

        max-width: 450px;

        margin:
            0 auto;

        flex-direction: column;
    }


    .shres-call,
    .shres-service-link {
        width: 100%;

        justify-content: center;
    }
}


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

@media (max-width: 575.98px) {

    .shres-image-link {
        border-width: 5px;

        border-radius: 18px;
    }


    .shres-image-accent {
        right: -10px;
        bottom: -10px;

        border-radius: 19px;
    }


    .shres-location {
        top: 12px;
        left: 12px;

        font-size: 9px;
    }


    .shres-image-info {
        right: 12px;
        bottom: 12px;

        max-width:
            calc(100% - 24px);

        padding:
            10px 12px;
    }


    .shres-image-info strong {
        font-size: 11px;
    }


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


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

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

    .shres-section::before,
    .shres-eyebrow-icon,
    .shres-image-accent,
    .shres-image-info,
    .shres-call::before {
        animation: none !important;
    }


    .shres-service-card,
    .shres-call,
    .shres-service-link,
    .shres-link-arrow,
    .shres-image-link,
    .shres-image {
        transition: none !important;
    }
}

/* =========================================================
   RESIDENTIAL SECTION
   LARGER TYPOGRAPHY + BALANCED 50/50 COLUMNS
   ADD AT END OF CURRENT CSS
========================================================= */

/* TRUE BALANCED COLUMNS */
.shres-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items: stretch;

    gap: 55px;
}


/* LEFT SIDE FILLS SAME HEIGHT */
.shres-content {
    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* RIGHT SIDE FILLS SAME HEIGHT */
.shres-visual {
    width: 100%;
    min-width: 0;
    height: 100%;

    display: flex;
    align-items: stretch;
}


/* IMAGE ALWAYS MATCHES CONTENT COLUMN HEIGHT */
.shres-image-link {
    width: 100%;
    height: 100%;

    min-height: 760px;
}


/* =========================================================
   EYEBROW - BIGGER
========================================================= */

.shres-eyebrow {
    font-size: 14px;
    font-weight: 850;
    line-height: 1.4;

    letter-spacing: 1px;

    margin-bottom: 17px;
}


/* =========================================================
   MAIN TITLE - BIGGER
========================================================= */

.shres-title {
    font-size:
        clamp(42px, 4vw, 56px);

    line-height: 1.07;

    letter-spacing: -1.6px;

    margin-bottom: 24px;
}


/* =========================================================
   MAIN PARAGRAPHS - BIGGER
========================================================= */

.shres-intro,
.shres-text,
.shres-bottom-text {
    font-size: 18px;

    line-height: 1.75;
}


.shres-intro {
    margin-bottom: 18px;
}


.shres-text {
    margin-bottom: 31px;
}


.shres-bottom-text {
    margin-bottom: 30px;
}


.shres-text strong {
    font-size: 18px;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.shres-services {
    gap: 14px;

    margin-bottom: 28px;
}


.shres-service-card {
    min-height: 108px;

    gap: 14px;

    padding: 18px;
}


/* BIGGER ICON */

.shres-service-icon {
    width: 48px;
    height: 48px;

    border-radius: 11px;
}


.shres-service-icon svg {
    width: 23px;
    height: 23px;
}


/* SERVICE TITLE */

.shres-service-card strong {
    margin-bottom: 6px;

    font-size: 17px;

    line-height: 1.3;
}


/* SERVICE DESCRIPTION */

.shres-service-card small {
    font-size: 14px;

    line-height: 1.5;
}


/* =========================================================
   HIGHLIGHT BOX
========================================================= */

.shres-highlight {
    gap: 15px;

    margin-bottom: 23px;

    padding: 18px 19px;
}


.shres-highlight-icon {
    width: 43px;
    height: 43px;
}


.shres-highlight-icon svg {
    width: 22px;
    height: 22px;
}


.shres-highlight p {
    font-size: 15px;

    line-height: 1.6;
}


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

.shres-actions {
    gap: 14px;
}


/* PHONE */

.shres-call {
    min-height: 72px;

    gap: 13px;

    padding: 10px 20px;
}


.shres-call-icon {
    width: 47px;
    height: 47px;
}


.shres-call-icon svg {
    width: 21px;
    height: 21px;
}


.shres-call-text small {
    font-size: 10px;

    margin-bottom: 5px;
}


.shres-call-text strong {
    font-size: 20px;
}


/* RESIDENTIAL SERVICES BUTTON */

.shres-service-link {
    min-height: 72px;

    padding: 11px 24px;

    font-size: 17px;
}


.shres-link-arrow {
    font-size: 23px;
}


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

.shres-location {
    padding: 10px 15px;

    font-size: 11px;
}


.shres-image-info {
    gap: 12px;

    padding: 15px 17px;
}


.shres-image-info-icon {
    width: 44px;
    height: 44px;
}


.shres-image-info-icon svg {
    width: 22px;
    height: 22px;
}


.shres-image-info small {
    font-size: 10px;

    margin-bottom: 5px;
}


.shres-image-info strong {
    font-size: 15px;

    line-height: 1.35;
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .shres-grid {
        gap: 40px;
    }

    .shres-title {
        font-size:
            clamp(38px, 4vw, 48px);
    }

    .shres-intro,
    .shres-text,
    .shres-bottom-text {
        font-size: 17px;
    }

    .shres-service-card strong {
        font-size: 16px;
    }

    .shres-service-card small {
        font-size: 13px;
    }

    .shres-image-link {
        min-height: 720px;
    }
}


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

@media (max-width: 991.98px) {

    .shres-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .shres-content {
        max-width: 780px;

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

    .shres-visual {
        width: 100%;
        max-width: 620px;

        height: auto;

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

    .shres-image-link {
        height: auto;
        min-height: 0;

        aspect-ratio: 1 / 1;
    }
}


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

@media (max-width: 767.98px) {

    .shres-title {
        font-size:
            clamp(33px, 8vw, 41px);
    }

    .shres-intro,
    .shres-text,
    .shres-bottom-text {
        font-size: 16px;

        line-height: 1.7;
    }

    .shres-services {
        grid-template-columns: 1fr;
    }

    .shres-service-card {
        min-height: 96px;
    }

    .shres-service-card strong {
        font-size: 16px;
    }

    .shres-service-card small {
        font-size: 13px;
    }

    .shres-highlight p {
        font-size: 14px;
    }

    .shres-call-text strong {
        font-size: 18px;
    }

    .shres-service-link {
        font-size: 16px;
    }
}


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

@media (max-width: 575.98px) {

    .shres-eyebrow {
        font-size: 12px;
    }

    .shres-title {
        font-size:
            clamp(31px, 8.5vw, 38px);
    }

    .shres-service-icon {
        width: 44px;
        height: 44px;
    }

    .shres-image-info strong {
        font-size: 12px;
    }

    .shres-image-info small {
        font-size: 9px;
    }
}

/* =========================================================
   BRANDS MARQUEE ACCESSIBILITY
========================================================= */

/* Pause control */
.brands-marquee-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0 0 16px;
    padding: 9px 15px;

    border: 1px solid rgba(232, 162, 137, 0.35);
    border-radius: 8px;

    background: transparent;
    color: inherit;

    font: inherit;
    line-height: inherit;

    cursor: pointer;

    transition:
        background-color 250ms ease,
        border-color 250ms ease;
}

.brands-marquee-toggle[hidden] {
    display: none !important;
}

.brands-marquee-toggle:hover {
    background: rgba(232, 162, 137, 0.14);
    border-color: #e8a289;
}

.brands-marquee-toggle:focus-visible {
    outline: 3px solid #e8a289;
    outline-offset: 4px;
}

/* Pause the existing animation */
.brands-marquee-section.is-paused
.brands-marquee-track {
    animation-play-state: paused !important;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

    .brands-marquee-track {
        animation: none !important;
        transform: none !important;

        width: 100%;
        min-width: 0;

        flex-wrap: wrap;
        justify-content: center;
    }

    .brands-marquee {
        overflow: visible;
    }

    /* Show each brand only once in static mode */
    .brands-marquee-section
    .brand-logo-item[aria-hidden="true"] {
        display: none !important;
    }

    .brands-marquee-toggle {
        display: none !important;
    }

}






/* __________________________________________________________________________________________________________________________ */
/* =========================================================
   GARAGE DOOR BRANDS MARQUEE
========================================================= */

.brands-marquee-section {
    position: relative;
    overflow: hidden;

    padding: 65px 0;

    background:
        linear-gradient(135deg,
            #1d2127 0%,
            #2b3038 55%,
            #3a3f4a 100%);
}


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

.brands-marquee-container {
    width: 100%;

    margin: 0 auto;
}


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

.brands-marquee-heading {
    width: 100%;
    max-width: 1380px;

    margin: 0 auto 35px;

    padding: 0 30px;

    text-align: center;
}


.brands-marquee-eyebrow {
    display: block;

    margin-bottom: 8px;

    color: #e8a289;

    font-size: 12px;
    font-weight: 850;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


.brands-marquee-title {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(28px, 3vw, 40px);

    font-weight: 850;

    line-height: 1.1;

    letter-spacing: -1px;
}


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

.brands-marquee {
    position: relative;

    width: 100%;

    overflow: hidden;
}


/* LEFT + RIGHT FADE */

.brands-marquee::before,
.brands-marquee::after {
    content: "";

    position: absolute;

    z-index: 5;

    top: 0;

    width: 140px;
    height: 100%;

    pointer-events: none;
}


.brands-marquee::before {
    left: 0;

    background:
        linear-gradient(to right,
            #1d2127 0%,
            rgba(29, 33, 39, 0) 100%);
}


.brands-marquee::after {
    right: 0;

    background:
        linear-gradient(to left,
            #3a3f4a 0%,
            rgba(58, 63, 74, 0) 100%);
}


/* =========================================================
   MOVING TRACK
========================================================= */

.brands-marquee-track {
    display: flex;
    align-items: center;

    width: max-content;

    gap: 24px;

    padding: 10px 0;

    animation:
        brandsMarqueeMove 34s linear infinite;

    will-change: transform;
}


/* PAUSE ON HOVER */

.brands-marquee:hover .brands-marquee-track {
    animation-play-state: paused;
}


/* =========================================================
   BRAND CARD
========================================================= */

.brand-logo-item {
    width: 220px;
    height: 115px;

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

    flex: 0 0 auto;

    padding: 18px 24px;

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

    border-radius: 15px;

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

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.14);

    transition:
        transform 250ms ease,
        border-color 250ms ease,
        box-shadow 250ms ease;
}


/* =========================================================
   BRAND IMAGE
========================================================= */

.brand-logo-item img {
    display: block;

    width: 100%;
    max-width: 175px;

    height: 75px;

    object-fit: contain;

    filter:
        grayscale(15%);

    transition:
        transform 250ms ease,
        filter 250ms ease;
}


/* =========================================================
   HOVER
========================================================= */

.brand-logo-item:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(232, 162, 137, 0.45);

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.22);
}


.brand-logo-item:hover img {
    transform:
        scale(1.06);

    filter:
        grayscale(0%);
}


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

@keyframes brandsMarqueeMove {

    from {
        transform:
            translateX(0);
    }

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

}


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

@media (max-width: 991.98px) {

    .brands-marquee-section {
        padding:
            55px 0;
    }


    .brand-logo-item {
        width: 190px;
        height: 105px;

        padding:
            16px 20px;
    }


    .brand-logo-item img {
        max-width: 155px;
        height: 68px;
    }


    .brands-marquee-track {
        gap: 18px;

        animation-duration: 30s;
    }


    .brands-marquee::before,
    .brands-marquee::after {
        width: 80px;
    }

}


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

@media (max-width: 767.98px) {

    .brands-marquee-section {
        padding:
            50px 0;
    }


    .brands-marquee-heading {
        margin-bottom: 28px;

        padding:
            0 17px;
    }


    .brands-marquee-title {
        font-size:
            clamp(26px, 8vw, 34px);
    }


    .brand-logo-item {
        width: 165px;
        height: 94px;

        padding:
            14px 17px;

        border-radius: 13px;
    }


    .brand-logo-item img {
        max-width: 135px;
        height: 60px;
    }


    .brands-marquee-track {
        gap: 14px;

        animation-duration: 27s;
    }


    .brands-marquee::before,
    .brands-marquee::after {
        width: 45px;
    }

}


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

@media (max-width: 480px) {

    .brand-logo-item {
        width: 145px;
        height: 86px;
    }


    .brand-logo-item img {
        max-width: 120px;
        height: 54px;
    }


    .brands-marquee-track {
        gap: 12px;

        animation-duration: 25s;
    }

}


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

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

    .brands-marquee {
        overflow-x: auto;

        scrollbar-width: thin;
    }


    .brands-marquee-track {
        animation: none;
    }


    .brand-logo-item,
    .brand-logo-item img {
        transition: none;
    }

}

/* ___________________________________________________________________________________________________________________ */

/* =========================================================
   COMMERCIAL GARAGE DOOR SERVICE
   ARCHITECTURAL / INDUSTRIAL MARKETING LAYOUT
========================================================= */

.shbiz-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0;

    background:
        linear-gradient(180deg,
            #fdfdfe 0%,
            #f5f6f8 50%,
            #eceef1 100%);
}


/* =========================================================
   SUBTLE COMMERCIAL GRID BACKGROUND
========================================================= */

.shbiz-section::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.35;

    pointer-events: none;

    background-image:
        linear-gradient(rgba(29, 33, 39, 0.035) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(29, 33, 39, 0.035) 1px,
            transparent 1px);

    background-size:
        75px 75px;
}


.shbiz-container {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1380px;

    margin: 0 auto;

    padding:
        0 30px;
}


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

.shbiz-header {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr) minmax(0, 1.1fr);

    align-items: end;

    gap: 65px;

    margin-bottom: 43px;
}


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

.shbiz-eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    color: #d98c72;

    font-size: 13px;
    font-weight: 850;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.shbiz-eyebrow-mark {
    width: 28px;
    height: 3px;

    display: inline-block;

    flex-shrink: 0;

    background: #e8a289;

    animation:
        shbizEyebrow 2.8s ease-in-out infinite;
}


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

.shbiz-title {
    margin: 0;

    color: #1d2127;

    font-size:
        clamp(42px, 4.4vw, 61px);

    font-weight: 900;

    line-height: 1.02;

    letter-spacing: -2px;
}


.shbiz-title span {
    display: block;

    color: #d98c72;
}


/* =========================================================
   INTRO
========================================================= */

.shbiz-intro-side {
    position: relative;

    padding-left: 25px;

    border-left:
        3px solid #e8a289;
}


.shbiz-intro-side p {
    margin:
        0 0 12px;

    color: #5f6467;

    font-size: 17px;

    line-height: 1.75;
}


.shbiz-intro-side p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   FEATURE IMAGE
========================================================= */

.shbiz-feature {
    position: relative;

    margin-bottom: 58px;
}


.shbiz-image-link {
    position: relative;

    display: block;

    width: 100%;

    min-height: 545px;

    overflow: hidden;

    border-radius: 27px;

    background: #3a3f4a;

    box-shadow:
        0 28px 68px rgba(29, 33, 39, 0.17);

    text-decoration: none;

    transition:
        transform 300ms ease,
        box-shadow 300ms ease;
}


.shbiz-image-link:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 36px 80px rgba(29, 33, 39, 0.22);
}


.shbiz-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 900ms ease;
}


.shbiz-image-link:hover .shbiz-image {
    transform:
        scale(1.035);
}


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

.shbiz-image-overlay {
    position: absolute;

    z-index: 1;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(29, 33, 39, 0.90) 0%,
            rgba(29, 33, 39, 0.58) 38%,
            rgba(29, 33, 39, 0.16) 72%,
            rgba(29, 33, 39, 0.08) 100%);
}


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

.shbiz-location {
    position: absolute;

    z-index: 4;

    top: 24px;
    right: 24px;

    padding:
        10px 15px;

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

    border-radius: 50px;

    background:
        rgba(29, 33, 39, 0.88);

    color: #ffffff;

    font-size: 10px;
    font-weight: 850;

    letter-spacing: 0.9px;

    text-transform: uppercase;
}


/* =========================================================
   LARGE IMAGE MESSAGE
========================================================= */

.shbiz-image-message {
    position: absolute;

    z-index: 4;

    left: 48px;
    bottom: 48px;

    width: 100%;
    max-width: 590px;

    display: flex;
    flex-direction: column;
}


.shbiz-image-message small {
    margin-bottom: 9px;

    color: #f2b6a1;

    font-size: 12px;
    font-weight: 850;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.shbiz-image-message strong {
    margin-bottom: 13px;

    color: #ffffff;

    font-size:
        clamp(29px, 3.2vw, 44px);

    font-weight: 900;

    line-height: 1.08;
}


.shbiz-image-message>span:last-child {
    color: #d4d7dd;

    font-size: 15px;
    font-weight: 650;

    line-height: 1.5;
}


/* =========================================================
   OPERATION BADGE
========================================================= */

.shbiz-operation-badge {
    position: absolute;

    z-index: 4;

    right: 25px;
    bottom: 25px;

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

    gap: 8px;

    padding:
        11px 15px;

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

    border-radius: 10px;

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

    color: #1d2127;

    font-size: 11px;
    font-weight: 850;

    text-transform: uppercase;

    box-shadow:
        0 12px 28px rgba(29, 33, 39, 0.14);
}


.shbiz-operation-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #e8a289;

    animation:
        shbizPulse 1.8s ease-out infinite;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.shbiz-float {
    position: absolute;

    z-index: 6;

    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 220px;

    padding:
        14px 16px;

    border:
        1px solid rgba(29, 33, 39, 0.08);

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 17px 38px rgba(29, 33, 39, 0.16);
}


.shbiz-float-one {
    top: 55px;
    left: -20px;

    animation:
        shbizFloatOne 4s ease-in-out infinite;
}


.shbiz-float-two {
    top: 150px;
    left: -5px;

    animation:
        shbizFloatTwo 4.5s ease-in-out infinite;
}


.shbiz-float-number {
    width: 39px;
    height: 39px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: #e8a289;

    color: #1d2127;

    font-size: 12px;
    font-weight: 900;
}


.shbiz-float>span:last-child {
    display: flex;
    flex-direction: column;
}


.shbiz-float small {
    margin-bottom: 4px;

    color: #7e8388;

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

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.shbiz-float strong {
    color: #1d2127;

    font-size: 13px;
    font-weight: 850;
}


/* =========================================================
   COMMERCIAL SERVICES RAIL
========================================================= */

.shbiz-service-rail {
    display: grid;

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

    gap: 14px;

    margin-bottom: 55px;
}


/* =========================================================
   SERVICE ITEM
========================================================= */

.shbiz-service {
    position: relative;

    margin: 0;

    min-height: 235px;

    padding:
        22px;

    overflow: hidden;

    border:
        1px solid rgba(29, 33, 39, 0.08);

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 11px 30px rgba(29, 33, 39, 0.07);

    transition:
        transform 250ms ease,
        border-color 250ms ease,
        box-shadow 250ms ease;
}


.shbiz-service::before {
    content: "";

    position: absolute;

    width: 85px;
    height: 85px;

    top: -40px;
    right: -40px;

    border:
        1px solid rgba(232, 162, 137, 0.32);

    transform: rotate(45deg);

    transition:
        transform 400ms ease;
}


.shbiz-service:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(232, 162, 137, 0.45);

    box-shadow:
        0 20px 44px rgba(29, 33, 39, 0.13);
}


.shbiz-service:hover::before {
    transform:
        rotate(65deg);
}


/* NUMBER */

.shbiz-service-index {
    display: block;

    margin-bottom: 23px;

    color: #d98c72;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1px;
}


/* ICON */

.shbiz-service-icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 20px;

    border-radius: 11px;

    background: #1d2127;

    color: #f2b6a1;
}


.shbiz-service-icon svg {
    width: 23px;
    height: 23px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shbiz-service h3 {
    margin:
        0 0 8px;

    color: #1d2127;

    font-size: 18px;
    font-weight: 850;

    line-height: 1.3;
}


.shbiz-service p {
    margin: 0;

    color: #7e8388;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   BOTTOM BUSINESS AREA
========================================================= */

.shbiz-bottom {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr) minmax(0, 0.85fr);

    gap: 18px;

    margin-bottom: 30px;
}


/* EVALUATION */

.shbiz-evaluation {
    display: flex;
    align-items: flex-start;

    gap: 17px;

    padding:
        24px;

    border:
        1px solid rgba(29, 33, 39, 0.08);

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 11px 30px rgba(29, 33, 39, 0.07);
}


.shbiz-evaluation-icon {
    width: 50px;
    height: 50px;

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

    flex-shrink: 0;

    border-radius: 11px;

    background: #e8a289;

    color: #1d2127;
}


.shbiz-evaluation-icon svg {
    width: 24px;
    height: 24px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shbiz-evaluation-label {
    display: block;

    margin-bottom: 8px;

    color: #d98c72;

    font-size: 11px;
    font-weight: 850;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


.shbiz-evaluation p {
    margin: 0;

    color: #5f6467;

    font-size: 15px;

    line-height: 1.65;
}


.shbiz-evaluation strong {
    color: #1d2127;
}


/* PREVENTIVE */

.shbiz-preventive {
    position: relative;

    padding:
        25px;

    overflow: hidden;

    border-radius: 16px;

    background:
        #1d2127;

    box-shadow:
        0 14px 34px rgba(29, 33, 39, 0.18);
}


.shbiz-preventive::before {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: -60px;
    top: -60px;

    border:
        2px solid rgba(232, 162, 137, 0.20);

    transform:
        rotate(45deg);
}


.shbiz-preventive-title {
    position: relative;

    z-index: 2;

    display: block;

    margin-bottom: 10px;

    color: #f2b6a1;

    font-size: 18px;
    font-weight: 850;
}


.shbiz-preventive p {
    position: relative;

    z-index: 2;

    margin: 0;

    color: #d4d7dd;

    font-size: 14px;

    line-height: 1.65;
}


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

.shbiz-cta {
    position: relative;

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

    gap: 25px;

    padding:
        25px 27px;

    overflow: hidden;

    border-radius: 17px;

    background:
        linear-gradient(105deg,
            #d98c72 0%,
            #e8a289 50%,
            #f2b6a1 100%);

    box-shadow:
        0 18px 42px rgba(217, 140, 114, 0.25);
}


.shbiz-cta::after {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    right: 32%;

    top: -110px;

    border:
        2px solid rgba(255, 255, 255, 0.25);

    transform:
        rotate(45deg);

    pointer-events: none;
}


/* CTA COPY */

.shbiz-cta-copy {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;
}


.shbiz-cta-copy span {
    margin-bottom: 5px;

    color:
        rgba(29, 33, 39, 0.70);

    font-size: 10px;
    font-weight: 850;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


.shbiz-cta-copy strong {
    color: #1d2127;

    font-size:
        clamp(22px, 2.4vw, 31px);

    font-weight: 900;

    line-height: 1.15;
}


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

.shbiz-cta-actions {
    position: relative;

    z-index: 2;

    display: flex;
    align-items: stretch;

    gap: 11px;
}


/* PHONE */

.shbiz-call {
    min-height: 64px;

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

    gap: 11px;

    padding:
        9px 17px;

    border-radius: 11px;

    background: #1d2127;

    color: #ffffff;

    text-decoration: none;

    box-shadow:
        0 12px 27px rgba(29, 33, 39, 0.20);

    transition:
        transform 250ms ease,
        background-color 250ms ease;
}


.shbiz-call:hover {
    color: #ffffff;

    background: #3a3f4a;

    transform:
        translateY(-4px);
}


.shbiz-call-icon {
    width: 40px;
    height: 40px;

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

    border-radius: 9px;

    background: #e8a289;

    color: #1d2127;
}


.shbiz-call-icon svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shbiz-call>span:last-child {
    display: flex;
    flex-direction: column;
}


.shbiz-call small {
    margin-bottom: 4px;

    color: #bdc2c8;

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

    text-transform: uppercase;
}


.shbiz-call strong {
    color: #ffffff;

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


/* DETAILS */

.shbiz-details {
    min-height: 64px;

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

    gap: 12px;

    padding:
        10px 20px;

    border:
        1px solid rgba(29, 33, 39, 0.25);

    border-radius: 11px;

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

    color: #1d2127;

    text-decoration: none;

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

    transition:
        transform 250ms ease,
        background-color 250ms ease;
}


.shbiz-details:hover {
    color: #1d2127;

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

    transform:
        translateY(-4px);
}


.shbiz-details span {
    font-size: 20px;
}


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

@keyframes shbizEyebrow {

    0%,
    100% {
        width: 28px;
    }

    50% {
        width: 42px;
    }
}


@keyframes shbizPulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(232, 162, 137, 0.55);
    }

    70% {
        box-shadow:
            0 0 0 8px rgba(232, 162, 137, 0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(232, 162, 137, 0);
    }
}


@keyframes shbizFloatOne {

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

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


@keyframes shbizFloatTwo {

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

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


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .shbiz-header {
        gap: 40px;
    }


    .shbiz-title {
        font-size:
            clamp(38px, 4vw, 51px);
    }


    .shbiz-service-rail {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .shbiz-service {
        min-height: 215px;
    }
}


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

@media (max-width: 991.98px) {

    .shbiz-section {
        padding:
            80px 0;
    }


    .shbiz-header {
        grid-template-columns:
            1fr;

        gap: 23px;

        text-align: center;
    }


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


    .shbiz-intro-side {
        max-width: 760px;

        margin:
            0 auto;

        padding:
            18px 0 0;

        border-left: 0;

        border-top:
            3px solid #e8a289;
    }


    .shbiz-image-link {
        min-height: 480px;
    }


    .shbiz-float-one {
        left: 15px;
    }


    .shbiz-float-two {
        left: 28px;
    }


    .shbiz-bottom {
        grid-template-columns:
            1fr;
    }


    .shbiz-cta {
        flex-direction: column;

        text-align: center;
    }
}


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

@media (max-width: 767.98px) {

    .shbiz-section {
        padding:
            65px 0;
    }


    .shbiz-container {
        padding:
            0 17px;
    }


    .shbiz-title {
        font-size:
            clamp(32px, 8vw, 41px);
    }


    .shbiz-intro-side p {
        font-size: 16px;
    }


    .shbiz-feature {
        margin-bottom: 45px;
    }


    .shbiz-image-link {
        min-height: 500px;

        border-radius: 20px;
    }


    .shbiz-image-message {
        left: 22px;
        bottom: 76px;

        max-width:
            calc(100% - 44px);
    }


    .shbiz-image-message strong {
        font-size:
            clamp(27px, 8vw, 36px);
    }


    .shbiz-location {
        top: 15px;
        right: 15px;
    }


    .shbiz-operation-badge {
        right: 15px;
        bottom: 15px;
    }


    .shbiz-float {
        display: none;
    }


    .shbiz-service-rail {
        grid-template-columns:
            1fr;
    }


    .shbiz-service {
        min-height: auto;
    }


    .shbiz-cta-actions {
        width: 100%;

        flex-direction: column;
    }


    .shbiz-call,
    .shbiz-details {
        width: 100%;

        justify-content: center;
    }
}


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

@media (max-width: 575.98px) {

    .shbiz-image-link {
        min-height: 470px;
    }


    .shbiz-operation-badge {
        font-size: 9px;
    }


    .shbiz-evaluation {
        padding: 19px;
    }


    .shbiz-preventive {
        padding: 21px;
    }


    .shbiz-cta {
        padding:
            22px 18px;
    }
}


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

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

    .shbiz-eyebrow-mark,
    .shbiz-operation-dot,
    .shbiz-float {
        animation: none !important;
    }


    .shbiz-image-link,
    .shbiz-image,
    .shbiz-service,
    .shbiz-call,
    .shbiz-details {
        transition: none !important;
    }
}

/* ___________________________________________________________________________________________________________________________________ */

/* =========================================================
   SPRINGS / CABLES / TRACKS / ROLLERS
   FULL SECTION CSS
   BOOTSTRAP 5
========================================================= */

.shparts-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0;

    background:
        linear-gradient(135deg,
            #fdfdfe 0%,
            #f5f6f8 58%,
            #eceef1 100%);
}


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

.shparts-section::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -230px;
    top: -220px;

    border:
        1px solid rgba(29, 33, 39, 0.07);

    border-radius: 50%;

    pointer-events: none;
}


.shparts-section::after {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    right: -170px;
    bottom: -180px;

    border:
        1px solid rgba(232, 162, 137, 0.22);

    border-radius: 50%;

    pointer-events: none;
}


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

.shparts-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

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


/* =========================================================
   MAIN SHELL
========================================================= */

.shparts-shell {
    overflow: hidden;

    border:
        1px solid rgba(29, 33, 39, 0.08);

    border-radius: 28px;

    background: #ffffff;

    box-shadow:
        0 26px 68px rgba(29, 33, 39, 0.12);
}


/* =========================================================
   LEFT IMAGE COLUMN
========================================================= */

.shparts-visual-col {
    display: flex;
}


.shparts-visual {
    position: relative;

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

    overflow: hidden;

    background: #1d2127;
}


/* CURVED WHITE EDGE */

.shparts-visual::after {
    content: "";

    position: absolute;
    z-index: 5;

    top: -5%;
    right: -54px;

    width: 110px;
    height: 110%;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        -5px 0 0 #e8a289;

    pointer-events: none;
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.shparts-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

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

    transition:
        transform 900ms ease;
}


.shparts-visual:hover .shparts-image {
    transform:
        scale(1.035);
}


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

.shparts-image-overlay {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(29, 33, 39, 0.22) 0%,
            rgba(29, 33, 39, 0.04) 48%,
            rgba(29, 33, 39, 0.36) 100%);

    pointer-events: none;
}


/* =========================================================
   LOCATION BADGE
========================================================= */

.shparts-location {
    position: absolute;
    z-index: 8;

    left: 22px;
    bottom: 22px;

    padding:
        11px 16px;

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

    border-radius: 50px;

    background:
        rgba(29, 33, 39, 0.92);

    color: #ffffff;

    font-size: 12px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 0.8px;

    text-transform: uppercase;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   COMPONENT CALLOUTS
========================================================= */

.shparts-callout {
    position: absolute;
    z-index: 8;

    --connector-length: 50px;

    display: flex;
    align-items: center;

    gap: 12px;

    width: 225px;

    padding:
        13px 14px;

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

    border-radius: 12px;

    background:
        rgba(29, 33, 39, 0.93);

    color: #ffffff;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.24);

    backdrop-filter:
        blur(8px);

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

    animation:
        shpartsCalloutFloat 4s ease-in-out infinite;
}


/* =========================================================
   CALLOUT CONNECTOR LINE
========================================================= */

.shparts-callout::after {
    content: "";

    position: absolute;
    z-index: -1;

    right: 100%;
    top: 50%;

    width: var(--connector-length);
    height: 2px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(90deg,
            rgba(232, 162, 137, 0.55),
            #e8a289);
}


/* =========================================================
   COMPONENT TARGET DOT
========================================================= */

.shparts-callout-dot {
    position: absolute;

    width: 10px;
    height: 10px;

    right:
        calc(100% + var(--connector-length) - 5px);

    top:
        calc(50% - 5px);

    border:
        2px solid #f2b6a1;

    border-radius: 50%;

    background: #d98c72;

    box-shadow:
        0 0 0 6px rgba(232, 162, 137, 0.17);

    animation:
        shpartsDotPulse 2s ease-out infinite;
}


/* =========================================================
   CALLOUT ICON
========================================================= */

.shparts-callout-icon {
    width: 39px;
    height: 39px;

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

    flex-shrink: 0;

    color: #f2b6a1;
}


.shparts-callout-icon svg {
    width: 27px;
    height: 27px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


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

.shparts-callout>span:last-child {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.shparts-callout strong {
    margin-bottom: 5px;

    color: #f2b6a1;

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

    line-height: 1.2;

    letter-spacing: 0.3px;

    text-transform: uppercase;
}


.shparts-callout small {
    color: #d4d7dd;

    font-size: 11px;

    line-height: 1.4;
}


/* =========================================================
   CORRECT COMPONENT POSITIONS
========================================================= */

/* TORSION SPRING */
.shparts-callout-spring {
    top: 7%;
    right: 8%;

    --connector-length: 105px;
}


/* CABLE / DRUM */
.shparts-callout-cable {
    top: 19%;
    right: 3%;

    --connector-length: 40px;

    animation-delay: 0.5s;
}


/* CURVED TRACK */
.shparts-callout-track {
    top: 34%;
    right: 2%;

    --connector-length: 43px;

    animation-delay: 1s;
}


/* LOWER BLACK ROLLER */
.shparts-callout-roller {
    right: 8%;
    bottom: 7%;

    --connector-length: 80px;

    animation-delay: 1.5s;
}


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

.shparts-content {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        58px 55px 55px 68px;
}


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

.shparts-eyebrow {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 19px;

    color: #d98c72;

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

    line-height: 1.4;

    letter-spacing: 0.9px;

    text-transform: uppercase;
}


.shparts-eyebrow-icon {
    width: 35px;
    height: 35px;

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

    flex-shrink: 0;

    color: #d98c72;
}


.shparts-eyebrow-icon svg {
    width: 26px;
    height: 26px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


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

.shparts-title {
    margin:
        0 0 23px;

    color: #1d2127;

    font-size:
        clamp(46px, 4.6vw, 64px);

    font-weight: 900;

    line-height: 1.03;

    letter-spacing: -2px;
}


.shparts-title span {
    display: block;
}


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

.shparts-title-line {
    width: 110px;
    height: 4px;

    margin-bottom: 28px;

    border-radius: 50px;

    background:
        linear-gradient(90deg,
            #d98c72,
            #e8a289,
            #f2b6a1);

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


/* =========================================================
   MAIN PARAGRAPHS
========================================================= */

.shparts-intro,
.shparts-text {
    margin:
        0 0 17px;

    color: #5f6467;

    font-size: 18px;

    line-height: 1.75;
}


.shparts-brand-text {
    margin-bottom: 31px;
}


.shparts-brand-text strong {
    color: #d98c72;

    font-size: 18px;
    font-weight: 850;
}


/* =========================================================
   COMPONENT CARDS
========================================================= */

.shparts-cards {
    margin-bottom: 29px;
}


.shparts-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 265px;

    padding:
        22px 17px;

    overflow: hidden;

    text-align: center;

    border:
        1px solid rgba(29, 33, 39, 0.08);

    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 11px 28px rgba(29, 33, 39, 0.08);

    transition:
        transform 250ms ease,
        border-color 250ms ease,
        box-shadow 250ms ease;
}


.shparts-card::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 3px;

    background: #e8a289;

    transform:
        translateX(-50%);

    transition:
        width 350ms ease;
}


.shparts-card:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(232, 162, 137, 0.40);

    box-shadow:
        0 20px 40px rgba(29, 33, 39, 0.13);
}


.shparts-card:hover::after {
    width: 100%;
}


/* =========================================================
   CARD ICON
========================================================= */

.shparts-card-icon {
    width: 76px;
    height: 76px;

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

    margin:
        0 auto 18px;

    border:
        1px solid rgba(232, 162, 137, 0.33);

    border-radius: 50%;

    background:
        rgba(232, 162, 137, 0.08);

    color: #d98c72;

    transition:
        transform 300ms ease,
        background-color 300ms ease;
}


.shparts-card:hover .shparts-card-icon {
    transform:
        rotate(7deg) scale(1.08);

    background:
        rgba(232, 162, 137, 0.15);
}


.shparts-card-icon svg {
    width: 36px;
    height: 36px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


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

.shparts-card h3 {
    margin:
        0 0 11px;

    color: #1d2127;

    font-size: 20px;
    font-weight: 850;

    line-height: 1.3;
}


/* =========================================================
   CARD ACCENT LINE
========================================================= */

.shparts-card-line {
    width: 40px;
    height: 3px;

    margin:
        0 auto 16px;

    border-radius: 50px;

    background: #e8a289;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.shparts-card p {
    margin: 0;

    color: #7e8388;

    font-size: 14px;

    line-height: 1.58;
}


/* =========================================================
   RESULT / MARKETING BAR
========================================================= */

.shparts-result {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 28px;

    padding:
        18px 20px;

    border-radius: 13px;

    background: #1d2127;

    box-shadow:
        0 13px 29px rgba(29, 33, 39, 0.18);
}


.shparts-result-icon {
    width: 42px;
    height: 42px;

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

    flex-shrink: 0;

    color: #e8a289;
}


.shparts-result-icon svg {
    width: 30px;
    height: 30px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shparts-result p {
    margin: 0;

    color: #d4d7dd;

    font-size: 16px;

    line-height: 1.6;
}


.shparts-result strong {
    color: #f2b6a1;

    font-weight: 850;
}


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

.shparts-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 13px;
}


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

.shparts-call {
    position: relative;

    min-height: 72px;

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

    gap: 13px;

    padding:
        10px 21px;

    overflow: hidden;

    border-radius: 12px;

    background: #1d2127;

    color: #ffffff;

    text-decoration: none;

    box-shadow:
        0 13px 30px rgba(29, 33, 39, 0.19);

    transition:
        transform 250ms ease,
        background-color 250ms ease,
        box-shadow 250ms ease;
}


.shparts-call::before {
    content: "";

    position: absolute;

    top: 0;
    left: -70%;

    width: 35%;
    height: 100%;

    transform:
        skewX(-18deg);

    background:
        linear-gradient(110deg,
            transparent,
            rgba(255, 255, 255, 0.20),
            transparent);

    animation:
        shpartsCallShine 4s ease-in-out infinite;
}


.shparts-call>* {
    position: relative;

    z-index: 2;
}


.shparts-call:hover {
    color: #ffffff;

    background: #3a3f4a;

    transform:
        translateY(-4px);

    box-shadow:
        0 19px 40px rgba(29, 33, 39, 0.27);
}


/* =========================================================
   PHONE ICON
========================================================= */

.shparts-call-icon {
    width: 47px;
    height: 47px;

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

    flex-shrink: 0;

    border-radius: 10px;

    background: #e8a289;

    color: #1d2127;
}


.shparts-call-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


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

.shparts-call-copy {
    display: flex;
    flex-direction: column;
}


.shparts-call-copy small {
    margin-bottom: 5px;

    color: #bdc2c8;

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

    letter-spacing: 0.5px;

    text-transform: uppercase;
}


.shparts-call-copy strong {
    color: #ffffff;

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


/* =========================================================
   GARAGE DOOR PARTS BUTTON
========================================================= */

.shparts-more {
    min-height: 72px;

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

    gap: 12px;

    padding:
        11px 24px;

    border:
        1px solid #e8a289;

    border-radius: 12px;

    background: #e8a289;

    color: #1d2127;

    text-decoration: none;

    font-size: 17px;
    font-weight: 850;

    box-shadow:
        0 12px 29px rgba(217, 140, 114, 0.24);

    transition:
        transform 250ms ease,
        background-color 250ms ease,
        box-shadow 250ms ease;
}


.shparts-more:hover {
    color: #1d2127;

    background: #f2b6a1;

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 38px rgba(217, 140, 114, 0.32);
}


.shparts-more span {
    font-size: 24px;

    transition:
        transform 250ms ease;
}


.shparts-more:hover span {
    transform:
        translateX(5px);
}


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

@keyframes shpartsCalloutFloat {

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

    50% {
        transform:
            translateY(-7px);
    }
}


@keyframes shpartsDotPulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(232, 162, 137, 0.55);
    }

    70% {
        box-shadow:
            0 0 0 11px rgba(232, 162, 137, 0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(232, 162, 137, 0);
    }
}


@keyframes shpartsLineMove {

    0%,
    100% {
        width: 85px;
    }

    50% {
        width: 135px;
    }
}


@keyframes shpartsCallShine {

    0%,
    50% {
        left: -70%;
    }

    82%,
    100% {
        left: 140%;
    }
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .shparts-visual {
        min-height: 850px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1399.98px) {

    .shparts-content {
        padding:
            50px 42px 48px 58px;
    }


    .shparts-title {
        font-size:
            clamp(42px, 4.4vw, 56px);
    }


    .shparts-intro,
    .shparts-text {
        font-size: 17px;
    }


    .shparts-brand-text strong {
        font-size: 17px;
    }


    .shparts-callout {
        width: 205px;
    }


    .shparts-callout strong {
        font-size: 13px;
    }


    .shparts-callout small {
        font-size: 10px;
    }


    .shparts-callout-spring {
        top: 7%;
        right: 6%;

        --connector-length: 90px;
    }


    .shparts-callout-cable {
        top: 20%;
        right: 3%;

        --connector-length: 35px;
    }


    .shparts-callout-track {
        top: 35%;
        right: 2%;

        --connector-length: 38px;
    }


    .shparts-callout-roller {
        right: 6%;
        bottom: 7%;

        --connector-length: 66px;
    }


    .shparts-card {
        min-height: 250px;
    }


    .shparts-card h3 {
        font-size: 18px;
    }


    .shparts-card p {
        font-size: 13px;
    }

}


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

@media (max-width: 991.98px) {

    .shparts-section {
        padding:
            75px 0;
    }


    .shparts-shell {
        border-radius: 22px;
    }


    .shparts-visual {
        min-height: 650px;
    }


    .shparts-visual::after {
        display: none;
    }


    .shparts-content {
        padding:
            52px 35px;
    }


    .shparts-eyebrow {
        justify-content: center;

        text-align: center;

        font-size: 13px;
    }


    .shparts-title {
        text-align: center;

        font-size:
            clamp(40px, 6vw, 52px);
    }


    .shparts-title span {
        display: inline;
    }


    .shparts-title-line {
        margin-left: auto;
        margin-right: auto;
    }


    .shparts-intro,
    .shparts-text {
        text-align: center;

        font-size: 17px;
    }


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


    .shparts-callout {
        width: 195px;
    }


    .shparts-callout-spring {
        top: 7%;
        right: 5%;

        --connector-length: 82px;
    }


    .shparts-callout-cable {
        top: 20%;
        right: 2%;

        --connector-length: 31px;
    }


    .shparts-callout-track {
        top: 35%;
        right: 1%;

        --connector-length: 34px;
    }


    .shparts-callout-roller {
        right: 5%;
        bottom: 7%;

        --connector-length: 58px;
    }

}


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

@media (max-width: 767.98px) {

    .shparts-section {
        padding:
            60px 0;
    }


    .shparts-container {
        padding-left: 17px;
        padding-right: 17px;
    }


    .shparts-visual {
        min-height: 550px;
    }


    .shparts-content {
        padding:
            42px 20px;
    }


    .shparts-eyebrow {
        font-size: 12px;
    }


    .shparts-title {
        font-size:
            clamp(34px, 9vw, 43px);

        line-height: 1.06;
    }


    .shparts-intro,
    .shparts-text {
        font-size: 16px;

        line-height: 1.72;
    }


    .shparts-brand-text strong {
        font-size: 16px;
    }


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

    .shparts-callout {
        width: 165px;

        gap: 8px;

        padding:
            10px 11px;
    }


    .shparts-callout-icon {
        width: 30px;
        height: 30px;
    }


    .shparts-callout-icon svg {
        width: 21px;
        height: 21px;
    }


    .shparts-callout strong {
        font-size: 11px;
    }


    .shparts-callout small {
        font-size: 9px;
    }


    .shparts-callout-spring {
        top: 7%;
        right: 5%;

        --connector-length: 70px;
    }


    .shparts-callout-cable {
        top: 19%;
        right: 1%;

        --connector-length: 25px;
    }


    .shparts-callout-track {
        top: 35%;
        right: 0;

        --connector-length: 29px;
    }


    .shparts-callout-roller {
        right: 5%;
        bottom: 7%;

        --connector-length: 48px;
    }


    /* COMPONENT CARDS */

    .shparts-card {
        min-height: 235px;

        padding:
            20px 16px;
    }


    .shparts-card h3 {
        font-size: 19px;
    }


    .shparts-card p {
        font-size: 14px;
    }


    .shparts-result p {
        font-size: 15px;
    }


    /* CTA */

    .shparts-actions {
        width: 100%;
        max-width: 460px;

        margin:
            0 auto;

        flex-direction: column;
    }


    .shparts-call,
    .shparts-more {
        width: 100%;

        justify-content: center;
    }


    .shparts-call-copy strong {
        font-size: 18px;
    }


    .shparts-more {
        font-size: 16px;
    }

}


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

@media (max-width: 575.98px) {

    .shparts-visual {
        min-height: 510px;
    }


    .shparts-callout {
        width: 150px;
    }


    .shparts-callout-spring {
        right: 4%;

        --connector-length: 62px;
    }


    .shparts-callout-cable {
        right: 0;

        --connector-length: 22px;
    }


    .shparts-callout-track {
        right: -2px;

        --connector-length: 24px;
    }


    .shparts-callout-roller {
        right: 4%;

        --connector-length: 42px;
    }


    .shparts-location {
        left: 12px;
        bottom: 12px;

        font-size: 9px;
    }


    .shparts-card {
        min-height: 215px;
    }


    .shparts-card-icon {
        width: 68px;
        height: 68px;
    }


    .shparts-card-icon svg {
        width: 32px;
        height: 32px;
    }


    .shparts-result {
        align-items: flex-start;

        padding:
            16px;
    }


    .shparts-result p {
        font-size: 14px;
    }

}


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

@media (max-width: 399.98px) {

    .shparts-title {
        font-size: 32px;
    }


    .shparts-callout {
        width: 142px;
    }


    .shparts-callout strong {
        font-size: 10px;
    }


    .shparts-callout small {
        font-size: 8px;
    }


    .shparts-call-copy strong {
        font-size: 17px;
    }

}


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

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

    .shparts-callout,
    .shparts-callout-dot,
    .shparts-title-line,
    .shparts-call::before {
        animation: none !important;
    }


    .shparts-image,
    .shparts-card,
    .shparts-card-icon,
    .shparts-call,
    .shparts-more,
    .shparts-more span {
        transition: none !important;
    }

}

/* =========================================================
   SPRINGS / CABLES / TRACKS / ROLLERS
   ACCESSIBILITY + BEST PRACTICES
========================================================= */

.shparts-section a:focus-visible {
    outline: 3px solid #d98c72;
    outline-offset: 4px;
}

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

    .shparts-section *,
    .shparts-section *::before,
    .shparts-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}

/* __________________________________________________________________________________________________________ */

/* =========================================================
   WHY CHOOSE US
   LUXURY DARK VERSION
========================================================= */

.shlux-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0;

    background:
        radial-gradient(circle at 80% 10%,
            rgba(232, 162, 137, 0.09),
            transparent 31%),
        linear-gradient(135deg,
            #1d2127 0%,
            #242931 48%,
            #323740 100%);
}


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

.shlux-container {
    position: relative;

    z-index: 3;

    max-width: 1380px;
}


/* =========================================================
   DECORATION
========================================================= */

.shlux-decor {
    position: absolute;

    inset: 0;

    pointer-events: none;
}


.shlux-decor-line {
    position: absolute;

    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(232, 162, 137, 0.38),
            transparent);

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


.shlux-line-1 {
    width: 450px;

    top: 15%;
    right: -70px;
}


.shlux-line-2 {
    width: 360px;

    left: -100px;
    bottom: 19%;

    animation-delay: 2s;
}


.shlux-decor-box {
    position: absolute;

    width: 330px;
    height: 330px;

    right: -190px;
    top: -190px;

    border:
        1px solid rgba(232, 162, 137, 0.13);

    transform:
        rotate(45deg);

    animation:
        shluxBoxFloat 10s ease-in-out infinite;
}


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

.shlux-header {
    margin-bottom: 50px;
}


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

.shlux-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 18px;

    color: #f2b6a1;

    font-size: 13px;
    font-weight: 850;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.shlux-eyebrow>span {
    width: 35px;
    height: 2px;

    border-radius: 50px;

    background: #e8a289;

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


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

.shlux-title {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(44px, 4.6vw, 63px);

    font-weight: 900;

    line-height: 1.02;

    letter-spacing: -2px;
}


.shlux-title span {
    display: block;

    color: #e8a289;
}


/* =========================================================
   INTRO
========================================================= */

.shlux-intro {
    max-width: 470px;

    margin:
        0 0 5px auto;

    padding-left: 24px;

    border-left:
        2px solid rgba(232, 162, 137, 0.55);

    color: #bdc2c8;

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================================
   MAIN PANEL
========================================================= */

.shlux-panel {
    position: relative;

    padding: 18px;

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

    border-radius: 26px;

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

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.22);

    backdrop-filter:
        blur(8px);

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


/* =========================================================
   FEATURE CARD
========================================================= */

.shlux-feature {
    position: relative;

    min-height: 515px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding:
        29px;

    overflow: hidden;

    border:
        1px solid rgba(232, 162, 137, 0.26);

    border-radius: 20px;

    background:
        linear-gradient(145deg,
            rgba(232, 162, 137, 0.16),
            rgba(255, 255, 255, 0.035));

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 20px 45px rgba(0, 0, 0, 0.17);
}


.shlux-feature::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: -145px;
    top: -145px;

    border:
        1px solid rgba(242, 182, 161, 0.24);

    border-radius: 50%;

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


.shlux-feature::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -105px;
    top: -105px;

    border:
        1px solid rgba(242, 182, 161, 0.17);

    border-radius: 50%;
}


/* =========================================================
   FEATURE TOP
========================================================= */

.shlux-feature-top {
    position: relative;

    z-index: 2;

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


.shlux-feature-number {
    color:
        rgba(255, 255, 255, 0.20);

    font-size: 35px;
    font-weight: 900;

    line-height: 1;
}


.shlux-feature-icon {
    width: 55px;
    height: 55px;

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

    border:
        1px solid rgba(232, 162, 137, 0.30);

    border-radius: 50%;

    background:
        rgba(232, 162, 137, 0.14);

    color: #f2b6a1;
}


.shlux-feature-icon svg {
    width: 26px;
    height: 26px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


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

.shlux-feature-content {
    position: relative;

    z-index: 2;

    max-width: 400px;
}


.shlux-small-label {
    display: block;

    margin-bottom: 12px;

    color: #f2b6a1;

    font-size: 11px;
    font-weight: 850;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.shlux-feature-content h3 {
    margin:
        0 0 16px;

    color: #ffffff;

    font-size:
        clamp(31px, 3vw, 42px);

    font-weight: 900;

    line-height: 1.06;

    letter-spacing: -1.2px;
}


.shlux-feature-content h3 span {
    display: block;

    color: #e8a289;
}


.shlux-feature-content p {
    max-width: 360px;

    margin: 0;

    color: #bdc2c8;

    font-size: 16px;

    line-height: 1.65;
}


/* =========================================================
   FEATURE BOTTOM
========================================================= */

.shlux-feature-bottom {
    position: relative;

    z-index: 2;

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

    padding-top: 19px;

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


.shlux-feature-bottom span {
    color: #d4d7dd;

    font-size: 12px;
    font-weight: 750;

    letter-spacing: 0.4px;
}


.shlux-feature-bottom i {
    width: 37px;
    height: 37px;

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

    border-radius: 50%;

    background: #e8a289;

    color: #1d2127;

    font-style: normal;

    font-size: 19px;
}


/* =========================================================
   BENEFITS GRID
========================================================= */

.shlux-benefits {
    height: 100%;

    display: grid;

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

    gap: 16px;
}


/* =========================================================
   SMALL BENEFIT CARDS
========================================================= */

.shlux-card {
    position: relative;

    min-height: 245px;

    padding:
        24px;

    overflow: hidden;

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

    border-radius: 18px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.025));

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    transition:
        transform 300ms ease,
        border-color 300ms ease,
        background-color 300ms ease,
        box-shadow 300ms ease;
}


.shlux-card::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background:
        linear-gradient(90deg,
            #d98c72,
            #f2b6a1);

    transition:
        width 400ms ease;
}


.shlux-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(232, 162, 137, 0.34);

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

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.18);
}


.shlux-card:hover::after {
    width: 100%;
}


/* =========================================================
   WIDE CARD
========================================================= */

.shlux-card-wide {
    grid-column:
        1 / -1;

    min-height: 230px;
}


/* =========================================================
   CARD HEAD
========================================================= */

.shlux-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 25px;
}


.shlux-card-icon {
    width: 48px;
    height: 48px;

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

    border:
        1px solid rgba(232, 162, 137, 0.20);

    border-radius: 12px;

    background:
        rgba(232, 162, 137, 0.11);

    color: #f2b6a1;

    transition:
        transform 300ms ease,
        background-color 300ms ease;
}


.shlux-card:hover .shlux-card-icon {
    transform:
        rotate(-6deg) scale(1.07);

    background:
        rgba(232, 162, 137, 0.19);
}


.shlux-card-icon svg {
    width: 23px;
    height: 23px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shlux-card-number {
    color:
        rgba(255, 255, 255, 0.18);

    font-size: 22px;
    font-weight: 900;
}


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

.shlux-card h3 {
    margin:
        0 0 10px;

    color: #ffffff;

    font-size: 20px;
    font-weight: 850;

    line-height: 1.3;
}


.shlux-card p {
    max-width: 430px;

    margin: 0;

    color: #a1a7ad;

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   WIDE CARD CONTENT
========================================================= */

.shlux-wide-copy {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;
}


/* MINI LINK */

.shlux-mini-link {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    padding:
        11px 15px;

    border:
        1px solid rgba(232, 162, 137, 0.28);

    border-radius: 9px;

    color: #f2b6a1;

    text-decoration: none;

    font-size: 12px;
    font-weight: 850;

    transition:
        background-color 250ms ease,
        color 250ms ease,
        transform 250ms ease;
}


.shlux-mini-link:hover {
    color: #1d2127;

    background: #e8a289;

    transform:
        translateY(-3px);
}


.shlux-mini-link span {
    font-size: 18px;
}


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

.shlux-cta {
    position: relative;

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

    gap: 30px;

    margin-top: 28px;

    padding:
        25px 27px;

    overflow: hidden;

    border:
        1px solid rgba(232, 162, 137, 0.22);

    border-radius: 17px;

    background:
        linear-gradient(100deg,
            rgba(232, 162, 137, 0.11),
            rgba(255, 255, 255, 0.035));

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.13);
}


.shlux-cta::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: 33%;
    top: -125px;

    border:
        1px solid rgba(232, 162, 137, 0.16);

    transform:
        rotate(45deg);
}


/* CTA COPY */

.shlux-cta-copy {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;
}


.shlux-cta-copy>span {
    margin-bottom: 6px;

    color: #e8a289;

    font-size: 10px;
    font-weight: 850;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


.shlux-cta-copy>strong {
    color: #ffffff;

    font-size:
        clamp(20px, 2vw, 28px);

    font-weight: 850;

    line-height: 1.25;
}


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

.shlux-cta-actions {
    position: relative;

    z-index: 2;

    display: flex;

    gap: 11px;
}


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

.shlux-call {
    position: relative;

    min-height: 63px;

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

    gap: 11px;

    padding:
        9px 17px;

    overflow: hidden;

    border-radius: 11px;

    background: #e8a289;

    color: #1d2127;

    text-decoration: none;

    box-shadow:
        0 13px 30px rgba(0, 0, 0, 0.17);

    transition:
        transform 250ms ease,
        background-color 250ms ease;
}


.shlux-call::before {
    content: "";

    position: absolute;

    top: 0;
    left: -70%;

    width: 34%;
    height: 100%;

    transform:
        skewX(-18deg);

    background:
        linear-gradient(110deg,
            transparent,
            rgba(255, 255, 255, 0.52),
            transparent);

    animation:
        shluxCallShine 4s ease-in-out infinite;
}


.shlux-call>* {
    position: relative;

    z-index: 2;
}


.shlux-call:hover {
    color: #1d2127;

    background: #f2b6a1;

    transform:
        translateY(-4px);
}


.shlux-call-icon {
    width: 41px;
    height: 41px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: #1d2127;

    color: #f2b6a1;
}


.shlux-call-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shlux-call>span:last-child {
    display: flex;
    flex-direction: column;
}


.shlux-call small {
    margin-bottom: 4px;

    color:
        rgba(29, 33, 39, 0.67);

    font-size: 9px;
    font-weight: 850;

    text-transform: uppercase;
}


.shlux-call strong {
    color: #1d2127;

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


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

.shlux-contact {
    min-height: 63px;

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

    gap: 12px;

    padding:
        10px 19px;

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

    border-radius: 11px;

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

    color: #ffffff;

    text-decoration: none;

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

    transition:
        transform 250ms ease,
        border-color 250ms ease,
        background-color 250ms ease;
}


.shlux-contact:hover {
    color: #ffffff;

    border-color:
        rgba(232, 162, 137, 0.42);

    background:
        rgba(232, 162, 137, 0.11);

    transform:
        translateY(-4px);
}


.shlux-contact span {
    color: #e8a289;

    font-size: 20px;
}


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

@keyframes shluxLineFloat {

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

        opacity: 0.4;
    }

    50% {
        transform:
            translateX(40px);

        opacity: 1;
    }
}


@keyframes shluxBoxFloat {

    0%,
    100% {
        transform:
            rotate(45deg) translate(0, 0);
    }

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


@keyframes shluxEyebrow {

    0%,
    100% {
        width: 30px;
    }

    50% {
        width: 47px;
    }
}


@keyframes shluxRing {

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

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


@keyframes shluxCallShine {

    0%,
    50% {
        left: -70%;
    }

    82%,
    100% {
        left: 140%;
    }
}


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

@media (max-width: 991.98px) {

    .shlux-section {
        padding:
            80px 0;
    }


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


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


    .shlux-title {
        font-size:
            clamp(39px, 6vw, 52px);
    }


    .shlux-intro {
        max-width: 700px;

        margin:
            5px auto 0;

        padding:
            18px 0 0;

        border-left: 0;

        border-top:
            2px solid rgba(232, 162, 137, 0.55);
    }


    .shlux-feature {
        min-height: 440px;
    }


    .shlux-cta {
        flex-direction: column;

        text-align: center;
    }

}


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

@media (max-width: 767.98px) {

    .shlux-section {
        padding:
            65px 0;
    }


    .shlux-title {
        font-size:
            clamp(33px, 9vw, 42px);
    }


    .shlux-intro {
        font-size: 16px;
    }


    .shlux-panel {
        padding: 11px;

        border-radius: 20px;
    }


    .shlux-feature {
        min-height: 390px;

        padding:
            23px;
    }


    .shlux-feature-content h3 {
        font-size:
            clamp(29px, 8vw, 37px);
    }


    .shlux-feature-content p {
        font-size: 15px;
    }


    .shlux-benefits {
        grid-template-columns:
            1fr;
    }


    .shlux-card-wide {
        grid-column:
            auto;
    }


    .shlux-card {
        min-height: auto;
    }


    .shlux-wide-copy {
        display: block;
    }


    .shlux-mini-link {
        margin-top: 20px;
    }


    .shlux-cta-actions {
        width: 100%;

        max-width: 440px;

        flex-direction: column;
    }


    .shlux-call,
    .shlux-contact {
        width: 100%;

        justify-content: center;
    }

}


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

@media (max-width: 575.98px) {

    .shlux-feature {
        min-height: 370px;
    }


    .shlux-title {
        font-size:
            clamp(31px, 9vw, 38px);
    }


    .shlux-card {
        padding:
            21px;
    }


    .shlux-card h3 {
        font-size: 18px;
    }


    .shlux-cta {
        padding:
            21px 17px;
    }

}


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

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

    .shlux-decor-line,
    .shlux-decor-box,
    .shlux-eyebrow>span,
    .shlux-feature::before,
    .shlux-call::before {
        animation: none !important;
    }


    .shlux-card,
    .shlux-card::after,
    .shlux-card-icon,
    .shlux-mini-link,
    .shlux-call,
    .shlux-contact {
        transition: none !important;
    }

}


/* =========================================================
   WHY CHOOSE US
   ACCESSIBILITY + REDUCED MOTION
========================================================= */

.shlux-section a:focus-visible {
    outline: 3px solid #e8a289;
    outline-offset: 4px;
}

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

    .shlux-section *,
    .shlux-section *::before,
    .shlux-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}

/* ____________________________________________________________________________________________________________________________ */

/* =========================================================
   GARAGE DOOR OPENER PROBLEMS
   LUXURY DIAGNOSTIC DESIGN
========================================================= */

.shopener-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0;

    background:
        radial-gradient(circle at 87% 5%,
            rgba(232, 162, 137, 0.13),
            transparent 28%),
        linear-gradient(135deg,
            #fdfdfe 0%,
            #f5f6f8 52%,
            #eceef1 100%);
}


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

.shopener-section::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    top: -230px;
    right: -130px;

    border:
        1px solid rgba(232, 162, 137, 0.30);

    transform:
        rotate(45deg);

    pointer-events: none;

    animation:
        shopenerDecorFloat 10s ease-in-out infinite;
}


.shopener-section::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    left: -170px;
    bottom: -170px;

    border:
        1px solid rgba(29, 33, 39, 0.07);

    transform:
        rotate(45deg);

    pointer-events: none;
}


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

.shopener-container {
    position: relative;

    z-index: 2;

    max-width: 1380px;
}


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

.shopener-header {
    margin-bottom: 45px;
}


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

.shopener-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 16px;

    color: #d98c72;

    font-size: 13px;
    font-weight: 850;

    letter-spacing: 1.1px;

    text-transform: uppercase;
}


.shopener-eyebrow-line {
    width: 35px;
    height: 2px;

    flex-shrink: 0;

    border-radius: 50px;

    background: #e8a289;

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


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

.shopener-title {
    margin: 0;

    color: #1d2127;

    font-size:
        clamp(44px, 4.7vw, 64px);

    font-weight: 900;

    line-height: 1.02;

    letter-spacing: -2px;
}


.shopener-title span {
    display: block;

    color: #d98c72;
}


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

.shopener-header-text {
    max-width: 480px;

    margin:
        0 0 5px auto;

    padding-left: 24px;

    border-left:
        2px solid #e8a289;

    color: #5f6467;

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================================
   MAIN FEATURE
========================================================= */

.shopener-feature {
    overflow: hidden;

    border:
        1px solid rgba(29, 33, 39, 0.08);

    border-radius: 28px;

    background: #ffffff;

    box-shadow:
        0 30px 75px rgba(29, 33, 39, 0.13);
}


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

.shopener-visual {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 690px;

    background: #1d2127;
}


/* =========================================================
   IMAGE LINK
========================================================= */

.shopener-image-link {
    position: absolute;

    inset: 0;

    display: block;

    overflow: hidden;

    text-decoration: none;
}


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

.shopener-image {
    width: 100%;
    height: 100%;

    display: block;

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

    transition:
        transform 900ms ease;
}


.shopener-image-link:hover .shopener-image {
    transform:
        scale(1.04);
}


/* =========================================================
   IMAGE SHADE
========================================================= */

.shopener-image-shade {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(to bottom,
            rgba(29, 33, 39, 0.02) 30%,
            rgba(29, 33, 39, 0.12) 57%,
            rgba(29, 33, 39, 0.76) 100%);

    pointer-events: none;
}


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

.shopener-location {
    position: absolute;

    z-index: 3;

    top: 22px;
    left: 22px;

    padding:
        10px 15px;

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

    border-radius: 50px;

    background:
        rgba(29, 33, 39, 0.90);

    color: #ffffff;

    font-size: 10px;
    font-weight: 850;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


/* =========================================================
   IMAGE CAPTION
========================================================= */

.shopener-image-caption {
    position: absolute;

    z-index: 3;

    left: 24px;
    bottom: 24px;

    display: flex;
    flex-direction: column;

    padding:
        14px 17px;

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

    border-radius: 12px;

    background:
        rgba(29, 33, 39, 0.91);

    backdrop-filter:
        blur(8px);

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


.shopener-image-caption small {
    margin-bottom: 5px;

    color: #f2b6a1;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.shopener-image-caption strong {
    color: #ffffff;

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


/* =========================================================
   FLOATING DIAGNOSTIC PANEL
========================================================= */

.shopener-diagnostic {
    position: absolute;

    z-index: 5;

    top: 50%;
    right: -42px;

    width: 285px;

    padding:
        20px;

    border:
        1px solid rgba(232, 162, 137, 0.25);

    border-radius: 17px;

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

    box-shadow:
        0 22px 50px rgba(29, 33, 39, 0.20);

    backdrop-filter:
        blur(12px);

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

    transform:
        translateY(-50%);

    animation:
        shopenerDiagnosticFloat 4s ease-in-out infinite;
}


/* DIAGNOSTIC TOP */

.shopener-diagnostic-top {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 17px;
}


.shopener-diagnostic-icon {
    width: 45px;
    height: 45px;

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

    flex-shrink: 0;

    border-radius: 11px;

    background: #1d2127;

    color: #f2b6a1;
}


.shopener-diagnostic-icon svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shopener-diagnostic-top>span:last-child {
    display: flex;
    flex-direction: column;
}


.shopener-diagnostic-top small {
    margin-bottom: 4px;

    color: #7e8388;

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

    letter-spacing: 0.5px;

    text-transform: uppercase;
}


.shopener-diagnostic-top strong {
    color: #1d2127;

    font-size: 15px;
    font-weight: 900;
}


/* DIAGNOSTIC ITEMS */

.shopener-diagnostic-points {
    display: grid;

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

    gap: 9px;
}


.shopener-diagnostic-points span {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #5f6467;

    font-size: 11px;
    font-weight: 750;
}


.shopener-diagnostic-points i {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #e8a289;

    box-shadow:
        0 0 0 4px rgba(232, 162, 137, 0.12);
}


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

.shopener-content {
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        58px 52px 55px 65px;

    background:
        linear-gradient(145deg,
            #ffffff,
            #fdfdfe);
}


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

.shopener-number {
    display: block;

    margin-bottom: 17px;

    color: #d98c72;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.1px;
}


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

.shopener-content-title {
    margin:
        0 0 23px;

    color: #1d2127;

    font-size:
        clamp(33px, 3vw, 45px);

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -1.4px;
}


.shopener-content-title span {
    display: block;

    color: #d98c72;
}


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

.shopener-intro,
.shopener-text {
    margin:
        0 0 17px;

    color: #5f6467;

    font-size: 17px;

    line-height: 1.75;
}


.shopener-text {
    margin-bottom: 25px;
}


/* =========================================================
   BRAND BOX
========================================================= */

.shopener-brand-box {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    margin-bottom: 28px;

    padding:
        17px 18px;

    border:
        1px solid rgba(232, 162, 137, 0.25);

    border-left:
        4px solid #e8a289;

    border-radius:
        0 12px 12px 0;

    background:
        rgba(232, 162, 137, 0.09);
}


.shopener-brand-icon {
    width: 41px;
    height: 41px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: #1d2127;

    color: #f2b6a1;
}


.shopener-brand-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shopener-brand-box p {
    margin: 0;

    color: #5f6467;

    font-size: 14px;

    line-height: 1.6;
}


.shopener-brand-box strong {
    color: #1d2127;

    font-weight: 850;
}


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

.shopener-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}


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

.shopener-call {
    position: relative;

    min-height: 68px;

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

    gap: 11px;

    padding:
        9px 18px;

    overflow: hidden;

    border-radius: 11px;

    background: #1d2127;

    color: #ffffff;

    text-decoration: none;

    box-shadow:
        0 13px 30px rgba(29, 33, 39, 0.19);

    transition:
        transform 250ms ease,
        background-color 250ms ease,
        box-shadow 250ms ease;
}


.shopener-call::before {
    content: "";

    position: absolute;

    top: 0;
    left: -70%;

    width: 34%;
    height: 100%;

    background:
        linear-gradient(110deg,
            transparent,
            rgba(255, 255, 255, 0.20),
            transparent);

    transform:
        skewX(-18deg);

    animation:
        shopenerCallSweep 4s ease-in-out infinite;
}


.shopener-call>* {
    position: relative;

    z-index: 2;
}


.shopener-call:hover {
    color: #ffffff;

    background: #3a3f4a;

    transform:
        translateY(-4px);

    box-shadow:
        0 19px 40px rgba(29, 33, 39, 0.27);
}


.shopener-call-icon {
    width: 43px;
    height: 43px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: #e8a289;

    color: #1d2127;
}


.shopener-call-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shopener-call>span:last-child {
    display: flex;
    flex-direction: column;
}


.shopener-call small {
    margin-bottom: 4px;

    color: #bdc2c8;

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

    text-transform: uppercase;
}


.shopener-call strong {
    color: #ffffff;

    font-size: 18px;
    font-weight: 900;
}


/* =========================================================
   DETAILS BUTTON
========================================================= */

.shopener-details {
    min-height: 68px;

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

    gap: 11px;

    padding:
        10px 20px;

    border:
        1px solid #e8a289;

    border-radius: 11px;

    background: #e8a289;

    color: #1d2127;

    text-decoration: none;

    font-size: 15px;
    font-weight: 850;

    transition:
        transform 250ms ease,
        background-color 250ms ease,
        box-shadow 250ms ease;
}


.shopener-details:hover {
    color: #1d2127;

    background: #f2b6a1;

    transform:
        translateY(-4px);

    box-shadow:
        0 17px 35px rgba(217, 140, 114, 0.25);
}


.shopener-details span {
    font-size: 21px;

    transition:
        transform 250ms ease;
}


.shopener-details:hover span {
    transform:
        translateX(5px);
}


/* =========================================================
   MECHANICAL VS OPENER
========================================================= */

.shopener-compare {
    display: grid;

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

    align-items: center;

    gap: 18px;

    margin-top: 28px;
}


/* =========================================================
   COMPARISON CARD
========================================================= */

.shopener-compare-card {
    min-height: 185px;

    padding:
        23px 24px;

    border:
        1px solid rgba(29, 33, 39, 0.08);

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 12px 30px rgba(29, 33, 39, 0.07);

    transition:
        transform 250ms ease,
        border-color 250ms ease,
        box-shadow 250ms ease;
}


.shopener-compare-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(232, 162, 137, 0.38);

    box-shadow:
        0 19px 40px rgba(29, 33, 39, 0.11);
}


/* =========================================================
   COMPARE HEAD
========================================================= */

.shopener-compare-head {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 18px;
}


.shopener-compare-index {
    width: 43px;
    height: 43px;

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

    flex-shrink: 0;

    border-radius: 10px;

    background: #1d2127;

    color: #f2b6a1;

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


.shopener-compare-head small {
    display: block;

    margin-bottom: 3px;

    color: #d98c72;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.shopener-compare-head h3 {
    margin: 0;

    color: #1d2127;

    font-size: 19px;
    font-weight: 850;
}


/* =========================================================
   TAGS
========================================================= */

.shopener-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}


.shopener-tags span {
    padding:
        8px 11px;

    border:
        1px solid rgba(232, 162, 137, 0.22);

    border-radius: 50px;

    background:
        rgba(232, 162, 137, 0.08);

    color: #5f6467;

    font-size: 11px;
    font-weight: 750;
}


/* =========================================================
   CENTER CONNECTION
========================================================= */

.shopener-compare-center {
    display: flex;
    align-items: center;
    justify-content: center;
}


.shopener-compare-center span {
    width: 18px;
    height: 1px;

    background:
        rgba(29, 33, 39, 0.20);
}


.shopener-compare-center i {
    width: 39px;
    height: 39px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: #e8a289;

    color: #1d2127;

    font-style: normal;

    font-size: 21px;
    font-weight: 700;

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


/* =========================================================
   BOTTOM MARKETING BAR
========================================================= */

.shopener-bottom {
    position: relative;

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

    gap: 25px;

    margin-top: 28px;

    padding:
        24px 26px;

    overflow: hidden;

    border-radius: 16px;

    background:
        linear-gradient(110deg,
            #1d2127 0%,
            #2f343c 100%);

    box-shadow:
        0 17px 40px rgba(29, 33, 39, 0.18);
}


.shopener-bottom::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: 30%;
    top: -110px;

    border:
        1px solid rgba(232, 162, 137, 0.18);

    transform:
        rotate(45deg);

    pointer-events: none;
}


/* =========================================================
   BOTTOM COPY
========================================================= */

.shopener-bottom-copy {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;
}


.shopener-bottom-copy span {
    margin-bottom: 5px;

    color: #e8a289;

    font-size: 10px;
    font-weight: 850;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


.shopener-bottom-copy strong {
    color: #ffffff;

    font-size:
        clamp(19px, 2vw, 27px);

    font-weight: 850;

    line-height: 1.25;
}


/* =========================================================
   REQUEST BUTTON
========================================================= */

.shopener-request {
    position: relative;

    z-index: 2;

    min-height: 59px;

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

    gap: 12px;

    flex-shrink: 0;

    padding:
        10px 20px;

    border-radius: 10px;

    background: #e8a289;

    color: #1d2127;

    text-decoration: none;

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

    transition:
        transform 250ms ease,
        background-color 250ms ease;
}


.shopener-request:hover {
    color: #1d2127;

    background: #f2b6a1;

    transform:
        translateY(-4px);
}


.shopener-request span {
    font-size: 20px;

    transition:
        transform 250ms ease;
}


.shopener-request:hover span {
    transform:
        translateX(5px);
}


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

@keyframes shopenerDecorFloat {

    0%,
    100% {
        transform:
            rotate(45deg) translate(0, 0);
    }

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


@keyframes shopenerLinePulse {

    0%,
    100% {
        width: 30px;
    }

    50% {
        width: 47px;
    }
}


@keyframes shopenerDiagnosticFloat {

    0%,
    100% {
        transform:
            translateY(-50%);
    }

    50% {
        transform:
            translateY(calc(-50% - 9px));
    }
}


@keyframes shopenerCallSweep {

    0%,
    50% {
        left: -70%;
    }

    82%,
    100% {
        left: 140%;
    }
}


@keyframes shopenerPlusPulse {

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

    50% {
        transform:
            scale(1.10);
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .shopener-title {
        font-size:
            clamp(40px, 4.5vw, 55px);
    }


    .shopener-visual {
        min-height: 650px;
    }


    .shopener-content {
        padding:
            50px 38px 48px 55px;
    }


    .shopener-intro,
    .shopener-text {
        font-size: 16px;
    }


    .shopener-diagnostic {
        right: -28px;

        width: 260px;
    }

}


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

@media (max-width: 991.98px) {

    .shopener-section {
        padding:
            80px 0;
    }


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


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


    .shopener-header-text {
        max-width: 700px;

        margin:
            0 auto;

        padding:
            18px 0 0;

        border-left: 0;

        border-top:
            2px solid #e8a289;
    }


    .shopener-feature {
        border-radius: 22px;
    }


    .shopener-visual {
        min-height: 590px;
    }


    .shopener-diagnostic {
        right: 20px;
    }


    .shopener-content {
        padding:
            52px 40px;

        text-align: center;
    }


    .shopener-brand-box {
        text-align: left;
    }


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


    .shopener-compare {
        grid-template-columns:
            1fr;
    }


    .shopener-compare-center {
        height: 55px;

        transform:
            rotate(90deg);
    }

}


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

@media (max-width: 767.98px) {

    .shopener-section {
        padding:
            65px 0;
    }


    .shopener-title {
        font-size:
            clamp(33px, 9vw, 42px);
    }


    .shopener-header-text {
        font-size: 16px;
    }


    .shopener-visual {
        min-height: 520px;
    }


    .shopener-location {
        top: 14px;
        left: 14px;
    }


    .shopener-image-caption {
        left: 14px;
        bottom: 14px;
    }


    .shopener-diagnostic {
        top: auto;
        right: 14px;
        bottom: 88px;

        width:
            calc(100% - 28px);

        max-width: 300px;

        transform: none;

        animation:
            shopenerDiagnosticMobile 4s ease-in-out infinite;
    }


    .shopener-content {
        padding:
            42px 20px;
    }


    .shopener-content-title {
        font-size:
            clamp(30px, 8vw, 39px);
    }


    .shopener-intro,
    .shopener-text {
        font-size: 16px;
    }


    .shopener-actions {
        width: 100%;
        max-width: 450px;

        margin:
            0 auto;

        flex-direction: column;
    }


    .shopener-call,
    .shopener-details {
        width: 100%;

        justify-content: center;
    }


    .shopener-bottom {
        flex-direction: column;

        text-align: center;
    }


    .shopener-request {
        width: 100%;
        max-width: 330px;
    }

}


/* MOBILE FLOAT */

@keyframes shopenerDiagnosticMobile {

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

    50% {
        transform:
            translateY(-7px);
    }
}


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

@media (max-width: 575.98px) {

    .shopener-feature {
        border-radius: 18px;
    }


    .shopener-visual {
        min-height: 500px;
    }


    .shopener-diagnostic {
        padding:
            16px;
    }


    .shopener-diagnostic-points {
        grid-template-columns:
            1fr 1fr;
    }


    .shopener-brand-box {
        padding:
            15px;
    }


    .shopener-compare-card {
        min-height: auto;

        padding:
            20px;
    }


    .shopener-bottom {
        padding:
            21px 18px;
    }

}


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

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

    .shopener-section::before,
    .shopener-eyebrow-line,
    .shopener-diagnostic,
    .shopener-call::before,
    .shopener-compare-center i {
        animation: none !important;
    }


    .shopener-image,
    .shopener-call,
    .shopener-details,
    .shopener-details span,
    .shopener-compare-card,
    .shopener-request,
    .shopener-request span {
        transition: none !important;
    }

}

/* =========================================================
   GARAGE DOOR OPENER SECTION
   ACCESSIBILITY + REDUCED MOTION
========================================================= */

.shopener-section a:focus-visible {
    outline: 3px solid #e8a289;
    outline-offset: 4px;
}

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

    .shopener-section *,
    .shopener-section *::before,
    .shopener-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}

/* __________________________________________________________________________________________________________________________ */
/* =========================================================
   INSTALLATION & REPLACEMENT
   DARK LUXURY ARCHITECTURAL VERSION
========================================================= */

.shinst2-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0;

    background:
        radial-gradient(circle at 12% 8%,
            rgba(232, 162, 137, 0.10),
            transparent 27%),
        linear-gradient(135deg,
            #1d2127 0%,
            #242a31 52%,
            #353a42 100%);
}


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

.shinst2-section::before {
    content: "";

    position: absolute;

    width: 470px;
    height: 1px;

    top: 20%;
    right: -100px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(232, 162, 137, 0.30),
            transparent);

    pointer-events: none;

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


.shinst2-section::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -210px;
    bottom: -180px;

    border:
        1px solid rgba(232, 162, 137, 0.13);

    transform:
        rotate(45deg);

    pointer-events: none;
}


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

.shinst2-container {
    position: relative;

    z-index: 2;

    max-width: 1380px;
}


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

.shinst2-header {
    margin-bottom: 48px;
}


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

.shinst2-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 17px;

    color: #f2b6a1;

    font-size: 13px;
    font-weight: 850;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.shinst2-eyebrow span {
    width: 35px;
    height: 2px;

    flex-shrink: 0;

    border-radius: 50px;

    background: #e8a289;

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


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

.shinst2-title {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(44px, 4.7vw, 64px);

    font-weight: 900;

    line-height: 1.02;

    letter-spacing: -2px;
}


.shinst2-title span {
    display: block;

    color: #e8a289;
}


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

.shinst2-header-text {
    max-width: 430px;

    margin:
        0 0 5px auto;

    padding-left: 22px;

    border-left:
        2px solid rgba(232, 162, 137, 0.65);

    color: #bdc2c8;

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   MAIN PANEL
========================================================= */

.shinst2-main {
    position: relative;

    overflow: hidden;

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

    border-radius: 28px;

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

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.28);

    backdrop-filter:
        blur(6px);

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


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

.shinst2-content {
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        58px 50px;
}


/* =========================================================
   KICKER
========================================================= */

.shinst2-kicker {
    display: block;

    margin-bottom: 16px;

    color: #e8a289;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.1px;

    text-transform: uppercase;
}


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

.shinst2-content>h3 {
    margin:
        0 0 21px;

    color: #ffffff;

    font-size:
        clamp(33px, 3vw, 45px);

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -1.3px;
}


.shinst2-content>h3 span {
    display: block;

    color: #e8a289;
}


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

.shinst2-content>p {
    margin:
        0 0 29px;

    color: #bdc2c8;

    font-size: 16px;

    line-height: 1.72;
}


/* =========================================================
   REASONS
========================================================= */

.shinst2-reasons {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-bottom: 28px;
}


/* =========================================================
   REASON ITEM
========================================================= */

.shinst2-reason {
    display: flex;
    align-items: center;

    gap: 13px;

    padding:
        14px 15px;

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

    border-radius: 12px;

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

    transition:
        transform 250ms ease,
        border-color 250ms ease,
        background-color 250ms ease;
}


.shinst2-reason:hover {
    transform:
        translateX(6px);

    border-color:
        rgba(232, 162, 137, 0.30);

    background:
        rgba(232, 162, 137, 0.07);
}


/* =========================================================
   REASON NUMBER
========================================================= */

.shinst2-reason-num {
    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background:
        rgba(232, 162, 137, 0.14);

    color: #f2b6a1;

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


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

.shinst2-reason>div {
    display: flex;
    flex-direction: column;
}


.shinst2-reason strong {
    margin-bottom: 4px;

    color: #ffffff;

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


.shinst2-reason small {
    color: #a1a7ad;

    font-size: 11px;

    line-height: 1.45;
}


/* =========================================================
   BRAND NOTE
========================================================= */

.shinst2-note {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    margin-bottom: 29px;

    padding:
        16px;

    border:
        1px solid rgba(232, 162, 137, 0.22);

    border-left:
        3px solid #e8a289;

    border-radius:
        0 12px 12px 0;

    background:
        rgba(232, 162, 137, 0.08);
}


/* NOTE ICON */

.shinst2-note-icon {
    width: 41px;
    height: 41px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: #e8a289;

    color: #1d2127;
}


.shinst2-note-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shinst2-note p {
    margin: 0;

    color: #bdc2c8;

    font-size: 13px;

    line-height: 1.6;
}


.shinst2-note strong {
    color: #ffffff;

    font-weight: 850;
}


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

.shinst2-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 11px;
}


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

.shinst2-call {
    position: relative;

    min-height: 66px;

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

    gap: 11px;

    padding:
        9px 17px;

    overflow: hidden;

    border-radius: 11px;

    background: #e8a289;

    color: #1d2127;

    text-decoration: none;

    box-shadow:
        0 13px 30px rgba(0, 0, 0, 0.18);

    transition:
        transform 250ms ease,
        background-color 250ms ease;
}


.shinst2-call::before {
    content: "";

    position: absolute;

    top: 0;
    left: -70%;

    width: 34%;
    height: 100%;

    background:
        linear-gradient(110deg,
            transparent,
            rgba(255, 255, 255, 0.55),
            transparent);

    transform:
        skewX(-18deg);

    animation:
        shinst2Shine 4s ease-in-out infinite;
}


.shinst2-call>* {
    position: relative;

    z-index: 2;
}


.shinst2-call:hover {
    color: #1d2127;

    background: #f2b6a1;

    transform:
        translateY(-4px);
}


/* =========================================================
   CALL ICON
========================================================= */

.shinst2-call-icon {
    width: 43px;
    height: 43px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: #1d2127;

    color: #f2b6a1;
}


.shinst2-call-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


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

.shinst2-call>span:last-child {
    display: flex;
    flex-direction: column;
}


.shinst2-call small {
    margin-bottom: 4px;

    color:
        rgba(29, 33, 39, 0.68);

    font-size: 9px;
    font-weight: 850;

    text-transform: uppercase;
}


.shinst2-call strong {
    color: #1d2127;

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


/* =========================================================
   MORE BUTTON
========================================================= */

.shinst2-more {
    min-height: 66px;

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

    gap: 10px;

    padding:
        10px 19px;

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

    border-radius: 11px;

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

    color: #ffffff;

    text-decoration: none;

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

    transition:
        transform 250ms ease,
        background-color 250ms ease,
        border-color 250ms ease;
}


.shinst2-more:hover {
    color: #ffffff;

    border-color:
        rgba(232, 162, 137, 0.40);

    background:
        rgba(232, 162, 137, 0.12);

    transform:
        translateY(-4px);
}


.shinst2-more span {
    color: #e8a289;

    font-size: 20px;

    transition:
        transform 250ms ease;
}


.shinst2-more:hover span {
    transform:
        translateX(5px);
}


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

.shinst2-visual {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 720px;

    overflow: hidden;

    background: #1d2127;
}


/* =========================================================
   IMAGE LINK
========================================================= */

.shinst2-image-link {
    position: absolute;

    inset: 0;

    display: block;

    overflow: hidden;

    text-decoration: none;
}


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

.shinst2-image {
    width: 100%;
    height: 100%;

    display: block;

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

    transition:
        transform 900ms ease;
}


.shinst2-image-link:hover .shinst2-image {
    transform:
        scale(1.04);
}


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

.shinst2-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(to bottom,
            rgba(29, 33, 39, 0.03) 15%,
            rgba(29, 33, 39, 0.09) 55%,
            rgba(29, 33, 39, 0.74) 100%);

    pointer-events: none;
}


/* =========================================================
   IMAGE BADGE
========================================================= */

.shinst2-image-badge {
    position: absolute;

    z-index: 3;

    left: 24px;
    bottom: 25px;

    display: flex;
    flex-direction: column;

    padding:
        14px 17px;

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

    border-radius: 12px;

    background:
        rgba(29, 33, 39, 0.91);

    backdrop-filter:
        blur(8px);

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


.shinst2-image-badge small {
    margin-bottom: 5px;

    color: #e8a289;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.shinst2-image-badge strong {
    color: #ffffff;

    font-size: 15px;
    font-weight: 850;
}


/* =========================================================
   LOCATION BADGE
========================================================= */

.shinst2-location {
    position: absolute;

    z-index: 3;

    top: 22px;
    right: 22px;

    padding:
        10px 15px;

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

    border-radius: 50px;

    background:
        rgba(29, 33, 39, 0.90);

    color: #ffffff;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


/* =========================================================
   FLOATING MEASUREMENT CARD
========================================================= */

.shinst2-floating {
    position: absolute;

    z-index: 4;

    top: 50%;
    left: 28px;

    width: 250px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        17px;

    border:
        1px solid rgba(232, 162, 137, 0.25);

    border-radius: 14px;

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

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.22);

    transform:
        translateY(-50%);

    animation:
        shinst2Float 4s ease-in-out infinite;
}


/* =========================================================
   FLOAT ICON
========================================================= */

.shinst2-floating-icon {
    width: 44px;
    height: 44px;

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

    flex-shrink: 0;

    border-radius: 10px;

    background: #1d2127;

    color: #f2b6a1;
}


.shinst2-floating-icon svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


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

.shinst2-floating>span:last-child {
    display: flex;
    flex-direction: column;
}


.shinst2-floating small {
    margin-bottom: 4px;

    color: #7e8388;

    font-size: 8px;
    font-weight: 850;

    letter-spacing: 0.5px;

    text-transform: uppercase;
}


.shinst2-floating strong {
    color: #1d2127;

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


/* =========================================================
   SPEC RAIL
========================================================= */

.shinst2-spec-rail {
    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1fr auto 1fr;

    align-items: center;

    gap: 15px;

    margin-top: 24px;

    padding:
        19px 22px;

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

    border-radius: 15px;

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

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


/* =========================================================
   SPEC ITEM
========================================================= */

.shinst2-spec {
    display: flex;
    align-items: center;

    gap: 11px;
}


.shinst2-spec-icon {
    width: 41px;
    height: 41px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background:
        rgba(232, 162, 137, 0.12);

    color: #f2b6a1;
}


.shinst2-spec-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shinst2-spec>div {
    display: flex;
    flex-direction: column;
}


.shinst2-spec small {
    margin-bottom: 3px;

    color: #7e8388;

    font-size: 8px;
    font-weight: 850;

    letter-spacing: 0.5px;

    text-transform: uppercase;
}


.shinst2-spec strong {
    color: #ffffff;

    font-size: 12px;
    font-weight: 850;
}


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

.shinst2-spec-divider {
    width: 1px;
    height: 36px;

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


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

.shinst2-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-top: 24px;

    padding:
        23px 25px;

    border:
        1px solid rgba(232, 162, 137, 0.20);

    border-radius: 15px;

    background:
        linear-gradient(100deg,
            rgba(232, 162, 137, 0.12),
            rgba(255, 255, 255, 0.03));
}


/* =========================================================
   BOTTOM COPY
========================================================= */

.shinst2-bottom>div {
    display: flex;
    flex-direction: column;
}


.shinst2-bottom span:first-child {
    margin-bottom: 5px;

    color: #e8a289;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.shinst2-bottom strong {
    color: #ffffff;

    font-size:
        clamp(19px, 2vw, 26px);

    font-weight: 850;

    line-height: 1.25;
}


/* =========================================================
   REQUEST BUTTON
========================================================= */

.shinst2-request {
    min-height: 57px;

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

    gap: 11px;

    flex-shrink: 0;

    padding:
        10px 20px;

    border-radius: 10px;

    background: #e8a289;

    color: #1d2127;

    text-decoration: none;

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

    transition:
        transform 250ms ease,
        background-color 250ms ease;
}


.shinst2-request:hover {
    color: #1d2127;

    background: #f2b6a1;

    transform:
        translateY(-4px);
}


.shinst2-request span {
    font-size: 20px;

    transition:
        transform 250ms ease;
}


.shinst2-request:hover span {
    transform:
        translateX(5px);
}


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

@keyframes shinst2LineMove {

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

        opacity: 0.35;
    }

    50% {
        transform:
            translateX(45px);

        opacity: 1;
    }
}


@keyframes shinst2Eyebrow {

    0%,
    100% {
        width: 30px;
    }

    50% {
        width: 47px;
    }
}


@keyframes shinst2Shine {

    0%,
    50% {
        left: -70%;
    }

    82%,
    100% {
        left: 140%;
    }
}


@keyframes shinst2Float {

    0%,
    100% {
        transform:
            translateY(-50%);
    }

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


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .shinst2-title {
        font-size:
            clamp(40px, 4.5vw, 55px);
    }


    .shinst2-content {
        padding:
            48px 36px;
    }


    .shinst2-visual {
        min-height: 680px;
    }


    .shinst2-spec-rail {
        gap: 10px;

        padding:
            17px;
    }


    .shinst2-spec strong {
        font-size: 11px;
    }

}


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

@media (max-width: 991.98px) {

    .shinst2-section {
        padding:
            80px 0;
    }


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


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


    .shinst2-header-text {
        max-width: 700px;

        margin:
            0 auto;

        padding:
            18px 0 0;

        border-left: 0;

        border-top:
            2px solid rgba(232, 162, 137, 0.65);
    }


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


    .shinst2-reason,
    .shinst2-note {
        text-align: left;
    }


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


    .shinst2-visual {
        min-height: 600px;
    }


    .shinst2-floating {
        left: 20px;
    }


    .shinst2-spec-rail {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    .shinst2-spec-divider {
        display: none;
    }


    .shinst2-bottom {
        flex-direction: column;

        text-align: center;
    }

}


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

@media (max-width: 767.98px) {

    .shinst2-section {
        padding:
            65px 0;
    }


    .shinst2-title {
        font-size:
            clamp(33px, 9vw, 42px);
    }


    .shinst2-header-text {
        font-size: 16px;
    }


    .shinst2-main {
        border-radius: 20px;
    }


    .shinst2-content {
        padding:
            40px 20px;
    }


    .shinst2-content>h3 {
        font-size:
            clamp(29px, 8vw, 38px);
    }


    .shinst2-visual {
        min-height: 520px;
    }


    .shinst2-floating {
        top: auto;
        left: 14px;
        bottom: 95px;

        width:
            calc(100% - 28px);

        max-width: 280px;

        transform: none;

        animation:
            shinst2FloatMobile 4s ease-in-out infinite;
    }


    .shinst2-image-badge {
        left: 14px;
        bottom: 14px;
    }


    .shinst2-location {
        top: 14px;
        right: 14px;
    }


    .shinst2-spec-rail {
        grid-template-columns:
            1fr;

        padding:
            16px;
    }


    .shinst2-actions {
        width: 100%;

        max-width: 430px;

        margin:
            0 auto;

        flex-direction: column;
    }


    .shinst2-call,
    .shinst2-more {
        width: 100%;

        justify-content: center;
    }


    .shinst2-request {
        width: 100%;

        max-width: 330px;
    }

}


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

@keyframes shinst2FloatMobile {

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

    50% {
        transform:
            translateY(-7px);
    }
}


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

@media (max-width: 575.98px) {

    .shinst2-title {
        font-size:
            clamp(31px, 9vw, 38px);
    }


    .shinst2-visual {
        min-height: 500px;
    }


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


    .shinst2-bottom {
        padding:
            20px 17px;
    }

}


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

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

    .shinst2-section::before,
    .shinst2-eyebrow span,
    .shinst2-call::before,
    .shinst2-floating {
        animation: none !important;
    }


    .shinst2-image,
    .shinst2-reason,
    .shinst2-call,
    .shinst2-more,
    .shinst2-more span,
    .shinst2-request,
    .shinst2-request span {
        transition: none !important;
    }

}

/* =========================================================
   INSTALLATION & REPLACEMENT
   ACCESSIBILITY + REDUCED MOTION
========================================================= */

.shinst2-section a:focus-visible {
    outline: 3px solid var(--color-accent, #e8a289);
    outline-offset: 4px;
}

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

    .shinst2-section *,
    .shinst2-section *::before,
    .shinst2-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}

/* ____________________________________________________________________________________________________________________________ */

/* =========================================================
   PREVENTIVE GARAGE DOOR CARE
   LIGHT LUXURY EDITORIAL DESIGN
========================================================= */

.shcare3-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0;

    background:
        linear-gradient(135deg,
            #fdfdfe 0%,
            #f5f6f8 52%,
            #eceef1 100%);
}


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

.shcare3-section::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    top: -280px;
    right: -170px;

    border:
        1px solid rgba(232, 162, 137, 0.22);

    transform:
        rotate(45deg);

    pointer-events: none;

    animation:
        shcare3Decor 10s ease-in-out infinite;
}


.shcare3-section::after {
    content: "";

    position: absolute;

    width: 370px;
    height: 1px;

    left: -80px;
    bottom: 13%;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(232, 162, 137, 0.32),
            transparent);

    pointer-events: none;
}


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

.shcare3-container {
    position: relative;

    z-index: 2;

    max-width: 1380px;
}


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

.shcare3-header {
    max-width: 1270px;

    margin:
        0 auto 46px;
}


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

.shcare3-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 17px;

    color: #d98c72;

    font-size: 13px;
    font-weight: 850;

    letter-spacing: 1.1px;

    text-transform: uppercase;
}


.shcare3-eyebrow span {
    width: 35px;
    height: 2px;

    flex-shrink: 0;

    background: #e8a289;

    border-radius: 50px;

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


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

.shcare3-title {
    margin: 0;

    color: #1d2127;

    font-size:
        clamp(44px, 4.7vw, 64px);

    font-weight: 900;

    line-height: 1.02;

    letter-spacing: -2px;
}


.shcare3-title span {
    display: block;

    color: #d98c72;
}


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

.shcare3-header-text {
    max-width: 450px;

    margin:
        0 0 5px auto;

    padding-left: 22px;

    border-left:
        2px solid #e8a289;

    color: #5f6467;

    font-size: 17px;

    line-height: 1.72;
}


/* =========================================================
   MAIN FRAME
========================================================= */

.shcare3-frame {
    overflow: hidden;

    border:
        1px solid rgba(29, 33, 39, 0.08);

    border-radius: 30px;

    background: #ffffff;

    box-shadow:
        0 28px 70px rgba(29, 33, 39, 0.11);
}


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

.shcare3-visual {
    position: relative;

    min-height: 760px;

    overflow: hidden;

    background: #1d2127;
}


/* =========================================================
   IMAGE LINK
========================================================= */

.shcare3-image-link {
    position: absolute;

    inset: 0;

    display: block;

    overflow: hidden;
}


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

.shcare3-image {
    width: 100%;
    height: 100%;

    display: block;

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

    transition:
        transform 900ms ease;
}


.shcare3-image-link:hover .shcare3-image {
    transform:
        scale(1.04);
}


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

.shcare3-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(to bottom,
            rgba(29, 33, 39, 0.02) 20%,
            rgba(29, 33, 39, 0.08) 55%,
            rgba(29, 33, 39, 0.78) 100%);

    pointer-events: none;
}


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

.shcare3-location {
    position: absolute;

    z-index: 3;

    top: 23px;
    left: 23px;

    padding:
        10px 15px;

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

    border-radius: 50px;

    background:
        rgba(29, 33, 39, 0.91);

    color: #ffffff;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


/* =========================================================
   IMAGE MESSAGE
========================================================= */

.shcare3-image-message {
    position: absolute;

    z-index: 4;

    left: 25px;
    bottom: 27px;

    max-width: 390px;

    display: flex;
    flex-direction: column;

    padding:
        16px 18px;

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

    border-radius: 13px;

    background:
        rgba(29, 33, 39, 0.91);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.22);

    backdrop-filter:
        blur(9px);

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


.shcare3-image-message small {
    margin-bottom: 6px;

    color: #f2b6a1;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


.shcare3-image-message strong {
    color: #ffffff;

    font-size: 16px;
    font-weight: 850;

    line-height: 1.4;
}


/* =========================================================
   LARGE IMAGE NUMBER
========================================================= */

.shcare3-large-number {
    position: absolute;

    z-index: 3;

    right: 23px;
    bottom: 15px;

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

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

    font-weight: 900;

    line-height: 1;

    pointer-events: none;
}


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

.shcare3-content {
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        57px 50px;
}


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

.shcare3-content-label {
    display: block;

    margin-bottom: 14px;

    color: #d98c72;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}


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

.shcare3-content>h3 {
    margin:
        0 0 20px;

    color: #1d2127;

    font-size:
        clamp(32px, 3vw, 44px);

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -1.3px;
}


.shcare3-content>h3 span {
    display: block;

    color: #d98c72;
}


/* =========================================================
   INTRO
========================================================= */

.shcare3-intro {
    margin:
        0 0 30px;

    color: #5f6467;

    font-size: 17px;

    line-height: 1.72;
}


/* =========================================================
   TIMELINE
========================================================= */

.shcare3-timeline {
    position: relative;

    padding-left: 8px;
}


.shcare3-timeline::before {
    content: "";

    position: absolute;

    top: 22px;
    bottom: 22px;
    left: 26px;

    width: 1px;

    background:
        linear-gradient(to bottom,
            #e8a289,
            rgba(232, 162, 137, 0.15));
}


/* =========================================================
   TIMELINE STEP
========================================================= */

.shcare3-step {
    position: relative;

    display: grid;

    grid-template-columns:
        54px 1fr;

    gap: 14px;

    padding:
        0 0 24px;
}


.shcare3-step:last-child {
    padding-bottom: 0;
}


/* =========================================================
   STEP MARKER
========================================================= */

.shcare3-step-marker {
    position: relative;

    z-index: 2;

    width: 38px;
    height: 38px;

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

    margin-top: 2px;

    border:
        1px solid rgba(232, 162, 137, 0.30);

    border-radius: 10px;

    background: #ffffff;

    color: #d98c72;

    font-size: 9px;
    font-weight: 900;

    box-shadow:
        0 8px 22px rgba(29, 33, 39, 0.08);

    transition:
        transform 250ms ease,
        background-color 250ms ease;
}


.shcare3-step:hover .shcare3-step-marker {
    transform:
        scale(1.08);

    background:
        rgba(232, 162, 137, 0.12);
}


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

.shcare3-step small {
    display: block;

    margin-bottom: 3px;

    color: #d98c72;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.shcare3-step h4 {
    margin:
        0 0 6px;

    color: #1d2127;

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


.shcare3-step p {
    margin: 0;

    color: #7e8388;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   RESULT BAR
========================================================= */

.shcare3-result {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 16px;

    margin-top: 25px;

    padding:
        20px 22px;

    border:
        1px solid rgba(232, 162, 137, 0.20);

    border-radius: 16px;

    background:
        linear-gradient(110deg,
            rgba(232, 162, 137, 0.11),
            #ffffff);

    box-shadow:
        0 12px 30px rgba(29, 33, 39, 0.06);
}


/* =========================================================
   RESULT ICON
========================================================= */

.shcare3-result-icon {
    width: 48px;
    height: 48px;

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

    border-radius: 11px;

    background: #1d2127;

    color: #f2b6a1;
}


.shcare3-result-icon svg {
    width: 23px;
    height: 23px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   RESULT COPY
========================================================= */

.shcare3-result-copy small {
    display: block;

    margin-bottom: 4px;

    color: #d98c72;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.shcare3-result-copy p {
    margin: 0;

    color: #5f6467;

    font-size: 14px;

    line-height: 1.6;
}


.shcare3-result-copy strong {
    color: #1d2127;
}


/* =========================================================
   RESULT STATUS
========================================================= */

.shcare3-result-status {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding:
        9px 13px;

    border-radius: 50px;

    background: #f5f6f8;

    color: #5f6467;

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

    white-space: nowrap;
}


.shcare3-result-status span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #e8a289;

    box-shadow:
        0 0 0 4px rgba(232, 162, 137, 0.12);

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


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

.shcare3-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-top: 25px;

    padding:
        24px 26px;

    border-radius: 16px;

    background:
        linear-gradient(110deg,
            #1d2127 0%,
            #30353d 100%);

    box-shadow:
        0 16px 38px rgba(29, 33, 39, 0.17);
}


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

.shcare3-cta>div:first-child {
    display: flex;
    flex-direction: column;
}


.shcare3-cta>div:first-child span {
    margin-bottom: 5px;

    color: #e8a289;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.shcare3-cta>div:first-child strong {
    color: #ffffff;

    font-size:
        clamp(19px, 2vw, 26px);

    font-weight: 850;

    line-height: 1.25;
}


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

.shcare3-actions {
    display: flex;

    gap: 11px;

    flex-shrink: 0;
}


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

.shcare3-call {
    position: relative;

    min-height: 62px;

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

    gap: 11px;

    padding:
        9px 17px;

    overflow: hidden;

    border-radius: 11px;

    background: #e8a289;

    color: #1d2127;

    text-decoration: none;

    transition:
        transform 250ms ease,
        background-color 250ms ease;
}


.shcare3-call::before {
    content: "";

    position: absolute;

    top: 0;
    left: -70%;

    width: 34%;
    height: 100%;

    background:
        linear-gradient(110deg,
            transparent,
            rgba(255, 255, 255, 0.55),
            transparent);

    transform:
        skewX(-18deg);

    animation:
        shcare3CallShine 4s ease-in-out infinite;
}


.shcare3-call>* {
    position: relative;

    z-index: 2;
}


.shcare3-call:hover {
    color: #1d2127;

    background: #f2b6a1;

    transform:
        translateY(-4px);
}


/* =========================================================
   CALL ICON
========================================================= */

.shcare3-call-icon {
    width: 40px;
    height: 40px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: #1d2127;

    color: #f2b6a1;
}


.shcare3-call-icon svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shcare3-call>span:last-child {
    display: flex;
    flex-direction: column;
}


.shcare3-call small {
    margin-bottom: 3px;

    color:
        rgba(29, 33, 39, 0.66);

    font-size: 8px;
    font-weight: 850;

    text-transform: uppercase;
}


.shcare3-call strong {
    color: #1d2127;

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


/* =========================================================
   SECONDARY BUTTON
========================================================= */

.shcare3-more {
    min-height: 62px;

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

    gap: 10px;

    padding:
        10px 18px;

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

    border-radius: 11px;

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

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 850;

    transition:
        transform 250ms ease,
        border-color 250ms ease,
        background-color 250ms ease;
}


.shcare3-more:hover {
    color: #ffffff;

    border-color:
        rgba(232, 162, 137, 0.42);

    background:
        rgba(232, 162, 137, 0.12);

    transform:
        translateY(-4px);
}


.shcare3-more span {
    color: #e8a289;

    font-size: 19px;

    transition:
        transform 250ms ease;
}


.shcare3-more:hover span {
    transform:
        translateX(5px);
}


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

@keyframes shcare3Decor {

    0%,
    100% {
        transform:
            rotate(45deg) translate(0, 0);
    }

    50% {
        transform:
            rotate(50deg) translate(12px, 9px);
    }
}


@keyframes shcare3Eyebrow {

    0%,
    100% {
        width: 30px;
    }

    50% {
        width: 47px;
    }
}


@keyframes shcare3Status {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(232, 162, 137, 0.12);
    }

    50% {
        box-shadow:
            0 0 0 8px rgba(232, 162, 137, 0.02);
    }
}


@keyframes shcare3CallShine {

    0%,
    50% {
        left: -70%;
    }

    82%,
    100% {
        left: 140%;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .shcare3-title {
        font-size:
            clamp(40px, 4.4vw, 55px);
    }


    .shcare3-visual {
        min-height: 700px;
    }


    .shcare3-content {
        padding:
            48px 36px;
    }


    .shcare3-actions {
        flex-wrap: wrap;

        justify-content: flex-end;
    }

}


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

@media (max-width: 991.98px) {

    .shcare3-section {
        padding:
            80px 0;
    }


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


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


    .shcare3-header-text {
        max-width: 690px;

        margin:
            0 auto;

        padding:
            18px 0 0;

        border-left: 0;

        border-top:
            2px solid #e8a289;
    }


    .shcare3-frame {
        border-radius: 23px;
    }


    .shcare3-visual {
        min-height: 620px;
    }


    .shcare3-content {
        padding:
            50px 40px;
    }


    .shcare3-result {
        grid-template-columns:
            auto 1fr;
    }


    .shcare3-result-status {
        grid-column:
            1 / -1;

        justify-self: center;
    }


    .shcare3-cta {
        flex-direction: column;

        text-align: center;
    }


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

}


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

@media (max-width: 767.98px) {

    .shcare3-section {
        padding:
            65px 0;
    }


    .shcare3-title {
        font-size:
            clamp(33px, 9vw, 42px);
    }


    .shcare3-header-text {
        font-size: 16px;
    }


    .shcare3-visual {
        min-height: 530px;
    }


    .shcare3-location {
        top: 14px;
        left: 14px;
    }


    .shcare3-image-message {
        right: 14px;
        bottom: 14px;
        left: 14px;
    }


    .shcare3-large-number {
        display: none;
    }


    .shcare3-content {
        padding:
            42px 20px;
    }


    .shcare3-content>h3 {
        font-size:
            clamp(29px, 8vw, 38px);
    }


    .shcare3-intro {
        font-size: 16px;
    }


    .shcare3-result {
        grid-template-columns:
            1fr;

        text-align: center;
    }


    .shcare3-result-icon {
        margin:
            0 auto;
    }


    .shcare3-actions {
        width: 100%;

        max-width: 440px;

        flex-direction: column;
    }


    .shcare3-call,
    .shcare3-more {
        width: 100%;

        justify-content: center;
    }

}


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

@media (max-width: 575.98px) {

    .shcare3-title {
        font-size:
            clamp(31px, 9vw, 38px);
    }


    .shcare3-visual {
        min-height: 500px;
    }


    .shcare3-content {
        padding:
            37px 17px;
    }


    .shcare3-step {
        grid-template-columns:
            48px 1fr;
    }


    .shcare3-timeline::before {
        left: 26px;
    }


    .shcare3-cta {
        padding:
            21px 18px;
    }

}


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

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

    .shcare3-section::before,
    .shcare3-eyebrow span,
    .shcare3-result-status span,
    .shcare3-call::before {
        animation: none !important;
    }


    .shcare3-image,
    .shcare3-step-marker,
    .shcare3-call,
    .shcare3-more,
    .shcare3-more span {
        transition: none !important;
    }

}

/* =========================================================
   PREVENTIVE GARAGE DOOR CARE
   ACCESSIBILITY + REDUCED MOTION
========================================================= */

.shcare3-section a:focus-visible {
    outline: 3px solid var(--color-accent, #e8a289);
    outline-offset: 4px;
}

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

    .shcare3-section *,
    .shcare3-section *::before,
    .shcare3-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}

/* ___________________________________________________________________________________________________________ */
/* =========================================================
   GARAGE DOOR REPAIR FAQ
   LUXURY LIGHT / DARK DESIGN
========================================================= */

.shfaq-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0;

    background:
        linear-gradient(135deg,
            #fdfdfe 0%,
            #f5f6f8 55%,
            #eceef1 100%);
}


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

.shfaq-container {
    position: relative;
    z-index: 2;

    max-width: 1380px;
}


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

.shfaq-header {
    max-width: 850px;

    margin: 0 auto 52px;

    text-align: center;
}


/* EYEBROW */

.shfaq-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 18px;

    color: #d98c72;

    font-size: 13px;
    font-weight: 850;

    letter-spacing: 1.1px;

    text-transform: uppercase;
}


.shfaq-eyebrow>span {
    width: 35px;
    height: 2px;

    background: #e8a289;

    border-radius: 50px;
}


/* TITLE */

.shfaq-title {
    margin: 0 0 20px;

    color: #1d2127;

    font-size: clamp(42px, 4.5vw, 62px);
    font-weight: 900;

    line-height: 1.05;
    letter-spacing: -1.8px;
}


.shfaq-title span {
    color: #d98c72;
}


/* HEADER TEXT */

.shfaq-header-text {
    max-width: 650px;

    margin: 0 auto;

    color: #5f6467;

    font-size: 18px;
    line-height: 1.75;
}


/* =========================================================
   LEFT LUXURY CONTACT PANEL
========================================================= */

.shfaq-aside {
    position: relative;

    padding: 36px 32px;

    overflow: hidden;

    border:
        1px solid rgba(232, 162, 137, 0.18);

    border-radius: 22px;

    background:
        linear-gradient(145deg,
            #1d2127 0%,
            #2b3038 100%);

    box-shadow:
        0 25px 60px rgba(29, 33, 39, 0.17);
}


/* TECHNICAL DECORATION */

.shfaq-aside::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 110px;
    height: 110px;

    border-top:
        1px solid rgba(232, 162, 137, 0.32);

    border-right:
        1px solid rgba(232, 162, 137, 0.32);

    border-radius: 0 22px 0 0;

    pointer-events: none;
}


.shfaq-aside::after {
    content: "";

    position: absolute;

    right: -60px;
    bottom: 70px;

    width: 180px;
    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(232, 162, 137, 0.30),
            transparent);

    transform: rotate(-35deg);

    pointer-events: none;
}


/* ASIDE LABEL */

.shfaq-aside-label {
    display: block;

    margin-bottom: 18px;

    color: #f2b6a1;

    font-size: 12px;
    font-weight: 850;

    letter-spacing: 0.9px;

    text-transform: uppercase;
}


/* ASIDE TITLE */

.shfaq-aside h3 {
    margin: 0 0 20px;

    color: #ffffff;

    font-size: clamp(29px, 2.6vw, 39px);
    font-weight: 900;

    line-height: 1.1;
    letter-spacing: -1px;
}


.shfaq-aside h3 span {
    display: block;

    color: #e8a289;
}


/* ASIDE TEXT */

.shfaq-aside-top>p {
    margin: 0;

    color: #bdc2c8;

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


/* DIVIDER */

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

    margin: 28px 0;

    background:
        linear-gradient(90deg,
            rgba(232, 162, 137, 0.45),
            rgba(255, 255, 255, 0.06));
}


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

.shfaq-contact-info {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 23px;
}


.shfaq-contact-icon {
    width: 48px;
    height: 48px;

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

    flex-shrink: 0;

    border-radius: 12px;

    background:
        rgba(232, 162, 137, 0.13);

    color: #f2b6a1;
}


.shfaq-contact-icon svg {
    width: 23px;
    height: 23px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.shfaq-contact-info>div {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.shfaq-contact-info small {
    margin-bottom: 5px;

    color: #a1a7ad;

    font-size: 11px;
    font-weight: 750;
}


.shfaq-contact-info a {
    color: #ffffff;

    font-size: clamp(20px, 2vw, 25px);
    font-weight: 900;

    text-decoration: none;

    transition: color 250ms ease;
}


.shfaq-contact-info a:hover {
    color: #f2b6a1;
}


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

.shfaq-contact-btn {
    min-height: 58px;

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

    gap: 15px;

    padding: 12px 19px;

    border-radius: 11px;

    background: #e8a289;

    color: #1d2127;

    text-decoration: none;

    font-size: 16px;
    font-weight: 850;

    transition:
        transform 250ms ease,
        background-color 250ms ease,
        box-shadow 250ms ease;
}


.shfaq-contact-btn:hover {
    color: #1d2127;

    background: #f2b6a1;

    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.18);
}


.shfaq-contact-btn span {
    font-size: 23px;

    transition: transform 250ms ease;
}


.shfaq-contact-btn:hover span {
    transform: translateX(5px);
}


/* LOCATION */

.shfaq-aside-bottom {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 25px;
    padding-top: 21px;

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

    color: #bdc2c8;

    font-size: 12px;
    font-weight: 750;
}


.shfaq-location-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #e8a289;

    box-shadow:
        0 0 0 4px rgba(232, 162, 137, 0.12);
}


/* =========================================================
   FAQ ACCORDION
========================================================= */

.shfaq-accordion {
    display: flex;
    flex-direction: column;

    gap: 13px;
}


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

.shfaq-item {
    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(29, 33, 39, 0.09);

    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 10px 28px rgba(29, 33, 39, 0.055);

    transition:
        border-color 250ms ease,
        box-shadow 250ms ease;
}


.shfaq-item:hover {
    border-color:
        rgba(232, 162, 137, 0.35);
}


.shfaq-item[open] {
    border-color:
        rgba(232, 162, 137, 0.42);

    box-shadow:
        0 18px 42px rgba(29, 33, 39, 0.09);
}


/* LEFT ACCENT WHEN OPEN */

.shfaq-item[open]::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 3px;

    background: #e8a289;
}


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

.shfaq-question {
    display: flex;
    align-items: center;

    gap: 18px;

    padding: 23px 25px;

    cursor: pointer;

    list-style: none;

    transition: background-color 250ms ease;
}


.shfaq-question::-webkit-details-marker {
    display: none;
}


.shfaq-question::marker {
    content: "";
}


.shfaq-question:hover {
    background:
        rgba(232, 162, 137, 0.035);
}


/* NUMBER */

.shfaq-number {
    width: 39px;
    height: 39px;

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

    flex-shrink: 0;

    border:
        1px solid rgba(232, 162, 137, 0.24);

    border-radius: 10px;

    background:
        rgba(232, 162, 137, 0.09);

    color: #d98c72;

    font-size: 12px;
    font-weight: 900;
}


.shfaq-item[open] .shfaq-number {
    background: #e8a289;

    color: #1d2127;
}


/* QUESTION HEADING */

.shfaq-question h3 {
    flex: 1;

    margin: 0;

    color: #1d2127;

    font-size: 19px;
    font-weight: 850;

    line-height: 1.45;

    letter-spacing: -0.25px;
}


/* =========================================================
   PLUS / MINUS TOGGLE
========================================================= */

.shfaq-toggle {
    position: relative;

    width: 34px;
    height: 34px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: #f5f6f8;

    transition:
        background-color 250ms ease,
        transform 250ms ease;
}


.shfaq-toggle::before,
.shfaq-toggle::after {
    content: "";

    position: absolute;

    width: 12px;
    height: 2px;

    border-radius: 2px;

    background: #1d2127;

    transition:
        transform 250ms ease,
        background-color 250ms ease;
}


.shfaq-toggle::after {
    transform: rotate(90deg);
}


.shfaq-item[open] .shfaq-toggle {
    background: #1d2127;
}


.shfaq-item[open] .shfaq-toggle::before,
.shfaq-item[open] .shfaq-toggle::after {
    background: #f2b6a1;
}


.shfaq-item[open] .shfaq-toggle::after {
    transform: rotate(0deg);
}


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

.shfaq-answer {
    padding:
        0 25px 25px 82px;
}


.shfaq-answer p {
    margin: 0;

    padding-top: 17px;

    border-top:
        1px solid rgba(29, 33, 39, 0.07);

    color: #5f6467;

    font-size: 17px;

    line-height: 1.75;
}


/* =========================================================
   VIEW ALL FAQS
========================================================= */

.shfaq-more {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 22px;

    padding: 21px 24px;

    border:
        1px solid rgba(29, 33, 39, 0.08);

    border-radius: 14px;

    background:
        linear-gradient(110deg,
            #ffffff,
            #f5f6f8);
}


.shfaq-more>div {
    display: flex;
    flex-direction: column;
}


.shfaq-more strong {
    margin-bottom: 5px;

    color: #1d2127;

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


.shfaq-more>div>span {
    color: #7e8388;

    font-size: 14px;
    line-height: 1.5;
}


.shfaq-more>a {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    color: #d98c72;

    text-decoration: none;

    font-size: 15px;
    font-weight: 850;

    transition: color 250ms ease;
}


.shfaq-more>a:hover {
    color: #1d2127;
}


.shfaq-more>a span {
    font-size: 21px;

    transition: transform 250ms ease;
}


.shfaq-more>a:hover span {
    transform: translateX(5px);
}


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

.shfaq-question:focus-visible,
.shfaq-contact-btn:focus-visible,
.shfaq-contact-info a:focus-visible,
.shfaq-more a:focus-visible {
    outline: 3px solid #d98c72;
    outline-offset: 4px;
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .shfaq-aside {
        padding: 30px 25px;
    }


    .shfaq-aside h3 {
        font-size: 31px;
    }


    .shfaq-question h3 {
        font-size: 18px;
    }

}


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

@media (max-width: 991.98px) {

    .shfaq-section {
        padding: 80px 0;
    }


    .shfaq-header {
        margin-bottom: 40px;
    }


    .shfaq-aside {
        max-width: 100%;

        padding: 35px;
    }


    .shfaq-aside h3 {
        max-width: 550px;
    }

}


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

@media (max-width: 767.98px) {

    .shfaq-section {
        padding: 65px 0;
    }


    .shfaq-title {
        font-size: clamp(33px, 9vw, 42px);
    }


    .shfaq-header-text {
        font-size: 16px;
    }


    .shfaq-aside {
        padding: 27px 23px;

        border-radius: 18px;
    }


    .shfaq-aside h3 {
        font-size: clamp(28px, 7vw, 35px);
    }


    .shfaq-question {
        gap: 12px;

        padding: 19px 17px;
    }


    .shfaq-number {
        width: 34px;
        height: 34px;

        font-size: 10px;
    }


    .shfaq-question h3 {
        font-size: 16px;

        line-height: 1.45;
    }


    .shfaq-toggle {
        width: 30px;
        height: 30px;
    }


    .shfaq-answer {
        padding:
            0 18px 20px 63px;
    }


    .shfaq-answer p {
        font-size: 15px;

        line-height: 1.7;
    }


    .shfaq-more {
        flex-direction: column;
        align-items: flex-start;

        padding: 20px;
    }

}


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

@media (max-width: 575.98px) {

    .shfaq-eyebrow {
        font-size: 11px;
    }


    .shfaq-title {
        font-size: clamp(31px, 9vw, 38px);
    }


    .shfaq-question {
        gap: 10px;

        padding: 17px 14px;
    }


    .shfaq-question h3 {
        font-size: 15px;
    }


    .shfaq-number {
        width: 30px;
        height: 30px;
    }


    .shfaq-toggle {
        width: 28px;
        height: 28px;
    }


    .shfaq-answer {
        padding:
            0 15px 19px 54px;
    }


    .shfaq-answer p {
        font-size: 15px;
    }


    .shfaq-contact-info a {
        font-size: 21px;
    }

}


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

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

    .shfaq-item,
    .shfaq-question,
    .shfaq-number,
    .shfaq-toggle,
    .shfaq-toggle::before,
    .shfaq-toggle::after,
    .shfaq-contact-btn,
    .shfaq-contact-btn span,
    .shfaq-more a,
    .shfaq-more a span {
        transition: none !important;
    }

}

/* =========================================================
   FAQ ACCESSIBILITY + REDUCED MOTION
========================================================= */

/* Visible keyboard focus for links and FAQ questions */
.shfaq-section a:focus-visible,
.shfaq-section .shfaq-question:focus-visible {
    outline: 3px solid var(--color-accent, #e8a289);
    outline-offset: 4px;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

    .shfaq-section *,
    .shfaq-section *::before,
    .shfaq-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}




/* _________________________________________________________________________________________________ */

/* =========================================================
   SERVICE LOCATIONS & GOOGLE MAP
   LUXURY LIGHT / DARK DESIGN
========================================================= */

.shloc-section {
    position: relative;
    overflow: hidden;
    padding: 105px 0;

    background:
        linear-gradient(135deg,
            #fdfdfe 0%,
            #f5f6f8 55%,
            #eceef1 100%);
}

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

.shloc-container {
    position: relative;
    z-index: 2;
    max-width: 1380px;
}

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

.shloc-header {
    margin-bottom: 45px;
}

.shloc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;

    color: #d98c72;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.shloc-eyebrow>span {
    width: 35px;
    height: 2px;
    flex-shrink: 0;
    border-radius: 50px;
    background: #e8a289;
}

.shloc-title {
    margin: 0;
    color: #1d2127;
    font-size: clamp(42px, 4.5vw, 62px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -1.8px;
}

.shloc-title span {
    display: block;
    color: #d98c72;
}

.shloc-header-text {
    max-width: 450px;
    margin: 0 0 5px auto;
    padding-left: 23px;
    border-left: 2px solid #e8a289;

    color: #5f6467;
    font-size: 17px;
    line-height: 1.75;
}

/* =========================================================
   MAIN MAP & INFO
========================================================= */

.shloc-main {
    overflow: hidden;
    border: 1px solid rgba(29, 33, 39, 0.08);
    border-radius: 26px;
    background: #1d2127;
    box-shadow: 0 28px 70px rgba(29, 33, 39, 0.14);
}

/* =========================================================
   GOOGLE MAP
========================================================= */

.shloc-map-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 610px;
    overflow: hidden;
    background: #eceef1;
}

.shloc-map {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 610px;
    border: 0;
}

.shloc-map-label {
    position: absolute;
    z-index: 2;
    left: 22px;
    bottom: 22px;

    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 44px);
    padding: 13px 17px;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 11px;
    background: rgba(29, 33, 39, 0.94);

    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;

    box-shadow: 0 12px 30px rgba(29, 33, 39, 0.20);
    pointer-events: none;
}

.shloc-map-label-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #e8a289;
    box-shadow: 0 0 0 4px rgba(232, 162, 137, 0.15);
}

/* =========================================================
   DARK CONTACT PANEL
========================================================= */

.shloc-info {
    position: relative;
    height: 100%;
    min-height: 610px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 45px 40px;

    background:
        linear-gradient(145deg,
            #1d2127 0%,
            #2d323a 100%);
}

.shloc-info::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
    border-top: 1px solid rgba(232, 162, 137, 0.30);
    border-right: 1px solid rgba(232, 162, 137, 0.30);
    pointer-events: none;
}

.shloc-info-kicker {
    display: block;
    margin-bottom: 16px;

    color: #f2b6a1;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.shloc-info h3 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(30px, 2.8vw, 42px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -1px;
}

.shloc-info h3 span {
    display: block;
    color: #e8a289;
}

.shloc-info-top>p {
    margin: 0 0 28px;
    color: #bdc2c8;
    font-size: 16px;
    line-height: 1.75;
}

/* =========================================================
   ADDRESS & PHONE
========================================================= */

.shloc-address-block,
.shloc-phone-block {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.shloc-info-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;

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

    border: 1px solid rgba(232, 162, 137, 0.20);
    border-radius: 11px;
    background: rgba(232, 162, 137, 0.11);
    color: #f2b6a1;
}

.shloc-info-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.shloc-address-block>div,
.shloc-phone-block>div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.shloc-address-block small,
.shloc-phone-block small {
    margin-bottom: 6px;
    color: #a1a7ad;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.shloc-address-block address {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.65;
}

.shloc-phone-block a {
    color: #ffffff;
    font-size: clamp(21px, 2vw, 26px);
    font-weight: 900;
    text-decoration: none;
    transition: color 250ms ease;
}

.shloc-phone-block a:hover {
    color: #f2b6a1;
}

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

.shloc-info-actions {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 15px;
}

.shloc-call-btn,
.shloc-directions-btn {
    min-height: 57px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 18px;

    border-radius: 10px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 850;

    transition:
        transform 250ms ease,
        background-color 250ms ease,
        border-color 250ms ease;
}

.shloc-call-btn {
    background: #e8a289;
    color: #1d2127;
}

.shloc-call-btn:hover {
    background: #f2b6a1;
    color: #1d2127;
    transform: translateY(-3px);
}

.shloc-directions-btn {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.shloc-directions-btn:hover {
    border-color: rgba(232, 162, 137, 0.45);
    background: rgba(232, 162, 137, 0.10);
    color: #ffffff;
    transform: translateY(-3px);
}

.shloc-call-btn>span,
.shloc-directions-btn>span {
    font-size: 22px;
    line-height: 1;
    transition: transform 250ms ease;
}

.shloc-call-btn:hover>span,
.shloc-directions-btn:hover>span {
    transform: translateX(4px);
}

.shloc-info-footer {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);

    color: #a1a7ad;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.shloc-info-footer>span {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #e8a289;
}

/* =========================================================
   SERVICE AREA SECTION
========================================================= */

.shloc-areas {
    margin-top: 28px;
    padding: 34px;

    border: 1px solid rgba(29, 33, 39, 0.08);
    border-radius: 22px;
    background: #ffffff;

    box-shadow: 0 15px 40px rgba(29, 33, 39, 0.06);
}

.shloc-areas-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 28px;
}

.shloc-areas-kicker {
    display: block;
    margin-bottom: 10px;
    color: #d98c72;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.shloc-areas-header h3 {
    margin: 0;
    color: #1d2127;
    font-size: clamp(27px, 2.7vw, 38px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.8px;
}

.shloc-areas-header>p {
    max-width: 330px;
    margin: 0;
    color: #7e8388;
    font-size: 15px;
    line-height: 1.65;
}

/* =========================================================
   CITY GRID
========================================================= */

.shloc-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.shloc-grid li {
    min-width: 0;
}

.shloc-grid a {
    position: relative;
    min-height: 75px;

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

    padding: 17px 18px;

    border: 1px solid rgba(29, 33, 39, 0.09);
    border-radius: 12px;
    background: #f5f6f8;

    color: #1d2127;
    text-decoration: none;

    transition:
        transform 250ms ease,
        border-color 250ms ease,
        background-color 250ms ease,
        box-shadow 250ms ease;
}

.shloc-grid a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    border-radius: 12px 0 0 0;
    background: #e8a289;
    transition: width 300ms ease;
}

.shloc-grid a:hover {
    transform: translateY(-4px);
    border-color: rgba(232, 162, 137, 0.42);
    background: #ffffff;
    color: #1d2127;
    box-shadow: 0 14px 30px rgba(29, 33, 39, 0.09);
}

.shloc-grid a:hover::before {
    width: 100%;
}

.shloc-grid a>span:first-child {
    min-width: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
}

.shloc-grid a>span:last-child {
    flex-shrink: 0;
    color: #d98c72;
    font-size: 20px;
    line-height: 1;
    transition: transform 250ms ease;
}

.shloc-grid a:hover>span:last-child {
    transform: translate(3px, -3px);
}

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

.shloc-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

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

    border-radius: 15px;
    background:
        linear-gradient(110deg,
            #1d2127 0%,
            #30353d 100%);

    box-shadow: 0 17px 40px rgba(29, 33, 39, 0.16);
}

.shloc-bottom>div {
    display: flex;
    flex-direction: column;
}

.shloc-bottom>div>span {
    margin-bottom: 6px;
    color: #e8a289;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.shloc-bottom strong {
    color: #ffffff;
    font-size: clamp(20px, 2vw, 27px);
    font-weight: 850;
    line-height: 1.3;
}

.shloc-bottom>a {
    min-height: 57px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    flex-shrink: 0;
    padding: 12px 22px;

    border-radius: 10px;
    background: #e8a289;
    color: #1d2127;
    text-decoration: none;
    font-size: 15px;
    font-weight: 850;

    transition:
        transform 250ms ease,
        background-color 250ms ease;
}

.shloc-bottom>a:hover {
    background: #f2b6a1;
    color: #1d2127;
    transform: translateY(-3px);
}

.shloc-bottom>a span {
    font-size: 21px;
}

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

.shloc-section a:focus-visible {
    outline: 3px solid #d98c72;
    outline-offset: 4px;
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .shloc-info {
        padding: 38px 30px;
    }

    .shloc-info h3 {
        font-size: 34px;
    }

    .shloc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

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

@media (max-width: 991.98px) {

    .shloc-section {
        padding: 80px 0;
    }

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

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

    .shloc-header-text {
        max-width: 700px;
        margin: 0 auto;
        padding: 18px 0 0;
        border-left: 0;
        border-top: 2px solid #e8a289;
    }

    .shloc-main {
        border-radius: 22px;
    }

    .shloc-map-wrap,
    .shloc-map {
        min-height: 500px;
    }

    .shloc-info {
        min-height: auto;
        padding: 45px 35px;
    }

    .shloc-areas-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .shloc-areas-header>p {
        max-width: 650px;
    }

}

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

@media (max-width: 767.98px) {

    .shloc-section {
        padding: 65px 0;
    }

    .shloc-title {
        font-size: clamp(33px, 9vw, 42px);
    }

    .shloc-header-text {
        font-size: 16px;
    }

    .shloc-map-wrap,
    .shloc-map {
        min-height: 420px;
    }

    .shloc-map-label {
        left: 14px;
        bottom: 14px;
        max-width: calc(100% - 28px);
        padding: 11px 13px;
        font-size: 11px;
    }

    .shloc-info {
        padding: 38px 23px;
    }

    .shloc-info h3 {
        font-size: clamp(30px, 8vw, 38px);
    }

    .shloc-areas {
        padding: 25px 20px;
        border-radius: 18px;
    }

    .shloc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .shloc-grid a {
        min-height: 70px;
        padding: 14px;
    }

    .shloc-grid a>span:first-child {
        font-size: 15px;
    }

    .shloc-bottom {
        flex-direction: column;
        text-align: center;
        padding: 23px 20px;
    }

    .shloc-bottom>a {
        width: 100%;
        max-width: 330px;
    }

}

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

@media (max-width: 399.98px) {

    .shloc-grid {
        grid-template-columns: 1fr;
    }

    .shloc-info {
        padding: 32px 19px;
    }

    .shloc-address-block address {
        font-size: 15px;
    }

    .shloc-phone-block a {
        font-size: 21px;
    }

}

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

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

    .shloc-section a,
    .shloc-section a::before,
    .shloc-section a>span {
        transition: none !important;
    }

}

/* =========================================================
   SERVICE LOCATIONS
   ACCESSIBILITY + REDUCED MOTION
========================================================= */

.shloc-section a:focus-visible {
    outline: 3px solid var(--color-accent, #e8a289);
    outline-offset: 4px;
}

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

    .shloc-section *,
    .shloc-section *::before,
    .shloc-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}

/* __________________________________________________________________________________________________________ */
/* =========================================================
   CONTACT + BOOKING FORM + FOOTER
   GARAGE DOORS REPAIR SOUTH HOUSTON
   LUXURY CHARCOAL / CORAL DESIGN
========================================================= */

.shcontact-section,
.shfooter {
    --shc-dark: #1d2127;
    --shc-dark-soft: #3a3f4a;
    --shc-dark-light: #5f6467;

    --shc-gray-dark: #7e8388;
    --shc-gray: #a1a7ad;
    --shc-gray-soft: #bdc2c8;
    --shc-gray-light: #d4d7dd;

    --shc-section-bg: #eceef1;
    --shc-light: #f5f6f8;
    --shc-off-white: #fdfdfe;
    --shc-white: #ffffff;

    --shc-accent: #e8a289;
    --shc-accent-dark: #d98c72;
    --shc-accent-light: #f2b6a1;

    --shc-transition: 250ms ease;
}

.shcontact-section *,
.shcontact-section *::before,
.shcontact-section *::after,
.shfooter *,
.shfooter *::before,
.shfooter *::after {
    box-sizing: border-box;
}


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

.shcontact-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0;

    background:
        linear-gradient(135deg,
            #fdfdfe 0%,
            #f5f6f8 54%,
            #eceef1 100%);
}


/* TECHNICAL BACKGROUND DETAILS */

.shcontact-section::before {
    content: "";

    position: absolute;

    top: -140px;
    right: -170px;

    width: 420px;
    height: 320px;

    border-top:
        1px solid rgba(232, 162, 137, 0.23);

    border-left:
        1px solid rgba(232, 162, 137, 0.23);

    transform: rotate(35deg);

    pointer-events: none;
}


.shcontact-section::after {
    content: "";

    position: absolute;

    left: -120px;
    bottom: 12%;

    width: 360px;
    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(232, 162, 137, 0.32),
            transparent);

    pointer-events: none;
}


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

.shcontact-container {
    position: relative;
    z-index: 2;

    max-width: 1380px;
}


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

.shcontact-header {
    max-width: 1000px;

    margin: 0 auto 52px;

    text-align: center;
}


.shcontact-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    margin-bottom: 18px;

    color: #d98c72;

    font-size: 13px;
    font-weight: 850;

    letter-spacing: 1.1px;

    text-transform: uppercase;
}


.shcontact-eyebrow>span {
    width: 35px;
    height: 2px;

    flex-shrink: 0;

    border-radius: 50px;

    background: #e8a289;
}


.shcontact-title {
    margin: 0 0 22px;

    color: #1d2127;

    font-size: clamp(38px, 4.4vw, 60px);
    font-weight: 900;

    line-height: 1.08;
    letter-spacing: -1.8px;

    text-wrap: balance;
}


.shcontact-header-text {
    max-width: 700px;

    margin: 0 auto;

    color: #5f6467;

    font-size: 18px;
    line-height: 1.75;
}


/* =========================================================
   LEFT CONTACT PANEL
========================================================= */

.shcontact-info {
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 38px 34px;

    overflow: hidden;

    border:
        1px solid rgba(232, 162, 137, 0.19);

    border-radius: 24px;

    background:
        linear-gradient(145deg,
            #1d2127 0%,
            #292e36 55%,
            #3a3f4a 100%);

    box-shadow:
        0 25px 65px rgba(29, 33, 39, 0.17);
}


/* CORNER DETAIL */

.shcontact-info::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 110px;
    height: 110px;

    border-top:
        1px solid rgba(232, 162, 137, 0.32);

    border-right:
        1px solid rgba(232, 162, 137, 0.32);

    border-radius: 0 24px 0 0;

    pointer-events: none;
}


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

.shcontact-info-top {
    position: relative;
    z-index: 1;

    margin-bottom: 24px;
}


.shcontact-info-kicker {
    display: block;

    margin-bottom: 17px;

    color: #f2b6a1;

    font-size: 12px;
    font-weight: 850;

    letter-spacing: 0.9px;

    text-transform: uppercase;
}


.shcontact-info-top h3 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size: clamp(31px, 3vw, 43px);
    font-weight: 900;

    line-height: 1.08;
    letter-spacing: -1.1px;
}


.shcontact-info-top h3 span {
    display: block;

    color: #e8a289;
}


.shcontact-info-top p {
    margin: 0;

    color: #bdc2c8;

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


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

.shcontact-detail {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: flex-start;

    gap: 15px;

    padding: 20px 0;

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


.shcontact-detail-icon {
    width: 47px;
    height: 47px;

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

    flex: 0 0 auto;

    border:
        1px solid rgba(232, 162, 137, 0.22);

    border-radius: 12px;

    background:
        rgba(232, 162, 137, 0.11);

    color: #f2b6a1;

    font-size: 21px;
}


.shcontact-detail-copy {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.shcontact-detail-copy>small {
    display: block;

    margin-bottom: 7px;

    color: #a1a7ad;

    font-size: 11px;
    font-weight: 850;

    letter-spacing: 0.6px;

    text-transform: uppercase;
}


.shcontact-detail-copy>a {
    color: #ffffff;

    font-size: 17px;
    font-weight: 750;

    line-height: 1.6;

    text-decoration: none;

    overflow-wrap: anywhere;

    transition: color 250ms ease;
}


.shcontact-detail-copy>a:hover {
    color: #f2b6a1;
}


/* PHONE */

.shcontact-detail-copy>a[href^="tel:"] {
    font-size: 25px;
    font-weight: 900;

    line-height: 1.3;
}


/* EMAIL OBFUSCATION */

.shcontact-detail-copy .obfuscatedEmail.contact-text.mail {
    display: inline-block;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.6;

    overflow-wrap: anywhere;
}


.shcontact-detail-copy .obfuscatedEmail.contact-text.mail a {
    color: #ffffff;

    text-decoration: none;

    overflow-wrap: anywhere;

    transition: color 250ms ease;
}


.shcontact-detail-copy .obfuscatedEmail.contact-text.mail a:hover {
    color: #f2b6a1;
}


/* ADDRESS */

.shcontact-detail-copy address {
    margin: 0;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
    font-style: normal;

    line-height: 1.7;
}


/* GOOGLE MAP LINK */

.shcontact-detail-copy>.shcontact-map-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    align-self: flex-start;

    margin-top: 10px;

    color: #f2b6a1;

    font-size: 13px;
    font-weight: 850;

    text-decoration: none;

    transition: color 250ms ease;
}


.shcontact-map-link:hover {
    color: #ffffff;
}


.shcontact-map-link i {
    font-size: 15px;

    transition: transform 250ms ease;
}


.shcontact-map-link:hover i {
    transform: translate(3px, -3px);
}


/* =========================================================
   WORKING HOURS
========================================================= */

.shcontact-hours {
    position: relative;
    z-index: 1;

    margin-top: 8px;

    padding: 20px;

    border:
        1px solid rgba(232, 162, 137, 0.22);

    border-radius: 15px;

    background:
        rgba(232, 162, 137, 0.08);
}


.shcontact-hours-heading {
    display: flex;
    align-items: center;

    gap: 13px;
}


.shcontact-hours-icon {
    width: 43px;
    height: 43px;

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

    flex: 0 0 auto;

    border-radius: 10px;

    background: #e8a289;

    color: #1d2127;

    font-size: 20px;
}


.shcontact-hours-heading>div {
    display: flex;
    flex-direction: column;
}


.shcontact-hours-heading small {
    margin-bottom: 5px;

    color: #a1a7ad;

    font-size: 10px;
    font-weight: 850;

    letter-spacing: 0.6px;

    text-transform: uppercase;
}


.shcontact-hours-heading strong {
    color: #ffffff;

    font-size: 20px;
    font-weight: 900;

    line-height: 1.3;
}


/* MOBILE SERVICE */

.shcontact-mobile-service {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 18px;
    padding-top: 17px;

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


.shcontact-mobile-service>span {
    color: #f2b6a1;

    font-size: 20px;
}


.shcontact-mobile-service strong {
    color: #d4d7dd;

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


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

.shcontact-call-btn {
    position: relative;
    z-index: 1;

    min-height: 75px;

    display: flex;
    align-items: center;

    gap: 13px;

    margin-top: 25px;

    padding: 12px 17px;

    overflow: hidden;

    border-radius: 13px;

    background: #e8a289;

    color: #1d2127;

    text-decoration: none;

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

    transition:
        transform 250ms ease,
        background-color 250ms ease,
        box-shadow 250ms ease;
}


.shcontact-call-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -75%;

    width: 35%;
    height: 100%;

    transform: skewX(-18deg);

    background:
        linear-gradient(110deg,
            transparent,
            rgba(255, 255, 255, 0.45),
            transparent);

    animation:
        shcontactCallSweep 5s ease-in-out infinite;

    pointer-events: none;
}


.shcontact-call-btn>* {
    position: relative;
    z-index: 1;
}


.shcontact-call-btn:hover {
    color: #1d2127;

    background: #f2b6a1;

    transform: translateY(-4px);

    box-shadow:
        0 21px 45px rgba(0, 0, 0, 0.25);
}


.shcontact-call-btn-icon {
    width: 47px;
    height: 47px;

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

    flex: 0 0 auto;

    border-radius: 10px;

    background: #1d2127;

    color: #f2b6a1;

    font-size: 20px;
}


.shcontact-call-btn>span:nth-child(2) {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.shcontact-call-btn small {
    margin-bottom: 5px;

    color: rgba(29, 33, 39, 0.70);

    font-size: 10px;
    font-weight: 850;

    letter-spacing: 0.3px;

    text-transform: uppercase;
}


.shcontact-call-btn strong {
    color: #1d2127;

    font-size: 21px;
    font-weight: 900;

    line-height: 1.2;
}


.shcontact-call-arrow {
    margin-left: auto;

    color: #1d2127;

    font-size: 21px;

    transition: transform 250ms ease;
}


.shcontact-call-btn:hover .shcontact-call-arrow {
    transform: translate(3px, -3px);
}


/* =========================================================
   RIGHT FORM PANEL
========================================================= */

.shcontact-form-panel {
    position: relative;

    padding: 42px 40px;

    border:
        1px solid rgba(29, 33, 39, 0.08);

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 22px 60px rgba(29, 33, 39, 0.09);
}


/* TOP ACCENT */

.shcontact-form-panel::before {
    content: "";

    position: absolute;

    top: 0;
    left: 40px;

    width: 85px;
    height: 3px;

    border-radius: 0 0 5px 5px;

    background: #e8a289;
}


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

.shcontact-form-heading {
    margin-bottom: 32px;
}


.shcontact-form-kicker {
    display: block;

    margin-bottom: 12px;

    color: #d98c72;

    font-size: 12px;
    font-weight: 850;

    letter-spacing: 0.9px;

    text-transform: uppercase;
}


.shcontact-form-heading h3 {
    margin: 0 0 13px;

    color: #1d2127;

    font-size: clamp(30px, 2.8vw, 41px);
    font-weight: 900;

    line-height: 1.1;
    letter-spacing: -1px;
}


.shcontact-form-heading p {
    max-width: 590px;

    margin: 0;

    color: #5f6467;

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


/* =========================================================
   BOOKING FORM
   SCOPED TO CONTACT SECTION
========================================================= */

.shcontact-section .booking-form {
    width: 100%;
}


.shcontact-section .booking-form fieldset {
    min-width: 0;
}


.shcontact-section .booking-form .row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}


/* =========================================================
   FLOATING FIELD WRAPPER
========================================================= */

.shcontact-section .booking-field {
    position: relative;

    width: 100%;
}


/* =========================================================
   INPUTS / TEXTAREA / SELECTS
========================================================= */

.shcontact-section .booking-field__control {
    width: 100%;

    min-height: 64px;

    padding: 22px 48px 10px 17px;

    border:
        1px solid #d4d7dd;

    border-radius: 11px;

    background: #f5f6f8;

    color: #1d2127;

    font-family: inherit;
    font-size: 16px;
    font-weight: 600;

    line-height: 1.45;

    box-shadow: none;

    transition:
        border-color 250ms ease,
        background-color 250ms ease,
        box-shadow 250ms ease;
}


.shcontact-section .booking-field__control:hover {
    border-color: #bdc2c8;

    background: #fdfdfe;
}


.shcontact-section .booking-field__control:focus {
    border-color: #d98c72;

    background: #ffffff;

    color: #1d2127;

    outline: 0;

    box-shadow:
        0 0 0 4px rgba(232, 162, 137, 0.14);
}


/* PLACEHOLDERS */

.shcontact-section .booking-field__control::placeholder {
    color: transparent;
}


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

.shcontact-section .booking-field>label {
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 17px;

    max-width: calc(100% - 66px);

    margin: 0;

    color: #7e8388;

    font-size: 15px;
    font-weight: 650;

    line-height: 1.3;

    transform: translateY(-50%);

    transform-origin: left top;

    pointer-events: none;

    transition:
        top 200ms ease,
        transform 200ms ease,
        font-size 200ms ease,
        color 200ms ease;
}


/* LABEL FLOATS ON FOCUS OR WHEN FIELD HAS VALUE */

.shcontact-section .booking-field:focus-within>label,

.shcontact-section .booking-field>input:not(:placeholder-shown)+label,

.shcontact-section .booking-field>textarea:not(:placeholder-shown)+label,

.shcontact-section .booking-field>input:-webkit-autofill+label {
    top: 11px;

    color: #d98c72;

    font-size: 11px;
    font-weight: 850;

    transform: none;
}


/* =========================================================
   FIELD ICON
========================================================= */

.shcontact-section .booking-field__icon {
    position: absolute;

    z-index: 2;

    top: 50%;
    right: 18px;

    color: #a1a7ad;

    font-size: 18px;

    transform: translateY(-50%);

    pointer-events: none;

    transition: color 250ms ease;
}


.shcontact-section .booking-field:focus-within .booking-field__icon {
    color: #d98c72;
}


/* =========================================================
   TEXTAREA
========================================================= */

.shcontact-section .booking-field--textarea .booking-field__control {
    min-height: 155px;

    padding-top: 29px;
    padding-bottom: 16px;

    resize: vertical;
}


.shcontact-section .booking-field--textarea>label {
    top: 23px;

    transform: none;
}


.shcontact-section .booking-field--textarea:focus-within>label,

.shcontact-section .booking-field--textarea>textarea:not(:placeholder-shown)+label {
    top: 10px;

    color: #d98c72;

    font-size: 11px;
    font-weight: 850;
}


.shcontact-section .booking-field--textarea .booking-field__icon {
    top: 22px;

    transform: none;
}


/* =========================================================
   SELECT FIELDS
========================================================= */

.shcontact-section .booking-field--select .booking-field__control {
    min-height: 64px;

    padding:
        25px 34px 9px 17px;

    background-color: #f5f6f8;

    color: #1d2127;

    cursor: pointer;
}


.shcontact-section .booking-field--select>label {
    top: 10px;

    color: #7e8388;

    font-size: 11px;
    font-weight: 850;

    transform: none;
}


.shcontact-section .booking-field--select:focus-within>label {
    color: #d98c72;
}


/* SELECT ARROW */

.shcontact-section .booking-field--select .form-select {
    background-position:
        right 15px center;

    background-size:
        13px 10px;
}


/* =========================================================
   NUMBER INPUT
========================================================= */

.shcontact-section .booking-field input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}


.shcontact-section .booking-field input[type="number"]::-webkit-inner-spin-button,
.shcontact-section .booking-field input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;

    margin: 0;
}


/* =========================================================
   VALIDATION
========================================================= */

.shcontact-section .booking-field__control:focus:invalid {
    border-color: #d98c72;
}


.shcontact-section .booking-field__control:focus-visible {
    outline: 0;

    box-shadow:
        0 0 0 4px rgba(232, 162, 137, 0.18);
}


/* =========================================================
   HIDDEN SUBJECT / HONEYPOT
========================================================= */

.shcontact-section .booking-form__subject {
    display: none !important;
}


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

.shcontact-section .booking-form__submit {
    position: relative;

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

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

    gap: 13px;

    padding: 13px 22px;

    overflow: hidden;

    border: 1px solid #1d2127;
    border-radius: 12px;

    background: #1d2127;

    color: #ffffff;

    font-family: inherit;
    font-size: 17px;
    font-weight: 850;

    line-height: 1.3;

    cursor: pointer;

    box-shadow:
        0 14px 32px rgba(29, 33, 39, 0.17);

    transition:
        transform 250ms ease,
        background-color 250ms ease,
        border-color 250ms ease,
        box-shadow 250ms ease;
}


.shcontact-section .booking-form__submit::before {
    content: "";

    position: absolute;

    top: 0;
    left: -75%;

    width: 35%;
    height: 100%;

    transform: skewX(-18deg);

    background:
        linear-gradient(110deg,
            transparent,
            rgba(255, 255, 255, 0.18),
            transparent);

    animation:
        shcontactCallSweep 5s ease-in-out infinite;

    pointer-events: none;
}


.shcontact-section .booking-form__submit>* {
    position: relative;
    z-index: 1;
}


.shcontact-section .booking-form__submit:hover {
    border-color: #3a3f4a;

    background: #3a3f4a;

    transform: translateY(-3px);

    box-shadow:
        0 20px 42px rgba(29, 33, 39, 0.24);
}


.shcontact-section .booking-form__submit:active {
    transform: translateY(0);
}


.shcontact-section .booking-form__submit:focus-visible {
    outline: 3px solid #d98c72;
    outline-offset: 4px;
}


/* SUBMIT ICON */

.shcontact-section .booking-form__submit-icon {
    width: 43px;
    height: 43px;

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

    flex: 0 0 auto;

    border-radius: 10px;

    background: #e8a289;

    color: #1d2127;

    font-size: 20px;
}


/* SUBMIT ARROW */

.shcontact-section .booking-form__submit-arrow {
    margin-left: auto;

    color: #e8a289;

    font-size: 22px;

    transition: transform 250ms ease;
}


.shcontact-section .booking-form__submit:hover .booking-form__submit-arrow {
    transform: translateX(5px);
}


/* =========================================================
   FORM NOTE
========================================================= */

.shcontact-section .booking-form__note {
    margin: 20px 0 0;

    padding: 15px 17px;

    border-left: 3px solid #e8a289;

    border-radius: 0 9px 9px 0;

    background:
        rgba(232, 162, 137, 0.07);

    color: #7e8388;

    font-size: 13px;
    line-height: 1.65;
}


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

@keyframes shcontactCallSweep {

    0%,
    52% {
        left: -75%;
    }

    82%,
    100% {
        left: 145%;
    }

}


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

.shfooter {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(145deg,
            #1d2127 0%,
            #252a32 55%,
            #30353d 100%);

    color: #d4d7dd;
}


/* TECHNICAL BACKGROUND */

.shfooter::before {
    content: "";

    position: absolute;

    top: -150px;
    right: -180px;

    width: 420px;
    height: 340px;

    border-top:
        1px solid rgba(232, 162, 137, 0.13);

    border-left:
        1px solid rgba(232, 162, 137, 0.13);

    transform: rotate(35deg);

    pointer-events: none;
}



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

.shfooter-container {
    position: relative;
    z-index: 2;

    max-width: 1380px;
}


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

.shfooter-main {
    max-width: 1100px;

    margin: 0 auto;

    padding: 85px 0 55px;
}


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

.shfooter-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;

    gap: 5px;

    margin-bottom: 25px;

    color: #ffffff;

    text-decoration: none;

    transition: opacity 250ms ease;
}


.shfooter-brand:hover {
    color: #ffffff;

    opacity: 0.88;
}


.shfooter-brand>span {
    color: #ffffff;

    font-size: clamp(25px, 3.3vw, 42px);
    font-weight: 900;

    line-height: 1.12;
    letter-spacing: -1px;
}


.shfooter-brand>strong {
    color: #e8a289;

    font-size: clamp(28px, 3.6vw, 47px);
    font-weight: 900;

    line-height: 1.08;
    letter-spacing: -1.2px;
}


/* =========================================================
   FOOTER DESCRIPTION
========================================================= */

.shfooter-description {
    max-width: 900px;

    margin: 0 auto 32px;

    color: #bdc2c8;

    font-size: 17px;
    line-height: 1.85;

    text-align: center;
}


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

.shfooter-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 16px 28px;

    margin-bottom: 25px;
}


.shfooter-contact>a,
.shfooter-email {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    min-width: 0;

    color: #d4d7dd;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.6;

    text-decoration: none;

    transition: color 250ms ease;
}


.shfooter-contact>a:hover {
    color: #f2b6a1;
}


.shfooter-contact i,
.shfooter-email>i {
    flex-shrink: 0;

    color: #e8a289;

    font-size: 17px;
}


.shfooter-contact>a span,
.shfooter-email>span {
    overflow-wrap: anywhere;
}


/* FOOTER EMAIL */

.shfooter-email .obfuscatedEmail.contact-text.mail {
    color: #d4d7dd;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.6;
}


.shfooter-email .obfuscatedEmail.contact-text.mail a {
    color: #d4d7dd;

    text-decoration: none;

    transition: color 250ms ease;
}


.shfooter-email .obfuscatedEmail.contact-text.mail a:hover {
    color: #f2b6a1;
}


/* =========================================================
   FOOTER HOURS
========================================================= */

.shfooter-hours {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px 22px;

    margin-bottom: 35px;
}


.shfooter-hours>span:not(.shfooter-hours-divider) {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    color: #a1a7ad;

    font-size: 13px;
    font-weight: 750;

    line-height: 1.5;
}


.shfooter-hours i {
    color: #e8a289;

    font-size: 15px;
}


.shfooter-hours-divider {
    width: 1px;
    height: 18px;

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


/* =========================================================
   SOCIAL MEDIA
========================================================= */

.shfooter-social {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 35px;
}


.shfooter-social a {
    width: 49px;
    height: 49px;

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

    flex: 0 0 auto;

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

    border-radius: 12px;

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

    color: #d4d7dd;

    text-decoration: none;

    font-size: 19px;

    transition:
        transform 250ms ease,
        border-color 250ms ease,
        background-color 250ms ease,
        color 250ms ease,
        box-shadow 250ms ease;
}


.shfooter-social a:hover {
    transform: translateY(-5px);

    border-color:
        rgba(232, 162, 137, 0.55);

    background: #e8a289;

    color: #1d2127;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.18);
}


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

.shfooter-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px 27px;

    padding-top: 28px;

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


.shfooter-links a {
    position: relative;

    color: #bdc2c8;

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

    line-height: 1.5;

    text-decoration: none;

    transition: color 250ms ease;
}


.shfooter-links a:hover {
    color: #f2b6a1;
}


/* UNDERLINE EFFECT */

.shfooter-links a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 100%;
    bottom: -5px;

    height: 1px;

    background: #e8a289;

    transition: right 250ms ease;
}


.shfooter-links a:hover::after {
    right: 0;
}


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

.shfooter-bottom {
    position: relative;
    z-index: 2;

    padding: 23px 0;

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

    background:
        rgba(0, 0, 0, 0.13);
}


.shfooter-bottom p {
    margin: 0;

    color: #a1a7ad;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.7;
}


.shfooter-bottom a {
    color: #e8a289;

    font-weight: 800;

    text-decoration: none;

    transition: color 250ms ease;
}


.shfooter-bottom a:hover {
    color: #f2b6a1;
}


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

.shcontact-section a:focus-visible,
.shcontact-section button:focus-visible,
.shfooter a:focus-visible {
    outline: 3px solid #d98c72;
    outline-offset: 4px;
}


/* =========================================================
   LARGE LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .shcontact-info {
        padding: 32px 27px;
    }


    .shcontact-info-top h3 {
        font-size: 35px;
    }


    .shcontact-form-panel {
        padding: 36px 30px;
    }


    .shcontact-detail-copy>a[href^="tel:"] {
        font-size: 23px;
    }


    .shcontact-call-btn strong {
        font-size: 19px;
    }

}


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

@media (max-width: 991.98px) {

    .shcontact-section {
        padding: 80px 0;
    }


    .shcontact-header {
        margin-bottom: 42px;
    }


    .shcontact-title {
        font-size: clamp(37px, 5.5vw, 52px);
    }


    .shcontact-info {
        padding: 38px 35px;
    }


    .shcontact-info-top h3 {
        font-size: 39px;
    }


    .shcontact-form-panel {
        padding: 40px 35px;
    }


    .shfooter-main {
        padding: 70px 0 45px;
    }


    .shfooter-description {
        font-size: 16px;
    }

}


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

@media (max-width: 767.98px) {

    .shcontact-section {
        padding: 65px 0;
    }


    .shcontact-header {
        margin-bottom: 35px;
    }


    .shcontact-title {
        font-size: clamp(31px, 8vw, 42px);

        letter-spacing: -1px;
    }


    .shcontact-header-text {
        font-size: 16px;
    }


    .shcontact-info {
        padding: 30px 24px;

        border-radius: 19px;
    }


    .shcontact-info-top h3 {
        font-size: clamp(29px, 7vw, 37px);
    }


    .shcontact-detail {
        gap: 12px;

        padding: 18px 0;
    }


    .shcontact-detail-icon {
        width: 43px;
        height: 43px;

        font-size: 19px;
    }


    .shcontact-detail-copy>a[href^="tel:"] {
        font-size: 23px;
    }


    .shcontact-detail-copy>a {
        font-size: 15px;
    }


    .shcontact-detail-copy address {
        font-size: 15px;
    }


    .shcontact-detail-copy .obfuscatedEmail.contact-text.mail {
        font-size: 15px;
    }


    .shcontact-hours {
        padding: 18px;
    }


    .shcontact-hours-heading strong {
        font-size: 19px;
    }


    .shcontact-call-btn {
        min-height: 70px;
    }


    .shcontact-call-btn strong {
        font-size: 20px;
    }


    /* FORM */

    .shcontact-form-panel {
        padding: 32px 24px;

        border-radius: 19px;
    }


    .shcontact-form-panel::before {
        left: 24px;
    }


    .shcontact-form-heading h3 {
        font-size: clamp(28px, 7vw, 36px);
    }


    .shcontact-form-heading p {
        font-size: 15px;
    }


    .shcontact-section .booking-form .row {
        --bs-gutter-x: 16px;
        --bs-gutter-y: 16px;
    }


    .shcontact-section .booking-field__control {
        min-height: 61px;
    }


    .shcontact-section .booking-field--select .booking-field__control {
        min-height: 61px;
    }


    .shcontact-section .booking-form__submit {
        min-height: 66px;

        font-size: 16px;
    }


    /* FOOTER */

    .shfooter-main {
        padding: 60px 0 40px;
    }


    .shfooter-brand>span {
        font-size: clamp(24px, 6vw, 34px);
    }


    .shfooter-brand>strong {
        font-size: clamp(27px, 7vw, 38px);
    }


    .shfooter-description {
        font-size: 15px;

        line-height: 1.8;
    }


    .shfooter-contact {
        flex-direction: column;

        gap: 13px;
    }


    .shfooter-contact>a,
    .shfooter-email {
        font-size: 14px;
    }


    .shfooter-hours {
        flex-direction: column;

        gap: 12px;
    }


    .shfooter-hours-divider {
        display: none;
    }


    .shfooter-social {
        gap: 10px;
    }


    .shfooter-social a {
        width: 46px;
        height: 46px;

        font-size: 18px;
    }


    .shfooter-links {
        gap: 13px 20px;
    }

}


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

@media (max-width: 575.98px) {

    .shcontact-info {
        padding: 27px 20px;
    }


    .shcontact-info-top h3 {
        font-size: 30px;
    }


    .shcontact-info-top p {
        font-size: 15px;
    }


    .shcontact-detail-copy>a[href^="tel:"] {
        font-size: 21px;
    }


    .shcontact-call-btn {
        gap: 10px;

        padding: 11px 13px;
    }


    .shcontact-call-btn-icon {
        width: 42px;
        height: 42px;
    }


    .shcontact-call-btn strong {
        font-size: 18px;
    }


    .shcontact-call-arrow {
        font-size: 18px;
    }


    /* FORM */

    .shcontact-form-panel {
        padding: 29px 19px;
    }


    .shcontact-form-panel::before {
        left: 19px;
    }


    .shcontact-section .booking-field__control {
        padding-left: 14px;
        padding-right: 42px;

        font-size: 15px;
    }


    .shcontact-section .booking-field>label {
        left: 14px;

        font-size: 14px;
    }


    .shcontact-section .booking-field:focus-within>label,

    .shcontact-section .booking-field>input:not(:placeholder-shown)+label,

    .shcontact-section .booking-field>textarea:not(:placeholder-shown)+label {
        font-size: 11px;
    }


    .shcontact-section .booking-field--select .booking-field__control {
        padding-left: 12px;
        padding-right: 28px;

        font-size: 14px;
    }


    .shcontact-section .booking-field--select>label {
        left: 12px;
    }


    .shcontact-section .booking-field__icon {
        right: 14px;

        font-size: 16px;
    }


    .shcontact-section .booking-form__submit {
        gap: 10px;

        padding: 12px 14px;
    }


    .shcontact-section .booking-form__submit-icon {
        width: 39px;
        height: 39px;

        font-size: 18px;
    }


    .shcontact-section .booking-form__submit-arrow {
        font-size: 18px;
    }


    /* FOOTER */

    .shfooter-main {
        padding: 55px 0 35px;
    }


    .shfooter-description {
        font-size: 15px;
    }


    .shfooter-social a {
        width: 44px;
        height: 44px;
    }


    .shfooter-bottom {
        padding: 20px 0;
    }


    .shfooter-bottom p {
        font-size: 12px;
    }

}


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

@media (max-width: 399.98px) {

    .shcontact-title {
        font-size: 30px;
    }


    .shcontact-info {
        padding: 25px 17px;
    }


    .shcontact-form-panel {
        padding: 27px 15px;
    }


    .shcontact-form-panel::before {
        left: 15px;
    }


    .shcontact-call-btn strong {
        font-size: 17px;
    }


    .shcontact-call-arrow {
        display: none;
    }


    .shcontact-section .booking-field__control {
        font-size: 14px;
    }


    .shfooter-brand>span {
        font-size: 23px;
    }


    .shfooter-brand>strong {
        font-size: 27px;
    }

}


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

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

    .shcontact-call-btn::before,
    .shcontact-section .booking-form__submit::before {
        animation: none !important;
    }


    .shcontact-section *,
    .shcontact-section *::before,
    .shcontact-section *::after,
    .shfooter *,
    .shfooter *::before,
    .shfooter *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}


/* =========================================================
   CONTACT SECTION
   ACCESSIBILITY + VALIDATION + REDUCED MOTION
========================================================= */

/* Visible keyboard focus */
.shcontact-section a:focus-visible,
.shcontact-section button:focus-visible,
.shcontact-section input:focus-visible,
.shcontact-section select:focus-visible,
.shcontact-section textarea:focus-visible {
    outline: 3px solid var(--color-accent, #e8a289);
    outline-offset: 3px;
}

/* Date validation message */
.shcontact-section .booking-form__date-error {
    margin: 12px 0 0;
    color: #b42318;
    line-height: 1.5;
}

.shcontact-section .booking-form__date-error[hidden] {
    display: none !important;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {

    .shcontact-section *,
    .shcontact-section *::before,
    .shcontact-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}

/* =========================================================
   FOOTER ACCESSIBILITY + REDUCED MOTION
========================================================= */

/* Visible keyboard focus */
.shfooter a:focus-visible {
    outline: 3px solid var(--color-accent, #e8a289);
    outline-offset: 4px;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {

    .shfooter *,
    .shfooter *::before,
    .shfooter *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}