:root {
    /* PRIMARY COLORS */
    --hockley-navy: #062f61;
    --hockley-navy-dark: #021f42;
    --hockley-navy-soft: #0b477f;

    /* PASTEL GOLD ACCENT */
    --hockley-orange: #e6bd69;
    --hockley-orange-dark: #c99a43;
    --hockley-orange-light: #f3d99d;

    /* OPTIONAL ACCENT SHADES */
    --hockley-orange-soft: #faedcf;
    --hockley-orange-muted: #d8bc82;

    /* NEUTRAL COLORS */
    --hockley-white: #ffffff;
    --hockley-light: #f3f6f9;
    --hockley-text: #17283a;

    /* BORDERS */
    --hockley-border: rgba(255, 255, 255, 0.16);
    --hockley-accent-border: rgba(230, 189, 105, 0.35);

    /* TRANSITION */
    --header-transition: 220ms ease;
}

/* =====================================
   GENERAL
===================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--hockley-text);
    font-family: Arial, Helvetica, sans-serif;
    background: var(--hockley-light);
}

.site-header {
    position: relative;
    z-index: 1030;
}


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

.hockley-topbar {
    color: var(--hockley-white);
    background: var(--hockley-navy-dark);
    border-bottom: 1px solid var(--hockley-border);
    font-size: 0.88rem;
}

.hockley-topbar-inner {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1540px;
    margin: 0 auto;
    padding-right: clamp(1rem, 3vw, 3.25rem);
    padding-left: clamp(1rem, 3vw, 3.25rem);
}

.hockley-service-note,
.hockley-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--hockley-white);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
}

.hockley-service-note i,
.hockley-topbar-link i {
    color: var(--hockley-orange);
}

.hockley-topbar-link {
    transition: color var(--header-transition);
}

.hockley-topbar-link:hover,
.hockley-topbar-link:focus {
    color: var(--hockley-orange-light);
}


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

.hockley-navbar {
    position: relative;
    min-height: 92px;
    padding: 0.65rem 0;
    background: var(--hockley-white);
    border-bottom: 1px solid rgba(6, 47, 97, 0.10);
    box-shadow: 0 9px 28px rgba(2, 31, 66, 0.10);
}

.hockley-nav-container {
    max-width: 1540px;
    padding-right: clamp(1rem, 3vw, 3.25rem);
    padding-left: clamp(1rem, 3vw, 3.25rem);
}


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

.hockley-navbar .navbar-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: clamp(1.25rem, 2.5vw, 3rem);
    padding: 0;
}

.navbar-logo {
    display: block;
    width: clamp(230px, 19vw, 315px);
    height: auto;
    max-height: 66px;
    object-fit: contain;
    filter: none;
}


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

.hockley-navbar .navbar-nav {
    gap: 0.05rem;
}

.hockley-navbar .nav-link {
    position: relative;
    padding: 1rem 0.58rem !important;
    color: var(--hockley-navy);
    font-size: 0.83rem;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.015em;
    white-space: nowrap;
    transition: color var(--header-transition);
}


/* BOLDER DROPDOWN LINKS */

.hockley-navbar .dropdown-item {
    padding: 0.7rem 0.85rem;
    color: var(--hockley-navy);
    border-radius: 0.22rem;
    font-size: 0.89rem;
    font-weight: 900;

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


/* Remove Bootstrap default dropdown arrow */

.hockley-navbar .dropdown-toggle::after {
    display: none;
}


/* Link states */

.hockley-navbar .nav-link:hover,
.hockley-navbar .nav-link:focus,
.hockley-navbar .nav-link.active,
.hockley-navbar .dropdown.show > .nav-link {
    color: var(--hockley-orange-dark);
}


/* Active link underline */

.hockley-navbar .nav-link.active::before {
    content: "";
    position: absolute;
    right: 0.58rem;
    bottom: 0.62rem;
    left: 0.58rem;
    height: 3px;
    background: var(--hockley-orange);
}


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

.menu-chevron {
    display: inline-block;
    margin-left: 0.2rem;
    font-size: 0.68rem;
    transition: transform var(--header-transition);
}

.dropdown.show .menu-chevron,
.dropdown:hover .menu-chevron {
    transform: rotate(180deg);
}


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

.hockley-navbar .dropdown-menu {
    min-width: 225px;
    margin: 0;
    padding: 0.55rem;
    background: var(--hockley-white);
    border: 1px solid rgba(6, 47, 97, 0.10);
    border-top: 3px solid var(--hockley-orange);
    border-radius: 0 0 0.35rem 0.35rem;
    box-shadow: 0 18px 35px rgba(2, 31, 66, 0.20);
}

.hockley-navbar .dropdown-item {
    padding: 0.7rem 0.85rem;
    color: var(--hockley-navy);
    border-radius: 0.22rem;
    font-size: 0.89rem;
    font-weight: 700;
    transition:
        color var(--header-transition),
        background-color var(--header-transition),
        padding-left var(--header-transition);
}

.hockley-navbar .dropdown-item:hover,
.hockley-navbar .dropdown-item:focus,
.hockley-navbar .dropdown-item.active {
    padding-left: 1rem;
    color: var(--hockley-navy-dark);
    background: var(--hockley-orange-light);
}


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

.hockley-call-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 46px;
    margin-left: 0.75rem;
    padding: 0.72rem 1rem;
    color: var(--hockley-navy-dark);
    background: var(--hockley-orange);
    border: 2px solid var(--hockley-orange);
    border-radius: 0.2rem;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color var(--header-transition),
        background-color var(--header-transition),
        border-color var(--header-transition),
        transform var(--header-transition);
}

.hockley-call-btn:hover,
.hockley-call-btn:focus {
    color: var(--hockley-white);
    background: var(--hockley-orange-dark);
    border-color: var(--hockley-orange-dark);
    transform: translateY(-1px);
}


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

.custom-toggler {
    width: 46px;
    height: 42px;
    padding: 9px;
    border: 1px solid rgba(6, 47, 97, 0.38);
    border-radius: 0.25rem;
    box-shadow: none !important;
}

.custom-toggler span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;
    background: var(--hockley-navy);
    transition:
        background-color var(--header-transition),
        transform var(--header-transition);
}

.custom-toggler:hover,
.custom-toggler:focus {
    border-color: var(--hockley-orange-dark);
}

.custom-toggler:hover span,
.custom-toggler:focus span {
    background: var(--hockley-orange-dark);
}


/* =====================================
   DESKTOP DROPDOWN HOVER
===================================== */

@media (min-width: 1200px) {

    .hockley-navbar .dropdown:hover > .dropdown-menu {
        display: block;
    }

    /*
     * Keeps the dropdown open while the pointer
     * moves from the nav link into the menu.
     */
    .hockley-navbar .dropdown-menu {
        top: 100%;
    }
}


/* =====================================
   SMALL DESKTOPS
===================================== */

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

    .navbar-logo {
        width: 225px;
    }

    .hockley-navbar .navbar-brand {
        margin-right: 1rem;
    }

    .hockley-navbar .nav-link {
        padding-right: 0.4rem !important;
        padding-left: 0.4rem !important;
        font-size: 0.76rem;
    }

    .hockley-call-btn {
        margin-left: 0.4rem;
        padding-right: 0.7rem;
        padding-left: 0.7rem;
    }
}


/* =====================================
   TABLETS AND MOBILE
===================================== */

@media (max-width: 1199.98px) {

    .hockley-navbar {
        min-height: 82px;
    }

    .navbar-logo {
        width: min(260px, 67vw);
        max-height: 58px;
    }

    .hockley-navbar .navbar-collapse {
        max-height: calc(100vh - 130px);
        margin-top: 0.7rem;
        padding: 0.65rem 0 1rem;
        overflow-y: auto;
        background: var(--hockley-white);
        border-top: 1px solid rgba(6, 47, 97, 0.12);
    }

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

    .hockley-navbar .nav-link {
        padding: 0.72rem 0.25rem !important;
    }

    .hockley-navbar .nav-link.active::before {
        display: none;
    }

    .hockley-navbar .dropdown-menu {
        margin: 0 0 0.45rem;
        padding: 0.35rem;
        border-top-width: 2px;
        border-radius: 0.2rem;
        box-shadow: none;
    }

    .hockley-navbar .dropdown-item {
        padding: 0.68rem 0.85rem;
    }

    .hockley-call-btn {
        width: 100%;
        margin: 0.65rem 0 0;
    }
}


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

@media (max-width: 575.98px) {

    .hockley-topbar-inner {
        min-height: 38px;
        justify-content: center;
    }

    .hockley-service-note {
        display: none;
    }

    .hockley-topbar {
        font-size: 0.82rem;
    }

    .hockley-nav-container {
        padding-right: 0.85rem;
        padding-left: 0.85rem;
    }

    .navbar-logo {
        width: min(220px, 67vw);
        max-height: 54px;
    }

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


/* _________________________________________________________________________________________________________________________ */

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

.hockley-hero {
    position: relative;
    display: flex;
    min-height: 680px;
    overflow: hidden;
    color: var(--hockley-white);
    background:
        linear-gradient(
            115deg,
            rgba(2, 31, 66, 0.99) 0%,
            rgba(6, 47, 97, 0.97) 54%,
            rgba(6, 47, 97, 0.90) 100%
        );
}

.hockley-hero-container {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    padding-top: clamp(5rem, 8vw, 7.5rem);
    padding-bottom: clamp(7rem, 10vw, 9rem);
}


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

.hockley-hero-pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.12;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        );
    background-size: 55px 55px;
    mask-image:
        linear-gradient(
            to right,
            #000000,
            transparent 86%
        );
}

.hockley-hero::before {
    content: "";
    position: absolute;
    top: -250px;
    left: -220px;
    z-index: 1;
    width: 600px;
    height: 600px;
    border: 90px solid rgba(230, 189, 105, 0.055);
    border-radius: 50%;
}

.hockley-hero::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 44%;
    height: 100%;
    background:
        linear-gradient(
            135deg,
            rgba(230, 189, 105, 0.07),
            transparent 60%
        );
}


/* =====================================
   DECORATIVE CIRCLES
===================================== */

.hockley-hero-circle {
    position: absolute;
    z-index: 2;
    display: block;
    border: 2px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
}

.circle-one {
    top: 75px;
    left: 46%;
    width: 55px;
    height: 55px;
    animation: heroCircleFloat 5s ease-in-out infinite;
}

.circle-two {
    right: 4%;
    bottom: 90px;
    width: 90px;
    height: 90px;
    border-color: rgba(230, 189, 105, 0.28);
    animation: heroCircleFloat 6s ease-in-out 1s infinite;
}


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

.hockley-hero-content {
    position: relative;
    z-index: 3;
    max-width: 670px;
}


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

.hockley-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.4rem;
    color: var(--hockley-white);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}


/* Yellow background with blue icon */

.eyebrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--hockley-navy-dark);
    background: var(--hockley-orange);
    border: 3px solid var(--hockley-navy-dark);
    border-radius: 3px;
    box-shadow: 0 10px 25px rgba(2, 31, 66, 0.28);
}


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

.hockley-hero-title {
    max-width: 750px;
    margin: 0 0 1.4rem;
    color: var(--hockley-white);

    font-size: clamp(
        2.1rem,
        4vw,
        4rem
    );

    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.hockley-hero-title span {
    position: relative;
    display: block;
    width: fit-content;
    margin-top: 0.25rem;
    color: var(--hockley-orange);
}




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

.hockley-hero-description {
    max-width: 650px;
    margin: 0 0 2rem;
    padding-left: 1.2rem;
    color: rgba(255, 255, 255, 0.82);
    border-left: 3px solid var(--hockley-orange);
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.75;
}


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

.hockley-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 2rem;
}

.hockley-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    border: 2px solid transparent;
    border-radius: 3px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        color 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease,
        transform 220ms ease,
        box-shadow 220ms ease;
}


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

.hockley-call-action {
    gap: 0.85rem;
    min-height: 66px;
    padding: 0.8rem 1.65rem;

    color: var(--hockley-navy-dark);
    background: var(--hockley-orange);

    border-color: var(--hockley-navy-dark);

    box-shadow:
        0 0 0 3px rgba(2, 31, 66, 0.38),
        0 13px 28px rgba(2, 31, 66, 0.28);
}

.hockley-call-action i {
    font-size: 1.5rem;
}

.hockley-call-action span {
    display: block;

    font-size: clamp(
        1.2rem,
        1.7vw,
        1.5rem
    );

    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.015em;
}

.hockley-call-action:hover,
.hockley-call-action:focus {
    color: var(--hockley-navy-dark);
    background: var(--hockley-orange-light);
    border-color: var(--hockley-navy-dark);

    transform: translateY(-3px);

    box-shadow:
        0 0 0 3px rgba(2, 31, 66, 0.48),
        0 17px 34px rgba(2, 31, 66, 0.34);
}


/* MOBILE */

@media (max-width: 575.98px) {

    .hockley-call-action {
        min-height: 64px;
        padding: 0.85rem 1.2rem;
    }

    .hockley-call-action i {
        font-size: 1.4rem;
    }

    .hockley-call-action span {
        font-size: 1.3rem;
    }
}

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

.hockley-estimate-action {
    gap: 0.75rem;
    padding: 0.8rem 1.6rem;
    color: var(--hockley-white);
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
}

.hockley-estimate-action i {
    transition: transform 220ms ease;
}

.hockley-estimate-action:hover,
.hockley-estimate-action:focus {
    color: var(--hockley-navy-dark);
    background: var(--hockley-white);
    border-color: var(--hockley-white);
    transform: translateY(-3px);
}

.hockley-estimate-action:hover i,
.hockley-estimate-action:focus i {
    transform: translateX(4px);
}


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

.hockley-hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.35rem;
}

.hockley-hero-feature {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.8rem;
    font-weight: 700;
}

.hockley-hero-feature i {
    color: var(--hockley-orange);
}


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

.hockley-hero-visual {
    position: relative;
    z-index: 3;
    max-width: 650px;
    margin-left: auto;
    padding: 24px 0 24px 24px;
}

.hockley-hero-image-frame {
    position: relative;
    z-index: 3;
    min-height: 510px;
    overflow: hidden;
    border: 8px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.34);
}

.hockley-hero-image {
    display: block;
    width: 100%;
    height: 510px;
    object-fit: cover;
    object-position: center;
    transition: transform 900ms ease;
}

.hockley-hero-visual:hover .hockley-hero-image {
    transform: scale(1.045);
}

.hockley-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(2, 31, 66, 0.55),
            transparent 45%
        );
    pointer-events: none;
}


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

.hockley-image-accent {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 72%;
    height: 76%;
    background: var(--hockley-orange);
    clip-path:
        polygon(
            0 0,
            100% 0,
            82% 100%,
            0 82%
        );
    animation: imageAccentPulse 4s ease-in-out infinite;
}


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

/* Yellow background with blue text */

.hockley-service-card {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 260px;
    padding: 1rem 1.2rem;
    color: var(--hockley-navy-dark);
    background: var(--hockley-orange);
   
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: -12px -12px 30px rgba(2, 31, 66, 0.22);
}


/* Blue circle with yellow icon */

.hockley-service-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    color: var(--hockley-orange);
    background: var(--hockley-navy-dark);
    border-radius: 50%;
    font-size: 1.25rem;
}

.hockley-service-card span:last-child {
    display: flex;
    flex-direction: column;
}

.hockley-service-card small {
    margin-bottom: 0.15rem;
    color: var(--hockley-navy);
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.11em;
}


/* =====================================
   CORNER SHAPE
===================================== */

.hockley-corner-shape {
    position: absolute;
    top: 65px;
    right: -28px;
    z-index: 4;
    width: 57px;
    height: 120px;
    border-top: 12px solid var(--hockley-orange);
    border-right: 12px solid var(--hockley-orange);
}


/* =====================================
   BOTTOM ANGLED DESIGN
===================================== */

.hockley-hero-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    height: 72px;
    overflow: hidden;
    background: var(--hockley-orange);
    clip-path:
        polygon(
            0 72%,
            32% 72%,
            37% 0,
            100% 0,
            100% 100%,
            0 100%
        );
}

.hockley-hero-bottom span {
    position: absolute;
    inset: 19px 0 0;
    display: block;
    background: var(--hockley-white);
    clip-path:
        polygon(
            0 78%,
            34% 78%,
            39% 0,
            100% 0,
            100% 100%,
            0 100%
        );
}


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

.hero-animate {
    opacity: 0;
    animation: heroFadeUp 750ms ease forwards;
}

.hero-delay-1 {
    animation-delay: 100ms;
}

.hero-delay-2 {
    animation-delay: 230ms;
}

.hero-delay-3 {
    animation-delay: 360ms;
}

.hero-delay-4 {
    animation-delay: 490ms;
}

.hero-delay-5 {
    animation-delay: 620ms;
}

.hero-image-animate {
    opacity: 0;
    animation: heroImageEntrance 950ms ease 300ms forwards;
}


/* =====================================
   ANIMATION KEYFRAMES
===================================== */

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroImageEntrance {
    from {
        opacity: 0;
        transform: translateX(60px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

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

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

@keyframes imageAccentPulse {
    0%,
    100% {
        transform: scale(1);
    }

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


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

@media (max-width: 1199.98px) {

    .hockley-hero-title {
        font-size: clamp(2.65rem, 6vw, 4.5rem);
    }

    .hockley-hero-image-frame,
    .hockley-hero-image {
        height: 470px;
        min-height: 470px;
    }
}


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

@media (max-width: 991.98px) {

    .hockley-hero-container {
        padding-top: 4.5rem;
        padding-bottom: 8rem;
    }

    .hockley-hero-content {
        max-width: 760px;
    }

    .hockley-hero-visual {
        max-width: 760px;
        margin: 1.5rem auto 0;
    }

    .hockley-hero-image-frame,
    .hockley-hero-image {
        height: 480px;
        min-height: 480px;
    }

    .hockley-hero::after {
        width: 100%;
    }
}


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

@media (max-width: 575.98px) {

    .hockley-hero-container {
        padding-top: 3.5rem;
        padding-bottom: 7rem;
    }

    .hockley-hero-eyebrow {
        font-size: 0.7rem;
        letter-spacing: 0.08em;
    }

    .eyebrow-icon {
        width: 38px;
        height: 38px;
    }

    .hockley-hero-title {
        font-size: clamp(2.35rem, 12vw, 3.35rem);
    }

 

    .hockley-hero-description {
        padding-left: 0.9rem;
        font-size: 0.96rem;
        line-height: 1.65;
    }

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

    .hockley-hero-btn {
        width: 100%;
    }

    .hockley-hero-features {
        flex-direction: column;
        align-items: flex-start;
    }

    .hockley-hero-visual {
        padding: 15px 0 15px 15px;
    }

    .hockley-hero-image-frame,
    .hockley-hero-image {
        height: 390px;
        min-height: 390px;
    }

    .hockley-service-card {
        right: 0;
        min-width: 235px;
        padding: 0.8rem 0.9rem;
        font-size: 0.76rem;
    }

    .hockley-service-card-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .hockley-corner-shape {
        display: none;
    }

    .hockley-hero-bottom {
        height: 55px;
    }
}


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

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

    .hero-animate,
    .hero-image-animate,
    .hockley-hero-circle,
    .hockley-image-accent {
        opacity: 1;
        animation: none;
        transform: none;
    }

    .hockley-hero-image,
    .hockley-hero-btn,
    .hockley-estimate-action i {
        transition: none;
    }
}


/* ___________________________________________________________________________________________________________ */



/* =====================================
   SPECIAL OFFER SECTION
===================================== */

.hockley-offer-section {
    position: relative;
    overflow: hidden;
    padding: clamp(4.5rem, 8vw, 7rem) 0;
    background:
        linear-gradient(
            135deg,
            var(--hockley-white) 0%,
            var(--hockley-orange-soft) 100%
        );
}

.hockley-offer-section::before {
    content: "";
    position: absolute;
    top: -170px;
    left: -170px;
    width: 390px;
    height: 390px;
    border: 70px solid rgba(230, 189, 105, 0.14);
    border-radius: 50%;
}

.hockley-offer-section::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -150px;
    width: 330px;
    height: 330px;
    border: 55px solid rgba(6, 47, 97, 0.05);
    border-radius: 50%;
}


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

.hockley-offer-card {
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: var(--hockley-white);
    border: 1px solid rgba(6, 47, 97, 0.10);
    border-radius: 10px;
    box-shadow: 0 28px 65px rgba(2, 31, 66, 0.14);
    opacity: 0;
    animation: offerCardEntrance 800ms ease forwards;
}


/* Top accent line */

.hockley-offer-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 5;
    height: 6px;
    background:
        linear-gradient(
            90deg,
            var(--hockley-navy) 0%,
            var(--hockley-navy) 34%,
            var(--hockley-white) 34%,
            var(--hockley-white) 36%,
            var(--hockley-orange) 36%,
            var(--hockley-orange) 100%
        );
}


/* =====================================
   DECORATIVE SHAPES
===================================== */

.offer-decoration {
    position: absolute;
    z-index: 1;
    display: block;
    pointer-events: none;
}

.offer-decoration-one {
    top: -38px;
    right: 26%;
    width: 90px;
    height: 90px;
    border: 15px solid rgba(230, 189, 105, 0.14);
    border-radius: 50%;
    animation: offerFloat 5s ease-in-out infinite;
}

.offer-decoration-two {
    right: 15px;
    bottom: 48px;
    width: 42px;
    height: 42px;
    border: 8px solid rgba(6, 47, 97, 0.08);
    transform: rotate(45deg);
    animation: offerRotate 10s linear infinite;
}


/* =====================================
   DISCOUNT BADGE
===================================== */

.hockley-offer-badge {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 390px;
    height: 100%;
    padding: 3rem 1.5rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--hockley-white);
    text-align: center;
    background:
        linear-gradient(
            145deg,
            var(--hockley-navy) 0%,
            var(--hockley-navy-dark) 100%
        );
}


/* White divider prevents navy and gold from touching */

.hockley-offer-badge::after {
    content: "";
    position: absolute;
    top: 0;
    right: -5px;
    bottom: 0;
    width: 5px;
    background: var(--hockley-white);
}


/* Special offer label */

.offer-badge-label {
    display: inline-flex;
    margin-bottom: 1.4rem;
    padding: 0.65rem 1.2rem;
    color: var(--hockley-navy-dark);
    background: var(--hockley-orange-light);
    border: 3px solid var(--hockley-white);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.13em;
}


/* Discount amount */

.offer-discount {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: var(--hockley-orange);
    line-height: 0.8;
}

.offer-discount strong {
    font-size: clamp(6rem, 9vw, 8rem);
    font-weight: 900;
    letter-spacing: -0.08em;
}

.offer-dollar {
    margin-top: 0.75rem;
    margin-right: 0.25rem;
    font-size: 2.5rem;
    font-weight: 900;
}

.offer-off {
    align-self: flex-end;
    margin: 0 0 0.7rem 0.45rem;
    padding: 0.5rem 0.55rem;
    color: var(--hockley-navy-dark);
    background: var(--hockley-white);
    border-radius: 3px;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.offer-limited {
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}


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

.hockley-offer-content {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 390px;
    height: 100%;
    padding: 3rem clamp(2rem, 4vw, 4rem);
    flex-direction: column;
    justify-content: center;
}

.hockley-offer-eyebrow {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
    color: var(--hockley-orange-dark);
    font-size: 0.9rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hockley-offer-title {
    margin: 0 0 1.25rem;
    color: var(--hockley-navy-dark);
    font-size: clamp(3.2rem, 5vw, 5.2rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.hockley-offer-title span {
    display: block;
    margin-top: 0.9rem;
    color: var(--hockley-navy);
    font-size: clamp(1.65rem, 2.5vw, 2.3rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.hockley-offer-description {
    max-width: 620px;
    margin: 0 0 1.6rem;
    color: #526272;
    font-size: 1.08rem;
    line-height: 1.75;
}

.hockley-offer-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 1.5rem;
}

.hockley-offer-details span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--hockley-navy);
    font-size: 0.95rem;
    font-weight: 800;
}

.hockley-offer-details i {
    color: var(--hockley-orange-dark);
}


/* =====================================
   OFFER ACTION
===================================== */

.hockley-offer-action {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 390px;
    height: 100%;
    padding: 2.4rem 1.6rem;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    background: var(--hockley-orange-soft);
    border-left: 5px solid var(--hockley-white);
}

.offer-action-label {
    display: block;
    margin-bottom: 1.2rem;
    color: var(--hockley-navy-dark);
    font-size: 0.9rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}


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

.hockley-claim-button {
    display: inline-flex;
    min-height: 64px;
    margin-bottom: 1rem;
    padding: 0.85rem 1.1rem;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    color: var(--hockley-navy-dark);
    background: var(--hockley-white);
    border: 3px solid var(--hockley-orange);
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(2, 31, 66, 0.12);
    transition:
        color 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease,
        transform 220ms ease,
        box-shadow 220ms ease;
}

.hockley-claim-button i {
    color: var(--hockley-orange-dark);
    font-size: 1rem;
}

.hockley-claim-button i:last-child {
    transition: transform 220ms ease;
}

.hockley-claim-button:hover,
.hockley-claim-button:focus {
    color: var(--hockley-navy-dark);
    background: var(--hockley-orange-light);
    border-color: var(--hockley-white);
    transform: translateY(-3px);
    box-shadow:
        0 0 0 3px var(--hockley-orange),
        0 15px 30px rgba(2, 31, 66, 0.18);
}

.hockley-claim-button:hover i:last-child,
.hockley-claim-button:focus i:last-child {
    transform: translateX(5px);
}


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

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

.hockley-offer-call {
    display: flex;
    min-height: 72px;
    padding: 0.85rem 1.1rem;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;

    color: var(--hockley-white);
    background: var(--hockley-navy);

    border: 3px solid var(--hockley-white);
    border-radius: 4px;

    font-weight: 900;
    text-decoration: none;

    box-shadow:
        0 0 0 2px rgba(6, 47, 97, 0.12),
        0 10px 24px rgba(2, 31, 66, 0.16);

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

.hockley-offer-call i {
    color: var(--hockley-orange);
    font-size: 1.55rem;
}
.hockley-offer-call span {
    display: block;
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.015em;
}

.hockley-offer-call:hover,
.hockley-offer-call:focus {
    color: var(--hockley-white);
    background: var(--hockley-navy-dark);
    transform: translateY(-3px);

    box-shadow:
        0 0 0 2px rgba(6, 47, 97, 0.16),
        0 15px 30px rgba(2, 31, 66, 0.24);
}


/* MOBILE */

@media (max-width: 575.98px) {

    .hockley-offer-call {
        min-height: 68px;
        padding: 0.8rem 1rem;
    }

    .hockley-offer-call i {
        font-size: 1.4rem;
    }

    .hockley-offer-call span {
        font-size: 1.1rem;
    }
}


/* =====================================
   OFFER TERMS
===================================== */

.hockley-offer-terms {
    position: relative;
    z-index: 3;
    display: flex;
    min-height: 48px;
    padding: 0.75rem 1.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: rgba(255, 255, 255, 0.82);
    background: var(--hockley-navy-dark);
    font-size: 0.78rem;
    text-align: center;
}

.hockley-offer-terms i {
    color: var(--hockley-orange);
}


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

@keyframes offerCardEntrance {
    from {
        opacity: 0;
        transform: translateY(45px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

    50% {
        transform: translateY(14px);
    }
}

@keyframes offerRotate {
    from {
        transform: rotate(45deg);
    }

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


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

@media (max-width: 991.98px) {

    .hockley-offer-badge,
    .hockley-offer-content,
    .hockley-offer-action {
        min-height: auto;
    }

    .hockley-offer-badge {
        padding: 3rem 1.5rem;
    }

    .hockley-offer-badge::after {
        top: auto;
        right: 0;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 5px;
    }

    .hockley-offer-content {
        padding: 3rem 2rem;
        text-align: center;
    }

    .hockley-offer-eyebrow {
        margin-right: auto;
        margin-left: auto;
    }

    .hockley-offer-description {
        margin-right: auto;
        margin-left: auto;
    }

    .hockley-offer-details {
        justify-content: center;
    }

    .hockley-offer-action {
        padding: 2.5rem;
        border-top: 5px solid var(--hockley-white);
        border-left: 0;
    }

    .hockley-claim-button,
    .hockley-offer-call {
        width: min(100%, 410px);
        margin-right: auto;
        margin-left: auto;
    }

    .hockley-claim-button {
        margin-bottom: 1rem;
    }
}


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

@media (max-width: 575.98px) {

    .hockley-offer-section {
        padding: 4rem 0;
    }

    .hockley-offer-card {
        border-radius: 6px;
    }

    .hockley-offer-badge {
        padding: 2.5rem 1rem;
    }

    .offer-discount strong {
        font-size: 5.6rem;
    }

    .hockley-offer-content {
        padding: 2.5rem 1.25rem;
    }

    .hockley-offer-title {
        font-size: 3rem;
    }

    .hockley-offer-title span {
        font-size: 1.45rem;
    }

    .hockley-offer-description {
        font-size: 1rem;
    }

    .hockley-offer-details {
        flex-direction: column;
        align-items: center;
    }

    .hockley-offer-action {
        padding: 2.2rem 1.25rem;
    }

    .hockley-claim-button {
        font-size: 0.82rem;
    }

    .hockley-offer-terms {
        padding: 0.9rem 1rem;
        align-items: flex-start;
        font-size: 0.72rem;
        text-align: left;
    }
}


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

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

    .hockley-offer-card,
    .offer-decoration {
        opacity: 1;
        animation: none;
        transform: none;
    }

    .hockley-claim-button,
    .hockley-offer-call,
    .hockley-claim-button i {
        transition: none;
    }
}

/* ________________________________________________________________________________________________________________________ */




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

.hockley-results-section {
    position: relative;
    overflow: hidden;
    padding: clamp(5rem, 9vw, 8rem) 0;
    background: var(--hockley-white);
}

.hockley-results-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 34%;
    height: 100%;
    background: var(--hockley-light);
    clip-path:
        polygon(
            0 0,
            100% 0,
            72% 100%,
            0 100%
        );
}

.hockley-results-section::after {
    content: "";
    position: absolute;
    top: 80px;
    right: -100px;
    width: 280px;
    height: 280px;
    border: 50px solid rgba(6, 47, 97, 0.045);
    border-radius: 50%;
}

.hockley-results-section .container {
    position: relative;
    z-index: 2;
}


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

.hockley-results-heading {
    max-width: 820px;
    margin: 0 auto clamp(3rem, 6vw, 5rem);
    text-align: center;
}

.hockley-results-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    color: var(--hockley-orange-dark);
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.hockley-results-eyebrow i {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    color: var(--hockley-orange);
    background: var(--hockley-navy-dark);
    border-radius: 3px;
}

.hockley-results-heading h2 {
    margin: 0 0 1.2rem;
    color: var(--hockley-navy-dark);
    font-size: clamp(2.7rem, 5vw, 5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.hockley-results-heading h2 span {
    display: block;
    margin-top: 0.4rem;
    color: var(--hockley-navy);
    font-size: 0.55em;
    letter-spacing: -0.025em;
}

.hockley-results-heading p {
    max-width: 700px;
    margin: 0 auto;
    color: #5c6978;
    font-size: 1.05rem;
    line-height: 1.75;
}


/* =====================================
   RESULTS GALLERY
===================================== */

.hockley-results-gallery {
    position: relative;
    display: grid;
    grid-template-columns: 0.86fr 82px 1.14fr;
    align-items: center;
    gap: 0;
}


/* =====================================
   RESULT CARDS
===================================== */

.hockley-result-card {
    position: relative;
    overflow: hidden;
    margin: 0;
    background: var(--hockley-white);
    border: 1px solid rgba(6, 47, 97, 0.10);
    border-radius: 8px;
    box-shadow: 0 24px 55px rgba(2, 31, 66, 0.13);
}

.hockley-before-card {
    opacity: 0;
    transform: translateX(-45px);
    animation: beforeCardEntrance 850ms ease forwards;
}

.hockley-after-card {
    z-index: 2;
    opacity: 0;
    transform: translateX(45px);
    animation: afterCardEntrance 850ms ease 220ms forwards;
}


/* =====================================
   RESULT IMAGES
===================================== */

.hockley-result-image {
    position: relative;
    overflow: hidden;
}

.hockley-before-card .hockley-result-image {
    height: 390px;
}

.hockley-after-card .hockley-result-image {
    height: 480px;
}

.hockley-result-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 800ms ease,
        filter 500ms ease;
}

.hockley-before-card img {
    filter: saturate(0.72) contrast(0.96);
}

.hockley-after-card img {
    filter: saturate(1.03) contrast(1.02);
}

.hockley-result-card:hover img {
    transform: scale(1.045);
}


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

.hockley-result-label {
    position: absolute;
    top: 20px;
    left: 20px;
    display: inline-flex;
    min-width: 100px;
    min-height: 42px;
    padding: 0.65rem 1rem;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.before-label {
    color: var(--hockley-white);
    background: var(--hockley-navy-dark);
    border: 3px solid var(--hockley-white);
}

.after-label {
    color: var(--hockley-navy-dark);
    background: var(--hockley-orange);
    border: 3px solid var(--hockley-navy-dark);
}


/* =====================================
   REPAIR COMPLETE BADGE
===================================== */

.hockley-complete-badge {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: inline-flex;
    padding: 0.7rem 1rem;
    align-items: center;
    gap: 0.55rem;
    color: var(--hockley-white);
    background: var(--hockley-navy);
    border: 3px solid var(--hockley-white);
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hockley-complete-badge i {
    display: inline-flex;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    color: var(--hockley-navy-dark);
    background: var(--hockley-orange);
    border-radius: 50%;
}


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

.hockley-result-content {
    display: flex;
    min-height: 145px;
    padding: 1.6rem;
    align-items: flex-start;
    gap: 1rem;
}

.result-number {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    color: var(--hockley-orange);
    background: var(--hockley-navy-dark);
    border-radius: 3px;
    font-size: 0.85rem;
    font-weight: 900;
}

.hockley-result-content h3 {
    margin: 0 0 0.55rem;
    color: var(--hockley-navy-dark);
    font-size: 1.35rem;
    font-weight: 900;
    text-transform: uppercase;
}

.hockley-result-content p {
    margin: 0;
    color: #5c6978;
    font-size: 0.9rem;
    line-height: 1.65;
}


/* =====================================
   CENTER ARROW
===================================== */

.hockley-result-arrow {
    position: relative;
    z-index: 5;
    display: flex;
    width: 82px;
    height: 82px;
    align-items: center;
    justify-content: center;
    color: var(--hockley-orange);
    background: var(--hockley-navy-dark);
    border: 7px solid var(--hockley-white);
    border-radius: 50%;
    font-size: 1.8rem;
    box-shadow: 0 12px 28px rgba(2, 31, 66, 0.25);
    animation: resultArrowPulse 2.4s ease-in-out infinite;
}


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

.hockley-results-cta {
    position: relative;
    display: flex;
    margin-top: 4rem;
    padding: 1.7rem 2rem;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    overflow: hidden;
    color: var(--hockley-white);
    background: var(--hockley-navy-dark);
    border-radius: 6px;
    box-shadow: 0 20px 45px rgba(2, 31, 66, 0.15);
}

.hockley-results-cta::after {
    content: "";
    position: absolute;
    top: -90px;
    right: 24%;
    width: 180px;
    height: 180px;
    border: 30px solid rgba(230, 189, 105, 0.10);
    border-radius: 50%;
}

.hockley-results-cta-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.hockley-results-cta-text span {
    margin-bottom: 0.3rem;
    color: var(--hockley-orange);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.hockley-results-cta-text strong {
    color: var(--hockley-white);
    font-size: clamp(1.15rem, 2vw, 1.55rem);
}

.hockley-results-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}


/* Phone button */

.hockley-results-call {
    display: inline-flex;
    min-height: 54px;
    padding: 0.75rem 1.2rem;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;

    color: var(--hockley-navy-dark);
    background: var(--hockley-orange);

    border: 3px solid var(--hockley-navy-dark);
    border-radius: 3px;

    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;

    text-decoration: none;

    transition:
        background-color 220ms ease,
        transform 220ms ease;
}

.hockley-results-call i {
    font-size: 1.2rem;
}

.hockley-results-call:hover,
.hockley-results-call:focus {
    color: var(--hockley-navy-dark);
    background: var(--hockley-orange-light);
    transform: translateY(-3px);
}


/* Estimate button */

.hockley-results-estimate {
    display: inline-flex;
    min-height: 54px;
    padding: 0.75rem 1.2rem;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: var(--hockley-white);
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.65);
    border-radius: 3px;
    font-size: 0.82rem;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        color 220ms ease,
        background-color 220ms ease,
        transform 220ms ease;
}

.hockley-results-estimate:hover,
.hockley-results-estimate:focus {
    color: var(--hockley-navy-dark);
    background: var(--hockley-white);
    transform: translateY(-3px);
}


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

@keyframes beforeCardEntrance {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes afterCardEntrance {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes resultArrowPulse {
    0%,
    100% {
        transform: scale(1);
    }

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


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

@media (max-width: 991.98px) {

    .hockley-results-gallery {
        grid-template-columns: 1fr;
        gap: 0;
        max-width: 720px;
        margin: 0 auto;
    }

    .hockley-before-card .hockley-result-image,
    .hockley-after-card .hockley-result-image {
        height: 450px;
    }

    .hockley-result-arrow {
        margin: -18px auto;
        transform: rotate(90deg);
    }

    .hockley-results-cta {
        flex-direction: column;
        text-align: center;
    }

    .hockley-results-actions {
        justify-content: center;
    }
}


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

@media (max-width: 575.98px) {

    .hockley-results-section {
        padding: 4.5rem 0;
    }

    .hockley-results-heading h2 {
        font-size: 2.7rem;
    }

    .hockley-before-card .hockley-result-image,
    .hockley-after-card .hockley-result-image {
        height: 330px;
    }

    .hockley-result-content {
        min-height: auto;
        padding: 1.3rem;
    }

    .hockley-complete-badge {
        right: 12px;
        bottom: 12px;
    }

    .hockley-result-label {
        top: 12px;
        left: 12px;
    }

    .hockley-results-cta {
        margin-top: 3rem;
        padding: 1.7rem 1.2rem;
    }

    .hockley-results-actions {
        width: 100%;
        flex-direction: column;
    }

    .hockley-results-call,
    .hockley-results-estimate {
        width: 100%;
    }
}


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

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

    .hockley-before-card,
    .hockley-after-card {
        opacity: 1;
        animation: none;
        transform: none;
    }

    .hockley-result-arrow {
        animation: none;
    }

    .hockley-result-card img,
    .hockley-results-call,
    .hockley-results-estimate {
        transition: none;
    }
}

/* ______________________________________________________________________________________________________ */


/* =====================================
   PRACTICAL DOOR SOLUTIONS
===================================== */

.hockley-solutions-section {
    position: relative;
    overflow: hidden;
    padding: clamp(5rem, 9vw, 8rem) 0;
    background: var(--hockley-light);
}

.hockley-solutions-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 38%;
    height: 100%;
    background: var(--hockley-white);
    clip-path:
        polygon(
            24% 0,
            100% 0,
            100% 100%,
            0 100%
        );
}

.hockley-solutions-circle {
    position: absolute;
    right: -120px;
    bottom: -130px;
    width: 340px;
    height: 340px;
    border: 55px solid rgba(6, 47, 97, 0.045);
    border-radius: 50%;
}

.hockley-solutions-section .container {
    position: relative;
    z-index: 2;
}

.hockley-solutions-section .row {
    align-items: stretch;
}

.hockley-solutions-section .col-lg-6 {
    display: flex;
}


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

.hockley-solutions-visual {
    position: relative;
    display: flex;
    width: 100%;
    max-width: none;
    min-height: 650px;
    height: 100%;
    margin: 0;
    padding: 26px 26px 38px 0;
    align-items: stretch;
    opacity: 0;
    animation: solutionsImageEntrance 850ms ease forwards;
}

.hockley-solutions-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 74%;
    height: 80%;
    background: var(--hockley-orange);
    border: 7px solid var(--hockley-navy-dark);
    clip-path:
        polygon(
            15% 0,
            100% 0,
            100% 85%,
            0 100%
        );
}

.hockley-solutions-image-frame {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 650px;
    height: 100%;
    overflow: hidden;
    background: var(--hockley-navy-dark);
    border: 8px solid var(--hockley-white);
    border-radius: 5px;
    box-shadow: 0 30px 65px rgba(2, 31, 66, 0.18);
}

.hockley-solutions-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 650px;
    object-fit: cover;
    object-position: center;
    transition: transform 800ms ease;
}

.hockley-solutions-visual:hover .hockley-solutions-image {
    transform: scale(1.045);
}

.hockley-solutions-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(2, 31, 66, 0.68),
            transparent 48%
        );
    pointer-events: none;
}


/* =====================================
   IMAGE INFORMATION CARD
===================================== */

.hockley-solutions-image-card {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    min-height: 86px;
    padding: 1rem 1.25rem;
    align-items: center;
    gap: 0.85rem;
    color: var(--hockley-white);
    background: rgba(2, 31, 66, 0.94);
}

.solutions-image-card-icon {
    display: inline-flex;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;
    color: var(--hockley-orange);
    background: var(--hockley-navy-soft);
    border: 2px solid var(--hockley-orange);
    border-radius: 50%;
    font-size: 1.3rem;
}

.hockley-solutions-image-card > span:last-child {
    display: flex;
    flex-direction: column;
    font-size: 0.95rem;
    font-weight: 900;
    text-transform: uppercase;
}

.hockley-solutions-image-card small {
    margin-bottom: 0.2rem;
    color: var(--hockley-orange);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
}


/* =====================================
   FLOATING COMPONENT BADGE
===================================== */

.hockley-component-badge {
    position: absolute;
    right: -12px;
    bottom: 0;
    z-index: 4;
    display: flex;
    min-width: 280px;
    min-height: 76px;
    padding: 0.9rem 1.1rem;
    align-items: center;
    gap: 0.75rem;
    color: var(--hockley-navy-dark);
    background: var(--hockley-orange);
    border: 4px solid var(--hockley-navy-dark);
    border-radius: 4px;
    box-shadow: 0 16px 35px rgba(2, 31, 66, 0.24);
    animation: componentBadgeFloat 3.5s ease-in-out infinite;
}

.hockley-component-badge i {
    font-size: 1.5rem;
}

.hockley-component-badge span {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.hockley-component-badge small {
    margin-top: 0.2rem;
    color: var(--hockley-navy);
    font-size: 0.63rem;
    font-weight: 800;
}


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

.hockley-solutions-content {
    position: relative;
    display: flex;
    width: 100%;
    max-width: none;
    min-height: 650px;
    height: 100%;
    padding: 1rem 0;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    animation: solutionsContentEntrance 850ms ease 180ms forwards;
}


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

.hockley-solutions-eyebrow {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    color: var(--hockley-orange-dark);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hockley-solutions-eyebrow i {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    color: var(--hockley-orange);
    background: var(--hockley-navy-dark);
    border-radius: 3px;
}


/* =====================================
   BUSINESS NAME H3
===================================== */

.hockley-solutions-business {
    width: fit-content;
    margin: 0 0 0.85rem;
    padding: 0.5rem 0.75rem;
    color: var(--hockley-navy-dark);
    background: var(--hockley-orange);
    border-left: 5px solid var(--hockley-navy-dark);
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}


/* =====================================
   SMALLER MAIN TITLE
===================================== */

.hockley-solutions-title {
    max-width: 590px;
    margin: 0 0 1.35rem;
    color: var(--hockley-navy-dark);
    font-size: clamp(2.5rem, 3.8vw, 4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.hockley-solutions-title span {
    display: inline;
    color: var(--hockley-navy);
}


/* =====================================
   PARAGRAPHS
===================================== */

.hockley-solutions-lead {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
    color: var(--hockley-navy);
    border-left: 4px solid var(--hockley-orange);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.65;
}

.hockley-solutions-text {
    margin: 0 0 0.9rem;
    color: #576777;
    font-size: 0.94rem;
    line-height: 1.65;
}


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

.hockley-solutions-features {
    display: grid;
    margin: 1.35rem 0 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.hockley-solution-feature {
    display: flex;
    min-height: 72px;
    padding: 0.75rem;
    align-items: center;
    gap: 0.7rem;
    background: var(--hockley-white);
    border: 1px solid rgba(6, 47, 97, 0.10);
    border-radius: 4px;
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}

.hockley-solution-feature:hover {
    border-color: var(--hockley-orange);
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(2, 31, 66, 0.10);
}

.solution-feature-icon {
    display: inline-flex;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    align-items: center;
    justify-content: center;
    color: var(--hockley-orange);
    background: var(--hockley-navy-dark);
    border-radius: 3px;
    font-size: 1rem;
}

.hockley-solution-feature > span:last-child {
    display: flex;
    flex-direction: column;
    color: #657382;
    font-size: 0.7rem;
    line-height: 1.4;
}

.hockley-solution-feature strong {
    margin-bottom: 0.15rem;
    color: var(--hockley-navy-dark);
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
}


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

.hockley-solutions-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.hockley-solutions-call,
.hockley-solutions-estimate {
    display: inline-flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-weight: 900;
    text-decoration: none;
    transition:
        background-color 220ms ease,
        transform 220ms ease;
}


/* Phone button */

.hockley-solutions-call {
    padding: 0.75rem 1.3rem;
    gap: 0.7rem;

    color: var(--hockley-white);
    background: var(--hockley-navy-dark);

    border: 3px solid var(--hockley-white);
    border-radius: 3px;

    box-shadow:
        0 0 0 2px rgba(2, 31, 66, 0.16),
        0 12px 28px rgba(2, 31, 66, 0.15);
}

.hockley-solutions-call i {
    color: var(--hockley-orange);
    font-size: 1.35rem;
}

.hockley-solutions-call span {
    display: block;
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.015em;
}

.hockley-solutions-call:hover,
.hockley-solutions-call:focus {
    color: var(--hockley-white);
    background: var(--hockley-navy);
    transform: translateY(-3px);
}

@media (max-width: 575.98px) {

    .hockley-solutions-call span {
        font-size: 1.2rem;
    }

}
/* Estimate button */

.hockley-solutions-estimate {
    padding: 0.75rem 1.35rem;
    gap: 0.6rem;
    color: var(--hockley-navy-dark);
    background: var(--hockley-orange);
    border: 3px solid var(--hockley-navy-dark);
    font-size: 0.82rem;
    text-transform: uppercase;
}

.hockley-solutions-estimate i {
    transition: transform 220ms ease;
}

.hockley-solutions-estimate:hover,
.hockley-solutions-estimate:focus {
    color: var(--hockley-navy-dark);
    background: var(--hockley-orange-light);
    transform: translateY(-3px);
}

.hockley-solutions-estimate:hover i,
.hockley-solutions-estimate:focus i {
    transform: translateX(5px);
}


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

@keyframes solutionsImageEntrance {
    from {
        opacity: 0;
        transform: translateX(-45px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes solutionsContentEntrance {
    from {
        opacity: 0;
        transform: translateX(45px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

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


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

@media (max-width: 991.98px) {

    .hockley-solutions-section::before {
        display: none;
    }

    .hockley-solutions-visual,
    .hockley-solutions-content {
        width: 100%;
        max-width: 720px;
        min-height: auto;
        margin: 0 auto;
    }

    .hockley-solutions-visual {
        min-height: 570px;
    }

    .hockley-solutions-image-frame,
    .hockley-solutions-image {
        min-height: 540px;
        height: 540px;
    }

    .hockley-solutions-content {
        padding-top: 1.5rem;
    }
}


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

@media (max-width: 575.98px) {

    .hockley-solutions-section {
        padding: 4.5rem 0;
    }

    .hockley-solutions-visual {
        min-height: 470px;
        padding: 16px 16px 42px 0;
    }

    .hockley-solutions-image-frame,
    .hockley-solutions-image {
        min-height: 430px;
        height: 430px;
    }

    .hockley-component-badge {
        right: 0;
        min-width: 250px;
    }

    .hockley-solutions-title {
        font-size: 2.45rem;
    }

    .hockley-solutions-title span {
        display: block;
    }

    .hockley-solutions-lead {
        padding-left: 0.9rem;
        font-size: 1rem;
    }

    .hockley-solutions-features {
        grid-template-columns: 1fr;
    }

    .hockley-solutions-actions {
        flex-direction: column;
    }

    .hockley-solutions-call,
    .hockley-solutions-estimate {
        width: 100%;
    }
}


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

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

    .hockley-solutions-visual,
    .hockley-solutions-content {
        opacity: 1;
        animation: none;
        transform: none;
    }

    .hockley-component-badge {
        animation: none;
    }

    .hockley-solutions-image,
    .hockley-solution-feature,
    .hockley-solutions-call,
    .hockley-solutions-estimate,
    .hockley-solutions-estimate i {
        transition: none;
    }
}


/* ___________________________________________________________________________________________________________ */

/* =====================================
   DOOR MOTION SECTION
===================================== */

.door-motion-section {
    position: relative;
    overflow: hidden;
    padding: clamp(5rem, 9vw, 8rem) 0;
    background: var(--hockley-white);
}

.door-motion-section::before {
    content: "";
    position: absolute;
    inset: 0 50% 0 0;
    background: var(--hockley-light);
}

.door-motion-section::after {
    content: "";
    position: absolute;
    top: -180px;
    right: -160px;
    width: 430px;
    height: 430px;
    border: 70px solid rgba(6, 47, 97, 0.04);
    border-radius: 50%;
}

.door-motion-section .container {
    position: relative;
    z-index: 2;
}


/* =====================================
   MAIN WRAPPER
===================================== */

.door-motion-wrapper {
    display: grid;
    overflow: hidden;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--hockley-white);
    border: 1px solid rgba(6, 47, 97, 0.10);
    border-radius: 8px;
    box-shadow: 0 30px 70px rgba(2, 31, 66, 0.13);
}


/* =====================================
   LEFT INTRO PANEL
===================================== */

.door-motion-intro {
    position: relative;
    overflow: hidden;
    padding: clamp(2.5rem, 5vw, 4.5rem);
    color: var(--hockley-white);

    background:
        linear-gradient(
            145deg,
            var(--hockley-navy) 0%,
            var(--hockley-navy-dark) 100%
        );

    opacity: 0;
    animation: doorIntroEntrance 800ms ease forwards;
}

.door-motion-intro::before {
    content: "";
    position: absolute;
    top: -110px;
    right: -100px;
    width: 290px;
    height: 290px;
    border: 48px solid rgba(230, 189, 105, 0.08);
    border-radius: 50%;
}

.door-motion-intro::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 190px;
    height: 120px;
    background: var(--hockley-orange);

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


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

.door-motion-eyebrow {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.3rem;

    color: var(--hockley-orange);

    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.door-motion-eyebrow i {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;

    color: var(--hockley-navy-dark);
    background: var(--hockley-orange);

    border: 3px solid var(--hockley-navy-dark);
    border-radius: 3px;
}


/* =====================================
   MAIN TITLE - SMALLER
===================================== */

.door-motion-intro h2 {
    position: relative;
    z-index: 2;
    max-width: 570px;
    margin: 0 0 1.5rem;

    color: var(--hockley-white);

    font-size: clamp(2rem, 3.2vw, 3.2rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.door-motion-intro h2 span {
    display: block;
    margin-top: 0.35rem;
    color: var(--hockley-orange);
}


/* =====================================
   LEFT CONTENT TEXT - BIGGER
===================================== */

.door-motion-lead {
    position: relative;
    z-index: 2;
    margin: 0 0 1.1rem;
    padding-left: 1rem;

    color: var(--hockley-white);
    border-left: 4px solid var(--hockley-orange);

    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.7;
}

.door-motion-text {
    position: relative;
    z-index: 2;
    margin: 0 0 1.8rem;

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

    font-size: 1.03rem;
    line-height: 1.75;
}


/* =====================================
   SYMPTOM GRID
===================================== */

.door-motion-symptoms {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.door-motion-symptom {
    display: flex;
    min-height: 82px;
    padding: 0.85rem;
    align-items: center;
    gap: 0.7rem;

    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 3px;

    transition:
        background-color 220ms ease,
        transform 220ms ease;
}

.door-motion-symptom:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-3px);
}

.door-motion-symptom > span {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

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

    color: var(--hockley-orange);
    background: var(--hockley-navy-dark);

    border: 2px solid var(--hockley-orange);
    border-radius: 3px;

    font-size: 1.05rem;
}

.door-motion-symptom > div {
    display: flex;
    flex-direction: column;
}

.door-motion-symptom strong {
    color: var(--hockley-white);

    font-size: 0.88rem;
    font-weight: 900;

    text-transform: uppercase;
}

.door-motion-symptom small {
    margin-top: 0.2rem;

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

    font-size: 0.76rem;
    line-height: 1.45;
}


/* =====================================
   RIGHT PROCESS PANEL
===================================== */

.door-motion-process {
    position: relative;
    display: flex;
    padding: clamp(2.5rem, 5vw, 4.5rem);

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

    background: var(--hockley-white);

    opacity: 0;
    animation: doorProcessEntrance 800ms ease 180ms forwards;
}


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

.door-process-heading {
    margin-bottom: 1.25rem;
}

.door-process-heading > span {
    display: inline-block;
    margin-bottom: 0.65rem;

    color: var(--hockley-orange-dark);

    font-size: 0.76rem;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.door-process-heading h3 {
    margin: 0;

    color: var(--hockley-navy-dark);

    font-size: clamp(1.55rem, 2.2vw, 2.2rem);
    font-weight: 900;
    line-height: 1.1;

    text-transform: uppercase;
}


/* =====================================
   PROCESS DESCRIPTION - BIGGER
===================================== */

.door-process-description {
    margin: 0 0 0.9rem;

    color: #5d6b79;

    font-size: 1.03rem;
    line-height: 1.75;
}


/* =====================================
   PROCESS STEPS
===================================== */

.door-process-list {
    position: relative;
    display: grid;
    margin: 1.4rem 0 1.8rem;

    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.door-process-item {
    position: relative;
    display: grid;

    min-height: 120px;
    margin: 0;
    padding: 1rem;

    grid-template-columns: 43px 1fr;
    align-items: center;
    gap: 0.75rem;

    overflow: hidden;

    background: var(--hockley-light);
    border: 1px solid rgba(6, 47, 97, 0.10);
    border-radius: 4px;

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

.door-process-item:hover {
    border-color: var(--hockley-orange);

    transform: translateY(-4px);

    box-shadow:
        0 12px 28px rgba(2, 31, 66, 0.10);
}

.door-process-number {
    position: absolute;
    top: -7px;
    right: 5px;

    color: rgba(6, 47, 97, 0.06);

    font-size: 3.6rem;
    font-weight: 900;
    line-height: 1;
}

.door-process-icon {
    position: relative;
    z-index: 2;

    display: inline-flex;
    width: 43px;
    height: 43px;

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

    color: var(--hockley-orange);
    background: var(--hockley-navy-dark);

    border-radius: 3px;

    font-size: 1rem;
}

.door-process-item > div {
    position: relative;
    z-index: 2;
}


/* =====================================
   PROCESS CARD TEXT - BIGGER
===================================== */

.door-process-item h4 {
    margin: 0 0 0.3rem;

    color: var(--hockley-navy-dark);

    font-size: 1rem;
    font-weight: 900;

    text-transform: uppercase;
}

.door-process-item p {
    margin: 0;

    color: #667482;

    font-size: 0.8rem;
    line-height: 1.5;
}


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

.door-process-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}


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

.door-process-call {
    display: inline-flex;

    min-height: 62px;
    padding: 0.75rem 1.25rem;

    align-items: center;
    justify-content: center;
    gap: 0.7rem;

    color: var(--hockley-white);
    background: var(--hockley-navy-dark);

    border: 3px solid var(--hockley-white);
    border-radius: 3px;

    font-weight: 900;
    text-decoration: none;

    box-shadow:
        0 0 0 2px rgba(2, 31, 66, 0.16);

    transition:
        background-color 220ms ease,
        transform 220ms ease;
}

.door-process-call i {
    color: var(--hockley-orange);
    font-size: 1.35rem;
}

.door-process-call span {
    display: block;

    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    font-weight: 900;
    line-height: 1;

    letter-spacing: 0.015em;
}

.door-process-call:hover,
.door-process-call:focus {
    color: var(--hockley-white);
    background: var(--hockley-navy);

    transform: translateY(-3px);
}


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

.door-process-estimate {
    display: inline-flex;

    min-height: 62px;
    padding: 0.75rem 1.2rem;

    align-items: center;
    justify-content: center;
    gap: 0.6rem;

    color: var(--hockley-navy-dark);
    background: var(--hockley-orange);

    border: 3px solid var(--hockley-navy-dark);
    border-radius: 3px;

    font-size: 0.82rem;
    font-weight: 900;

    text-decoration: none;
    text-transform: uppercase;

    transition:
        background-color 220ms ease,
        transform 220ms ease;
}

.door-process-estimate i {
    transition: transform 220ms ease;
}

.door-process-estimate:hover,
.door-process-estimate:focus {
    color: var(--hockley-navy-dark);
    background: var(--hockley-orange-light);

    transform: translateY(-3px);
}

.door-process-estimate:hover i,
.door-process-estimate:focus i {
    transform: translateX(4px);
}


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

@keyframes doorIntroEntrance {

    from {
        opacity: 0;
        transform: translateX(-45px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}

@keyframes doorProcessEntrance {

    from {
        opacity: 0;
        transform: translateX(45px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


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

@media (max-width: 991.98px) {

    .door-motion-section::before {
        display: none;
    }

    .door-motion-wrapper {
        grid-template-columns: 1fr;

        max-width: 760px;
        margin: 0 auto;
    }

    .door-motion-intro,
    .door-motion-process {
        padding: 3rem;
    }

    .door-motion-intro h2 {
        font-size: clamp(2rem, 6vw, 2.9rem);
    }

    .door-process-heading h3 {
        font-size: clamp(1.5rem, 4vw, 2rem);
    }

}


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

@media (max-width: 575.98px) {

    .door-motion-section {
        padding: 4.5rem 0;
    }

    .door-motion-intro,
    .door-motion-process {
        padding: 2.2rem 1.25rem;
    }


    /* Smaller heading */

    .door-motion-intro h2 {
        font-size: 2.1rem;
        line-height: 1.06;
    }


    /* Bigger paragraph text */

    .door-motion-lead {
        padding-left: 0.9rem;

        font-size: 1.05rem;
        line-height: 1.65;
    }

    .door-motion-text {
        font-size: 1rem;
        line-height: 1.7;
    }


    /* Single-column cards */

    .door-motion-symptoms,
    .door-process-list {
        grid-template-columns: 1fr;
    }


    /* Bigger symptom text */

    .door-motion-symptom strong {
        font-size: 0.9rem;
    }

    .door-motion-symptom small {
        font-size: 0.78rem;
    }


    /* Right panel */

    .door-process-heading h3 {
        font-size: 1.65rem;
    }

    .door-process-description {
        font-size: 1rem;
        line-height: 1.7;
    }


    /* Process cards */

    .door-process-item {
        min-height: 110px;
    }

    .door-process-item h4 {
        font-size: 1rem;
    }

    .door-process-item p {
        font-size: 0.82rem;
        line-height: 1.5;
    }


    /* CTA buttons */

    .door-process-actions {
        flex-direction: column;
    }

    .door-process-call,
    .door-process-estimate {
        width: 100%;
    }

    .door-process-call span {
        font-size: 1.25rem;
    }

}


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

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

    .door-motion-intro,
    .door-motion-process {
        opacity: 1;
        animation: none;
        transform: none;
    }

    .door-motion-symptom,
    .door-process-item,
    .door-process-call,
    .door-process-estimate,
    .door-process-estimate i {
        transition: none;
    }

}
/* ____________________________________________________________________________________________________________ */


/* =====================================
   SERVICES SLIDER SECTION
===================================== */

.hockley-services-section {
    position: relative;
    overflow: hidden;
    padding: clamp(5rem, 9vw, 8rem) 0;
    background: var(--hockley-light);
}


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

.hockley-services-header {
    display: flex;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}

.hockley-services-heading {
    max-width: 760px;
}

.hockley-services-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    color: var(--hockley-orange-dark);
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.hockley-services-eyebrow i {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: var(--hockley-orange);
    background: var(--hockley-navy-dark);
    border-radius: 3px;
}


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

.hockley-services-heading h2 {
    margin: 0 0 1rem;
    color: var(--hockley-navy-dark);

    font-size: clamp(
        1.9rem,
        3vw,
        3rem
    );

    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.hockley-services-heading h2 span {
    display: block;
    color: var(--hockley-navy);
}

.hockley-services-heading p {
    max-width: 680px;
    margin: 0;
    color: #5c6978;
    font-size: 1rem;
    line-height: 1.7;
}


/* =====================================
   SLIDER CONTROLS
===================================== */

.hockley-slider-controls {
    display: flex;
    flex: 0 0 auto;
    gap: 0.7rem;
}

.hockley-slider-button {
    display: inline-flex;
    width: 54px;
    height: 54px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--hockley-orange);
    background: var(--hockley-navy-dark);
    border: 3px solid var(--hockley-navy-dark);
    border-radius: 3px;
    font-size: 1.1rem;
    cursor: pointer;
    transition:
        color 220ms ease,
        background-color 220ms ease,
        transform 220ms ease;
}

.hockley-slider-button:hover,
.hockley-slider-button:focus {
    color: var(--hockley-navy-dark);
    background: var(--hockley-orange);
    transform: translateY(-3px);
}


/* =====================================
   SLIDER WINDOW AND TRACK
===================================== */

.hockley-services-slider {
    width: 100%;
    overflow: hidden;
    padding: 12px 4px 26px;
}

.hockley-services-track {
    --visible-slides: 3;
    --slide-gap: 1.5rem;

    display: flex;
    gap: var(--slide-gap);
    transform: translateX(0);
    transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}


/* =====================================
   SERVICE SLIDE
===================================== */

.hockley-service-slide {
    position: relative;
    display: flex;

    min-width:
        calc(
            (
                100% -
                (var(--slide-gap) * (var(--visible-slides) - 1))
            ) /
            var(--visible-slides)
        );

    min-height: 500px;
    margin: 0;
    overflow: hidden;
    flex-direction: column;

    background: var(--hockley-white);

    border: 1px solid rgba(6, 47, 97, 0.10);
    border-radius: 7px;

    box-shadow:
        0 18px 38px
        rgba(2, 31, 66, 0.10);

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

.hockley-service-slide:hover {
    border-color: var(--hockley-orange);

    transform:
        translateY(-9px);

    box-shadow:
        0 27px 50px
        rgba(2, 31, 66, 0.16);
}


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

.service-slide-image {
    position: relative;
    display: block;
    height: 260px;
    overflow: hidden;
    background: var(--hockley-navy-dark);
}

.service-slide-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform 750ms ease;
}

.hockley-service-slide:hover
.service-slide-image img {
    transform:
        scale(1.075);
}

.service-slide-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(2, 31, 66, 0.75),
            transparent 62%
        );
}


/* =====================================
   SLIDE NUMBER
===================================== */

.service-slide-number {
    position: absolute;
    top: 16px;
    right: 16px;

    display: inline-flex;
    width: 44px;
    height: 44px;

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

    color: var(--hockley-orange);
    background: var(--hockley-navy-dark);

    border:
        2px solid
        var(--hockley-orange);

    border-radius: 50%;

    font-size: 0.72rem;
    font-weight: 900;
}


/* =====================================
   EMERGENCY BADGE
===================================== */

.emergency-slide-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;

    padding:
        0.55rem 0.75rem;

    color: var(--hockley-navy-dark);
    background: var(--hockley-orange);

    border:
        3px solid
        var(--hockley-navy-dark);

    border-radius: 3px;

    font-size: 0.67rem;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}


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

.service-slide-content {
    position: relative;

    display: flex;

    padding:
        2rem 1.5rem 1.5rem;

    flex: 1;
    flex-direction: column;
}


/* =====================================
   SLIDE ICON
===================================== */

.service-slide-icon {
    position: absolute;

    top: -29px;
    left: 1.5rem;

    display: inline-flex;

    width: 58px;
    height: 58px;

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

    color: var(--hockley-orange);
    background: var(--hockley-navy-dark);

    border:
        4px solid
        var(--hockley-white);

    border-radius: 4px;

    font-size: 1.25rem;

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

.hockley-service-slide:hover
.service-slide-icon {
    color: var(--hockley-navy-dark);
    background: var(--hockley-orange);

    transform:
        rotate(-7deg);
}


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

.service-slide-content h3 {
    margin:
        0.8rem 0 0.7rem;

    color:
        var(--hockley-navy-dark);

    font-size: 1.3rem;
    font-weight: 900;

    line-height: 1.2;

    text-transform: uppercase;
}

.service-slide-content h3 a {
    color: inherit;
    text-decoration: none;
}

.service-slide-content h3 a:hover,
.service-slide-content h3 a:focus {
    color:
        var(--hockley-orange-dark);
}


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

.service-slide-content p {
    margin:
        0 0 1.2rem;

    color:
        #5d6b79;

    font-size: 0.89rem;
    line-height: 1.65;
}


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

.service-slide-link {
    display: inline-flex;

    width: fit-content;

    margin-top: auto;

    align-items: center;

    gap: 0.5rem;

    color:
        var(--hockley-navy);

    font-size: 0.72rem;
    font-weight: 900;

    text-decoration: none;
    text-transform: uppercase;

    letter-spacing: 0.04em;
}

.service-slide-link i {
    color:
        var(--hockley-orange-dark);

    transition:
        transform 220ms ease;
}

.service-slide-link:hover,
.service-slide-link:focus {
    color:
        var(--hockley-orange-dark);
}

.service-slide-link:hover i,
.service-slide-link:focus i {
    transform:
        translateX(6px);
}


/* =====================================
   SLIDER FOOTER
===================================== */

.hockley-slider-footer {
    display: flex;

    margin-top:
        0.5rem;

    align-items: center;

    gap:
        1.25rem;
}


/* =====================================
   PROGRESS BAR
===================================== */

.hockley-slider-progress {
    position: relative;

    height: 4px;

    flex: 1;

    overflow: hidden;

    background:
        rgba(6, 47, 97, 0.10);

    border-radius:
        20px;
}

.hockley-slider-progress span {
    display: block;

    width:
        calc(100% / 13);

    height: 100%;

    background:
        var(--hockley-orange);

    transform:
        translateX(0);

    transition:
        width 400ms ease,
        transform 600ms ease;
}


/* =====================================
   SLIDER COUNTER
===================================== */

.hockley-slider-count {
    min-width:
        67px;

    color:
        #788592;

    font-size:
        0.8rem;

    font-weight:
        800;
}

.hockley-slider-count strong {
    color:
        var(--hockley-navy-dark);

    font-size:
        1.1rem;
}


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

.hockley-services-cta {
    display: flex;

    margin-top:
        3.5rem;

    padding:
        1.7rem 2rem;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        2rem;

    color:
        var(--hockley-white);

    background:
        var(--hockley-navy-dark);

    border-radius:
        6px;

    box-shadow:
        0 20px 45px
        rgba(2, 31, 66, 0.16);
}

.hockley-services-cta > div {
    display: flex;
    flex-direction: column;
}

.hockley-services-cta span {
    margin-bottom:
        0.25rem;

    color:
        var(--hockley-orange);

    font-size:
        0.72rem;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        0.1em;
}

.hockley-services-cta strong {
    font-size:
        clamp(
            1.1rem,
            2vw,
            1.45rem
        );
}


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

.hockley-services-cta > a {
    display: inline-flex;

    min-height:
        54px;

    padding:
        0.75rem 1.25rem;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.6rem;

    color:
        var(--hockley-navy-dark);

    background:
        var(--hockley-orange);

    border:
        3px solid
        var(--hockley-navy-dark);

    border-radius:
        3px;

    font-size:
        0.8rem;

    font-weight:
        900;

    text-decoration:
        none;

    text-transform:
        uppercase;

    transition:
        background-color 220ms ease,
        transform 220ms ease;
}

.hockley-services-cta > a:hover,
.hockley-services-cta > a:focus {
    color:
        var(--hockley-navy-dark);

    background:
        var(--hockley-orange-light);

    transform:
        translateY(-3px);
}


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

.hockley-slider-button:focus-visible,
.service-slide-image:focus-visible,
.service-slide-content h3 a:focus-visible,
.service-slide-link:focus-visible,
.hockley-services-cta > a:focus-visible {
    outline:
        3px solid
        var(--hockley-orange);

    outline-offset:
        4px;
}


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

@media (max-width: 991.98px) {

    .hockley-services-track {
        --visible-slides: 2;
    }

    .hockley-services-header {
        align-items: center;
    }

    .hockley-services-heading h2 {
        font-size:
            clamp(
                1.85rem,
                4vw,
                2.6rem
            );
    }

    .hockley-services-cta {
        flex-direction: column;
        text-align: center;
    }

}


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

@media (max-width: 575.98px) {

    .hockley-services-section {
        padding:
            4.5rem 0;
    }

    .hockley-services-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* SMALLER MOBILE TITLE */
    .hockley-services-heading h2 {
        font-size: 1.8rem;
        line-height: 1.1;
        letter-spacing: -0.03em;
    }

    .hockley-services-track {
        --visible-slides: 1;
        --slide-gap: 1rem;
    }

    .hockley-service-slide {
        min-height:
            480px;
    }

    .service-slide-image {
        height:
            250px;
    }

    .hockley-slider-controls {
        width:
            100%;

        justify-content:
            flex-end;
    }

    .hockley-services-cta {
        padding:
            1.6rem 1.2rem;
    }

    .hockley-services-cta > a {
        width:
            100%;
    }

}


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

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

    .hockley-services-track,
    .hockley-service-slide,
    .service-slide-image img,
    .service-slide-icon,
    .service-slide-link i,
    .hockley-slider-progress span,
    .hockley-slider-button,
    .hockley-services-cta > a {
        transition: none;
    }

    .hockley-service-slide:hover,
    .hockley-slider-button:hover,
    .hockley-services-cta > a:hover {
        transform: none;
    }

}

/* _____________________________________________________________________________________________________________________ */


/* =====================================
   SPRING & CABLE REPAIR SECTION
===================================== */


.spring-cable-section {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 110px 0;
    background:
        linear-gradient(
            90deg,
            var(--hockley-navy-dark) 0%,
            var(--hockley-navy-dark) 42%,
            var(--hockley-light) 42%,
            var(--hockley-light) 100%
        );
}

.spring-cable-section .container {
    position: relative;
    z-index: 3;
}

/* BACKGROUND SHAPES */

.spring-cable-shape {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.spring-cable-shape.shape-left {
    top: -150px;
    left: -150px;
    width: 430px;
    height: 430px;
    border: 75px solid rgba(255, 75, 22, 0.08);
    border-radius: 50%;
}

.spring-cable-shape.shape-right {
    right: -90px;
    bottom: -100px;
    width: 330px;
    height: 330px;
    background: var(--hockley-orange);
    opacity: 0.06;
    transform: rotate(35deg);
}

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

.spring-cable-visual {
    position: relative;
    max-width: 570px;
    padding: 20px 26px 35px 0;
}

.spring-cable-image-wrap {
    position: relative;
    z-index: 2;
    overflow: hidden;
    min-height: 590px;
    border: 7px solid var(--hockley-white);
    box-shadow: 0 28px 65px rgba(0, 0, 0, 0.3);
}

.spring-cable-image {
    display: block;
    width: 100%;
    height: 590px;
    object-fit: cover;
    transition: transform 700ms ease;
}

.spring-cable-image-wrap:hover .spring-cable-image {
    transform: scale(1.055);
}

.spring-cable-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(2, 31, 66, 0.04) 35%,
            rgba(2, 31, 66, 0.92) 100%
        );
}

.spring-cable-image-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 24px 26px;
    color: var(--hockley-white);
}

.caption-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    color: var(--hockley-white);
    background: var(--hockley-orange);
    font-size: 1.3rem;
}

.spring-cable-image-caption span:last-child {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}

.spring-cable-image-caption small {
    display: block;
    margin-bottom: 5px;
    color: var(--hockley-orange-light);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

/* IMAGE BORDER */

.spring-cable-image-border {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 76%;
    height: 76%;
    border: 5px solid var(--hockley-orange);
}

/* FLOATING CARD */

.spring-cable-float-card {
    position: absolute;
    right: -25px;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 13px;
    max-width: 310px;
    padding: 18px 21px;
    color: var(--hockley-white);
    background: var(--hockley-orange);
    border: 4px solid var(--hockley-navy-dark);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.24);
    animation: springCardFloat 3.5s ease-in-out infinite;
}

.float-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    color: var(--hockley-orange);
    background: var(--hockley-navy-dark);
    font-size: 1.15rem;
}

.spring-cable-float-card strong,
.spring-cable-float-card small {
    display: block;
}

.spring-cable-float-card strong {
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.spring-cable-float-card small {
    margin-top: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.9;
}

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

.spring-cable-content {
    padding-left: 22px;
}

.spring-cable-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
    color: var(--hockley-orange-dark);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.spring-cable-eyebrow span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--hockley-white);
    background: var(--hockley-navy-dark);
}

.spring-cable-title {
    max-width: 650px;
    margin: 0 0 24px;
    color: var(--hockley-navy-dark);
    font-size: clamp(2rem, 3.5vw, 3.45rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -1.7px;
    text-transform: uppercase;
}

.spring-cable-title span {
    display: block;
    margin-top: 7px;
    color: var(--hockley-orange);
}

.spring-cable-lead {
    margin-bottom: 22px;
    padding-left: 18px;
    color: var(--hockley-navy-dark);
    border-left: 4px solid var(--hockley-orange);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.75;
}

.spring-cable-description {
    margin: 0 0 25px;
    color: var(--hockley-text);
    font-size: 0.96rem;
    line-height: 1.8;
}

/* PROBLEM CARDS */

.spring-cable-problems {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin: 25px 0;
}

.spring-problem-card {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 86px;
    padding: 15px;
    background: var(--hockley-white);
    border: 1px solid rgba(6, 47, 97, 0.13);
    border-bottom: 4px solid var(--hockley-orange);
    transition:
        transform var(--header-transition),
        box-shadow var(--header-transition);
}

.spring-problem-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 28px rgba(2, 31, 66, 0.12);
}

.problem-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    color: var(--hockley-white);
    background: var(--hockley-navy);
    font-size: 1.1rem;
}

.spring-problem-card strong,
.spring-problem-card small {
    display: block;
}

.spring-problem-card strong {
    color: var(--hockley-navy-dark);
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.spring-problem-card small {
    margin-top: 4px;
    color: var(--hockley-text);
    font-size: 0.7rem;
    line-height: 1.35;
}

/* FEATURE LIST */

.spring-cable-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 20px;
    margin-bottom: 29px;
}

.spring-cable-feature {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--hockley-navy-dark);
    font-size: 0.83rem;
    font-weight: 800;
}

.spring-cable-feature i {
    color: var(--hockley-orange);
    font-size: 1rem;
}

/* ACTION BUTTONS */

.spring-cable-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.spring-cable-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 10px 22px;
    border: 2px solid transparent;
    text-decoration: none;
    font-size: 0.79rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition:
        transform var(--header-transition),
        background-color var(--header-transition),
        color var(--header-transition),
        box-shadow var(--header-transition);
}

.spring-cable-btn:hover {
    transform: translateY(-3px);
}

.spring-call-btn {
    gap: 12px;
    min-width: 215px;
    color: var(--hockley-white);
    background: var(--hockley-navy-dark);
}

.spring-call-btn:hover {
    color: var(--hockley-white);
    background: var(--hockley-navy-soft);
    box-shadow: 0 12px 25px rgba(2, 31, 66, 0.22);
}

.spring-call-btn i {
    color: var(--hockley-orange);
    font-size: 1.1rem;
}

.spring-call-btn small {
    display: block;
    margin-bottom: 2px;
    color: var(--hockley-orange-light);
    font-size: 0.61rem;
    letter-spacing: 1px;
}

.spring-estimate-btn {
    gap: 12px;
    color: var(--hockley-white);
    background: var(--hockley-orange);
}

.spring-estimate-btn:hover {
    color: var(--hockley-white);
    background: var(--hockley-orange-dark);
    box-shadow: 0 12px 25px rgba(223, 54, 8, 0.23);
}

/* TEXT LINK */

.spring-service-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 19px;
    color: var(--hockley-navy);
    font-size: 0.77rem;
    font-weight: 900;
    letter-spacing: 0.6px;
    text-decoration: none;
    text-transform: uppercase;
}

.spring-service-link i {
    color: var(--hockley-orange);
    transition: transform var(--header-transition);
}

.spring-service-link:hover {
    color: var(--hockley-orange-dark);
}

.spring-service-link:hover i {
    transform: translate(3px, -3px);
}

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

.reveal-from-left {
    animation: revealSpringLeft 900ms ease both;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
}

.reveal-from-right {
    animation: revealSpringRight 900ms ease both;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
}

@keyframes revealSpringLeft {
    from {
        opacity: 0;
        transform: translateX(-65px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes revealSpringRight {
    from {
        opacity: 0;
        transform: translateX(65px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

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

/* FALLBACK FOR BROWSERS WITHOUT SCROLL TIMELINE */

@supports not (animation-timeline: view()) {
    .reveal-from-left {
        animation: revealSpringLeft 900ms ease both;
    }

    .reveal-from-right {
        animation: revealSpringRight 900ms 150ms ease both;
    }
}

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

@media (max-width: 1199.98px) {
    .spring-cable-content {
        padding-left: 0;
    }

    .spring-cable-title {
        font-size: 2.7rem;
    }
}

@media (max-width: 991.98px) {
    .spring-cable-section {
        padding: 85px 0;
        background:
            linear-gradient(
                180deg,
                var(--hockley-navy-dark) 0,
                var(--hockley-navy-dark) 35%,
                var(--hockley-light) 35%,
                var(--hockley-light) 100%
            );
    }

    .spring-cable-visual {
        margin: 0 auto 25px;
    }

    .spring-cable-content {
        max-width: 720px;
        margin: 0 auto;
    }
}

@media (max-width: 767.98px) {
    .spring-cable-section {
        padding: 70px 0;
    }

    .spring-cable-image-wrap {
        min-height: 480px;
    }

    .spring-cable-image {
        height: 480px;
    }

    .spring-cable-float-card {
        right: 5px;
    }

    .spring-cable-problems,
    .spring-cable-features {
        grid-template-columns: 1fr;
    }

    .spring-cable-title {
        font-size: 2.15rem;
    }
}

@media (max-width: 575.98px) {
    .spring-cable-visual {
        padding: 12px 10px 55px 0;
    }

    .spring-cable-image-wrap {
        min-height: 410px;
        border-width: 5px;
    }

    .spring-cable-image {
        height: 410px;
    }

    .spring-cable-image-caption {
        padding: 18px;
    }

    .spring-cable-float-card {
        right: 0;
        bottom: 8px;
        max-width: 275px;
    }

    .spring-cable-title {
        font-size: 1.85rem;
        letter-spacing: -0.8px;
    }

    .spring-cable-actions,
    .spring-cable-btn {
        width: 100%;
    }

    .spring-cable-btn {
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal-from-left,
    .reveal-from-right,
    .spring-cable-float-card {
        animation: none !important;
    }

    .spring-cable-image,
    .spring-problem-card,
    .spring-cable-btn {
        transition: none;
    }
}

.spring-cable-image-wrap {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 8px;
}

.spring-cable-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spring-cable-image-overlay,
.spring-cable-image-caption {
    position: absolute;
}








/* ______________________________________________________________________________________________________________________ */


/* =========================================================
   COLOR VARIABLES
========================================================= */

:root {

    --hockley-navy: #062f61;
    --hockley-navy-dark: #021f42;
    --hockley-navy-soft: #0b477f;

    --hockley-orange: #e6bd69;
    --hockley-orange-dark: #c99a43;
    --hockley-orange-light: #f3d99d;

    --hockley-orange-soft: #faedcf;
    --hockley-orange-muted: #d8bc82;

    --hockley-white: #ffffff;
    --hockley-light: #f3f6f9;
    --hockley-text: #17283a;

    --hockley-transition: 220ms ease;
}


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

.hockley-hardware-section {
    position: relative;

    padding: 100px 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            var(--hockley-light) 0%,
            var(--hockley-white) 100%
        );
}


/* Decorative gold shape */

.hockley-hardware-section::before {
    content: "";

    position: absolute;

    top: 60px;
    left: -80px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        rgba(230, 189, 105, 0.11);

    pointer-events: none;
}


/* =========================================================
   MAIN SHELL
========================================================= */

.hockley-hardware-shell {
    position: relative;
    z-index: 2;

    overflow: hidden;

    border-radius: 26px;

    background: var(--hockley-white);

    box-shadow:
        0 30px 80px rgba(2, 31, 66, 0.11);
}


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

.hockley-hardware-content {
    height: 100%;

    padding: 64px 52px;

    background: var(--hockley-navy-dark);

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


/* Kicker */

.hockley-hardware-kicker {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 20px;

    color: var(--hockley-orange-light);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.hockley-hardware-kicker span {
    display: block;

    width: 36px;
    height: 3px;

    border-radius: 50px;

    background: var(--hockley-orange);
}


/* Heading */

.hockley-hardware-content h2 {
    margin: 0 0 24px;

    color: var(--hockley-white);

    font-size: clamp(
        2.2rem,
        4vw,
        3.7rem
    );

    font-weight: 850;
    line-height: 1.03;

    letter-spacing: -0.04em;
}


.hockley-hardware-content h2 em {
    display: block;

    margin-top: 5px;

    color: var(--hockley-orange);

    font-style: normal;
}


/* Paragraphs */

.hockley-hardware-lead {
    margin-bottom: 17px;

    color: #edf4fb;

    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.75;
}


.hockley-hardware-copy {
    margin-bottom: 28px;

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

    font-size: 0.96rem;
    line-height: 1.8;
}


/* =========================================================
   NOTE
========================================================= */

.hockley-hardware-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin-bottom: 30px;

    padding: 18px;

    border:
        1px solid
        rgba(230, 189, 105, 0.28);

    border-radius: 14px;

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


.hockley-note-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 50%;

    background: var(--hockley-orange);

    color: var(--hockley-navy-dark);

    font-weight: 900;
}


.hockley-hardware-note strong {
    display: block;

    margin-bottom: 4px;

    color: var(--hockley-white);

    font-size: 0.96rem;
}


.hockley-hardware-note p {
    margin: 0;

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

    font-size: 0.83rem;
    line-height: 1.55;
}


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

.hockley-hardware-btn {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    min-height: 52px;

    padding: 13px 22px;

    border:
        2px solid
        var(--hockley-orange);

    border-radius: 9px;

    background: var(--hockley-orange);

    color: var(--hockley-navy-dark);

    font-size: 0.92rem;
    font-weight: 850;

    text-decoration: none;

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


.hockley-hardware-btn:hover {
    transform: translateY(-2px);

    background: var(--hockley-orange-light);

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


.hockley-hardware-btn span {
    font-size: 1.2rem;
}


/* =========================================================
   VISUAL AREA
========================================================= */

.hockley-hardware-visual {
    position: relative;

    height: 100%;
    min-height: 640px;

    overflow: hidden;

    background: var(--hockley-navy);
}


.hockley-hardware-visual img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 640px;

    object-fit: cover;

    transition:
        transform 600ms ease;
}


.hockley-hardware-shell:hover
.hockley-hardware-visual img {
    transform: scale(1.025);
}


.hockley-visual-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(2, 31, 66, 0.05) 30%,
            rgba(2, 31, 66, 0.68) 100%
        );

    pointer-events: none;
}


/* =========================================================
   RIBBON
========================================================= */

.hockley-visual-ribbon {
    position: absolute;

    top: 30px;
    right: 30px;

    z-index: 3;

    min-width: 220px;

    padding: 14px 18px;

    border-radius: 12px;

    background:
        rgba(2, 31, 66, 0.90);

    box-shadow:
        0 14px 35px
        rgba(2, 31, 66, 0.20);
}


.hockley-visual-ribbon span {
    display: block;

    margin-bottom: 2px;

    color: var(--hockley-orange-light);

    font-size: 0.7rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.hockley-visual-ribbon strong {
    display: block;

    color: var(--hockley-white);

    font-size: 1rem;
}


/* =========================================================
   IMAGE FLOATING CARD
========================================================= */

.hockley-visual-card {
    position: absolute;

    left: 30px;
    bottom: 30px;

    z-index: 3;

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

    padding: 17px 20px;

    border-radius: 15px;

    background: var(--hockley-orange);

    color: var(--hockley-navy-dark);

    box-shadow:
        0 18px 40px
        rgba(2, 31, 66, 0.28);
}


.hockley-visual-card-number {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
}


.hockley-visual-card strong {
    display: block;

    font-size: 0.94rem;
}


.hockley-visual-card small {
    display: block;

    margin-top: 2px;

    color: #4d3b19;

    font-size: 0.72rem;
    font-weight: 700;
}


/* =========================================================
   SERVICE STRIP
========================================================= */

.hockley-hardware-strip {
    display: grid;

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

    border-top:
        1px solid
        rgba(6, 47, 97, 0.08);

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


.hockley-strip-item {
    display: flex;
    gap: 13px;

    padding: 24px 20px;

    border-right:
        1px solid
        rgba(6, 47, 97, 0.08);

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


.hockley-strip-item:last-child {
    border-right: 0;
}


.hockley-strip-item:hover {
    background: var(--hockley-orange-soft);
}


.hockley-strip-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 9px;

    background: var(--hockley-navy);

    color: var(--hockley-orange-light);

    font-size: 0.72rem;
    font-weight: 900;
}


.hockley-strip-item h3 {
    margin: 0 0 5px;

    color: var(--hockley-navy-dark);

    font-size: 0.94rem;
    font-weight: 800;
}


.hockley-strip-item p {
    margin: 0;

    color: #647286;

    font-size: 0.78rem;
    line-height: 1.5;
}


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

@media (max-width: 991.98px) {

    .hockley-hardware-section {
        padding: 70px 0;
    }


    .hockley-hardware-content {
        padding: 48px 38px;
    }


    .hockley-hardware-visual,
    .hockley-hardware-visual img {
        min-height: 500px;
    }


    .hockley-hardware-strip {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .hockley-strip-item:nth-child(2) {
        border-right: 0;
    }


    .hockley-strip-item:nth-child(-n+2) {
        border-bottom:
            1px solid
            rgba(6, 47, 97, 0.08);
    }

}


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

@media (max-width: 575.98px) {

    .hockley-hardware-section {
        padding: 50px 0;
    }


    .hockley-hardware-shell {
        border-radius: 18px;
    }


    .hockley-hardware-content {
        padding: 34px 22px;
    }


    .hockley-hardware-content h2 {
        font-size: 2.15rem;
    }


    .hockley-hardware-visual,
    .hockley-hardware-visual img {
        min-height: 390px;
    }


    .hockley-visual-ribbon {
        top: 18px;
        right: 18px;

        min-width: 0;
    }


    .hockley-visual-card {
        left: 18px;
        right: 18px;
        bottom: 18px;
    }


    .hockley-hardware-strip {
        grid-template-columns: 1fr;
    }


    .hockley-strip-item {
        border-right: 0;

        border-bottom:
            1px solid
            rgba(6, 47, 97, 0.08);
    }


    .hockley-strip-item:last-child {
        border-bottom: 0;
    }


    .hockley-hardware-btn {
        width: 100%;
        justify-content: center;
    }

}


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

.hockley-hardware-btn:focus-visible {
    outline:
        3px solid
        var(--hockley-orange-light);

    outline-offset: 4px;
}


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

    .hockley-hardware-visual img,
    .hockley-hardware-btn,
    .hockley-strip-item {
        transition: none;
    }


    .hockley-hardware-shell:hover
    .hockley-hardware-visual img,
    .hockley-hardware-btn:hover {
        transform: none;
    }

}
/* ____________________________________________________________________________________________________________ */
/* =========================================================
   GARAGE DOOR REPAIR HOCKLEY
   WHY CHOOSE US SECTION
========================================================= */

:root {

    /* PRIMARY COLORS */
    --hockley-navy: #062f61;
    --hockley-navy-dark: #021f42;
    --hockley-navy-soft: #0b477f;

    /* PASTEL GOLD ACCENT */
    --hockley-orange: #e6bd69;
    --hockley-orange-dark: #c99a43;
    --hockley-orange-light: #f3d99d;

    /* OPTIONAL ACCENTS */
    --hockley-orange-soft: #faedcf;
    --hockley-orange-muted: #d8bc82;

    /* NEUTRALS */
    --hockley-white: #ffffff;
    --hockley-light: #f3f6f9;
    --hockley-text: #17283a;

    /* TRANSITION */
    --hockley-transition: 220ms ease;
}


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

.hockley-why-section {
    position: relative;

    padding: 95px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 5% 15%,
            rgba(230, 189, 105, 0.12),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            var(--hockley-white) 0%,
            #f7f9fb 100%
        );
}


/* decorative shape */

.hockley-why-section::before {
    content: "";

    position: absolute;

    right: -120px;
    bottom: -140px;

    width: 330px;
    height: 330px;

    border:
        60px solid
        rgba(6, 47, 97, 0.035);

    border-radius: 50%;

    pointer-events: none;
}


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

.hockley-why-heading {
    position: relative;
    z-index: 2;

    max-width: 810px;

    margin-bottom: 52px;
}


/* eyebrow */

.hockley-why-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 15px;

    color: #8f6926;

    font-size: 0.76rem;
    font-weight: 850;

    line-height: 1.3;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}


.hockley-why-eyebrow span {
    display: block;

    width: 32px;
    height: 3px;

    border-radius: 50px;

    background:
        var(--hockley-orange);
}


/* main heading */

.hockley-why-heading h2 {
    margin: 0 0 17px;

    color:
        var(--hockley-navy-dark);

    font-size:
        clamp(
            2.1rem,
            4vw,
            3.35rem
        );

    font-weight: 850;
    line-height: 1.07;

    letter-spacing: -0.04em;
}


.hockley-why-heading h2 span {
    color:
        var(--hockley-navy);
}


/* header description */

.hockley-why-heading > p {
    max-width: 700px;

    margin:
        0 auto;

    color: #627184;

    font-size: 1rem;
    line-height: 1.8;
}


/* =========================================================
   BALANCED BOOTSTRAP COLUMNS
========================================================= */

.hockley-why-main-row {
    position: relative;
    z-index: 2;

    align-items: stretch;
}


.hockley-why-main-row > [class*="col-"] {
    display: flex;
}


/* =========================================================
   LEFT IMAGE AREA
========================================================= */

.hockley-why-visual {
    display: flex;

    width: 100%;
    height: 100%;
}


.hockley-why-image-wrap {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 590px;

    overflow: hidden;

    border:
        1px solid
        rgba(6, 47, 97, 0.08);

    border-radius: 22px;

    background:
        var(--hockley-navy-dark);

    box-shadow:
        0 25px 60px
        rgba(2, 31, 66, 0.15);
}


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

.hockley-why-image {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

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

    transition:
        transform 600ms ease;
}


.hockley-why-image-wrap:hover
.hockley-why-image {
    transform:
        scale(1.025);
}


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

.hockley-why-image-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(2, 31, 66, 0.04) 20%,
            rgba(2, 31, 66, 0.12) 46%,
            rgba(2, 31, 66, 0.75) 100%
        );

    pointer-events: none;
}


/* =========================================================
   TOP IMAGE BADGE
========================================================= */

.hockley-image-badge {
    position: absolute;

    top: 24px;
    left: 24px;

    z-index: 4;

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

    max-width: 310px;

    padding:
        13px 16px;

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

    border-radius: 13px;

    background:
        rgba(2, 31, 66, 0.91);

    color:
        var(--hockley-white);

    backdrop-filter:
        blur(8px);

    box-shadow:
        0 13px 30px
        rgba(2, 31, 66, 0.20);
}


.hockley-image-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex:
        0 0 42px;

    border-radius: 10px;

    background:
        var(--hockley-orange);

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


.hockley-image-badge small {
    display: block;

    margin-bottom: 3px;

    color:
        var(--hockley-orange-light);

    font-size: 0.65rem;
    font-weight: 850;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.hockley-image-badge strong {
    display: block;

    color:
        var(--hockley-white);

    font-size: 0.88rem;
    font-weight: 850;

    line-height: 1.35;
}


/* =========================================================
   CONNECTED COMPONENTS OVERLAY
========================================================= */

.hockley-image-feature {
    position: absolute;

    left: 24px;
    right: 24px;
    bottom: 96px;

    z-index: 4;

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

    padding:
        15px 17px;

    border:
        1px solid
        rgba(230, 189, 105, 0.52);

    border-radius: 13px;

    background:
        rgba(250, 237, 207, 0.96);

    color:
        var(--hockley-navy-dark);

    backdrop-filter:
        blur(8px);

    box-shadow:
        0 16px 38px
        rgba(2, 31, 66, 0.19);
}


.hockley-image-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    flex:
        0 0 46px;

    border-radius: 11px;

    background:
        var(--hockley-navy);

    color:
        var(--hockley-orange-light);
}


.hockley-image-feature strong {
    display: block;

    margin-bottom: 3px;

    color:
        var(--hockley-navy-dark);

    font-size: 0.89rem;
    font-weight: 850;
}


.hockley-image-feature p {
    margin: 0;

    color:
        #536172;

    font-size: 0.73rem;
    line-height: 1.48;
}


/* =========================================================
   IMAGE BOTTOM BAR
========================================================= */

.hockley-image-bottom {
    position: absolute;

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

    z-index: 4;

    display: flex;
    align-items: center;

    padding:
        12px 15px;

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

    border-radius: 12px;

    background:
        rgba(2, 31, 66, 0.92);

    backdrop-filter:
        blur(8px);
}


.hockley-image-bottom-item {
    flex: 1;

    text-align: center;
}


.hockley-image-bottom-item strong,
.hockley-image-bottom-item span {
    display: block;
}


.hockley-image-bottom-item strong {
    margin-bottom: 2px;

    color:
        var(--hockley-orange-light);

    font-size: 0.84rem;
    font-weight: 850;
}


.hockley-image-bottom-item span {
    color:
        rgba(255, 255, 255, 0.73);

    font-size: 0.65rem;
}


.hockley-image-bottom-divider {
    display: block;

    width: 1px;
    height: 30px;

    margin:
        0 12px;

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


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

.hockley-why-content {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    padding:
        2px 0;
}


/* small label */

.hockley-content-label {
    display: inline-block;

    margin-bottom: 12px;

    color:
        #916a25;

    font-size: 0.73rem;
    font-weight: 850;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* right heading */

.hockley-why-content > h3 {
    margin:
        0 0 17px;

    color:
        var(--hockley-navy-dark);

    font-size:
        clamp(
            1.95rem,
            3vw,
            2.75rem
        );

    font-weight: 850;
    line-height: 1.08;

    letter-spacing:
        -0.035em;
}


.hockley-why-content > h3 span {
    display: block;

    color:
        var(--hockley-navy);
}


/* description */

.hockley-why-intro {
    margin-bottom: 23px;

    color:
        #647286;

    font-size: 0.94rem;
    line-height: 1.75;
}


/* =========================================================
   BENEFIT GRID
========================================================= */

.hockley-benefits-row {
    flex: 1;
}


/* =========================================================
   BENEFIT CARDS
========================================================= */

.hockley-benefit-card {
    position: relative;

    padding: 19px;

    overflow: hidden;

    border:
        1px solid
        rgba(6, 47, 97, 0.09);

    border-radius: 14px;

    background:
        var(--hockley-white);

    box-shadow:
        0 9px 26px
        rgba(2, 31, 66, 0.045);

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


/* subtle accent */

.hockley-benefit-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        var(--hockley-orange);

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform var(--hockley-transition);
}


.hockley-benefit-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(230, 189, 105, 0.60);

    box-shadow:
        0 14px 32px
        rgba(2, 31, 66, 0.09);
}


.hockley-benefit-card:hover::before {
    transform:
        scaleX(1);
}


/* benefit icon */

.hockley-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin-bottom: 13px;

    border-radius: 11px;

    background:
        var(--hockley-navy);

    color:
        var(--hockley-orange-light);

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


.hockley-benefit-card:hover
.hockley-benefit-icon {
    background:
        var(--hockley-orange);

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


/* benefit title */

.hockley-benefit-card h4 {
    margin:
        0 0 7px;

    color:
        var(--hockley-navy-dark);

    font-size: 0.97rem;
    font-weight: 850;

    line-height: 1.35;
}


/* benefit text */

.hockley-benefit-card p {
    margin: 0;

    color:
        #687588;

    font-size: 0.79rem;
    line-height: 1.58;
}


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

.hockley-why-cta {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-top: auto;

    padding-top: 24px;

    flex-wrap: wrap;
}


/* button */

.hockley-why-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 53px;

    padding:
        13px 22px;

    border:
        2px solid
        var(--hockley-navy);

    border-radius: 9px;

    background:
        var(--hockley-navy);

    color:
        var(--hockley-white);

    font-size: 0.89rem;
    font-weight: 850;

    text-decoration: none;

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


.hockley-why-btn:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--hockley-orange);

    background:
        var(--hockley-orange);

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


/* CTA supporting text */

.hockley-why-cta-text {
    display: flex;
    align-items: center;
    gap: 8px;

    color:
        #6b788a;

    font-size: 0.75rem;
}


.hockley-why-cta-text strong {
    color:
        var(--hockley-navy-dark);
}


/* check circle */

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

    width: 26px;
    height: 26px;

    flex:
        0 0 26px;

    border-radius: 50%;

    background:
        var(--hockley-orange-soft);

    color:
        var(--hockley-navy);

    font-weight: 900;
}


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

@media (min-width: 992px) {

    /*
       Important:
       We do NOT force 16:9 on desktop.

       This allows the image container to stretch to the
       exact height of the content column.

       Your actual source image can still be 16:9.
    */

    .hockley-why-image-wrap {
        aspect-ratio: auto;
    }

}


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

@media (max-width: 991.98px) {

    .hockley-why-section {
        padding:
            75px 0;
    }


    .hockley-why-heading {
        margin-bottom:
            40px;
    }


    /*
       Once stacked, image returns to horizontal 16:9.
    */

    .hockley-why-image-wrap {
        height: auto;

        min-height: 0;

        aspect-ratio:
            16 / 9;
    }


    .hockley-why-content {
        height: auto;
    }


    .hockley-why-cta {
        margin-top:
            24px;

        padding-top:
            0;
    }

}


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

@media (max-width: 575.98px) {

    .hockley-why-section {
        padding:
            55px 0;
    }


    .hockley-why-heading {
        margin-bottom:
            32px;
    }


    .hockley-why-heading h2 {
        font-size:
            2rem;
    }


    .hockley-why-image-wrap {
        border-radius:
            16px;
    }


    /* top badge */

    .hockley-image-badge {
        top: 12px;
        left: 12px;

        max-width:
            calc(100% - 24px);

        padding:
            9px 11px;
    }


    .hockley-image-badge-icon {
        width: 35px;
        height: 35px;

        flex-basis:
            35px;
    }


    .hockley-image-badge small {
        font-size:
            0.58rem;
    }


    .hockley-image-badge strong {
        font-size:
            0.75rem;
    }


    /* connected component card */

    .hockley-image-feature {
        left: 10px;
        right: 10px;
        bottom: 63px;

        padding:
            10px 12px;
    }


    .hockley-image-feature-icon {
        width: 36px;
        height: 36px;

        flex-basis:
            36px;
    }


    .hockley-image-feature strong {
        font-size:
            0.78rem;
    }


    .hockley-image-feature p {
        display: none;
    }


    /* bottom bar */

    .hockley-image-bottom {
        left: 10px;
        right: 10px;
        bottom: 10px;

        padding:
            8px;
    }


    .hockley-image-bottom-item strong {
        font-size:
            0.74rem;
    }


    .hockley-image-bottom-item span {
        display: none;
    }


    .hockley-image-bottom-divider {
        height: 20px;

        margin:
            0 5px;
    }


    /* content */

    .hockley-why-content > h3 {
        font-size:
            2rem;
    }


    /* button */

    .hockley-why-btn {
        width: 100%;
    }


    .hockley-why-cta-text {
        width: 100%;

        justify-content: center;
    }

}


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

.hockley-why-btn:focus-visible {
    outline:
        3px solid
        var(--hockley-orange);

    outline-offset:
        4px;
}


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

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

    .hockley-why-image,
    .hockley-benefit-card,
    .hockley-benefit-card::before,
    .hockley-benefit-icon,
    .hockley-why-btn {
        transition: none;
    }


    .hockley-why-image-wrap:hover
    .hockley-why-image,
    .hockley-benefit-card:hover,
    .hockley-why-btn:hover {
        transform: none;
    }

}


/* ___________________________________________________________________________________________ */


/* =========================================================
   HOCKLEY BRAND COLORS
========================================================= */

:root {

    --hockley-navy: #062f61;
    --hockley-navy-dark: #021f42;
    --hockley-navy-soft: #0b477f;

    --hockley-orange: #e6bd69;
    --hockley-orange-dark: #c99a43;
    --hockley-orange-light: #f3d99d;

    --hockley-orange-soft: #faedcf;
    --hockley-orange-muted: #d8bc82;

    --hockley-white: #ffffff;
    --hockley-light: #f3f6f9;
    --hockley-text: #17283a;

    --hockley-transition: 220ms ease;
}


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

.hockley-service-flow {
    position: relative;

    padding: 100px 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f4f7fa 100%
        );
}


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

.service-flow-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.service-flow-glow-one {
    display: none;
}

.service-flow-glow-two {
    bottom: -250px;
    left: -220px;

    width: 520px;
    height: 520px;

    border:
        85px solid
        rgba(6, 47, 97, 0.035);
}


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

.service-flow-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 15px;

    color: #91691f;

    font-size: 0.76rem;
    font-weight: 850;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.eyebrow-dot {
    position: relative;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background:
        var(--hockley-orange);
}


.eyebrow-dot::after {
    content: "";

    position: absolute;

    inset: -5px;

    border:
        1px solid
        rgba(201, 154, 67, 0.40);

    border-radius: 50%;

    animation:
        hockleyPulse 2.1s infinite;
}


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

.service-flow-title {
    max-width: 680px;

    margin: 0;

    color: var(--hockley-navy-dark);

    font-size: clamp(1.8rem, 3.2vw, 2.9rem);

    font-weight: 850;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.service-flow-title span {
    display: block;
    color: var(--hockley-navy);
}


/* =========================================================
   INTRO
========================================================= */

.service-flow-intro {
    max-width: 500px;

    margin-left: auto;
}


.service-flow-intro > p {
    margin-bottom: 16px;

    color: #627184;

    font-size: 0.97rem;
    line-height: 1.8;
}


/* =========================================================
   MINI POINTS
========================================================= */

.service-flow-mini-points {
    display: flex;
    align-items: center;
    gap: 18px;

    flex-wrap: wrap;
}


.service-flow-mini-points span {
    display: flex;
    align-items: center;
    gap: 7px;

    color:
        var(--hockley-navy-dark);

    font-size: 0.78rem;
    font-weight: 800;
}


.service-flow-mini-points i {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background:
        var(--hockley-orange-soft);

    color:
        var(--hockley-navy);

    font-style: normal;
}


/* =========================================================
   MAIN MARKETING BOARD
========================================================= */

.service-flow-board {
    position: relative;

    padding: 30px 0;

    overflow: hidden;

    border:
        1px solid
        rgba(6, 47, 97, 0.11);

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            var(--hockley-navy-dark),
            var(--hockley-navy)
        );

    box-shadow:
        0 30px 75px
        rgba(2, 31, 66, 0.16);
}


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

.service-flow-board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    padding:
        4px 32px 27px;
}


.board-label {
    display: inline-block;

    margin-bottom: 7px;

    color:
        var(--hockley-orange-light);

    font-size: 0.68rem;
    font-weight: 850;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.service-flow-board-header h3 {
    margin: 0;

    color:
        var(--hockley-white);

    font-size:
        clamp(
            1.5rem,
            3vw,
            2.25rem
        );

    font-weight: 800;
}


.service-flow-board-header h3 strong {
    color:
        var(--hockley-orange);
}


/* =========================================================
   STATUS
========================================================= */

.board-status {
    display: flex;
    align-items: center;
    gap: 11px;

    flex-shrink: 0;

    padding:
        11px 15px;

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

    border-radius: 12px;

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


.status-pulse {
    position: relative;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background:
        var(--hockley-orange);
}


.status-pulse::after {
    content: "";

    position: absolute;

    inset: -5px;

    border:
        1px solid
        var(--hockley-orange);

    border-radius: 50%;

    animation:
        hockleyPulse 1.7s infinite;
}


.board-status small,
.board-status strong {
    display: block;
}


.board-status small {
    margin-bottom: 2px;

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

    font-size: 0.6rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.board-status strong {
    color:
        var(--hockley-white);

    font-size: 0.78rem;
}


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

.service-marquee {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        8px 0;
}


.service-marquee::before,
.service-marquee::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    z-index: 5;

    width: 80px;

    pointer-events: none;
}


.service-marquee::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            var(--hockley-navy-dark),
            transparent
        );
}


.service-marquee::after {
    right: 0;

    background:
        linear-gradient(
            270deg,
            var(--hockley-navy),
            transparent
        );
}


/* =========================================================
   TRACK
========================================================= */

.service-marquee-track {
    display: flex;

    width: max-content;

    gap: 16px;

    padding:
        0 8px;
}


.service-track-left {
    animation:
        serviceMoveLeft 32s linear infinite;
}


.service-track-right {
    animation:
        serviceMoveRight 34s linear infinite;
}


/* Pause on hover */

.service-flow-board:hover
.service-marquee-track {
    animation-play-state:
        paused;
}


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

.service-motion-card {
    display: flex;
    align-items: center;
    gap: 15px;

    width: 310px;

    min-height: 115px;

    padding:
        17px;

    flex: 0 0 310px;

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

    border-radius: 15px;

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

    backdrop-filter:
        blur(8px);

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

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


.service-motion-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(230,189,105,0.52);

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


/* =========================================================
   MOVING ICON
========================================================= */

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

    width: 54px;
    height: 54px;

    flex:
        0 0 54px;

    border-radius: 13px;

    background:
        var(--hockley-orange);

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


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

.motion-content > span {
    display: block;

    margin-bottom: 2px;

    color:
        var(--hockley-orange-light);

    font-size: 0.63rem;
    font-weight: 850;

    letter-spacing: 0.10em;
}


.motion-content h4 {
    margin:
        0 0 5px;

    color:
        var(--hockley-white);

    font-size: 0.97rem;
    font-weight: 850;
}


.motion-content p {
    margin: 0;

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

    font-size: 0.73rem;
    line-height: 1.5;
}


/* =========================================================
   SECOND ROW
========================================================= */

.second-marquee {
    margin-top: 6px;
}


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

.service-flow-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    margin-top: 34px;

    padding:
        24px 27px;

    border:
        1px solid
        rgba(230,189,105,0.45);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--hockley-orange-soft),
            #fffdf8
        );

    box-shadow:
        0 18px 48px
        rgba(2,31,66,0.09);
}


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

.service-flow-cta-left {
    display: flex;
    align-items: center;
    gap: 16px;
}


.cta-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    flex:
        0 0 54px;

    border-radius: 13px;

    background:
        var(--hockley-navy);

    color:
        var(--hockley-orange-light);
}


.service-flow-cta-left span {
    display: block;

    margin-bottom: 3px;

    color:
        #906a26;

    font-size: 0.66rem;
    font-weight: 850;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.service-flow-cta-left strong {
    display: block;

    margin-bottom: 3px;

    color:
        var(--hockley-navy-dark);

    font-size: 1rem;
}


.service-flow-cta-left p {
    margin: 0;

    color: #657284;

    font-size: 0.79rem;
}


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

.service-flow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 52px;

    flex-shrink: 0;

    padding:
        13px 23px;

    border:
        2px solid
        var(--hockley-navy);

    border-radius: 9px;

    background:
        var(--hockley-navy);

    color:
        var(--hockley-white);

    font-size: 0.88rem;
    font-weight: 850;

    text-decoration: none;

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


.service-flow-btn:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--hockley-orange);

    background:
        var(--hockley-orange);

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


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

@keyframes serviceMoveLeft {

    from {
        transform:
            translateX(0);
    }

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

}


@keyframes serviceMoveRight {

    from {
        transform:
            translateX(calc(-50% - 8px));
    }

    to {
        transform:
            translateX(0);
    }

}


@keyframes hockleyPulse {

    0% {
        transform:
            scale(0.7);

        opacity: 0.9;
    }

    70% {
        transform:
            scale(1.45);

        opacity: 0;
    }

    100% {
        transform:
            scale(1.45);

        opacity: 0;
    }

}


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

@media (max-width: 991.98px) {

    .hockley-service-flow {
        padding:
            75px 0;
    }


    .service-flow-intro {
        max-width: none;

        margin-left: 0;
    }


    .service-flow-board-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .service-motion-card {
        width: 280px;

        flex-basis:
            280px;
    }


    .service-flow-cta {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


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

@media (max-width: 575.98px) {

    .hockley-service-flow {
        padding: 55px 0;
    }

    .service-flow-title {
        font-size: 1.9rem;
        line-height: 1.1;
    }


    .service-flow-board {
        border-radius:
            18px;
    }


    .service-flow-board-header {
        padding:
            2px 20px 20px;
    }


    .board-status {
        width: 100%;
    }


    .service-motion-card {
        width: 245px;

        min-height: 105px;

        flex-basis:
            245px;

        padding:
            14px;
    }


    .motion-icon {
        width: 47px;
        height: 47px;

        flex-basis:
            47px;
    }


    .service-flow-cta {
        padding:
            20px;
    }


    .service-flow-cta-left {
        align-items:
            flex-start;
    }


    .service-flow-btn {
        width: 100%;
    }

}


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

.service-flow-btn:focus-visible {
    outline:
        3px solid
        var(--hockley-orange);

    outline-offset:
        4px;
}


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

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

    .service-marquee-track,
    .eyebrow-dot::after,
    .status-pulse::after {
        animation: none;
    }


    .service-marquee {
        overflow-x: auto;
    }


    .service-motion-card,
    .service-flow-btn {
        transition: none;
    }


    .service-motion-card:hover,
    .service-flow-btn:hover {
        transform: none;
    }

}


/* ____________________________________________________________________________________________________ */


/* =========================================================
   GARAGE DOOR REPAIR HOCKLEY
   CREATIVE DIAGNOSTIC FAQ
========================================================= */

:root {

    --hockley-navy: #062f61;
    --hockley-navy-dark: #021f42;
    --hockley-navy-soft: #0b477f;

    --hockley-orange: #e6bd69;
    --hockley-orange-dark: #c99a43;
    --hockley-orange-light: #f3d99d;

    --hockley-orange-soft: #faedcf;
    --hockley-orange-muted: #d8bc82;

    --hockley-white: #ffffff;
    --hockley-light: #f3f6f9;
    --hockley-text: #17283a;

    --hockley-transition: 250ms ease;
}


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

.hockley-trouble-faq {
    position: relative;

    padding: 95px 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f4f7fa
        );
}


.hockley-trouble-shell {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(6, 47, 97, 0.09);

    border-radius: 28px;

    background:
        var(--hockley-white);

    box-shadow:
        0 30px 80px
        rgba(2, 31, 66, 0.11);
}


/* =========================================================
   LEFT PANEL
========================================================= */

.hockley-trouble-side {
    position: relative;

    height: 100%;

    min-height: 690px;

    overflow: hidden;

    background:
        linear-gradient(
            150deg,
            var(--hockley-navy-dark),
            var(--hockley-navy)
        );

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


/* subtle technical pattern */

.hockley-trouble-side::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size:
        36px 36px;

    pointer-events: none;
}


/* gold glow */

.hockley-trouble-side::after {
    content: "";

    position: absolute;

    width: 290px;
    height: 290px;

    left: -170px;
    bottom: -110px;

    border-radius: 50%;

    background:
        rgba(230, 189, 105, 0.10);

    pointer-events: none;
}


/* =========================================================
   SCANNING LINE
========================================================= */

.hockley-scan-line {
    position: absolute;

    top: -30%;
    left: 0;

    z-index: 1;

    width: 100%;
    height: 90px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(230,189,105,0.07),
            transparent
        );

    animation:
        hockleyScan 7s linear infinite;

    pointer-events: none;
}


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

.hockley-trouble-side-content {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;

    height: 100%;

    padding:
        55px 38px;
}


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

.hockley-trouble-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 19px;

    color:
        var(--hockley-orange-light);

    font-size: 0.7rem;
    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.hockley-live-dot {
    position: relative;

    display: block;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background:
        var(--hockley-orange);
}


.hockley-live-dot::after {
    content: "";

    position: absolute;

    inset: -5px;

    border:
        1px solid
        var(--hockley-orange);

    border-radius: 50%;

    animation:
        hockleyPulse 1.8s infinite;
}


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

.hockley-trouble-side h2 {
    margin:
        0 0 20px;

    color:
        var(--hockley-white);

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.6rem
        );

    font-weight: 850;
    line-height: 1.03;

    letter-spacing:
        -0.045em;
}


.hockley-trouble-side h2 span {
    display: block;

    color:
        var(--hockley-orange);
}


.hockley-trouble-side-content > p {
    margin-bottom: 29px;

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

    font-size: 0.92rem;
    line-height: 1.75;
}


/* =========================================================
   DIAGNOSTIC METERS
========================================================= */

.hockley-trouble-meter {
    display: flex;
    flex-direction: column;
    gap: 15px;

    margin-bottom: 30px;

    padding: 20px;

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

    border-radius: 15px;

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


.hockley-meter-item {
    display: grid;

    grid-template-columns:
        85px 1fr;

    align-items: center;
    gap: 12px;
}


.hockley-meter-item > span {
    color:
        rgba(255,255,255,0.75);

    font-size: 0.71rem;
    font-weight: 800;
}


.hockley-meter-item > div {
    position: relative;

    height: 6px;

    overflow: hidden;

    border-radius: 50px;

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


.hockley-meter-item i {
    position: absolute;

    inset:
        0 auto 0 0;

    width:
        var(--level);

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            var(--hockley-orange-dark),
            var(--hockley-orange-light)
        );

    transform-origin:
        left center;

    animation:
        hockleyMeter 1.3s ease both;
}


/* =========================================================
   WARNING BOX
========================================================= */

.hockley-trouble-warning {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    margin-bottom: 28px;

    padding: 17px;

    border:
        1px solid
        rgba(230,189,105,0.27);

    border-radius: 14px;

    background:
        rgba(230,189,105,0.09);
}


.hockley-warning-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex:
        0 0 42px;

    border-radius: 10px;

    background:
        var(--hockley-orange);

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


.hockley-trouble-warning strong {
    display: block;

    margin-bottom: 4px;

    color:
        var(--hockley-white);

    font-size: 0.84rem;
}


.hockley-trouble-warning p {
    margin: 0;

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

    font-size: 0.72rem;
    line-height: 1.5;
}


/* =========================================================
   SIDE BUTTON
========================================================= */

.hockley-side-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    min-height: 52px;

    margin-top: auto;

    padding:
        13px 20px;

    border:
        2px solid
        var(--hockley-orange);

    border-radius: 9px;

    background:
        var(--hockley-orange);

    color:
        var(--hockley-navy-dark);

    font-size: 0.85rem;
    font-weight: 850;

    text-decoration: none;

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


.hockley-side-btn:hover {
    transform:
        translateY(-2px);

    background:
        var(--hockley-orange-light);

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


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

.hockley-trouble-content {
    height: 100%;

    padding:
        50px 44px;

    background:
        #f8fafc;
}


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

.hockley-trouble-content-head {
    max-width: 700px;

    margin-bottom: 30px;
}


.hockley-trouble-content-head > span {
    display: inline-block;

    margin-bottom: 9px;

    color:
        #906923;

    font-size: 0.69rem;
    font-weight: 850;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.hockley-trouble-content-head h3 {
    margin:
        0 0 12px;

    color:
        var(--hockley-navy-dark);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.65rem
        );

    font-weight: 850;
    line-height: 1.08;

    letter-spacing:
        -0.035em;
}


.hockley-trouble-content-head h3 strong {
    color:
        var(--hockley-navy);
}


.hockley-trouble-content-head p {
    margin: 0;

    color:
        #687589;

    font-size: 0.88rem;
    line-height: 1.7;
}


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

.hockley-diagnostic-card {
    position: relative;

    height: 100%;

    overflow: hidden;

    border:
        1px solid
        rgba(6,47,97,0.09);

    border-radius: 18px;

    background:
        var(--hockley-white);

    box-shadow:
        0 10px 26px
        rgba(2,31,66,0.05);

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


.hockley-diagnostic-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(230,189,105,0.62);

    box-shadow:
        0 17px 38px
        rgba(2,31,66,0.09);
}


.hockley-diagnostic-card[open] {
    border-color:
        rgba(230,189,105,0.70);
}


/* gold corner accent */

.hockley-diagnostic-card::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 55px;
    height: 55px;

    background:
        linear-gradient(
            225deg,
            var(--hockley-orange-soft) 50%,
            transparent 50%
        );

    pointer-events: none;
}


/* =========================================================
   SUMMARY
========================================================= */

.hockley-diagnostic-card summary {
    position: relative;

    min-height: 230px;

    padding:
        21px;

    cursor: pointer;

    list-style: none;

    user-select: none;
}


.hockley-diagnostic-card summary::-webkit-details-marker {
    display: none;
}


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

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

    margin-bottom: 22px;
}


.hockley-diagnostic-number {
    color:
        rgba(6,47,97,0.13);

    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}


.hockley-diagnostic-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border-radius: 12px;

    background:
        var(--hockley-navy);

    color:
        var(--hockley-orange-light);

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


.hockley-diagnostic-card[open]
.hockley-diagnostic-icon {
    transform:
        rotate(-6deg);

    background:
        var(--hockley-orange);

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


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

.hockley-diagnostic-label {
    display: block;

    margin-bottom: 7px;

    color:
        #987128;

    font-size: 0.65rem;
    font-weight: 850;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


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

.hockley-diagnostic-card h4 {
    max-width: 290px;

    margin: 0;

    color:
        var(--hockley-navy-dark);

    font-size: 0.98rem;
    font-weight: 850;
    line-height: 1.5;
}


/* =========================================================
   TOGGLE
========================================================= */

.hockley-diagnostic-toggle {
    position: absolute;

    right: 20px;
    bottom: 18px;

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

    width: 35px;
    height: 35px;

    border-radius: 50%;

    background:
        var(--hockley-orange-soft);

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


.hockley-diagnostic-toggle i {
    position: absolute;

    width: 12px;
    height: 2px;

    background:
        var(--hockley-navy);

    border-radius: 2px;

    transition:
        transform var(--hockley-transition);
}


.hockley-diagnostic-toggle i:nth-child(2) {
    transform:
        rotate(90deg);
}


.hockley-diagnostic-card[open]
.hockley-diagnostic-toggle {
    transform:
        rotate(180deg);

    background:
        var(--hockley-navy);
}


.hockley-diagnostic-card[open]
.hockley-diagnostic-toggle i {
    background:
        var(--hockley-orange-light);
}


.hockley-diagnostic-card[open]
.hockley-diagnostic-toggle i:nth-child(2) {
    transform:
        rotate(0);
}


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

.hockley-diagnostic-answer {
    padding:
        0 21px 22px;

    animation:
        hockleyAnswer 300ms ease both;
}


.hockley-diagnostic-answer::before {
    content: "";

    display: block;

    width: 45px;
    height: 2px;

    margin-bottom: 14px;

    background:
        var(--hockley-orange);
}


.hockley-diagnostic-answer p {
    margin: 0;

    color:
        #647184;

    font-size: 0.82rem;
    line-height: 1.72;
}


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

.hockley-diagnostic-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: 25px;

    padding:
        16px 18px;

    border:
        1px solid
        rgba(6,47,97,0.08);

    border-radius: 14px;

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


.hockley-footer-status {
    display: flex;
    align-items: center;
    gap: 11px;
}


.hockley-footer-pulse {
    position: relative;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background:
        var(--hockley-orange);
}


.hockley-footer-pulse::after {
    content: "";

    position: absolute;

    inset: -5px;

    border:
        1px solid
        var(--hockley-orange-dark);

    border-radius: 50%;

    animation:
        hockleyPulse 1.8s infinite;
}


.hockley-footer-status small,
.hockley-footer-status strong {
    display: block;
}


.hockley-footer-status small {
    margin-bottom: 2px;

    color:
        #907027;

    font-size: 0.6rem;
    font-weight: 800;

    text-transform: uppercase;
}


.hockley-footer-status strong {
    color:
        var(--hockley-navy-dark);

    font-size: 0.8rem;
}


.hockley-diagnostic-footer > p {
    margin: 0;

    color:
        #748195;

    font-size: 0.68rem;
    font-weight: 700;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes hockleyScan {

    0% {
        transform:
            translateY(-100px);
    }

    100% {
        transform:
            translateY(850px);
    }

}


@keyframes hockleyPulse {

    0% {
        transform:
            scale(0.7);

        opacity: 1;
    }

    70% {
        transform:
            scale(1.55);

        opacity: 0;
    }

    100% {
        opacity: 0;
    }

}


@keyframes hockleyMeter {

    from {
        transform:
            scaleX(0);
    }

    to {
        transform:
            scaleX(1);
    }

}


@keyframes hockleyAnswer {

    from {
        opacity: 0;

        transform:
            translateY(-6px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


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

@media (max-width: 991.98px) {

    .hockley-trouble-faq {
        padding:
            75px 0;
    }


    .hockley-trouble-side {
        min-height:
            auto;
    }


    .hockley-trouble-side-content {
        padding:
            45px 35px;
    }


    .hockley-side-btn {
        margin-top:
            10px;
    }


    .hockley-trouble-content {
        padding:
            42px 35px;
    }

}


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

@media (max-width: 575.98px) {

    .hockley-trouble-faq {
        padding:
            55px 0;
    }


    .hockley-trouble-shell {
        border-radius:
            20px;
    }


    .hockley-trouble-side-content {
        padding:
            36px 22px;
    }


    .hockley-trouble-side h2 {
        font-size:
            2.25rem;
    }


    .hockley-trouble-content {
        padding:
            34px 20px;
    }


    .hockley-diagnostic-card summary {
        min-height:
            205px;
    }


    .hockley-diagnostic-footer {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


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

.hockley-diagnostic-card summary:focus-visible {
    outline:
        3px solid
        var(--hockley-orange);

    outline-offset:
        -3px;
}


.hockley-side-btn:focus-visible {
    outline:
        3px solid
        var(--hockley-orange-light);

    outline-offset:
        4px;
}


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

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

    .hockley-scan-line,
    .hockley-live-dot::after,
    .hockley-footer-pulse::after,
    .hockley-meter-item i,
    .hockley-diagnostic-answer {
        animation: none;
    }


    .hockley-diagnostic-card,
    .hockley-diagnostic-icon,
    .hockley-diagnostic-toggle,
    .hockley-side-btn {
        transition: none;
    }


    .hockley-diagnostic-card:hover,
    .hockley-side-btn:hover {
        transform: none;
    }

}

/* _______________________________________________________________________________________________________ */


/* =========================================================
   GARAGE DOOR REPAIR HOCKLEY
   CONTACT SECTION
========================================================= */

:root {

    /* PRIMARY COLORS */
    --hockley-navy: #062f61;
    --hockley-navy-dark: #021f42;
    --hockley-navy-soft: #0b477f;

    /* PASTEL GOLD */
    --hockley-orange: #e6bd69;
    --hockley-orange-dark: #c99a43;
    --hockley-orange-light: #f3d99d;

    /* OPTIONAL ACCENTS */
    --hockley-orange-soft: #faedcf;
    --hockley-orange-muted: #d8bc82;

    /* NEUTRALS */
    --hockley-white: #ffffff;
    --hockley-light: #f3f6f9;
    --hockley-text: #17283a;

    --hockley-transition: 230ms ease;
}


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

.hockley-contact-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f4f7fa 100%
        );
}


/* =========================================================
   MAIN SHELL
========================================================= */

.hockley-contact-shell {
    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(6, 47, 97, 0.09);

    border-radius: 26px;

    background:
        var(--hockley-white);

    box-shadow:
        0 30px 80px
        rgba(2, 31, 66, 0.11);
}


/* =========================================================
   LEFT COLUMN
========================================================= */

.hockley-contact-location {
    height: 100%;

    padding: 50px 42px;

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


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

.hockley-contact-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 15px;

    color: #906923;

    font-size: 0.72rem;
    font-weight: 850;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.hockley-contact-eyebrow span {
    width: 38px;
    height: 3px;

    border-radius: 50px;

    background:
        var(--hockley-orange);
}


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

.hockley-contact-location > h2 {
    margin:
        0 0 18px;

    color:
        var(--hockley-navy-dark);

    font-size:
        clamp(
            2rem,
            3.5vw,
            3.25rem
        );

    font-weight: 850;
    line-height: 1.07;

    letter-spacing:
        -0.04em;
}


.hockley-contact-location > h2 span {
    display: block;

    color:
        var(--hockley-navy);
}


/* =========================================================
   INTRO
========================================================= */

.hockley-contact-lead {
    max-width: 600px;

    margin-bottom: 28px;

    color: #657386;

    font-size: 0.94rem;
    line-height: 1.75;
}


/* =========================================================
   MAP
========================================================= */

.hockley-map-wrap {
    position: relative;

    width: 100%;
    height: 350px;

    overflow: hidden;

    margin-bottom: 24px;

    border:
        1px solid rgba(6, 47, 97, 0.10);

    border-radius: 18px;

    background:
        var(--hockley-light);

    box-shadow:
        0 14px 35px
        rgba(2, 31, 66, 0.08);
}


.hockley-map-wrap iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================================
   MAP ADDRESS CARD
========================================================= */

.hockley-map-address {
    position: absolute;

    left: 18px;
    bottom: 18px;

    z-index: 3;

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

    max-width:
        calc(100% - 36px);

    padding:
        12px 15px;

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

    border-radius: 12px;

    background:
        rgba(2,31,66,0.94);

    color:
        var(--hockley-white);

    box-shadow:
        0 14px 32px
        rgba(2,31,66,0.20);
}


.hockley-map-address-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 10px;

    background:
        var(--hockley-orange);

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


.hockley-map-address small,
.hockley-map-address strong,
.hockley-map-address div > span {
    display: block;
}


.hockley-map-address small {
    margin-bottom: 2px;

    color:
        var(--hockley-orange-light);

    font-size: 0.59rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.hockley-map-address strong {
    font-size: 0.88rem;
}


.hockley-map-address div > span {
    margin-top: 1px;

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

    font-size: 0.72rem;
}


/* =========================================================
   SERVICE AREA
========================================================= */

.hockley-service-area {
    padding: 20px;

    border:
        1px solid rgba(230,189,105,0.47);

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            var(--hockley-orange-soft),
            #fffdf9
        );
}


.hockley-service-area-title {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 10px;
}


.hockley-service-area-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    border-radius: 9px;

    background:
        var(--hockley-navy);

    color:
        var(--hockley-orange-light);
}


.hockley-service-area h3 {
    margin: 0;

    color:
        var(--hockley-navy-dark);

    font-size: 0.95rem;
    font-weight: 850;
}


.hockley-service-area > p {
    margin:
        0 0 14px;

    color: #596778;

    font-size: 0.79rem;
    line-height: 1.65;
}


/* =========================================================
   AREA TAGS
========================================================= */

.hockley-area-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}


.hockley-area-tags span {
    padding:
        6px 10px;

    border:
        1px solid rgba(6,47,97,0.10);

    border-radius: 50px;

    background:
        var(--hockley-white);

    color:
        var(--hockley-navy);

    font-size: 0.65rem;
    font-weight: 800;
}


/* =========================================================
   RIGHT FORM SIDE
========================================================= */

.hockley-contact-form-side {
    height: 100%;

    padding: 50px 42px;

    background:
        linear-gradient(
            145deg,
            var(--hockley-navy-dark),
            var(--hockley-navy)
        );
}


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

.hockley-form-header {
    margin-bottom: 27px;
}


.hockley-form-label {
    display: inline-block;

    margin-bottom: 9px;

    color:
        var(--hockley-orange-light);

    font-size: 0.68rem;
    font-weight: 850;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}


.hockley-form-header h3 {
    margin:
        0 0 10px;

    color:
        var(--hockley-white);

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.5rem
        );

    font-weight: 850;
    line-height: 1.1;

    letter-spacing:
        -0.035em;
}


.hockley-form-header p {
    max-width: 560px;

    margin: 0;

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

    font-size: 0.82rem;
    line-height: 1.65;
}


/* =========================================================
   BOOKING FIELD
========================================================= */

.hockley-booking-field {
    position: relative;
}


/* inputs */

.hockley-booking-field .form-control,
.hockley-booking-field .form-select {
    min-height: 58px;

    padding:
        20px 46px 7px 15px;

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

    border-radius: 10px;

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

    color:
        var(--hockley-white);

    box-shadow: none;

    font-size: 0.85rem;

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


.hockley-booking-field .form-control:hover,
.hockley-booking-field .form-select:hover {
    border-color:
        rgba(230,189,105,0.40);
}


.hockley-booking-field .form-control:focus,
.hockley-booking-field .form-select:focus {
    border-color:
        var(--hockley-orange);

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

    box-shadow:
        0 0 0 3px
        rgba(230,189,105,0.13);

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


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

.hockley-booking-field label {
    position: absolute;

    top: 18px;
    left: 15px;

    z-index: 3;

    max-width:
        calc(100% - 60px);

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

    font-size: 0.82rem;

    pointer-events: none;

    transition:
        transform var(--hockley-transition),
        color var(--hockley-transition),
        font-size var(--hockley-transition);
}


/* floating label */

.hockley-booking-field
.form-control:focus ~ label,

.hockley-booking-field
.form-control:not(:placeholder-shown) ~ label {

    transform:
        translateY(-10px);

    color:
        var(--hockley-orange-light);

    font-size: 0.61rem;

    font-weight: 800;
}


/* select labels always floated */

.hockley-booking-field--select label {
    top: 8px;

    color:
        var(--hockley-orange-light);

    font-size: 0.61rem;
    font-weight: 800;
}


/* =========================================================
   SELECT
========================================================= */

.hockley-booking-field .form-select {
    padding-top: 21px;

    color-scheme: dark;
}


.hockley-booking-field .form-select option {
    background:
        var(--hockley-navy-dark);

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


/* =========================================================
   FIELD ICON
========================================================= */

.hockley-field-icon {
    position: absolute;

    top: 50%;
    right: 15px;

    z-index: 4;

    transform:
        translateY(-50%);

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

    width: 21px;
    height: 21px;

    color:
        var(--hockley-orange);

    pointer-events: none;
}


.hockley-field-icon svg {
    width: 20px;
    height: 20px;
}


/* =========================================================
   TEXTAREA
========================================================= */

.hockley-booking-field--textarea
.form-control {
    min-height: 112px;

    padding-top: 27px;

    resize: vertical;
}


.hockley-booking-field--textarea
.hockley-field-icon {
    top: 19px;

    transform: none;
}


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

.hockley-date-heading {
    display: flex;
    align-items: center;
    gap: 11px;

    margin:
        5px 0 0;

    padding:
        12px 14px;

    border:
        1px solid rgba(230,189,105,0.20);

    border-radius: 10px;

    background:
        rgba(230,189,105,0.07);
}


.hockley-date-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    border-radius: 8px;

    background:
        var(--hockley-orange);

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


.hockley-date-icon svg {
    width: 19px;
    height: 19px;
}


.hockley-date-heading strong,
.hockley-date-heading div > span {
    display: block;
}


.hockley-date-heading strong {
    margin-bottom: 2px;

    color:
        var(--hockley-white);

    font-size: 0.77rem;
}


.hockley-date-heading div > span {
    color:
        rgba(255,255,255,0.56);

    font-size: 0.64rem;
}


/* =========================================================
   DATE ERROR
========================================================= */

.hockley-date-error {
    margin:
        -5px 0 0;

    color:
        var(--hockley-orange-light);

    font-size: 0.72rem;
}


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

.hockley-booking-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

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

    padding:
        12px 18px;

    border:
        2px solid var(--hockley-orange);

    border-radius: 10px;

    background:
        var(--hockley-orange);

    color:
        var(--hockley-navy-dark);

    font-size: 0.88rem;
    font-weight: 850;

    cursor: pointer;

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


.hockley-booking-submit:hover {
    transform:
        translateY(-2px);

    background:
        var(--hockley-orange-light);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,0.17);
}


.hockley-submit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.hockley-submit-icon svg {
    width: 22px;
    height: 22px;
}


.hockley-submit-arrow {
    font-size: 1.2rem;

    transition:
        transform var(--hockley-transition);
}


.hockley-booking-submit:hover
.hockley-submit-arrow {
    transform:
        translateX(4px);
}


/* =========================================================
   FORM NOTE
========================================================= */

.hockley-booking-note {
    margin:
        15px 0 0;

    text-align: center;

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

    font-size: 0.65rem;
    line-height: 1.5;
}


/* =========================================================
   AUTOFILL
========================================================= */

.hockley-booking-field
input:-webkit-autofill,

.hockley-booking-field
input:-webkit-autofill:hover,

.hockley-booking-field
input:-webkit-autofill:focus {

    -webkit-text-fill-color:
        var(--hockley-white);

    -webkit-box-shadow:
        0 0 0 1000px
        var(--hockley-navy)
        inset;

    transition:
        background-color 9999s ease-out;
}


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

@media (max-width: 991.98px) {

    .hockley-contact-section {
        padding:
            75px 0;
    }


    .hockley-contact-location,
    .hockley-contact-form-side {
        padding:
            42px 34px;
    }


    .hockley-map-wrap {
        height:
            390px;
    }

}


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

@media (max-width: 575.98px) {

    .hockley-contact-section {
        padding:
            55px 0;
    }


    .hockley-contact-shell {
        border-radius:
            18px;
    }


    .hockley-contact-location,
    .hockley-contact-form-side {
        padding:
            32px 20px;
    }


    .hockley-contact-location > h2 {
        font-size:
            2rem;
    }


    .hockley-map-wrap {
        height:
            330px;

        border-radius:
            14px;
    }


    .hockley-map-address {
        left: 10px;
        right: 10px;
        bottom: 10px;

        max-width: none;
    }


    .hockley-area-tags span {
        font-size:
            0.61rem;
    }


    .hockley-booking-field label {
        font-size:
            0.76rem;
    }

}


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

.hockley-booking-submit:focus-visible,
.hockley-booking-field
.form-control:focus-visible,
.hockley-booking-field
.form-select:focus-visible {

    outline:
        3px solid
        var(--hockley-orange-light);

    outline-offset:
        3px;
}


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

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

    .hockley-booking-submit,
    .hockley-submit-arrow,
    .hockley-booking-field label,
    .hockley-booking-field .form-control,
    .hockley-booking-field .form-select {
        transition: none;
    }


    .hockley-booking-submit:hover {
        transform: none;
    }

}

/* __________________________________________________________________________________________________________ */


/* =========================================================
   HOCKLEY CENTERED CARD FOOTER
========================================================= */

:root {
    --hockley-navy: #062f61;
    --hockley-navy-dark: #021f42;
    --hockley-navy-soft: #0b477f;

    --hockley-orange: #e6bd69;
    --hockley-orange-dark: #c99a43;
    --hockley-orange-light: #f3d99d;
    --hockley-orange-soft: #faedcf;
    --hockley-orange-muted: #d8bc82;

    --hockley-white: #ffffff;
    --hockley-light: #f3f6f9;
    --hockley-text: #17283a;

    --hockley-transition: 220ms ease;
}


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

.hockley-card-footer {
    position: relative;
    overflow: hidden;

    padding: 80px 0 25px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(11, 71, 127, 0.62),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            var(--hockley-navy) 0%,
            var(--hockley-navy-dark) 100%
        );

    color: var(--hockley-white);

    text-align: center;
}


.hockley-card-footer-inner {
    position: relative;
    z-index: 2;
}


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

.hockley-card-footer-brand {
    max-width: 760px;

    margin: 0 auto 42px;
}


.hockley-card-footer-eyebrow {
    display: inline-block;

    margin-bottom: 11px;

    color: var(--hockley-orange-light);

    font-size: 0.75rem;
    font-weight: 850;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.hockley-card-footer-brand h2 {
    margin: 0 0 17px;

    color: var(--hockley-white);

    font-size: clamp(
        1.9rem,
        3vw,
        2.7rem
    );

    font-weight: 850;

    line-height: 1.08;

    letter-spacing: -0.035em;
}


.hockley-card-footer-brand h2 span {
    color: var(--hockley-orange);
}


.hockley-card-footer-brand p {
    max-width: 680px;

    margin: 0 auto;

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

    font-size: 0.96rem;

    line-height: 1.8;
}


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

.hockley-footer-card-grid {
    display: grid;

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

    gap: 16px;

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

    margin: 0 auto;

    font-style: normal;
}


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

.hockley-footer-card {
    position: relative;

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

    min-height: 175px;

    padding: 24px 20px;

    overflow: hidden;

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

    border-radius: 16px;

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

    color: var(--hockley-white);

    text-align: center;

    text-decoration: none;

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

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


/* GOLD TOP ACCENT */

.hockley-footer-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 48px;
    height: 3px;

    transform:
        translateX(-50%);

    border-radius:
        0 0 20px 20px;

    background:
        var(--hockley-orange);

    transition:
        width var(--hockley-transition);
}


.hockley-footer-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(230, 189, 105, 0.50);

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

    box-shadow:
        0 20px 42px
        rgba(0, 0, 0, 0.13);

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


.hockley-footer-card:hover::before {
    width: 100%;
}


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

.hockley-footer-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin-bottom: 14px;

    border-radius: 50%;

    background:
        var(--hockley-orange);

    color:
        var(--hockley-navy-dark);

    box-shadow:
        0 9px 22px
        rgba(0, 0, 0, 0.14);

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


.hockley-footer-card-icon svg {
    width: 21px;
    height: 21px;
}


.hockley-footer-card:hover
.hockley-footer-card-icon {
    transform:
        translateY(-2px);

    background:
        var(--hockley-orange-light);
}


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

.hockley-footer-card small {
    display: block;

    margin-bottom: 6px;

    color:
        var(--hockley-orange-light);

    font-size: 0.65rem;
    font-weight: 850;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


/* =========================================================
   VALUES
========================================================= */

.hockley-footer-card strong,
.hockley-footer-card > span:not(.hockley-footer-card-icon) {
    color:
        rgba(255, 255, 255, 0.90);

    font-size: 0.91rem;
    font-weight: 700;

    line-height: 1.55;
}


a.hockley-footer-card:hover strong {
    color: var(--hockley-white);
}


/* =========================================================
   EMAIL
========================================================= */

.hockley-card-footer .obfuscatedEmail {
    display: block;

    max-width: 230px;

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

    font-size: 0.82rem;

    line-height: 1.5;
}


/* =========================================================
   MOBILE SERVICE STATUS
========================================================= */

.hockley-mobile-status {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;
}


.hockley-mobile-status > span {
    position: relative;

    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background:
        var(--hockley-orange);
}


.hockley-mobile-status > span::after {
    content: "";

    position: absolute;

    inset: -5px;

    border:
        1px solid
        var(--hockley-orange);

    border-radius: 50%;

    animation:
        hockleyFooterPulse 1.8s infinite;
}


/* =========================================================
   WEBSITE
========================================================= */

.hockley-footer-domain {
    font-size: 0.82rem !important;

    word-break: break-word;
}


/* =========================================================
   BOTTOM
========================================================= */

.hockley-card-footer-bottom {
    margin-top: 48px;

    text-align: center;
}


.hockley-card-footer-divider {
    display: block;

    width: min(650px, 80%);
    height: 1px;

    margin:
        0 auto 21px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(230, 189, 105, 0.55),
            transparent
        );
}


.hockley-card-footer-bottom p {
    margin:
        0 0 4px;

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

    font-size: 0.78rem;

    line-height: 1.6;
}


.hockley-card-footer-bottom p strong {
    color:
        rgba(255, 255, 255, 0.83);
}


.hockley-card-footer-bottom > small {
    color:
        var(--hockley-orange-muted);

    font-size: 0.7rem;

    letter-spacing: 0.05em;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes hockleyFooterPulse {

    0% {
        transform: scale(0.7);
        opacity: 1;
    }

    70% {
        transform: scale(1.55);
        opacity: 0;
    }

    100% {
        transform: scale(1.55);
        opacity: 0;
    }

}


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

@media (max-width: 991.98px) {

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

        max-width:
            720px;
    }

}


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

@media (max-width: 575.98px) {

    .hockley-card-footer {
        padding:
            55px 0 22px;
    }


    .hockley-card-footer-brand {
        margin-bottom:
            32px;
    }


    .hockley-card-footer-brand h2 {
        font-size:
            1.9rem;
    }


    .hockley-card-footer-brand p {
        font-size:
            0.9rem;
    }


    .hockley-footer-card-grid {
        grid-template-columns:
            1fr;

        gap:
            11px;

        max-width:
            360px;
    }


    .hockley-footer-card {
        min-height:
            145px;

        padding:
            20px 16px;
    }


    .hockley-footer-card-icon {
        width: 42px;
        height: 42px;

        margin-bottom:
            11px;
    }


    .hockley-card-footer-bottom {
        margin-top:
            38px;
    }

}


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

.hockley-card-footer a:focus-visible {
    outline:
        3px solid
        var(--hockley-orange-light);

    outline-offset: 4px;
}


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

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

    .hockley-footer-card,
    .hockley-footer-card::before,
    .hockley-footer-card-icon {
        transition: none;
    }


    .hockley-mobile-status > span::after {
        animation: none;
    }


    .hockley-footer-card:hover,
    .hockley-footer-card:hover
    .hockley-footer-card-icon {
        transform: none;
    }

}









/* ___________________________________________________________________________________________ */







/* =========================================================
   GARAGE DOOR BRANDS MARQUEE
========================================================= */

.hockley-brands-section {
    position: relative;
    overflow: hidden;

    padding: 75px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5f7fa 100%
        );
}


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

.hockley-brands-heading {
    max-width: 720px;

    margin: 0 auto 38px;

    text-align: center;
}


.hockley-brands-eyebrow {
    display: inline-block;

    margin-bottom: 10px;

    color: #966e27;

    font-size: 0.75rem;
    font-weight: 850;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.hockley-brands-heading h2 {
    margin: 0 0 12px;

    color:
        var(--hockley-navy-dark, #021f42);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.7rem
        );

    font-weight: 850;
    line-height: 1.1;

    letter-spacing: -0.035em;
}


.hockley-brands-heading p {
    max-width: 630px;

    margin: 0 auto;

    color: #687589;

    font-size: 0.92rem;
    line-height: 1.7;
}


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

.hockley-brands-marquee {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 10px 0;
}


/* Left fade */

.hockley-brands-marquee::before,
.hockley-brands-marquee::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    z-index: 5;

    width: 120px;

    pointer-events: none;
}


.hockley-brands-marquee::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            #f7f9fb 0%,
            rgba(247,249,251,0) 100%
        );
}


/* Right fade */

.hockley-brands-marquee::after {
    right: 0;

    background:
        linear-gradient(
            270deg,
            #f7f9fb 0%,
            rgba(247,249,251,0) 100%
        );
}


/* =========================================================
   ANIMATED TRACK
========================================================= */

.hockley-brands-track {
    display: flex;
    align-items: center;

    width: max-content;

    gap: 22px;

    padding: 8px 11px;

    animation:
        hockleyBrandMarquee 38s linear infinite;

    will-change: transform;
}


/* Pause animation on hover */

.hockley-brands-marquee:hover
.hockley-brands-track {
    animation-play-state: paused;
}


/* =========================================================
   BRAND ITEM
========================================================= */

.hockley-brand-item {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 220px;
    height: 120px;

    flex:
        0 0 220px;

    padding: 20px;

    border:
        1px solid
        rgba(6, 47, 97, 0.09);

    border-radius: 16px;

    background:
       #021F42;

    box-shadow:
        0 10px 30px
        rgba(2, 31, 66, 0.06);

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


.hockley-brand-item:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(230, 189, 105, 0.65);

    box-shadow:
        0 16px 35px
        rgba(2, 31, 66, 0.11);
}


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

.hockley-brand-item img {
    display: block;

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

    height: 78px;

    object-fit: contain;

    object-position: center;

    filter:
        grayscale(20%);

    transition:
        filter 220ms ease,
        transform 220ms ease;
}


.hockley-brand-item:hover img {
    filter:
        grayscale(0);

    transform:
        scale(1.04);
}


/* =========================================================
   INFINITE ANIMATION
========================================================= */

@keyframes hockleyBrandMarquee {

    from {
        transform:
            translateX(0);
    }

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

}


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

@media (max-width: 991.98px) {

    .hockley-brands-section {
        padding:
            65px 0;
    }


    .hockley-brand-item {
        width: 190px;
        height: 105px;

        flex-basis: 190px;
    }


    .hockley-brand-item img {
        max-width: 155px;
        height: 68px;
    }


    .hockley-brands-track {
        animation-duration:
            32s;
    }

}


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

@media (max-width: 575.98px) {

    .hockley-brands-section {
        padding:
            50px 0;
    }


    .hockley-brands-heading {
        padding:
            0 15px;

        margin-bottom:
            28px;
    }


    .hockley-brands-heading h2 {
        font-size:
            1.8rem;
    }


    .hockley-brand-item {
        width: 160px;
        height: 92px;

        flex-basis: 160px;

        padding: 14px;

        border-radius: 12px;
    }


    .hockley-brand-item img {
        max-width: 135px;
        height: 58px;
    }


    .hockley-brands-track {
        gap: 14px;

        animation-duration:
            27s;
    }


    .hockley-brands-marquee::before,
    .hockley-brands-marquee::after {
        width:
            45px;
    }

}


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

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

    .hockley-brands-track {
        animation: none;
    }


    .hockley-brands-marquee {
        overflow-x: auto;

        scrollbar-width: thin;
    }


    .hockley-brand-item,
    .hockley-brand-item img {
        transition: none;
    }


    .hockley-brand-item:hover,
    .hockley-brand-item:hover img {
        transform: none;
    }

}