/* ==========================================================
   OSORIO PLUMBING SERVICES
   FUTURISTIC PREMIUM HEADER
   FILE: assets/css/header.css
========================================================== */

:root {
    --os-dark: #061a30;
    --os-navy: #082d50;
    --os-blue: #087fd0;
    --os-cyan: #17b9ff;
    --os-white: #ffffff;
    --os-text: #163550;
    --os-muted: #647c92;
    --os-border: #e2edf6;
    --os-font: "DM Sans", Arial, sans-serif;
    --os-heading: "Outfit", Arial, sans-serif;
    --os-header-height: 84px;
}

/* ==========================================================
   01. RESET LOCAL
========================================================== */

.os-topbar *,
.os-header *,
.os-offcanvas *,
.os-floating-nav *,
.os-offcanvas-overlay {
    box-sizing: border-box;
}

.os-topbar,
.os-header,
.os-offcanvas,
.os-floating-nav {
    font-family: var(--os-font);
}

.os-topbar a,
.os-header a,
.os-offcanvas a,
.os-floating-nav a {
    text-decoration: none;
}

.os-header button,
.os-offcanvas button,
.os-floating-nav button {
    font: inherit;
}

.os-container {
    width: calc(100% - 64px);
    max-width: 1200px;
    margin-inline: auto;
}

.os-skip-link {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 99999;
    padding: 12px 20px;
    background: var(--os-blue);
    color: #fff;
    text-decoration: none;
}

.os-skip-link:focus {
    top: 10px;
}

.os-header :focus-visible,
.os-offcanvas :focus-visible,
.os-floating-nav :focus-visible {
    outline: 3px solid var(--os-cyan);
    outline-offset: 3px;
}

/* ==========================================================
   02. TOP BAR
========================================================== */

.os-topbar {
    position: relative;
    z-index: 1002;
    width: 100%;
    background: linear-gradient(105deg,
            #061a30 0%,
            #074979 50%,
            #061a30 100%);
    color: #fff;
    font-size: 11px;
}

.os-topbar-inner {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.os-topbar-left,
.os-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.os-topbar a,
.os-topbar-right>span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    white-space: nowrap;
}

.os-topbar a {
    transition: color 0.25s ease;
}

.os-topbar a:hover {
    color: #80dbff;
}

.os-topbar i {
    color: #66ceff;
    font-size: 12px;
}

.os-topbar .fa-whatsapp {
    color: #4ce58f;
    font-size: 15px;
}

.os-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #eaf8ff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

.os-status-dot {
    position: relative;
    display: inline-block;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #41e59b;
    box-shadow: 0 0 12px rgba(65, 229, 155, 0.75);
}



/* ==========================================================
   03. STICKY HEADER
========================================================== */

.os-header {
    position: sticky;
    top: 0;
    z-index: 1001;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--os-border);
    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.os-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg,
            transparent,
            rgba(23, 185, 255, 0.85),
            transparent);
    pointer-events: none;
}

.os-header.os-scrolled {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 35px rgba(3, 31, 61, 0.13);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.os-header-inner {
    min-height: var(--os-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* ==========================================================
   04. LOGO
========================================================== */

.os-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 125px;
    flex: 0 0 125px;
    min-width: 0;
}

.os-logo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 76px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.os-logo:hover img {
    transform: scale(1.035);
}

/* ==========================================================
   05. DESKTOP NAVIGATION
========================================================== */

.os-desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    flex: 1 1 auto;
    min-width: 0;
}

.os-desktop-nav>a,
.os-nav-dropdown>a {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--os-header-height);
    color: var(--os-dark);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.os-desktop-nav>a:hover,
.os-desktop-nav>a.active,
.os-nav-dropdown>a:hover,
.os-nav-dropdown>a.active {
    color: var(--os-blue);
}

.os-desktop-nav>a::after,
.os-nav-dropdown>a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg,
            var(--os-blue),
            var(--os-cyan));
    transition: width 0.3s ease;
}

.os-desktop-nav>a:hover::after,
.os-desktop-nav>a.active::after,
.os-nav-dropdown>a:hover::after,
.os-nav-dropdown>a.active::after {
    width: 100%;
}

/* ==========================================================
   06. SERVICES DROPDOWN
========================================================== */

.os-nav-dropdown {
    position: static;
    display: flex;
    align-items: center;
    height: var(--os-header-height);
}

.os-dropdown-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 35px;
    margin-left: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--os-dark);
    font-size: 10px;
    cursor: pointer;
}

.os-dropdown-button i {
    transition: transform 0.25s ease;
}

.os-nav-dropdown.os-open .os-dropdown-button i {
    transform: rotate(180deg);
}

/* ==========================================================
   07. MEGA MENU
========================================================== */

.os-megamenu {
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    width: min(850px, calc(100vw - 48px));
    padding: 24px;
    border: 1px solid var(--os-border);
    border-top: 3px solid var(--os-cyan);
    border-radius: 0 0 18px 18px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(4, 30, 60, 0.17);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 12px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}

.os-nav-dropdown:hover .os-megamenu,
.os-nav-dropdown:focus-within .os-megamenu,
.os-nav-dropdown.os-open .os-megamenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.os-megamenu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 19px;
    padding-bottom: 19px;
    border-bottom: 1px solid var(--os-border);
}

.os-megamenu-header span {
    display: block;
    margin-bottom: 5px;
    color: var(--os-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.os-megamenu-header h3 {
    margin: 0;
    color: var(--os-dark);
    font-family: var(--os-heading);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.2;
}

.os-megamenu-header>a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--os-blue);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.os-megamenu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.os-megamenu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 61px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #f3f9fe;
    color: var(--os-dark);
    font-size: 13px;
    font-weight: 700;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.os-megamenu-item:hover {
    transform: translateX(3px);
    border-color: #c8e9fb;
    background: #eaf7ff;
    color: var(--os-blue);
}

.os-megamenu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border-radius: 9px;
    background: linear-gradient(135deg, #079ee9, #064675);
    color: #fff;
    font-size: 15px;
}

.os-megamenu-arrow {
    margin-left: auto;
    color: var(--os-blue);
    font-size: 11px;
    transition: transform 0.25s ease;
}

.os-megamenu-item:hover .os-megamenu-arrow {
    transform: translateX(3px);
}

/* ==========================================================
   08. HEADER ACTIONS
========================================================== */

.os-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.os-header-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 1px solid #d4ecfb;
    border-radius: 10px;
    background: #eaf7ff;
    color: var(--os-blue);
    font-size: 15px;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.os-header-call:hover {
    transform: translateY(-2px);
    background: #d8f1ff;
    color: #055a99;
}

.os-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 17px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    background: linear-gradient(110deg, #0879c8, #079fe9);
    box-shadow: 0 8px 22px rgba(0, 126, 208, 0.2);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.os-header-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 126, 208, 0.32);
    color: #fff;
}

.os-header-cta .fa-arrow-right {
    transition: transform 0.25s ease;
}

.os-header-cta:hover .fa-arrow-right {
    transform: translateX(3px);
}

/* ==========================================================
   09. MENU BUTTON
========================================================== */

.os-menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #d4eafa;
    border-radius: 10px;
    background: #edf8ff;
    cursor: pointer;
    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}

.os-menu-toggle:hover {
    border-color: var(--os-cyan);
    background: #dff3ff;
}

.os-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--os-dark);
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.os-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.os-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.os-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================
   10. OFF-CANVAS OVERLAY
========================================================== */

.os-offcanvas-overlay {
    position: fixed;
    inset: 0;
    z-index: 1998;
    background: rgba(2, 15, 30, 0.72);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

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

.os-offcanvas-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ==========================================================
   11. OFF-CANVAS PANEL
========================================================== */

.os-offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1999;

    display: flex;
    flex-direction: column;

    width: min(430px, 92vw);
    height: 100vh;
    height: 100dvh;

    overflow: hidden;
    background: #fff;
    box-shadow: -20px 0 65px rgba(0, 0, 0, 0.22);

    transform: translateX(105%);
    visibility: hidden;

    transition:
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.38s ease;
}

.os-offcanvas.active {
    transform: translateX(0);
    visibility: visible;
}

body.os-menu-open {
    overflow: hidden;
}

body {
    margin: 0px;
}

/* ==========================================================
   12. OFF-CANVAS HEADER
========================================================== */

.os-offcanvas-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 95px;
    padding: 17px 25px;
    border-bottom: 1px solid var(--os-border);
    background: #fff;
}

.os-offcanvas-top>a {
    display: inline-flex;
    align-items: center;
}

.os-offcanvas-top img {
    display: block;
    width: 120px;
    height: auto;
    max-height: 65px;
    object-fit: contain;
}

.os-offcanvas-top button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid #d8eafa;
    border-radius: 10px;
    background: #edf8ff;
    color: var(--os-dark);
    font-size: 19px;
    cursor: pointer;
}

.os-offcanvas-top button:hover {
    background: #d9f0ff;
}

/* ==========================================================
   13. OFF-CANVAS CONTENT
========================================================== */

.os-offcanvas-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 26px 25px 35px;
}

.os-offcanvas-label {
    display: block;
    margin-bottom: 15px;
    color: var(--os-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.os-offcanvas-nav {
    display: flex;
    flex-direction: column;
}

.os-offcanvas-nav>a {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 53px;
    padding: 0 4px;
    border-bottom: 1px solid var(--os-border);
    color: #d5d9dd;
    font-size: 14px;
    font-weight: 700;
    transition:
        color 0.25s ease,
        padding-left 0.25s ease;
}

.os-offcanvas-nav>a:hover {
    padding-left: 9px;
    color: var(--os-blue);
}

.os-offcanvas-nav>a i:first-child {
    width: 21px;
    color: var(--os-blue);
    font-size: 15px;
}

.os-offcanvas-nav>a i:last-child {
    margin-left: auto;
    color: var(--os-blue);
    font-size: 11px;
}

/* ==========================================================
   14. OFF-CANVAS SERVICES ACCORDION
========================================================== */

.os-offcanvas-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 53px;
    border-bottom: 1px solid var(--os-border);
}

.os-offcanvas-dropdown-head>a {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 53px;
    padding-left: 4px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.os-offcanvas-dropdown-head>a:hover {
    color: var(--os-blue);
}

.os-offcanvas-dropdown-head>a i {
    width: 21px;
    color: var(--os-blue);
}

.os-offcanvas-subtoggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: #eaf7ff;
    color: var(--os-blue);
    font-size: 12px;
    cursor: pointer;
}

.os-offcanvas-subtoggle i {
    transition: transform 0.25s ease;
}

.os-offcanvas-subtoggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.os-offcanvas-submenu {
    padding: 9px 8px 9px 22px;
    border-radius: 0 0 10px 10px;
    background: #f2f9fe;
}

.os-offcanvas-submenu[hidden] {
    display: none;
}

.os-offcanvas-submenu a {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    padding: 8px 5px;
    border-bottom: 1px solid #e1edf6;
    color: var(--os-text);
    font-size: 13px;
    font-weight: 600;
    transition: color 0.25s ease;
}

.os-offcanvas-submenu a:last-child {
    border-bottom: 0;
}

.os-offcanvas-submenu a:hover {
    color: var(--os-blue);
}

.os-offcanvas-submenu a i {
    width: 19px;
    color: var(--os-blue);
    font-size: 13px;
}

/* ==========================================================
   15. OFF-CANVAS CONTACT CARD
========================================================== */

.os-offcanvas-contact {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
    padding: 26px 22px;
    overflow: hidden;
    border: 1px solid rgba(71, 185, 255, 0.25);
    border-radius: 16px;
    background: linear-gradient(135deg, #061a30, #07528b);
    color: #fff;
}

.os-offcanvas-contact::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(67, 195, 255, 0.17);
    border-radius: 50%;
    pointer-events: none;
}

.os-offcanvas-contact>span {
    position: relative;
    color: #65d2ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.os-offcanvas-contact h3 {
    position: relative;
    margin: 0 0 3px;
    color: #fff;
    font-family: var(--os-heading);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.18;
}

.os-offcanvas-contact>a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.os-offcanvas-contact>a:not(.os-offcanvas-estimate):hover {
    color: #83dcff;
}

.os-offcanvas-contact>a i {
    color: #6bd2ff;
}

.os-offcanvas-contact .os-offcanvas-estimate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    margin-top: 7px;
    padding: 10px 12px;
    border-radius: 9px;
    background: linear-gradient(110deg, #0788d8, #0caaf0);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.os-offcanvas-contact .os-offcanvas-estimate i {
    color: #fff;
}

/* ==========================================================
   16. FLOATING NAV — HIDDEN ON DESKTOP
========================================================== */

.os-floating-nav {
    display: none;
}

/* ==========================================================
   17. LAPTOP
========================================================== */

@media (max-width: 1300px) {

    .os-topbar {
        font-size: 10px;
    }

    .os-topbar-left,
    .os-topbar-right {
        gap: 11px;
    }

    .os-status {
        display: none;
    }

    .os-desktop-nav {
        gap: 12px;
    }

    .os-desktop-nav>a,
    .os-nav-dropdown>a {
        font-size: 11px;
    }

    .os-header-inner {
        gap: 15px;
    }

    .os-logo {
        width: 110px;
        flex-basis: 110px;
    }

    .os-header-cta {
        padding-inline: 12px;
        font-size: 10px;
    }
}

/* ==========================================================
   18. TABLET / COMPACT LAPTOP
========================================================== */

@media (max-width: 1100px) {

    .os-container {
        width: calc(100% - 44px);
    }

    .os-desktop-nav {
        display: none;
    }

    .os-header-inner {
        min-height: 76px;
    }

    .os-logo {
        width: 120px;
        flex-basis: 120px;
    }

    .os-topbar-right {
        display: none;
    }

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

    .os-topbar-left {
        justify-content: center;
    }
}

/* ==========================================================
   19. MOBILE FLOATING NAVIGATION
========================================================== */

@media (max-width: 767px) {

    .os-container {
        width: calc(100% - 32px);
    }

    /* TOP BAR */

    .os-topbar {
        font-size: 10px;
    }

    .os-topbar-inner {
        min-height: 34px;
    }

    .os-topbar-left {
        width: 100%;
        gap: 14px;
        justify-content: center;
    }

    .os-topbar-left a:nth-of-type(2) {
        display: none;
    }

    /* HEADER */

    .os-header-inner {
        min-height: 72px;
        gap: 10px;
    }

    .os-logo {
        width: 108px;
        flex-basis: 108px;
    }

    .os-header-actions {
        gap: 9px;
    }

    .os-header-call {
        display: none;
    }

    .os-header-cta {
        min-height: 40px;
        padding-inline: 12px;
        font-size: 10px;
    }

    .os-header-cta .fa-arrow-right {
        display: none;
    }

    .os-menu-toggle {
        width: 41px;
        height: 41px;
        flex: 0 0 41px;
    }

    /* RESERVE SPACE FOR FLOATING NAV */

    body {
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    }

    /* FLOATING APP BAR */

    .os-floating-nav {
        position: fixed;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        z-index: 1500;

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

        width: auto;
        max-width: 480px;
        min-height: 69px;
        margin-inline: auto;
        padding: 9px 5px;

        border: 1px solid rgba(75, 193, 255, 0.35);
        border-radius: 20px;

        background: rgba(5, 25, 47, 0.97);
        box-shadow:
            0 14px 40px rgba(0, 23, 51, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);

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

    .os-floating-nav>a,
    .os-floating-nav>button {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;

        min-width: 0;
        min-height: 48px;
        padding: 0 2px;

        border: 0;
        background: transparent;
        color: #dceefa;
        cursor: pointer;
    }

    .os-floating-nav>a>span,
    .os-floating-nav>button>span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        color: #dceefa;
        font-size: 15px;
        transition:
            background 0.25s ease,
            color 0.25s ease,
            transform 0.25s ease;
    }

    .os-floating-nav small {
        color: inherit;
        font-family: var(--os-font);
        font-size: 9px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    .os-floating-nav>a:hover>span,
    .os-floating-nav>button:hover>span,
    .os-floating-nav>a.active>span {
        background: rgba(23, 185, 255, 0.16);
        color: #42c8ff;
    }

    .os-floating-nav>a.active {
        color: #42c8ff;
    }

    /* CENTER ESTIMATE BUTTON */

    .os-floating-nav .os-floating-main>span {
        width: 47px;
        height: 47px;
        margin-top: -28px;
        border: 3px solid #fff;
        border-radius: 15px;
        background: linear-gradient(135deg, #0ca8f0, #075c9d);
        box-shadow: 0 8px 23px rgba(0, 145, 230, 0.38);
        color: #fff;
        font-size: 18px;
    }

    .os-floating-nav .os-floating-main:hover>span {
        transform: translateY(-3px);
        background: linear-gradient(135deg, #0ca8f0, #075c9d);
        color: #fff;
    }

    /* OFF-CANVAS ABOVE FLOATING NAV */

    .os-offcanvas {
        width: min(410px, 94vw);
    }

    .os-offcanvas-top {
        min-height: 82px;
        padding: 14px 21px;
    }

    .os-offcanvas-body {
        padding: 23px 21px 32px;
    }
}

/* ==========================================================
   20. SMALL MOBILE
========================================================== */

@media (max-width: 390px) {

    .os-logo {
        width: 94px;
        flex-basis: 94px;
    }

    .os-header-cta {
        gap: 6px;
        padding-inline: 9px;
        font-size: 9px;
    }

    .os-topbar-left {
        gap: 10px;
        font-size: 9px;
    }

    .os-floating-nav {
        right: 8px;
        left: 8px;
        padding-inline: 3px;
    }

    .os-floating-nav small {
        font-size: 8px;
    }

    .os-offcanvas-contact {
        padding: 22px 17px;
    }
}

/* ==========================================================
   21. REDUCED MOTION
========================================================== */

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

    .os-header *,
    .os-offcanvas *,
    .os-offcanvas,
    .os-offcanvas-overlay,
    .os-floating-nav * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


.osp-quick {

    --ospq-blue: #087fd0;
    --ospq-navy: #082747;
    --ospq-wine: #821e38;
    --ospq-wine-light: #a62a49;
    --ospq-white: #ffffff;
    --ospq-muted: #536c82;

    position: relative;
    isolation: isolate;
    width: 100%;
    padding: 54px 0 62px;
    overflow: hidden;

    background:
        radial-gradient(circle at 5% 100%,
            rgba(8, 127, 208, .065),
            transparent 34%),
        #ffffff;

    font-family: "DM Sans", Arial, sans-serif;

}

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

.osp-quick a {
    text-decoration: none;
}

.osp-quick button {
    font: inherit;
}

.osp-quick a:focus-visible,
.osp-quick button:focus-visible {
    outline: 3px solid var(--ospq-wine);
    outline-offset: 3px;
}

.osp-quick__container {
    width: calc(100% - 64px);
    max-width: 1200px;
    margin: 0 auto;
}

/* ============================================================
   02. SECTION HEADING
============================================================ */

.osp-quick__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 27px;
}

.osp-quick__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
    color: var(--ospq-wine);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2.2px;
}

.osp-quick__eyebrow span {
    width: 23px;
    height: 3px;
    border-radius: 3px;
    background: var(--ospq-wine);
}

.osp-quick__heading h2 {
    margin: 0;
    color: var(--ospq-navy);
    font-family: "Outfit", Arial, sans-serif;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1px;
}

.osp-quick__heading h2 span {
    color: var(--ospq-blue);
}

.osp-quick__all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 43px;
    padding: 0 17px;
    border: 1px solid rgba(130, 30, 56, .28);
    border-radius: 7px;
    color: var(--ospq-wine);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.osp-quick__all:hover {
    transform: translateY(-2px);
    background: var(--ospq-wine);
    color: #fff;
}

/* ============================================================
   03. CAROUSEL TRACK
============================================================ */

.osp-quick__viewport {
    width: 100%;
    overflow: visible;
}

.osp-quick__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

/* ============================================================
   04. SERVICE CARD
============================================================ */

.osp-quick__card {
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 0;
    min-height: 195px;
    padding: 9px;
    border: 1px solid #e3edf5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 7px 25px rgba(8, 48, 88, .08);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.osp-quick__card::before {
    content: "";
    position: absolute;
    right: 13px;
    bottom: -1px;
    left: 13px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg,
            var(--ospq-blue),
            var(--ospq-wine));
    opacity: 0;
    transition: opacity .3s ease;
}

.osp-quick__card:hover {
    transform: translateY(-6px);
    border-color: rgba(8, 127, 208, .28);
    box-shadow: 0 17px 38px rgba(8, 48, 88, .14);
}

.osp-quick__card:hover::before {
    opacity: 1;
}

/* ============================================================
   05. CARD IMAGE
============================================================ */

.osp-quick__image {
    position: relative;
    display: block;
    width: 39%;
    flex: 0 0 39%;
    min-height: 176px;
    overflow: hidden;
    border-radius: 8px;
    background: #dcebf5;
}

.osp-quick__image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 176px;
    object-fit: cover;
    transition: transform .6s ease;
}

.osp-quick__card:hover .osp-quick__image img {
    transform: scale(1.08);
}

.osp-quick__image::after {
    content: "";
    position: absolute;
    inset: 55% 0 0;
    background: linear-gradient(0deg,
            rgba(3, 26, 52, .36),
            transparent);
    pointer-events: none;
}

.osp-quick__image-icon {
    position: absolute;
    right: 6px;
    bottom: 7px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ospq-wine);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

/* ============================================================
   06. CARD CONTENT
============================================================ */

.osp-quick__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    padding: 8px 5px 5px 12px;
}

.osp-quick__number {
    display: block;
    margin-bottom: 8px;
    color: var(--ospq-wine);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.osp-quick__body h3 {
    margin: 0 0 7px;
    font-family: "Outfit", Arial, sans-serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.18;
}

.osp-quick__body h3 a {
    color: var(--ospq-navy);
    transition: color .25s ease;
}

.osp-quick__body h3 a:hover {
    color: var(--ospq-blue);
}

.osp-quick__body p {
    margin: 0 0 12px;
    color: var(--ospq-muted);
    font-size: 11px;
    line-height: 1.45;
    text-align: left;
}

.osp-quick__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    color: var(--ospq-blue);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.osp-quick__link span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border: 1px solid rgba(130, 30, 56, .2);
    border-radius: 50%;
    background: #fff0f3;
    color: var(--ospq-wine);
    font-size: 10px;
    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.osp-quick__link:hover span {
    transform: translateX(3px);
    background: var(--ospq-wine);
    color: #fff;
}

/* ============================================================
   07. MOBILE CONTROLS
============================================================ */

.osp-quick__mobile-controls {
    display: none;
}

/* ============================================================
   08. LAPTOP
============================================================ */

@media (max-width: 1200px) {

    .osp-quick__container {
        width: calc(100% - 48px);
    }

    .osp-quick__track {
        gap: 12px;
    }

    .osp-quick__card {
        min-height: 190px;
    }

    .osp-quick__body {
        padding-left: 9px;
    }

    .osp-quick__body h3 {
        font-size: 13px;
    }

    .osp-quick__body p {
        font-size: 10px;
    }

}

/* ============================================================
   09. TABLET — TWO COLUMNS
============================================================ */

@media (max-width: 1000px) {

    .osp-quick__track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .osp-quick__card {
        min-height: 180px;
    }

    .osp-quick__image,
    .osp-quick__image img {
        min-height: 162px;
    }

    .osp-quick__body h3 {
        font-size: 16px;
    }

    .osp-quick__body p {
        font-size: 12px;
    }

}

/* ============================================================
   10. MOBILE — TOUCH CAROUSEL
============================================================ */

@media (max-width: 767px) {

    .osp-quick {
        padding: 44px 0 48px;
    }

    .osp-quick__container {
        width: calc(100% - 36px);
    }

    .osp-quick__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 22px;
    }

    .osp-quick__heading h2 {
        font-size: 30px;
    }

    .osp-quick__all {
        min-height: 39px;
        font-size: 10px;
    }

    .osp-quick__viewport {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .osp-quick__viewport::-webkit-scrollbar {
        display: none;
    }

    .osp-quick__track {
        display: flex;
        gap: 13px;
    }

    .osp-quick__card {
        flex: 0 0 88%;
        min-height: 195px;
        scroll-snap-align: start;
    }

    .osp-quick__image {
        width: 39%;
        flex-basis: 39%;
        min-height: 176px;
    }

    .osp-quick__image img {
        min-height: 176px;
    }

    .osp-quick__body h3 {
        font-size: 16px;
    }

    .osp-quick__body p {
        font-size: 12px;
    }

    .osp-quick__mobile-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        margin-top: 24px;
    }

    .osp-quick__control {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 39px;
        height: 39px;
        border: 1px solid #d4e5f0;
        border-radius: 50%;
        background: #fff;
        color: var(--ospq-navy);
        font-size: 13px;
        cursor: pointer;
    }

    .osp-quick__control:hover {
        border-color: var(--ospq-wine);
        background: var(--ospq-wine);
        color: #fff;
    }

    .osp-quick__control:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

    .osp-quick__pagination {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .osp-quick__pagination span {
        width: 7px;
        height: 7px;
        border-radius: 10px;
        background: #cbd9e4;
        transition:
            width .25s ease,
            background .25s ease;
    }

    .osp-quick__pagination span.is-active {
        width: 24px;
        background: var(--ospq-wine);
    }

}

/* ============================================================
   11. SMALL MOBILE
============================================================ */

@media (max-width: 390px) {

    .osp-quick__heading h2 {
        font-size: 27px;
    }

    .osp-quick__card {
        flex-basis: 94%;
    }

    .osp-quick__body h3 {
        font-size: 14px;
    }

    .osp-quick__body p {
        font-size: 11px;
    }

}

/* ============================================================
   12. REDUCED MOTION
============================================================ */

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

    .osp-quick *,
    .osp-quick *::before,
    .osp-quick *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

}



/* ==========================================================
   OSORIO PLUMBING SERVICES
   SECTION 03 — ABOUT US
   FULL RESPONSIVE CSS
========================================================== */


/* ==========================================================
   01. SECTION
========================================================== */

.os3-about {

    --os3-navy: #102e52;
    --os3-blue: #0788df;
    --os3-wine: #84233d;
    --os3-text: #203b58;
    --os3-border: #d6e5f3;

    position: relative;

    width: 100%;

    padding: 52px 0;

    overflow: hidden;

    background: linear-gradient(180deg,
            #f8fcff 0%,
            #f0f8ff 100%);

    font-family: "DM Sans", Arial, sans-serif;

    color: var(--os3-text);

}


/* ==========================================================
   02. LOCAL RESET
========================================================== */

.os3-about *,
.os3-about *::before,
.os3-about *::after {

    box-sizing: border-box;

}

.os3-about a {

    text-decoration: none;

}

.os3-about a:focus-visible {

    outline: 3px solid var(--os3-wine);

    outline-offset: 4px;

}


/* ==========================================================
   03. MAIN CONTAINER
========================================================== */

.os3-container {

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr) minmax(0, 1.12fr) minmax(220px, 0.58fr);

    align-items: center;

    column-gap: 34px;

    row-gap: 30px;

    width: calc(100% - 80px);

    max-width: 1440px;

    margin: 0 auto;

}


/* ==========================================================
   04. LEFT CONTENT
========================================================== */

.os3-content {

    min-width: 0;

    padding-right: 0;

}

.os3-eyebrow {

    display: block;

    margin-bottom: 12px;

    color: var(--os3-navy);

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 1.5px;

    line-height: 1.4;

}

.os3-title {

    margin: 0 0 16px;

    color: var(--os3-navy);

    font-family: "Outfit", Arial, sans-serif;

    font-size: clamp(32px, 3vw, 43px);

    font-weight: 900;

    letter-spacing: -1.1px;

    line-height: 1.05;

}

.os3-title span {

    display: block;

    color: var(--os3-blue);

}

.os3-description {

    max-width: 510px;

    margin: 0 0 20px;

    color: var(--os3-text);

    font-size: 15px;

    font-weight: 400;

    line-height: 1.48;

    text-align: justify;

    text-justify: inter-word;

    overflow-wrap: break-word;

}


/* ==========================================================
   05. HIGHLIGHTS
========================================================== */

.os3-highlights {

    display: grid;

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

    align-items: center;

    gap: 0;

    margin: 22px 0 21px;

}

.os3-highlight {

    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 0;

    min-height: 48px;

    padding: 4px 10px;

    border-right: 1px solid var(--os3-border);

}

.os3-highlight:first-child {

    padding-left: 0;

}

.os3-highlight:last-child {

    padding-right: 0;

    border-right: 0;

}

.os3-highlight>i {

    flex: 0 0 auto;

    color: var(--os3-navy);

    font-size: 23px;

}

.os3-highlight>span {

    display: flex;

    flex-direction: column;

    gap: 2px;

    min-width: 0;

}

.os3-highlight strong {

    color: var(--os3-navy);

    font-size: 14px;

    font-weight: 900;

    line-height: 1.15;

    overflow-wrap: break-word;

}

.os3-highlight small {

    color: var(--os3-text);

    font-size: 14px;

    font-weight: 400;

    line-height: 1.2;

    overflow-wrap: break-word;

}


/* ==========================================================
   06. ABOUT BUTTON
========================================================== */

.os3-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 46px;

    padding: 11px 20px;

    border: 1px solid var(--os3-blue);

    border-radius: 5px;

    background: var(--os3-blue);

    color: #ffffff;

    font-size: 14px;

    font-weight: 900;

    line-height: 1.3;

    text-align: center;

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

}

.os3-button:hover {

    transform: translateY(-2px);

    border-color: var(--os3-wine);

    background: var(--os3-wine);

    color: #ffffff;

}

.os3-button i {

    font-size: 14px;

    transition: transform 0.25s ease;

}

.os3-button:hover i {

    transform: translateX(4px);

}


/* ==========================================================
   07. CENTER PHOTO
========================================================== */

.os3-photo {

    position: relative;

    width: 100%;

    min-width: 0;

    height: 320px;

    overflow: hidden;

    border-radius: 8px;

    background: #d9e6ef;

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

}

.os3-photo>img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition: transform 0.6s ease;

}

.os3-photo:hover>img {

    transform: scale(1.035);

}


/* ==========================================================
   08. IMAGE OVERLAY
========================================================== */

.os3-photo-shade {

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg,
            rgba(4, 25, 47, 0.02) 20%,
            rgba(4, 25, 47, 0.08) 46%,
            rgba(4, 25, 47, 0.9) 100%);

    pointer-events: none;

}


/* ==========================================================
   09. CENTER ACTION
========================================================== */

.os3-photo-action {

    position: absolute;

    top: 50%;

    left: 50%;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 46px;

    height: 46px;

    border: 2px solid #ffffff;

    border-radius: 50%;

    background: var(--os3-blue);

    color: #ffffff;

    font-size: 16px;

    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);

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

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

}

.os3-photo-action:hover {

    background: var(--os3-wine);

    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.28);

    color: #ffffff;

}


/* ==========================================================
   10. IMAGE CAPTION
========================================================== */

.os3-photo-caption {

    position: absolute;

    right: 20px;

    bottom: 19px;

    left: 20px;

    z-index: 2;

    margin: 0;

    color: #ffffff;

    font-size: 15px;

    font-weight: 500;

    line-height: 1.35;

    text-align: left;

}


/* ==========================================================
   11. BENEFITS PANEL
========================================================== */

.os3-benefits {

    display: flex;

    flex-direction: column;

    justify-content: center;

    width: 100%;

    min-width: 0;

    padding: 8px 15px;

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

    border-radius: 8px;

    background: #ffffff;

    box-shadow: 0 8px 25px rgba(10, 42, 75, 0.07);

}


/* ==========================================================
   12. BENEFIT ITEMS
========================================================== */

.os3-benefit {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

    min-height: 58px;

    padding: 9px 0;

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

}

.os3-benefit:last-child {

    border-bottom: 0;

}

.os3-benefit-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    flex: 0 0 34px;

    border-radius: 50%;

    background: var(--os3-navy);

    color: #ffffff;

    font-size: 15px;

}

.os3-benefit strong {

    color: var(--os3-navy);

    font-size: 14px;

    font-weight: 800;

    line-height: 1.3;

    overflow-wrap: break-word;

}


/* ==========================================================
   13. LARGE DESKTOP
========================================================== */

@media (min-width: 1600px) {

    .os3-container {

        width: calc(100% - 120px);

    }

    .os3-photo {

        height: 340px;

    }

}


/* ==========================================================
   14. LAPTOP
========================================================== */

@media (max-width: 1300px) {

    .os3-container {

        width: calc(100% - 64px);

        grid-template-columns:
            minmax(0, 1.1fr) minmax(0, 1fr) minmax(210px, 0.55fr);

        column-gap: 24px;

    }

    .os3-title {

        font-size: 35px;

    }

    .os3-photo {

        height: 310px;

    }

    .os3-highlight {

        gap: 6px;

        padding-inline: 7px;

    }

    .os3-highlight>i {

        font-size: 20px;

    }

}


/* ==========================================================
   15. COMPACT LAPTOP
========================================================== */

@media (max-width: 1100px) {

    .os3-about {

        padding: 48px 0;

    }

    .os3-container {

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

        column-gap: 28px;

    }

    .os3-benefits {

        grid-column: 1 / -1;

        display: grid;

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

        padding: 10px;

    }

    .os3-benefit {

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        gap: 10px;

        min-height: 115px;

        padding: 12px;

        border-right: 1px solid var(--os3-border);

        border-bottom: 0;

    }

    .os3-benefit:last-child {

        border-right: 0;

    }

    .os3-photo {

        height: 340px;

    }

    .os3-highlights {

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

        gap: 12px 0;

    }

    .os3-highlight:nth-child(2) {

        border-right: 0;

    }

    .os3-highlight:nth-child(3) {

        padding-left: 0;

    }

}


/* ==========================================================
   16. TABLET
========================================================== */

@media (max-width: 800px) {

    .os3-container {

        width: calc(100% - 44px);

        grid-template-columns: 1fr;

        gap: 28px;

    }

    .os3-content {

        width: 100%;

    }

    .os3-description {

        max-width: 100%;

        line-height: 1.65;

    }

    .os3-photo {

        height: 400px;

    }

    .os3-benefits {

        grid-column: auto;

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

    }

    .os3-benefit {

        flex-direction: row;

        align-items: center;

        min-height: 70px;

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

    }

    .os3-benefit:nth-child(even) {

        border-right: 0;

    }

    .os3-benefit:last-child {

        border-bottom: 0;

    }

}


/* ==========================================================
   17. MOBILE
========================================================== */

@media (max-width: 600px) {

    .os3-about {

        padding: 42px 0;

    }

    .os3-container {

        width: calc(100% - 36px);

        gap: 26px;

    }

    .os3-eyebrow {

        margin-bottom: 10px;

        font-size: 14px;

        letter-spacing: 0.8px;

    }

    .os3-title {

        margin-bottom: 15px;

        font-size: clamp(30px, 8vw, 39px);

        line-height: 1.08;

    }

    .os3-description {

        margin-bottom: 19px;

        font-size: 15px;

        line-height: 1.65;

    }

    .os3-highlights {

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

        gap: 14px 0;

        margin: 20px 0;

    }

    .os3-highlight {

        gap: 10px;

        padding: 5px 10px;

    }

    .os3-highlight:first-child,
    .os3-highlight:nth-child(3) {

        padding-left: 0;

    }

    .os3-highlight:nth-child(even) {

        border-right: 0;

    }

    .os3-highlight>i {

        font-size: 22px;

    }

    .os3-button {

        width: 100%;

        min-height: 48px;

    }

    .os3-photo {

        height: 340px;

    }

    .os3-benefits {

        grid-template-columns: 1fr;

        padding: 7px 15px;

    }

    .os3-benefit {

        min-height: 60px;

        padding: 10px 0;

        border-right: 0;

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

    }

    .os3-benefit:last-child {

        border-bottom: 0;

    }

}


/* ==========================================================
   18. SMALL MOBILE
========================================================== */

@media (max-width: 380px) {

    .os3-container {

        width: calc(100% - 32px);

    }

    .os3-title {

        font-size: 29px;

    }

    .os3-photo {

        height: 300px;

    }

    .os3-highlight {

        gap: 7px;

    }

    .os3-highlight>i {

        font-size: 19px;

    }

    .os3-highlight strong,
    .os3-highlight small {

        font-size: 14px;

    }

}


/* ==========================================================
   19. REDUCED MOTION
========================================================== */

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

    .os3-about *,
    .os3-about *::before,
    .os3-about *::after {

        animation-duration: 0.01ms !important;

        transition-duration: 0.01ms !important;

    }

}



/* ==========================================================
   OSORIO PLUMBING SERVICES
   SECTION 05 — WHY CHOOSE US
   COMPLETE RESPONSIVE CSS
========================================================== */


/* ==========================================================
   01. SECTION
========================================================== */

.os5-why {

    --os5-navy: #071d36;
    --os5-navy-light: #102e50;
    --os5-blue: #0788df;
    --os5-electric: #17a8f5;
    --os5-wine: #84233d;
    --os5-white: #ffffff;

    position: relative;
    isolation: isolate;

    width: 100%;

    padding: 85px 0;

    overflow: hidden;

    background:
        radial-gradient(ellipse at 85% 15%,
            rgba(7, 136, 223, .15),
            transparent 42%),
        linear-gradient(125deg,
            #06182d 0%,
            #092542 55%,
            #06182d 100%);

    color: #ffffff;

    font-family: "DM Sans", Arial, sans-serif;

}

.os5-why *,
.os5-why *::before,
.os5-why *::after {

    box-sizing: border-box;

}

.os5-why a {

    text-decoration: none;

}

.os5-why a:focus-visible {

    outline: 3px solid #ffffff;
    outline-offset: 4px;

}


/* ==========================================================
   02. GLOBAL CONTAINER
========================================================== */

.os5-container {

    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, .95fr) minmax(0, 1.05fr) minmax(0, .95fr);

    align-items: center;

    gap: 45px;

    width: calc(100% - 80px);
    max-width: 1440px;

    margin: 0 auto;

}


/* ==========================================================
   03. LEFT PHOTO
========================================================== */

.os5-visual {

    position: relative;

    min-width: 0;

    padding: 0 18px 22px 0;

}

.os5-photo {

    position: relative;

    width: 100%;
    height: 525px;

    overflow: hidden;

    border-radius: 5px;

    background: #173954;

    box-shadow: 0 22px 50px rgba(0, 0, 0, .23);

}

.os5-photo::after {

    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(0deg,
            rgba(3, 17, 32, .36),
            transparent 45%);

    pointer-events: none;

}

.os5-photo img {

    display: block;

    width: 100%;
    height: 100%;

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

    transition: transform .7s ease;

}

.os5-visual:hover .os5-photo img {

    transform: scale(1.045);

}

.os5-photo-accent {

    position: absolute;

    top: 22px;
    right: 0;
    bottom: 0;

    z-index: -1;

    width: 70%;

    border: 2px solid rgba(23, 168, 245, .42);
    border-radius: 5px;

    background: rgba(7, 136, 223, .07);

}

.os5-photo-caption {

    position: absolute;

    right: 0;
    bottom: 50px;

    display: flex;
    align-items: center;

    gap: 13px;

    max-width: calc(100% - 25px);

    padding: 17px 19px;

    border-left: 4px solid var(--os5-wine);
    border-radius: 4px;

    background: #ffffff;

    color: var(--os5-navy);

    box-shadow: 0 12px 30px rgba(0, 0, 0, .2);

}

.os5-caption-icon {

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

    width: 47px;
    height: 47px;
    flex: 0 0 47px;

    border-radius: 4px;

    background: var(--os5-blue);

    color: #ffffff;

    font-size: 20px;

}

.os5-photo-caption>span:last-child {

    display: flex;
    flex-direction: column;

    gap: 4px;

}

.os5-photo-caption strong {

    color: var(--os5-navy);

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

    line-height: 1.3;

}

.os5-photo-caption small {

    color: #435b72;

    font-size: 14px;

    line-height: 1.3;

}


/* ==========================================================
   04. CENTER CONTENT
========================================================== */

.os5-content {

    min-width: 0;

}

.os5-eyebrow {

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

    gap: 12px;

    margin-bottom: 19px;

    color: #b9e6ff;

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

    letter-spacing: 1.8px;

}

.os5-eyebrow-line {

    display: inline-block;

    width: 29px;
    height: 3px;

    flex: 0 0 29px;

    border-radius: 3px;

    background: var(--os5-wine);

}

.os5-title {

    margin: 0 0 23px;

    color: #ffffff;

    font-family: "Outfit", Arial, sans-serif;

    font-size: clamp(35px, 3.2vw, 48px);
    font-weight: 900;

    line-height: 1.08;
    letter-spacing: -1.3px;

}

.os5-title span {

    display: block;

    color: #25b3ff;

}

.os5-description {

    margin: 0 0 17px;

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

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

    text-align: justify;

}

.os5-content-divider {

    width: 100%;
    height: 1px;

    margin: 27px 0;

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

}


/* ==========================================================
   05. ACTIONS
========================================================== */

.os5-contact-row {

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

    gap: 18px;

}

.os5-primary-btn {

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

    gap: 12px;

    min-height: 52px;

    padding: 13px 19px;

    border: 1px solid var(--os5-blue);
    border-radius: 5px;

    background: var(--os5-blue);

    color: #ffffff;

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

    line-height: 1.3;
    text-align: center;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;

}

.os5-primary-btn:hover {

    transform: translateY(-3px);

    border-color: var(--os5-wine);

    background: var(--os5-wine);

    color: #ffffff;

}

.os5-phone {

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

    gap: 11px;

    color: #ffffff;

}

.os5-phone-icon {

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

    width: 46px;
    height: 46px;
    flex: 0 0 46px;

    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 50%;

    background: rgba(7, 136, 223, .18);

    color: #ffffff;

    font-size: 17px;

}

.os5-phone>span:last-child {

    display: flex;
    flex-direction: column;

    gap: 4px;

}

.os5-phone small {

    color: #b9e6ff;

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

}

.os5-phone strong {

    color: #ffffff;

    font-size: 17px;
    font-weight: 900;

}

.os5-phone:hover strong {

    color: #25b3ff;

}


/* ==========================================================
   06. RIGHT BENEFITS
========================================================== */

.os5-benefits {

    display: flex;
    flex-direction: column;

    gap: 13px;

    min-width: 0;

}

.os5-benefit {

    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 16px;

    min-width: 0;

    padding: 22px 20px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 6px;

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

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;

}

.os5-benefit::before {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 3px;

    background: var(--os5-wine);

    opacity: 0;

    transition: opacity .3s ease;

}

.os5-benefit:hover {

    transform: translateX(-5px);

    border-color: rgba(23, 168, 245, .4);

    background: rgba(7, 136, 223, .13);

}

.os5-benefit:hover::before {

    opacity: 1;

}


/* ==========================================================
   07. BENEFIT ICONS
========================================================== */

.os5-benefit-icon {

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

    width: 49px;
    height: 49px;
    flex: 0 0 49px;

    border: 1px solid rgba(23, 168, 245, .35);
    border-radius: 5px;

    background: rgba(7, 136, 223, .19);

    color: #29b7ff;

    font-size: 21px;

    transition:
        background .3s ease,
        color .3s ease;

}

.os5-benefit:hover .os5-benefit-icon {

    background: var(--os5-blue);

    color: #ffffff;

}


/* ==========================================================
   08. BENEFIT CONTENT
========================================================== */

.os5-benefit-content {

    min-width: 0;

}

.os5-benefit-number {

    display: block;

    margin-bottom: 5px;

    color: #45bfff;

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

    letter-spacing: 1px;

}

.os5-benefit h3 {

    margin: 0 0 7px;

    color: #ffffff;

    font-family: "Outfit", Arial, sans-serif;

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

    line-height: 1.3;

}

.os5-benefit p {

    margin: 0;

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

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

    text-align: justify;

}


/* ==========================================================
   09. LARGE DESKTOP
========================================================== */

@media (min-width: 1600px) {

    .os5-container {

        gap: 55px;

    }

    .os5-photo {

        height: 560px;

    }

}


/* ==========================================================
   10. LAPTOP
========================================================== */

@media (max-width: 1350px) {

    .os5-container {

        width: calc(100% - 64px);

        gap: 28px;

        grid-template-columns:
            minmax(0, .9fr) minmax(0, 1fr) minmax(0, .95fr);

    }

    .os5-photo {

        height: 510px;

    }

    .os5-title {

        font-size: 39px;

    }

    .os5-benefit {

        padding: 17px 15px;

        gap: 12px;

    }

}


/* ==========================================================
   11. COMPACT LAPTOP
========================================================== */

@media (max-width: 1100px) {

    .os5-why {

        padding: 70px 0;

    }

    .os5-container {

        grid-template-columns:
            minmax(0, .85fr) minmax(0, 1.15fr);

        gap: 35px;

    }

    .os5-visual {

        align-self: stretch;

    }

    .os5-photo {

        height: 100%;
        min-height: 470px;

    }

    .os5-benefits {

        grid-column: 1 / -1;

        display: grid;

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

        gap: 15px;

    }

    .os5-benefit {

        padding: 22px;

    }

}


/* ==========================================================
   12. TABLET
========================================================== */

@media (max-width: 800px) {

    .os5-container {

        width: calc(100% - 44px);

        grid-template-columns: 1fr;

        gap: 35px;

    }

    .os5-visual {

        max-width: 650px;

    }

    .os5-photo {

        height: 430px;
        min-height: 0;

    }

    .os5-content {

        max-width: 700px;

    }

    .os5-title {

        font-size: clamp(36px, 5vw, 46px);

    }

    .os5-benefits {

        grid-column: auto;

    }

}


/* ==========================================================
   13. MOBILE
========================================================== */

@media (max-width: 600px) {

    .os5-why {

        padding: 50px 0;

    }

    .os5-container {

        width: calc(100% - 36px);

        gap: 30px;

    }

    .os5-visual {

        padding: 0 12px 15px 0;

    }

    .os5-photo {

        height: 365px;

    }

    .os5-photo-caption {

        bottom: 35px;

        gap: 9px;

        padding: 11px;

    }

    .os5-caption-icon {

        width: 40px;
        height: 40px;
        flex-basis: 40px;

        font-size: 17px;

    }

    .os5-title {

        font-size: clamp(33px, 8vw, 40px);

    }

    .os5-description {

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

    }

    .os5-contact-row {

        align-items: stretch;
        flex-direction: column;

        gap: 20px;

    }

    .os5-primary-btn {

        width: 100%;

    }

    .os5-benefits {

        grid-template-columns: 1fr;

        gap: 12px;

    }

    .os5-benefit {

        padding: 20px 17px;

    }

}


/* ==========================================================
   14. SMALL MOBILE
========================================================== */

@media (max-width: 380px) {

    .os5-container {

        width: calc(100% - 32px);

    }

    .os5-photo {

        height: 310px;

    }

    .os5-photo-caption {

        max-width: calc(100% - 10px);

    }

    .os5-title {

        font-size: 32px;

    }

    .os5-benefit {

        gap: 12px;

        padding: 17px 13px;

    }

    .os5-benefit-icon {

        width: 43px;
        height: 43px;
        flex-basis: 43px;

        font-size: 18px;

    }

}


/* ==========================================================
   15. REDUCED MOTION
========================================================== */

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

    .os5-why *,
    .os5-why *::before,
    .os5-why *::after {

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

    }

}


/* ==========================================================
   OSORIO PLUMBING SERVICES
   SECTION 07 — OUR WORK
========================================================== */

.os7-gallery {
    --os7-navy: #071d36;
    --os7-blue: #0788df;
    --os7-wine: #84233d;
    --os7-text: #52657a;
    position: relative;
    width: 100%;
    padding: 95px 0 85px;
    overflow: hidden;
    background: #f5f8fc;
    color: var(--os7-navy);
    font-family: "DM Sans", Arial, sans-serif;
}

.os7-gallery *,
.os7-gallery *::before,
.os7-gallery *::after,
.os7-lightbox *,
.os7-lightbox *::before,
.os7-lightbox *::after {
    box-sizing: border-box;
}

.os7-gallery button,
.os7-lightbox button {
    font: inherit;
    cursor: pointer;
}

.os7-gallery a {
    text-decoration: none;
}

.os7-gallery button:focus-visible,
.os7-gallery a:focus-visible,
.os7-lightbox button:focus-visible {
    outline: 3px solid #20a8ff;
    outline-offset: 4px;
}

/* CONTAINER */

.os7-container {
    width: calc(100% - 80px);
    max-width: 1440px;
    margin: 0 auto;
}

/* HEADER */

.os7-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 35px;
}

.os7-heading {
    max-width: 760px;
}

.os7-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--os7-blue);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.7px;
}

.os7-eyebrow-line {
    width: 30px;
    height: 3px;
    background: var(--os7-wine);
}

.os7-heading h2 {
    margin: 0 0 17px;
    color: var(--os7-navy);
    font-family: "Outfit", Arial, sans-serif;
    font-size: clamp(36px, 4vw, 54px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1.4px;
}

.os7-heading h2 span {
    color: var(--os7-blue);
}

.os7-heading p {
    margin: 0;
    max-width: 680px;
    color: var(--os7-text);
    font-size: 16px;
    line-height: 1.8;
    text-align: justify;
}

.os7-header-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.os7-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1px solid #d5e1ec;
    border-radius: 4px;
    background: #fff;
    color: var(--os7-navy);
    font-size: 17px !important;
    transition: .25s ease;
}

.os7-arrow:hover {
    border-color: var(--os7-blue);
    background: var(--os7-blue);
    color: #fff;
}

/* FILTER TOOLBAR */

.os7-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 23px;
}

.os7-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.os7-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 45px;
    padding: 11px 16px;
    border: 1px solid #dce5ef;
    border-radius: 4px;
    background: #fff;
    color: var(--os7-navy);
    font-size: 14px !important;
    font-weight: 800 !important;
    transition: .25s ease;
}

.os7-filter span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 24px;
    padding: 2px 5px;
    border-radius: 3px;
    background: #e9f2fa;
    color: var(--os7-blue);
    font-size: 14px;
}

.os7-filter:hover,
.os7-filter.is-active {
    border-color: var(--os7-navy);
    background: var(--os7-navy);
    color: #fff;
}

.os7-filter.is-active span {
    background: rgba(255, 255, 255, .17);
    color: #fff;
}

.os7-counter {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--os7-navy);
    font-family: "Outfit", Arial, sans-serif;
    font-size: 21px;
    font-weight: 900;
    white-space: nowrap;
}

.os7-counter-divider {
    color: #a9b8c8;
}

#os7-total {
    color: #8394a7;
}

/* CAROUSEL */

.os7-carousel {
    overflow: hidden;
    width: 100%;
    touch-action: pan-y;
}

.os7-track {
    display: flex;
    gap: 20px;
    transition: transform .55s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

.os7-card {
    position: relative;
    flex: 0 0 calc((100% - 60px)/4);
    min-width: 0;
    height: 390px;
    overflow: hidden;
    border-radius: 5px;
    background: #132e46;
    isolation: isolate;
    cursor: pointer;
}

.os7-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
            rgba(4, 19, 35, .04) 30%,
            rgba(4, 19, 35, .38) 63%,
            rgba(4, 19, 35, .94) 100%);
    pointer-events: none;
}

.os7-card img,
.os7-card video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.os7-card:hover img,
.os7-card:hover video {
    transform: scale(1.06);
}

.os7-card-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.os7-card-video {
    background: #102a43;
}

.os7-card-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .95);
    color: var(--os7-navy);
    font-size: 14px;
    font-weight: 900;
}

.os7-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    background: rgba(7, 29, 54, .55);
    color: #fff;
    font-size: 22px;
    transform: translate(-50%, -50%);
    transition: .25s ease;
    pointer-events: none;
}

.os7-card:hover .os7-card-play {
    background: var(--os7-blue);
    transform: translate(-50%, -50%) scale(1.1);
}

.os7-card-content {
    position: absolute;
    right: 20px;
    bottom: 22px;
    left: 20px;
    z-index: 2;
    color: #fff;
}

.os7-card-index {
    display: block;
    margin-bottom: 8px;
    color: #8ed7ff;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
}

.os7-card-content h3 {
    margin: 0 0 8px;
    color: #fff;
    font-family: "Outfit", Arial, sans-serif;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
}

.os7-card-content p {
    margin: 0;
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    line-height: 1.5;
}

.os7-card-open {
    position: absolute;
    right: 19px;
    bottom: 19px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    background: var(--os7-blue);
    color: #fff;
    font-size: 15px;
}

.os7-card-content {
    padding-right: 36px;
}

/* PROGRESS */

.os7-bottom-controls {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 26px;
}

.os7-progress {
    flex: 1;
    height: 4px;
    overflow: hidden;
    border-radius: 5px;
    background: #dce5ef;
}

.os7-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 5px;
    background: var(--os7-blue);
    transition: width .4s ease;
}

.os7-autoplay {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--os7-navy);
    font-size: 14px !important;
    font-weight: 900 !important;
    white-space: nowrap;
}

/* CTA */

.os7-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 55px;
    padding: 25px 28px;
    border-radius: 5px;
    background: var(--os7-navy);
    color: #fff;
}

.os7-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 4px;
    background: var(--os7-blue);
    font-size: 23px;
}

.os7-cta-content {
    flex: 1;
}

.os7-cta-content strong {
    display: block;
    margin-bottom: 5px;
    font-size: 19px;
    font-weight: 900;
}

.os7-cta-content p {
    margin: 0;
    color: rgba(255, 255, 255, .75);
    font-size: 15px;
    line-height: 1.6;
}

.os7-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50px;
    padding: 13px 20px;
    border-radius: 4px;
    background: var(--os7-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
    transition: .25s ease;
}

.os7-cta-button:hover {
    background: var(--os7-wine);
    color: #fff;
}

/* LIGHTBOX */

.os7-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    flex-direction: column;
    background: rgba(2, 10, 20, .97);
    color: #fff;
    font-family: "DM Sans", Arial, sans-serif;
}

.os7-lightbox.is-open {
    display: flex;
}

.os7-lightbox-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 35px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.os7-lightbox-brand {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.os7-lightbox-brand span {
    color: #55baff;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
}

.os7-lightbox-brand strong {
    font-size: 18px;
}

.os7-lightbox-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 22px !important;
}

.os7-lightbox-body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 18px;
    min-height: 0;
    padding: 20px 30px;
}

.os7-lightbox-media {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    height: 100%;
    min-height: 0;
}

.os7-lightbox-media img,
.os7-lightbox-media video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 3px;
}

.os7-lightbox-media video {
    background: #000;
}

.os7-lightbox-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    color: #fff;
    font-size: 18px !important;
}

.os7-lightbox-nav:hover,
.os7-lightbox-close:hover {
    background: var(--os7-blue, #0788df);
}

.os7-lightbox-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 35px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: #b9c7d5;
    font-size: 14px;
}

body.os7-lock {
    overflow: hidden;
}

/* LAPTOP */

@media(max-width:1350px) {
    .os7-container {
        width: calc(100% - 64px);
    }

    .os7-card {
        flex-basis: calc((100% - 40px)/3);
    }
}

/* TABLET */

@media(max-width:900px) {
    .os7-gallery {
        padding: 70px 0;
    }

    .os7-container {
        width: calc(100% - 44px);
    }

    .os7-card {
        flex-basis: calc((100% - 20px)/2);
        height: 360px;
    }

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

    .os7-cta-button {
        margin-left: 78px;
    }
}

/* MOBILE */

@media(max-width:600px) {
    .os7-gallery {
        padding: 55px 0;
    }

    .os7-container {
        width: calc(100% - 36px);
    }

    .os7-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
    }

    .os7-heading h2 {
        font-size: clamp(34px, 8vw, 42px);
    }

    .os7-heading p {
        font-size: 15px;
    }

    .os7-header-actions {
        align-self: flex-end;
    }

    .os7-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .os7-filters {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .os7-filter {
        flex-direction: column;
        gap: 5px;
        padding: 10px 5px;
        font-size: 14px !important;
    }

    .os7-card {
        flex-basis: 85%;
        height: 400px;
    }

    .os7-card-content h3 {
        font-size: 20px;
    }

    .os7-cta {
        align-items: flex-start;
        padding: 22px;
    }

    .os7-cta-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .os7-cta-content {
        flex-basis: calc(100% - 68px);
    }

    .os7-cta-content strong {
        font-size: 17px;
    }

    .os7-cta-button {
        width: 100%;
        margin-left: 0;
    }

    .os7-lightbox-top {
        padding: 15px;
    }

    .os7-lightbox-body {
        gap: 5px;
        padding: 12px 5px;
    }

    .os7-lightbox-nav {
        width: 34px;
        height: 40px;
        flex-basis: 34px;
        font-size: 15px !important;
    }

    .os7-lightbox-footer {
        flex-direction: column;
        gap: 5px;
        padding: 13px 15px;
    }
}

@media(max-width:380px) {
    .os7-container {
        width: calc(100% - 32px);
    }

    .os7-card {
        flex-basis: 90%;
        height: 360px;
    }
}

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

    .os7-gallery *,
    .os7-lightbox * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}



/* ==========================================================
   OSORIO PLUMBING SERVICES
   SECTION 08 — PREMIUM CALL TO ACTION
   CSS
========================================================== */


/* ==========================================================
   01. SECTION
========================================================== */

.os8-cta {

    --os8-navy: #071d36;
    --os8-blue: #0788df;
    --os8-wine: #84233d;
    --os8-white: #ffffff;

    position: relative;
    isolation: isolate;

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

    display: flex;
    align-items: center;

    padding: 85px 0;

    overflow: hidden;

    background: #071d36;

    color: #ffffff;

    font-family: "DM Sans", Arial, sans-serif;

}

.os8-cta *,
.os8-cta *::before,
.os8-cta *::after {

    box-sizing: border-box;

}

.os8-cta a {

    text-decoration: none;

}

.os8-cta a:focus-visible {

    outline: 3px solid #ffffff;
    outline-offset: 4px;

}


/* ==========================================================
   02. BACKGROUND
========================================================== */

.os8-background {

    position: absolute;
    inset: 0;

    z-index: -3;

    background-image: url("https://images.unsplash.com/photo-1585704032915-c3400ca199e7?auto=format&fit=crop&w=2000&q=90"
        );

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    transform: scale(1.02);

    transition: transform 1.2s ease;

}

.os8-cta:hover .os8-background {

    transform: scale(1.065);

}

.os8-overlay {

    position: absolute;
    inset: 0;

    z-index: -2;

    background:
        linear-gradient(90deg,
            rgba(4, 17, 32, .97) 0%,
            rgba(5, 23, 43, .94) 36%,
            rgba(6, 26, 48, .84) 65%,
            rgba(4, 17, 32, .88) 100%);

}


/* ==========================================================
   03. CONTAINER
========================================================== */

.os8-container {

    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr) minmax(320px, .7fr);

    align-items: center;

    gap: 80px;

    width: calc(100% - 80px);
    max-width: 1440px;

    margin: 0 auto;

}


/* ==========================================================
   04. LEFT CONTENT
========================================================== */

.os8-content {

    max-width: 800px;
    min-width: 0;

}

.os8-eyebrow {

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

    gap: 12px;

    margin-bottom: 22px;

    color: #7ed0ff;

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

    letter-spacing: 2px;

}

.os8-eyebrow-line {

    display: inline-block;

    width: 32px;
    height: 3px;

    flex: 0 0 32px;

    background: #a52b4a;

}

.os8-content h2 {

    margin: 0 0 26px;

    color: #ffffff;

    font-family: "Outfit", Arial, sans-serif;

    font-size: clamp(40px, 4.5vw, 66px);
    font-weight: 900;

    line-height: 1.07;
    letter-spacing: -1.8px;

}

.os8-content h2 span {

    display: block;

    color: #35b9ff;

}

.os8-description {

    max-width: 660px;

    margin: 0;

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

    font-size: 17px;
    line-height: 1.85;

    text-align: justify;

}


/* ==========================================================
   05. ACTION BUTTONS
========================================================== */

.os8-actions {

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

    gap: 13px;

    margin-top: 35px;

}

.os8-button {

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

    gap: 16px;

    min-height: 57px;

    padding: 16px 24px;

    border: 1px solid transparent;
    border-radius: 4px;

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

    line-height: 1.3;
    letter-spacing: .3px;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;

}

.os8-button:hover {

    transform: translateY(-3px);

}

.os8-button-primary {

    background: var(--os8-blue);

    color: #ffffff;

    box-shadow: 0 10px 25px rgba(7, 136, 223, .2);

}

.os8-button-primary:hover {

    background: var(--os8-wine);

    color: #ffffff;

}

.os8-button-outline {

    border-color: rgba(255, 255, 255, .6);

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

    color: #ffffff;

    backdrop-filter: blur(5px);

}

.os8-button-outline:hover {

    border-color: #ffffff;

    background: #ffffff;

    color: var(--os8-navy);

}


/* ==========================================================
   06. CONTACT CARD
========================================================== */

.os8-contact-card {

    position: relative;

    min-width: 0;

    padding: 36px 32px;

    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 6px;

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

    color: var(--os8-navy);

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

}

.os8-contact-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 95px;
    height: 5px;

    background: var(--os8-wine);

}

.os8-card-top {

    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 24px;

}

.os8-card-icon {

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

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    border-radius: 5px;

    background: var(--os8-blue);

    color: #ffffff;

    font-size: 20px;

}

.os8-card-label {

    color: var(--os8-blue);

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

    letter-spacing: 1.1px;

}

.os8-contact-card h3 {

    margin: 0 0 17px;

    color: var(--os8-navy);

    font-family: "Outfit", Arial, sans-serif;

    font-size: 31px;
    font-weight: 900;

    line-height: 1.15;

}

.os8-contact-card h3 span {

    display: block;

    color: var(--os8-blue);

}

.os8-contact-card>p {

    margin: 0;

    color: #52657a;

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

    text-align: justify;

}

.os8-card-divider {

    width: 100%;
    height: 1px;

    margin: 23px 0;

    background: #e0e8ef;

}

.os8-phone-label {

    display: block;

    margin-bottom: 8px;

    color: #687a8c;

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

    letter-spacing: .7px;

}

.os8-phone-number {

    display: inline-block;

    color: var(--os8-navy);

    font-family: "Outfit", Arial, sans-serif;

    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 900;

    line-height: 1.2;

    transition: color .25s ease;

}

.os8-phone-number:hover {

    color: var(--os8-blue);

}

.os8-card-link {

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

    gap: 15px;

    color: var(--os8-blue);

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

    line-height: 1.4;

    transition: color .25s ease;

}

.os8-card-link:hover {

    color: var(--os8-wine);

}


/* ==========================================================
   07. BOTTOM ACCENT
========================================================== */

.os8-bottom-accent {

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    z-index: 3;

    display: flex;

    width: 100%;
    height: 5px;

}

.os8-bottom-accent span:nth-child(1) {

    width: 24%;

    background: var(--os8-wine);

}

.os8-bottom-accent span:nth-child(2) {

    width: 51%;

    background: var(--os8-blue);

}

.os8-bottom-accent span:nth-child(3) {

    width: 25%;

    background: #ffffff;

}


/* ==========================================================
   08. LAPTOP
========================================================== */

@media (max-width: 1350px) {

    .os8-container {

        width: calc(100% - 64px);

        gap: 45px;

        grid-template-columns:
            minmax(0, 1.2fr) minmax(300px, .8fr);

    }

    .os8-content h2 {

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

    }

}


/* ==========================================================
   09. TABLET
========================================================== */

@media (max-width: 950px) {

    .os8-cta {

        padding: 75px 0;

    }

    .os8-container {

        width: calc(100% - 44px);

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .os8-content {

        max-width: 760px;

    }

    .os8-contact-card {

        max-width: 600px;

    }

}


/* ==========================================================
   10. MOBILE
========================================================== */

@media (max-width: 600px) {

    .os8-cta {

        padding: 60px 0;

    }

    .os8-container {

        width: calc(100% - 36px);

        gap: 35px;

    }

    .os8-content h2 {

        font-size: clamp(36px, 9vw, 46px);

        letter-spacing: -1px;

    }

    .os8-description {

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

    }

    .os8-actions {

        flex-direction: column;
        align-items: stretch;

        gap: 11px;

        margin-top: 28px;

    }

    .os8-button {

        width: 100%;

        min-height: 54px;

    }

    .os8-contact-card {

        padding: 28px 23px;

    }

    .os8-contact-card h3 {

        font-size: 29px;

    }

    .os8-phone-number {

        font-size: 27px;

    }

}


/* ==========================================================
   11. SMALL MOBILE
========================================================== */

@media (max-width: 380px) {

    .os8-container {

        width: calc(100% - 32px);

    }

    .os8-content h2 {

        font-size: 33px;

    }

    .os8-contact-card {

        padding: 25px 18px;

    }

    .os8-phone-number {

        font-size: 24px;

    }

}


/* ==========================================================
   12. ACCESSIBILITY
========================================================== */

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

    .os8-cta *,
    .os8-cta *::before,
    .os8-cta *::after {

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

    }

}



/* ==========================================================
 OSORIO PLUMBING SERVICES
 SECTION 09 — GOOGLE INSPIRED REVIEWS
 CSS COMPLETO
========================================================== */


/* ==========================================================
 01. SECTION
========================================================== */

.osgr {

    --osgr-navy: #071d36;
    --osgr-blue: #0788df;
    --osgr-border: #e4e9ef;
    --osgr-muted: #64748b;

    position: relative;

    width: 100%;

    padding: 85px 0 75px;

    overflow: hidden;

    background:
        radial-gradient(ellipse at 50% 0%,
            rgba(7, 136, 223, .065),
            transparent 65%),
        #f7faff;

    color: var(--osgr-navy);

    font-family: "DM Sans", Arial, sans-serif;

}

.osgr *,
.osgr *::before,
.osgr *::after {

    box-sizing: border-box;

}


/* ==========================================================
 02. CONTAINER
========================================================== */

.osgr-container {

    width: calc(100% - 80px);

    max-width: 1440px;

    margin: 0 auto;

}


/* ==========================================================
 03. HEADER
========================================================== */

.osgr-heading {

    max-width: 760px;

    margin: 0 auto 42px;

    text-align: center;

}

.osgr-eyebrow {

    display: block;

    margin-bottom: 11px;

    color: var(--osgr-blue);

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

    letter-spacing: 1.8px;

}

.osgr-heading h2 {

    margin: 0 0 15px;

    color: var(--osgr-navy);

    font-family: "Outfit", Arial, sans-serif;

    font-size: clamp(32px, 4vw, 48px);
    font-weight: 900;

    line-height: 1.13;

    letter-spacing: -1px;

}

.osgr-heading h2 span {

    color: var(--osgr-blue);

}

.osgr-heading p {

    margin: 0;

    color: #62758a;

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

}


/* ==========================================================
 04. CAROUSEL
========================================================== */

.osgr-carousel {

    display: grid;

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

    align-items: center;

    gap: 20px;

}

.osgr-viewport {

    min-width: 0;

    overflow: hidden;

    padding: 8px 2px 16px;

}

.osgr-track {

    display: flex;

    align-items: stretch;

    gap: 20px;

    transition: transform .45s ease;

    will-change: transform;

}


/* ==========================================================
 05. REVIEW CARD
========================================================== */

.osgr-card {

    display: flex;

    flex-direction: column;

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

    min-width: 0;

    min-height: 260px;

    padding: 25px;

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

    background: #ffffff;

    box-shadow:
        0 5px 20px rgba(15, 35, 55, .045),
        0 14px 35px rgba(15, 35, 55, .035);

    transition:
        border-color .25s ease,
        box-shadow .25s ease;

}

.osgr-card:hover {

    border-color: #c9dced;

    box-shadow:
        0 10px 28px rgba(15, 35, 55, .07),
        0 18px 40px rgba(15, 35, 55, .04);

}


/* ==========================================================
 06. CARD HEADER
========================================================== */

.osgr-card-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

}

.osgr-avatar {

    display: flex;

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

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    border-radius: 50%;

    color: #ffffff;

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

}

.osgr-avatar-blue {

    background: #3478c7;

}

.osgr-avatar-green {

    background: #25866c;

}

.osgr-avatar-purple {

    background: #8b5db1;

}

.osgr-person {

    display: flex;

    flex-direction: column;

    gap: 5px;

    min-width: 0;

    flex: 1;

}

.osgr-person strong {

    overflow: hidden;

    color: #202124;

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

    text-overflow: ellipsis;
    white-space: nowrap;

}

.osgr-person>span {

    color: #70757a;

    font-size: 14px;

}

.osgr-google {

    display: flex;

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

    width: 28px;
    height: 28px;

    flex: 0 0 28px;

}

.osgr-google span {

    font-family: Arial, sans-serif;

    font-size: 25px;
    font-weight: 900;

    color: #4285f4;

}


/* ==========================================================
 07. STARS
========================================================== */

.osgr-rating {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 14px;

}

.osgr-stars {

    display: flex;

    align-items: center;

    gap: 3px;

    color: #f9ab00;

    font-size: 16px;

}

.osgr-rating>span {

    color: #70757a;

    font-size: 14px;

}


/* ==========================================================
 08. REVIEW TEXT
========================================================== */

.osgr-review-text {

    display: -webkit-box;

    overflow: hidden;

    margin: 0 0 8px;

    color: #3c4043;

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

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;

    line-clamp: 4;

}

.osgr-card.is-expanded .osgr-review-text {

    display: block;

    overflow: visible;

}

.osgr-read-more {

    display: none;

    align-self: flex-start;

    margin: 0 0 15px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #1a73e8;

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

    cursor: pointer;

}

.osgr-read-more:hover {

    text-decoration: underline;

}


/* ==========================================================
 09. CARD FOOTER
========================================================== */

.osgr-card-footer {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: auto;
    padding-top: 18px;

    border-top: 1px solid #eef1f4;

    color: #80868b;

    font-size: 14px;

}

.osgr-card-footer i {

    color: #4285f4;

}


/* ==========================================================
 10. ARROWS
========================================================== */

.osgr-arrow {

    display: flex;

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

    width: 44px;
    height: 44px;

    border: 1px solid #e0e6ec;
    border-radius: 50%;

    background: #ffffff;

    color: #344054;

    font-size: 16px;

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

    cursor: pointer;

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

}

.osgr-arrow:hover:not(:disabled) {

    transform: scale(1.07);

    border-color: var(--osgr-blue);

    background: var(--osgr-blue);

    color: #ffffff;

}

.osgr-arrow:disabled {

    opacity: .35;

    cursor: not-allowed;

}


/* ==========================================================
 11. DOTS
========================================================== */

.osgr-dots {

    display: flex;

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

    gap: 8px;

    margin-top: 24px;

}

.osgr-dots:empty {

    display: none;

}

.osgr-dot {

    width: 9px;
    height: 9px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #c7d3df;

    cursor: pointer;

    transition:
        width .25s ease,
        background .25s ease;

}

.osgr-dot.is-active {

    width: 26px;

    border-radius: 10px;

    background: var(--osgr-blue);

}


/* ==========================================================
 12. BOTTOM
========================================================== */

.osgr-bottom {

    display: flex;

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

    gap: 25px;

    margin-top: 29px;

}

.osgr-bottom-copy {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #64748b;

    font-size: 14px;

}

.osgr-bottom-copy i {

    color: var(--osgr-blue);

}

.osgr-google-button {

    display: inline-flex;

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

    gap: 12px;

    min-height: 45px;

    padding: 12px 18px;

    border: 1px solid #dbe4ed;
    border-radius: 6px;

    background: #ffffff;

    color: #202124;

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

    text-decoration: none;

    transition:
        background .25s ease,
        border-color .25s ease;

}

.osgr-google-button:hover {

    border-color: var(--osgr-blue);

    background: #edf7ff;

}

.osgr-google-button .fa-google {

    color: #4285f4;

}


/* ==========================================================
 13. LAPTOP
========================================================== */

@media(max-width:1200px) {

    .osgr-container {

        width: calc(100% - 64px);

    }

    .osgr-card {

        padding: 20px;

    }

    .osgr-carousel {

        gap: 12px;

    }

}


/* ==========================================================
 14. TABLET
========================================================== */

@media(max-width:950px) {

    .osgr {

        padding: 70px 0;

    }

    .osgr-container {

        width: calc(100% - 44px);

    }

    .osgr-card {

        flex-basis: calc((100% - 20px) / 2);

    }

}


/* ==========================================================
 15. MOBILE
========================================================== */

@media(max-width:650px) {

    .osgr {

        padding: 55px 0;

    }

    .osgr-container {

        width: calc(100% - 36px);

    }

    .osgr-heading {

        margin-bottom: 28px;

    }

    .osgr-heading h2 {

        font-size: 32px;

    }

    .osgr-heading p {

        font-size: 15px;

    }

    .osgr-carousel {

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

        gap: 7px;

    }

    .osgr-arrow {

        width: 35px;
        height: 35px;

        font-size: 14px;

    }

    .osgr-card {

        flex-basis: 100%;

        min-height: 250px;

        padding: 20px;

    }

    .osgr-bottom {

        flex-direction: column;

        gap: 14px;

        text-align: center;

    }

}


/* ==========================================================
 16. SMALL MOBILE
========================================================== */

@media(max-width:380px) {

    .osgr-container {

        width: calc(100% - 32px);

    }

    .osgr-card {

        padding: 17px;

    }

}


/* ==========================================================
 17. ACCESSIBILITY
========================================================== */

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

    .osgr *,
    .osgr *::before,
    .osgr *::after {

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

    }

}


/* ==========================================================
 OSORIO PLUMBING SERVICES
 SECTION 07 — THE OSORIO APPROACH
 CSS COMPLETO
========================================================== */


/* ==========================================================
 01. SECTION
========================================================== */

.os7-approach {

    --os7-navy: #071d36;
    --os7-blue: #0788df;
    --os7-wine: #84233d;

    position: relative;

    isolation: isolate;

    width: 100%;

    min-height: 550px;

    padding: 85px 0;

    overflow: hidden;

    background: #071d36;

    color: #ffffff;

    font-family: "DM Sans", Arial, sans-serif;

}

.os7-approach *,
.os7-approach *::before,
.os7-approach *::after {

    box-sizing: border-box;

}

.os7-approach a {

    text-decoration: none;

}

.os7-approach a:focus-visible {

    outline: 3px solid #65c8ff;

    outline-offset: 5px;

}


/* ==========================================================
 02. BACKGROUND
========================================================== */

.os7-background {

    position: absolute;

    inset: 0;

    z-index: -3;

    background-image: url("https://images.unsplash.com/photo-1585704032915-c3400ca199e7?auto=format&fit=crop&w=2000&q=85"
        );

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

.os7-overlay {

    position: absolute;

    inset: 0;

    z-index: -2;

    background:

        linear-gradient(105deg,
            rgba(3, 16, 32, .98) 0%,
            rgba(5, 27, 50, .96) 48%,
            rgba(5, 25, 47, .91) 100%);

}


/* ==========================================================
 03. DECORATION
========================================================== */

.os7-decoration {

    position: absolute;

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

    width: 450px;
    height: 450px;

    z-index: -1;

    pointer-events: none;

}

.os7-decoration span {

    position: absolute;

    inset: 0;

    border: 1px solid rgba(73, 188, 255, .12);

    border-radius: 50%;

}

.os7-decoration span:nth-child(2) {

    inset: 60px;

}

.os7-decoration span:nth-child(3) {

    inset: 120px;

}


/* ==========================================================
 04. CONTAINER
========================================================== */

.os7-container {

    width: calc(100% - 80px);

    max-width: 1440px;

    margin: 0 auto;

}


/* ==========================================================
 05. LAYOUT
========================================================== */

.os7-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr) minmax(0, .8fr);

    align-items: center;

    gap: 75px;

}

.os7-content,
.os7-visual {

    min-width: 0;

}


/* ==========================================================
 06. EYEBROW
========================================================== */

.os7-eyebrow {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 21px;

    color: #6acaff;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 2px;

}

.os7-eyebrow-line {

    width: 35px;
    height: 3px;

    flex: 0 0 35px;

    background: var(--os7-blue);

}


/* ==========================================================
 07. HEADING
========================================================== */

.os7-content h2 {

    max-width: 750px;

    margin: 0 0 24px;

    color: #ffffff;

    font-family: "Outfit", Arial, sans-serif;

    font-size: clamp(35px, 3.7vw, 54px);

    font-weight: 900;

    line-height: 1.08;

    letter-spacing: -1.4px;

}

.os7-content h2 span {

    display: block;

    color: #4abaff;

}


/* ==========================================================
 08. DESCRIPTION
========================================================== */

.os7-description {

    max-width: 640px;

    margin: 0;

    color: #c1d1df;

    font-size: 16px;

    line-height: 1.85;

    text-align: justify;

}

.os7-accent-line {

    width: 100%;

    max-width: 640px;

    height: 1px;

    margin: 29px 0;

    background: linear-gradient(90deg,
            rgba(74, 186, 255, .65),
            rgba(255, 255, 255, .08));

}


/* ==========================================================
 09. PROCESS
========================================================== */

.os7-process {

    display: grid;

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

    gap: 22px;

}

.os7-process-item {

    min-width: 0;

}

.os7-process-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 49px;
    height: 49px;

    margin-bottom: 17px;

    border: 1px solid rgba(67, 188, 255, .35);

    border-radius: 5px;

    background: rgba(7, 136, 223, .15);

    color: #4fc0ff;

    font-size: 20px;

}

.os7-process-text>span {

    display: block;

    margin-bottom: 8px;

    color: #50bfff;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 1px;

}

.os7-process-text h3 {

    margin: 0 0 10px;

    color: #ffffff;

    font-family: "Outfit", Arial, sans-serif;

    font-size: 17px;

    font-weight: 800;

    line-height: 1.35;

}

.os7-process-text p {

    margin: 0;

    color: #aebfd0;

    font-size: 14px;

    line-height: 1.7;

}


/* ==========================================================
 10. ACTIONS
========================================================== */

.os7-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 35px;

}

.os7-button-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    min-height: 53px;

    padding: 15px 22px;

    border: 1px solid var(--os7-blue);

    border-radius: 4px;

    background: var(--os7-blue);

    color: #ffffff;

    font-size: 14px;

    font-weight: 900;

    line-height: 1.4;

    transition:

        background .25s ease,

        border-color .25s ease,

        transform .25s ease;

}

.os7-button-primary:hover {

    transform: translateY(-3px);

    border-color: var(--os7-wine);

    background: var(--os7-wine);

    color: #ffffff;

}

.os7-button-phone {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #ffffff;

    font-size: 16px;

    font-weight: 900;

    transition: color .25s ease;

}

.os7-button-phone i {

    color: #4fc0ff;

}

.os7-button-phone:hover {

    color: #4fc0ff;

}


/* ==========================================================
 11. RIGHT VISUAL
========================================================== */

.os7-visual {

    position: relative;

}

.os7-visual-frame {

    position: relative;

    width: 100%;

    min-height: 480px;

    border: 7px solid rgba(255, 255, 255, .08);

    border-radius: 8px;

    background: #153b59;

    box-shadow: 0 25px 65px rgba(0, 0, 0, .25);

}

.os7-visual-frame::before {

    content: "";

    position: absolute;

    top: -22px;
    right: -22px;

    width: 140px;
    height: 140px;

    border-top: 4px solid var(--os7-blue);
    border-right: 4px solid var(--os7-blue);

    border-radius: 0 8px 0 0;

    z-index: -1;

}

.os7-visual-photo {

    position: absolute;

    inset: 0;

    border-radius: 2px;

    background-image: url("https://images.unsplash.com/photo-1585704032915-c3400ca199e7?auto=format&fit=crop&w=1100&q=85"
        );

    background-size: cover;

    background-position: center;

}

.os7-visual-shade {

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg,
            rgba(4, 18, 34, .02) 25%,
            rgba(4, 18, 34, .82) 100%);

}


/* ==========================================================
 12. FLOATING BADGE
========================================================== */

.os7-floating-badge {

    position: absolute;

    top: 30px;
    left: -30px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 15px 20px;

    border-left: 4px solid var(--os7-blue);

    border-radius: 4px;

    background: #ffffff;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);

}

.os7-floating-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 45px;
    height: 45px;

    border-radius: 50%;

    background: #e8f6ff;

    color: var(--os7-blue);

    font-size: 23px;

}

.os7-floating-badge>div:last-child {

    display: flex;

    flex-direction: column;

    gap: 3px;

}

.os7-floating-badge strong {

    color: var(--os7-navy);

    font-family: "Outfit", Arial, sans-serif;

    font-size: 21px;

    font-weight: 900;

    line-height: 1;

}

.os7-floating-badge span {

    color: #496176;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: .5px;

}


/* ==========================================================
 13. PHOTO CAPTION
========================================================== */

.os7-photo-caption {

    position: absolute;

    right: 28px;
    bottom: 30px;
    left: 28px;

    display: flex;

    align-items: flex-start;

    gap: 13px;

}

.os7-caption-line {

    width: 4px;
    height: 48px;

    flex: 0 0 4px;

    background: var(--os7-blue);

}

.os7-photo-caption p {

    max-width: 320px;

    margin: 0;

    color: #ffffff;

    font-family: "Outfit", Arial, sans-serif;

    font-size: 19px;

    font-weight: 800;

    line-height: 1.45;

}


/* ==========================================================
 14. BOTTOM ACCENT
========================================================== */

.os7-bottom-accent {

    position: absolute;

    bottom: 0;
    left: 0;

    display: flex;

    width: 100%;

    height: 5px;

}

.os7-bottom-accent span:first-child {

    width: 28%;

    background: var(--os7-wine);

}

.os7-bottom-accent span:last-child {

    flex: 1;

    background: var(--os7-blue);

}


/* ==========================================================
 15. LAPTOP
========================================================== */

@media(max-width:1350px) {

    .os7-container {

        width: calc(100% - 64px);

    }

    .os7-layout {

        gap: 45px;

    }

    .os7-visual-frame {

        min-height: 450px;

    }

}


/* ==========================================================
 16. TABLET
========================================================== */

@media(max-width:1050px) {

    .os7-approach {

        padding: 70px 0;

    }

    .os7-container {

        width: calc(100% - 44px);

    }

    .os7-layout {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .os7-content {

        max-width: 850px;

    }

    .os7-visual {

        max-width: 700px;

        margin: 0 auto;

        width: 100%;

    }

    .os7-visual-frame {

        min-height: 420px;

    }

}


/* ==========================================================
 17. MOBILE
========================================================== */

@media(max-width:650px) {

    .os7-approach {

        padding: 55px 0;

    }

    .os7-container {

        width: calc(100% - 36px);

    }

    .os7-eyebrow {

        font-size: 14px;

        letter-spacing: 1px;

    }

    .os7-content h2 {

        font-size: 35px;

        letter-spacing: -.8px;

    }

    .os7-description {

        font-size: 15px;

    }

    .os7-process {

        grid-template-columns: 1fr;

        gap: 23px;

    }

    .os7-process-item {

        display: flex;

        align-items: flex-start;

        gap: 15px;

    }

    .os7-process-icon {

        width: 46px;
        height: 46px;

        flex: 0 0 46px;

        margin-bottom: 0;

    }

    .os7-process-text {

        flex: 1;

    }

    .os7-actions {

        align-items: stretch;

        flex-direction: column;

        gap: 20px;

    }

    .os7-button-primary {

        width: 100%;

        text-align: center;

    }

    .os7-button-phone {

        justify-content: center;

    }

    .os7-visual-frame {

        min-height: 360px;

    }

    .os7-floating-badge {

        top: 15px;
        left: 15px;

        padding: 12px;

    }

    .os7-floating-icon {

        width: 38px;
        height: 38px;

        font-size: 19px;

    }

    .os7-floating-badge strong {

        font-size: 18px;

    }

    .os7-floating-badge span {

        font-size: 14px;

    }

    .os7-photo-caption {

        right: 17px;
        bottom: 20px;
        left: 17px;

    }

    .os7-photo-caption p {

        font-size: 17px;

    }

    .os7-visual-frame::before {

        display: none;

    }

}


/* ==========================================================
 18. SMALL MOBILE
========================================================== */

@media(max-width:380px) {

    .os7-container {

        width: calc(100% - 32px);

    }

    .os7-content h2 {

        font-size: 32px;

    }

    .os7-floating-badge {

        gap: 8px;

    }

    .os7-floating-badge span {

        letter-spacing: 0;

    }

}


/* ==========================================================
 19. REDUCED MOTION
========================================================== */

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

    .os7-approach *,
    .os7-approach *::before,
    .os7-approach *::after {

        animation-duration: .01ms !important;

        transition-duration: .01ms !important;

    }

}


/* ==========================================================
 OSORIO PLUMBING SERVICES
 PREMIUM FOOTER
 CSS COMPLETO
========================================================== */


/* ==========================================================
 01. ROOT
========================================================== */

.osf {

    --osf-navy: #071d36;
    --osf-deep: #082d52;
    --osf-blue: #0788df;
    --osf-wine: #84233d;

    position: relative;

    width: 100%;

    overflow: hidden;

    background: #ffffff;

    color: var(--osf-navy);

    font-family: "DM Sans", Arial, sans-serif;

}

.osf *,
.osf *::before,
.osf *::after {

    box-sizing: border-box;

}

.osf a {

    text-decoration: none;

}

.osf a:focus-visible {

    outline: 3px solid var(--osf-blue);

    outline-offset: 4px;

}


/* ==========================================================
 02. CONTAINER
========================================================== */

.osf-container {

    width: calc(100% - 80px);

    max-width: 1440px;

    margin: 0 auto;

}


/* ==========================================================
 03. CONTACT STRIP
========================================================== */

.osf-contact-strip {

    position: relative;

    padding: 26px 0;

    background:

        linear-gradient(105deg,
            #082f56 0%,
            #0b4277 50%,
            #082f56 100%);

    color: #ffffff;

}

.osf-contact-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr) minmax(0, .75fr) minmax(0, 1.15fr) auto;

    align-items: center;

    gap: 28px;

}


/* ==========================================================
 04. STRIP HEADING
========================================================== */

.osf-strip-heading {

    display: flex;

    align-items: center;

    gap: 17px;

    min-width: 0;

}

.osf-strip-symbol {

    display: flex;

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

    width: 65px;
    height: 65px;

    flex: 0 0 65px;

    color: #38b7ff;

    font-size: 47px;

}

.osf-strip-heading-text {

    min-width: 0;

}

.osf-strip-heading h2 {

    margin: 0 0 5px;

    color: #ffffff;

    font-family: "Outfit", Arial, sans-serif;

    font-size: clamp(22px, 2vw, 29px);

    font-weight: 900;

    line-height: 1.15;

}

.osf-strip-heading p {

    margin: 0;

    color: #e1edf7;

    font-size: 15px;

    line-height: 1.5;

}

.osf-strip-heading p strong {

    color: #4dbdff;

    font-weight: 900;

}


/* ==========================================================
 05. STRIP CONTACT
========================================================== */

.osf-strip-details {

    display: flex;

    flex-direction: column;

    gap: 11px;

    min-width: 0;

}

.osf-strip-detail {

    display: flex;

    align-items: center;

    gap: 11px;

    min-width: 0;

    color: #ffffff;

    font-size: 15px;

    font-weight: 800;

    line-height: 1.4;

    transition: color .25s ease;

}

.osf-strip-detail:hover {

    color: #62c8ff;

}

.osf-strip-detail-icon {

    display: flex;

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

    width: 22px;

    flex: 0 0 22px;

    color: #ffffff;

    font-size: 18px;

}

.osf-whatsapp-icon {

    color: #4be078;

    font-size: 23px;

}

.osf-strip-detail>span:last-child {

    overflow-wrap: anywhere;

}


/* ==========================================================
 06. STRIP BUTTON
========================================================== */

.osf-strip-button {

    display: inline-flex;

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

    gap: 15px;

    min-width: 170px;

    min-height: 51px;

    padding: 15px 22px;

    border-radius: 5px;

    background: var(--osf-blue);

    color: #ffffff;

    font-size: 14px;

    font-weight: 900;

    white-space: nowrap;

    box-shadow: 0 7px 20px rgba(0, 0, 0, .12);

    transition:

        background .25s ease,

        transform .25s ease;

}

.osf-strip-button:hover {

    transform: translateY(-2px);

    background: var(--osf-wine);

    color: #ffffff;

}


/* ==========================================================
 07. MAIN FOOTER
========================================================== */

.osf-main {

    position: relative;

    padding: 43px 0 49px;

    background: #ffffff;

}

.osf-main-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr) minmax(0, .7fr) minmax(0, 1.25fr) minmax(0, 1.1fr) minmax(0, .65fr);

    align-items: start;

    gap: 34px;

}

.osf-main-grid>div {

    min-width: 0;

}


/* ==========================================================
 08. LOGO
========================================================== */

.osf-logo {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 14px;

}

.osf-logo-mark {

    display: flex;

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

    width: 53px;
    height: 58px;

    flex: 0 0 53px;

    color: var(--osf-blue);

    font-size: 49px;

}

.osf-logo-name {

    display: flex;

    flex-direction: column;

    gap: 2px;

}

.osf-logo-name strong {

    color: #07375f;

    font-family: "Outfit", Arial, sans-serif;

    font-size: 30px;

    font-weight: 900;

    letter-spacing: -.8px;

    line-height: 1;

}

.osf-logo-name small {

    display: block;

    padding: 4px 5px;

    background: var(--osf-blue);

    color: #ffffff;

    font-size: 14px;

    font-weight: 900;

    line-height: 1;

    letter-spacing: .2px;

}

.osf-logo img {

    display: block;

    width: auto;

    max-width: 190px;

    max-height: 105px;

    object-fit: contain;

}

.osf-brand-description {

    max-width: 270px;

    margin: 0;

    color: #607183;

    font-size: 14px;

    line-height: 1.65;

    text-align: justify;

}


/* ==========================================================
 09. COLUMN HEADINGS
========================================================== */

.osf-column h3 {

    margin: 0 0 15px;

    color: #071d36;

    font-family: "Outfit", Arial, sans-serif;

    font-size: 19px;

    font-weight: 900;

    line-height: 1.25;

}


/* ==========================================================
 10. QUICK LINKS
========================================================== */

.osf-links {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin: 0;

    padding: 0;

    list-style: none;

}

.osf-links li {

    margin: 0;

    padding: 0;

}

.osf-links a {

    position: relative;

    display: inline-block;

    padding-left: 13px;

    color: #45596c;

    font-size: 14px;

    line-height: 1.5;

    transition:

        color .25s ease,

        transform .25s ease;

}

.osf-links a::before {

    content: "•";

    position: absolute;

    top: 0;
    left: 0;

    color: var(--osf-blue);

}

.osf-links a:hover {

    transform: translateX(3px);

    color: var(--osf-blue);

}


/* ==========================================================
 11. SERVICES
========================================================== */

.osf-services-grid {

    display: grid;

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

    gap: 15px;

}


/* ==========================================================
 12. CONTACT INFORMATION
========================================================== */

.osf-contact-list {

    display: flex;

    flex-direction: column;

    gap: 9px;

    margin: 0;

    padding: 0;

    list-style: none;

}

.osf-contact-list li {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    min-width: 0;

}

.osf-contact-list li>i {

    width: 17px;

    flex: 0 0 17px;

    margin-top: 3px;

    color: #0a477d;

    font-size: 14px;

    text-align: center;

}

.osf-contact-list a {

    overflow-wrap: anywhere;

    color: #45596c;

    font-size: 14px;

    line-height: 1.5;

    transition: color .25s ease;

}

.osf-contact-list a:hover {

    color: var(--osf-blue);

}


/* ==========================================================
 13. SOCIAL MEDIA
========================================================== */

.osf-social {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

}

.osf-social-item {

    display: flex;

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

    width: 37px;
    height: 37px;

    border-radius: 50%;

    background: #f0f5fa;

    font-size: 20px;

}

.osf-facebook {

    color: #1877f2;

}

.osf-instagram {

    color: #d62976;

}

.osf-google {

    color: #4285f4;

}


/* ==========================================================
 14. BOTTOM
========================================================== */

.osf-bottom {

    position: relative;

    min-height: 82px;

    padding: 39px 0 18px;

    overflow: hidden;

    background: #07345e;

    color: #ffffff;

}

/* ==========================================================
 OSORIO PLUMBING SERVICES
 ANIMATED WATER WAVES
 REEMPLAZAR ESTILOS ANTERIORES DE .osf-waves
========================================================== */


/* WAVE CONTAINER */

.osf .osf-waves {

    position: absolute;

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

    width: 100%;
    height: 100px;

    overflow: hidden;

    pointer-events: none;

    z-index: 1;

}


/* WAVE LAYERS */

.osf .osf-wave {

    position: absolute;

    top: 0;
    left: 0;

    display: flex;

    width: 200%;
    height: 100%;

    will-change: transform;

}


/* EACH SVG */

.osf .osf-wave svg {

    display: block;

    width: 50%;
    height: 100%;

    flex: 0 0 50%;

}


/* BACK WAVE */

.osf .osf-wave-back {

    opacity: .55;

    animation: osf-wave-move 18s linear infinite;

}


/* MIDDLE WAVE */

.osf .osf-wave-middle {

    opacity: .80;

    animation: osf-wave-move-reverse 13s linear infinite;

}


/* FRONT WAVE */

.osf .osf-wave-front {

    opacity: 1;

    animation: osf-wave-move 9s linear infinite;

}


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

@keyframes osf-wave-move {

    from {

        transform: translate3d(0, 0, 0);

    }

    to {

        transform: translate3d(-50%, 0, 0);

    }

}


@keyframes osf-wave-move-reverse {

    from {

        transform: translate3d(-50%, 0, 0);

    }

    to {

        transform: translate3d(0, 0, 0);

    }

}


/* ==========================================================
 FOOTER BOTTOM ADJUSTMENT
========================================================== */

.osf .osf-bottom {

    position: relative;

    isolation: isolate;

    padding-top: 55px;

    overflow: visible;

    background: #07345e;

}

.osf .osf-bottom-content {

    position: relative;

    z-index: 2;

}


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

@media(max-width:600px) {

    .osf .osf-waves {

        top: -42px;

        height: 80px;

    }

    .osf .osf-bottom {

        padding-top: 48px;

    }

}


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

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

    .osf .osf-wave {

        animation: none !important;

        transform: translateX(0) !important;

    }

}

/* ==========================================================
 16. COPYRIGHT
========================================================== */

.osf-bottom-content {

    position: relative;

    z-index: 2;

    display: flex;

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

    gap: 25px;

}

.osf-bottom-content p {

    margin: 0;

    color: #e2edf6;

    font-size: 14px;

    line-height: 1.6;

}

.osf-bottom-slogan {

    text-align: right;

}


/* ==========================================================
 17. LAPTOP
========================================================== */

@media(max-width:1350px) {

    .osf-container {

        width: calc(100% - 64px);

    }

    .osf-contact-layout {

        gap: 19px;

    }

    .osf-main-grid {

        gap: 25px;

    }

}


/* ==========================================================
 18. TABLET
========================================================== */

@media(max-width:1100px) {

    .osf-contact-layout {

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

        gap: 24px 35px;

    }

    .osf-strip-button {

        justify-self: start;

    }

    .osf-main-grid {

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

        gap: 40px 30px;

    }

    .osf-services {

        grid-column: auto;

    }

}


/* ==========================================================
 19. SMALL TABLET
========================================================== */

@media(max-width:800px) {

    .osf-container {

        width: calc(100% - 44px);

    }

    .osf-main-grid {

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

    }

    .osf-brand {

        grid-column: 1 / -1;

    }

    .osf-brand-description {

        max-width: 470px;

    }

    .osf-social-column {

        grid-column: 1 / -1;

    }

}


/* ==========================================================
 20. MOBILE
========================================================== */

@media(max-width:600px) {

    .osf-container {

        width: calc(100% - 36px);

    }

    .osf-contact-strip {

        padding: 30px 0;

    }

    .osf-contact-layout {

        grid-template-columns: 1fr;

        gap: 24px;

    }

    .osf-strip-heading {

        gap: 12px;

    }

    .osf-strip-symbol {

        width: 54px;
        height: 54px;

        flex-basis: 54px;

        font-size: 39px;

    }

    .osf-strip-heading h2 {

        font-size: 25px;

    }

    .osf-strip-details {

        gap: 12px;

    }

    .osf-strip-button {

        width: 100%;

        justify-self: stretch;

    }

    .osf-main {

        padding: 44px 0 60px;

    }

    .osf-main-grid {

        grid-template-columns: 1fr;

        gap: 32px;

    }

    .osf-brand,
    .osf-social-column {

        grid-column: auto;

    }

    .osf-services-grid {

        gap: 20px;

    }

    .osf-bottom {

        padding: 47px 0 22px;

    }

    .osf-bottom-content {

        align-items: flex-start;

        flex-direction: column;

        gap: 9px;

    }

    .osf-bottom-slogan {

        text-align: left;

    }

}


/* ==========================================================
 21. SMALL MOBILE
========================================================== */

@media(max-width:380px) {

    .osf-container {

        width: calc(100% - 32px);

    }

    .osf-logo-name strong {

        font-size: 27px;

    }

    .osf-logo-name small {

        font-size: 14px;

        letter-spacing: 0;

    }

    .osf-services-grid {

        grid-template-columns: 1fr;

    }

}



/* ==========================================================
   OSORIO PLUMBING SERVICES
   PREMIUM DESIGN SYSTEM V3
   Compatible con las clases originales
   ========================================================== */

/* ==========================================================
   01. DESIGN TOKENS
   ========================================================== */

:root {
    --os-navy: #071a30;
    --os-navy-2: #0c2845;
    --os-navy-3: #123653;

    --os-blue: #087fca;
    --os-blue-light: #18a7ee;
    --os-blue-soft: #eaf6fd;

    --os-wine: #842b45;
    --os-wine-hover: #a23754;

    --os-white: #ffffff;
    --os-ice: #f4f8fc;
    --os-surface: #ffffff;

    --os-text: #17314a;
    --os-muted: #60748a;
    --os-border: #e0e9f1;

    --os-shadow-sm:
        0 8px 24px rgba(7, 26, 48, .055);

    --os-shadow-md:
        0 18px 46px rgba(7, 26, 48, .10);

    --os-shadow-lg:
        0 28px 70px rgba(7, 26, 48, .15);

    --os-radius-sm: 8px;
    --os-radius-md: 14px;
    --os-radius-lg: 22px;

    --os-ease: cubic-bezier(.22, 1, .36, 1);
    --os-transition: 320ms var(--os-ease);
}


/* ==========================================================
   02. SAFE GLOBAL REFINEMENTS
   ========================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 105px;
}

body {
    margin: 0;
    background: var(--os-white);
    color: var(--os-text);
    font-family: "DM Sans", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
    font-family: "DM Sans", Arial, sans-serif;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
}

img,
video {
    max-width: 100%;
}

a,
button {
    transition:
        color var(--os-transition),
        background-color var(--os-transition),
        border-color var(--os-transition),
        box-shadow var(--os-transition),
        transform var(--os-transition);
}

:where(a, button, input, textarea, select):focus-visible {
    outline: 3px solid var(--os-blue-light);
    outline-offset: 4px;
}

::selection {
    background: var(--os-blue);
    color: #fff;
}


/* ==========================================================
   03. UNIFIED CONTAINERS
   No modifica grids internos.
   ========================================================== */

.os-container,
.os3-container,
.osgr-container,
.os8-container {
    max-width: 1440px;
    margin-inline: auto;
}

.os-container,
.osgr-container {
    width: calc(100% - 80px);
}


/* ==========================================================
   04. PREMIUM TOP BAR
   ========================================================== */

.os-topbar {
    position: relative;
    z-index: 1110;

    background: linear-gradient(105deg,
            #06172b 0%,
            #0b2947 55%,
            #102f4b 100%);

    color: #eaf4fc;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.os-topbar-inner {
    min-height: 42px;
}

.os-topbar a,
.os-topbar span {
    font-size: 14px;
}

.os-topbar a {
    color: #e3edf7;
    text-decoration: none;
}

.os-topbar a:hover {
    color: #74ceff;
}

.os-topbar i {
    color: #55bdf5;
}

.os-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    letter-spacing: .65px;
}

.os-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;

    border-radius: 50%;
    background: #55c8ff;

    box-shadow: 0 0 0 4px rgba(85, 200, 255, .12);

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


/* ==========================================================
   05. MAIN HEADER
   ========================================================== */

.os-header {
    position: sticky;
    top: 0;
    z-index: 1100;

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

    border-bottom: 1px solid rgba(7, 26, 48, .075);

    box-shadow:
        0 5px 25px rgba(7, 26, 48, .055);

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

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

.os-header.is-scrolled {
    background: rgba(255, 255, 255, .985);

    box-shadow:
        0 12px 35px rgba(7, 26, 48, .105);
}

.os-header-inner {
    min-height: 88px;
}

.os-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.os-logo img {
    display: block;
    object-fit: contain;

    transition:
        transform 450ms var(--os-ease),
        filter 450ms var(--os-ease);
}

.os-logo:hover img {
    transform: scale(1.035);
}


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

.os-desktop-nav>a,
.os-nav-dropdown>a {
    color: var(--os-text);
    font-weight: 800;
    letter-spacing: -.15px;
}

.os-desktop-nav>a:hover,
.os-nav-dropdown>a:hover,
.os-desktop-nav a.active,
.os-nav-dropdown>a.active {
    color: var(--os-blue);
}

.os-desktop-nav>a::after,
.os-nav-dropdown>a::after {
    background: linear-gradient(90deg,
            var(--os-blue),
            var(--os-blue-light));

    height: 3px;
    border-radius: 20px;
}

.os-dropdown-button {
    color: var(--os-text);
}

.os-dropdown-button:hover,
.os-dropdown-button[aria-expanded="true"] {
    color: var(--os-blue);
}


/* ==========================================================
   07. MEGAMENU
   ========================================================== */

.os-megamenu {
    border: 1px solid var(--os-border);
    border-top: 3px solid var(--os-blue);

    border-radius: 0 0 18px 18px;

    background: #fff;

    box-shadow:
        0 30px 75px rgba(7, 26, 48, .17);
}

.os-megamenu-header {
    border-color: var(--os-border);
}

.os-megamenu-header h3 {
    color: var(--os-navy);
    letter-spacing: -.65px;
}

.os-megamenu-header span {
    color: var(--os-blue);
}

.os-megamenu-header p {
    color: var(--os-muted);
}

.os-megamenu-header>a {
    border-radius: var(--os-radius-sm);

    background: linear-gradient(120deg,
            var(--os-blue),
            #0b96df);

    box-shadow:
        0 8px 20px rgba(8, 127, 202, .16);
}

.os-megamenu-header>a:hover {
    background: var(--os-wine);
    transform: translateY(-2px);
}

.os-megamenu-item {
    position: relative;
    overflow: hidden;

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

    background: #f8fbfe;
    color: var(--os-text);

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

.os-megamenu-item:hover {
    transform: translateY(-4px);

    background: #fff;
    border-color: #b5def4;

    box-shadow: var(--os-shadow-sm);

    color: var(--os-blue);
}

.os-megamenu-icon {
    background: var(--os-blue-soft);
    color: var(--os-blue);

    border-radius: 9px;

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

.os-megamenu-item:hover .os-megamenu-icon {
    background: var(--os-blue);
    color: #fff;

    transform: rotate(-5deg);
}

.os-megamenu-arrow {
    color: var(--os-blue);

    transition: transform var(--os-transition);
}

.os-megamenu-item:hover .os-megamenu-arrow {
    transform: translateX(4px);
}

.os-megamenu-bottom {
    border-radius: 10px;
    padding: 15px;
    background: linear-gradient(115deg,
            var(--os-navy),
            var(--os-navy-2));
}


/* ==========================================================
   08. OUR WORK DROPDOWN
   ========================================================== */

.os-work-menu {
    border: 1px solid var(--os-border);
    border-top: 3px solid var(--os-blue);

    border-radius: 0 0 14px 14px;

    box-shadow:
        0 25px 60px rgba(7, 26, 48, .16);
}

.os-work-menu>a {
    border-radius: 9px;
}

.os-work-menu>a:hover {
    background: var(--os-blue-soft);
}

.os-work-menu>a>i:first-child {
    background: var(--os-blue-soft);
    color: var(--os-blue);
}


/* ==========================================================
   09. HEADER ACTIONS
   ========================================================== */

.os-header-call {
    border: 1px solid #d3e8f5;

    border-radius: 10px;

    background: #edf8ff;
    color: var(--os-blue);

    box-shadow:
        0 4px 12px rgba(8, 127, 202, .06);
}

.os-header-call:hover {
    background: var(--os-blue);
    border-color: var(--os-blue);

    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 10px 22px rgba(8, 127, 202, .22);
}

.os-header-cta {
    position: relative;
    overflow: hidden;

    border-radius: 9px;

    background: linear-gradient(120deg,
            var(--os-blue),
            #0796e2);

    color: #fff;

    box-shadow:
        0 8px 22px rgba(8, 127, 202, .20);
}

.os-header-cta:hover {
    background: var(--os-wine);
    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(132, 43, 69, .22);
}

.os-header-cta>i:last-child {
    transition: transform var(--os-transition);
}

.os-header-cta:hover>i:last-child {
    transform: translateX(4px);
}


/* ==========================================================
   10. MOBILE OFFCANVAS
   ========================================================== */

.os-offcanvas {
    background:
        radial-gradient(circle at 100% 0%,
            rgba(24, 167, 238, .13),
            transparent 45%),
        linear-gradient(160deg,
            #06182d,
            #0c2947);

    color: #fff;

    box-shadow:
        -20px 0 60px rgba(0, 0, 0, .22);
}

.os-offcanvas-overlay {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.os-offcanvas-nav>a,
.os-offcanvas-dropdown-head {
    border-color: rgba(255, 255, 255, .09);
}

.os-offcanvas-nav>a:hover,
.os-offcanvas-dropdown-head:hover {
    background: rgba(255, 255, 255, .055);
}

.os-offcanvas-subtoggle {
    border-radius: 9px;
}

.os-offcanvas-submenu a:hover {
    color: #75ccff;
}

.os-offcanvas-contact {
    border-radius: 16px;

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

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

.os-offcanvas-estimate {
    border-radius: 9px;

    background: linear-gradient(110deg,
            var(--os-blue),
            #119ce4);
}

.os-offcanvas-estimate:hover {
    background: var(--os-wine);
}


/* ==========================================================
   11. MOBILE FLOATING NAV
   ========================================================== */

.os-floating-nav {
    border: 1px solid rgba(255, 255, 255, .12);

    background: rgba(7, 26, 48, .97);

    box-shadow:
        0 15px 40px rgba(7, 26, 48, .25);

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

.os-floating-nav a,
.os-floating-nav button {
    color: #dceaf7;
}

.os-floating-nav a:hover,
.os-floating-nav button:hover,
.os-floating-nav a.active {
    color: #70ccff;
}

.os-floating-main>span {
    background: linear-gradient(135deg,
            var(--os-blue),
            var(--os-blue-light));

    box-shadow:
        0 8px 20px rgba(8, 127, 202, .35);
}


/* ==========================================================
   12. SECTION 03 — ABOUT
   ========================================================== */

.os3-about {
    --os3-navy: var(--os-navy);
    --os3-blue: var(--os-blue);
    --os3-wine: var(--os-wine);
}

.os3-photo {
    border-radius: 16px;

    box-shadow:
        0 24px 55px rgba(7, 26, 48, .15);
}

.os3-photo img {
    transition: transform 850ms var(--os-ease);
}

.os3-photo:hover img {
    transform: scale(1.045);
}

.os3-button {
    border-radius: 9px;

    box-shadow:
        0 10px 24px rgba(8, 127, 202, .16);
}

.os3-button:hover {
    transform: translateY(-3px);
}

.os3-benefits {
    border-radius: 14px;
}


/* ==========================================================
   13. SECTION 05 — WHY CHOOSE US
   ========================================================== */

.os5-why {
    --os5-navy: var(--os-navy);
    --os5-navy-light: var(--os-navy-2);
    --os5-blue: var(--os-blue);
    --os5-electric: var(--os-blue-light);
    --os5-wine: var(--os-wine);

    background:
        radial-gradient(ellipse at 80% 12%,
            rgba(24, 167, 238, .14),
            transparent 44%),
        linear-gradient(125deg,
            #06182c 0%,
            #0b2b49 55%,
            #06182c 100%);
}

.os5-photo {
    border-radius: 15px;

    box-shadow:
        0 28px 60px rgba(0, 0, 0, .25);
}

.os5-photo img {
    transition: transform 900ms var(--os-ease);
}

.os5-photo:hover img {
    transform: scale(1.045);
}


/* ==========================================================
   14. SECTION 08 — CTA
   ========================================================== */

.os8-cta {
    --os8-navy: var(--os-navy);
    --os8-blue: var(--os-blue);
    --os8-wine: var(--os-wine);
}

.os8-contact-card {
    border-radius: 20px;

    box-shadow:
        0 25px 65px rgba(7, 26, 48, .15);
}

.os8-button {
    border-radius: 10px;
}

.os8-button:hover {
    transform: translateY(-3px);
}


/* ==========================================================
   15. REVIEWS
   ========================================================== */

.osgr {
    --osgr-navy: var(--os-navy);
    --osgr-blue: var(--os-blue);
    --osgr-border: var(--os-border);
    --osgr-muted: var(--os-muted);

    background:
        radial-gradient(ellipse at 50% 0%,
            rgba(8, 127, 202, .075),
            transparent 65%),
        #f6f9fc;
}


/* ==========================================================
   16. SAFE IMAGE ENHANCEMENTS
   ========================================================== */

.os3-photo,
.os5-photo,
.os7-visual-frame {
    overflow: hidden;
}

.os7-visual-frame img {
    transition: transform 850ms var(--os-ease);
}

.os7-visual-frame:hover img {
    transform: scale(1.035);
}


/* ==========================================================
   17. SCROLL REVEAL
   JS adds the class only when supported.
   ========================================================== */

html.os-motion-ready .os-reveal {
    opacity: 0;

    transform: translate3d(0, 26px, 0);

    transition:
        opacity 850ms var(--os-ease),
        transform 850ms var(--os-ease);

    transition-delay: var(--os-reveal-delay, 0ms);
}

html.os-motion-ready .os-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* ==========================================================
   18. KEYFRAMES
   ========================================================== */

@keyframes osPremiumPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(85, 200, 255, .12);
    }

    50% {
        box-shadow:
            0 0 0 8px rgba(85, 200, 255, 0);
    }

}


/* ==========================================================
   19. TABLET
   ========================================================== */

@media (max-width: 1180px) {

    .os-container,
    .osgr-container {
        width: calc(100% - 64px);
    }

    .os-header-inner {
        min-height: 80px;
    }

}


/* ==========================================================
   20. MOBILE
   ========================================================== */

@media (max-width: 800px) {

    .os-container,
    .osgr-container {
        width: calc(100% - 44px);
    }

    .os-header {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .os-header-cta {
        display: none;
    }

}


/* ==========================================================
   21. SMALL MOBILE
   ========================================================== */

@media (max-width: 600px) {

    html {
        scroll-padding-top: 80px;
    }

    .os-container,
    .osgr-container {
        width: calc(100% - 36px);
    }

    .os-header-inner {
        min-height: 73px;
    }

    .os-logo img {
        max-width: 130px;
        height: auto;
        max-height: 60px;
    }

    .os-header-call {
        width: 40px;
        height: 40px;
    }

    .os3-photo,
    .os5-photo {
        border-radius: 12px;
    }

    .os8-contact-card {
        border-radius: 15px;
    }

}


/* ==========================================================
   22. VERY SMALL MOBILE
   ========================================================== */

@media (max-width: 380px) {

    .os-container,
    .osgr-container {
        width: calc(100% - 32px);
    }

}


/* ==========================================================
   23. REDUCED MOTION
   ========================================================== */

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

    html {
        scroll-behavior: auto;
    }

    .os-status-dot {
        animation: none;
    }

    html.os-motion-ready .os-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .os3-photo img,
    .os5-photo img,
    .os7-visual-frame img {
        transition: none;
    }

}

/* ================================================================
   24. DEFINITIVE HEADER / DROPDOWN REPAIR — INTEGRATED
   Correctly supports the existing .os-open JavaScript state,
   mouse hover and keyboard focus. No disconnected hover gap.
================================================================ */
.os-container {
    max-width: 1440px;
}

.os-header {
    overflow: visible !important;
    z-index: 1100;
}

.os-header-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.3vw, 24px);
    min-width: 0;
    overflow: visible !important;
}

.os-logo {
    display: flex;
    flex: 0 0 145px;
    width: 145px;
    min-width: 145px;
    align-items: center;
}

.os-logo img {
    display: block;
    width: 100%;
    max-width: 145px;
    height: 70px;
    object-fit: contain;
    object-position: left center;
}

.os-desktop-nav {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: clamp(25px, 1.15vw, 26px);
    overflow: visible !important;
}

.os-desktop-nav>a,
.os-nav-dropdown>a {
    font-size: 14px;
    white-space: nowrap;
}

.os-nav-dropdown {
    position: static;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: var(--os-header-height);
    gap: 2px;
}

.os-dropdown-button {
    flex: 0 0 25px;
    width: 25px;
    min-height: 38px;
    font-size: 14px;
    cursor: pointer;
}

.os-header-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 9px;
    white-space: nowrap;
}

.os-header-cta {
    font-size: 14px;
}

/* Mega menu is positioned against header inner, not the narrow nav item. */
.os-header .os-megamenu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(850px, calc(100vw - 44px)) !important;
    max-width: calc(100vw - 44px) !important;
    margin: 0 !important;
    z-index: 9999 !important;
    transform: translate(-50%, 10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.os-header .os-nav-dropdown:hover>.os-megamenu,
.os-header .os-nav-dropdown:focus-within>.os-megamenu,
.os-header .os-nav-dropdown.os-open>.os-megamenu,
.os-header .os-megamenu.active,
.os-header .os-megamenu.open,
.os-header .os-megamenu.is-open,
.os-header .os-megamenu.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) !important;
}

/* Work menu stays directly attached to its own dropdown, with no gap. */
.os-header .os-nav-dropdown:has(> .os-work-menu) {
    position: relative;
}

.os-header .os-work-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 330px !important;
    max-width: calc(100vw - 44px) !important;
    margin: 0 !important;
    z-index: 9999 !important;
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
    background: #fff;
}

.os-header .os-nav-dropdown:hover>.os-work-menu,
.os-header .os-nav-dropdown:focus-within>.os-work-menu,
.os-header .os-nav-dropdown.os-open>.os-work-menu,
.os-header .os-work-menu.active,
.os-header .os-work-menu.open,
.os-header .os-work-menu.is-open,
.os-header .os-work-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

.os-header .os-work-menu>a {
    font-size: 14px;
    white-space: normal;
}

.os-megamenu-item,
.os-megamenu-header>a {
    font-size: 14px;
}

.os-megamenu-header span {
    font-size: 14px;
}

@media(max-width:1350px) {
    .os-logo {
        flex-basis: 120px;
        width: 120px;
        min-width: 120px
    }

    .os-logo img {
        max-width: 120px
    }

    .os-header-inner {
        gap: 12px
    }

    .os-desktop-nav {
        gap: 25px;
    }
}

@media(max-width:1199px) {
    .os-header .os-desktop-nav {
        display: none !important
    }

    .os-header-inner {
        justify-content: space-between
    }

    .os-logo {
        flex-basis: 130px;
        width: 130px;
        min-width: 130px
    }

    .os-logo img {
        max-width: 130px;
        height: 65px
    }
}

@media(max-width:600px) {
    .os-logo {
        flex-basis: 110px;
        width: 110px;
        min-width: 110px
    }

    .os-logo img {
        max-width: 110px;
        height: 58px
    }

    .os-header-inner {
        gap: 10px
    }

    .os-header-actions {
        gap: 8px
    }

    .os-header-cta {
        display: none
    }
}

/* ==========================================================
   OSORIO — CORRECCIÓN DE BOTONES DEL MEGAMENÚ
   ========================================================== */

/* Botón superior: VIEW ALL SERVICES */
.os-megamenu .os-megamenu-header > a,
.os-megamenu .os-megamenu-header a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 20px;
    border: 2px solid #0788df;
    border-radius: 999px;
    background: #0788df;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    opacity: 1;
    visibility: visible;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.os-megamenu .os-megamenu-header a:hover {
    background: #84233d;
    border-color: #84233d;
    color: #ffffff !important;
}

/* Barra inferior: texto y enlace visibles */
.os-megamenu .os-megamenu-footer,
.os-megamenu .os-megamenu-bottom {
    color: #ffffff !important;
}

.os-megamenu .os-megamenu-footer a,
.os-megamenu .os-megamenu-bottom a {
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    opacity: 1;
}

.os-megamenu .os-megamenu-footer a:hover,
.os-megamenu .os-megamenu-bottom a:hover {
    color: #78d0ff !important;
}

/* ==========================================================
   OSORIO PLUMBING SERVICES
   ABOUT US PAGE
========================================================== */

.osa-page {
    --osa-navy: #071d36;
    --osa-navy-2: #0b2d4e;
    --osa-blue: #0788df;
    --osa-blue-light: #19aaf3;
    --osa-wine: #84233d;
    --osa-text: #17324d;
    --osa-muted: #647a90;
    --osa-light: #f4f9fd;
    --osa-border: #dbe8f2;
    --osa-white: #ffffff;

    width: 100%;
    overflow: hidden;
    color: var(--osa-text);
}

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

.osa-container {
    width: min(100% - 80px, 1440px);
    margin-inline: auto;
}

.osa-section {
    position: relative;
    padding: 110px 0;
}

.osa-page p {
    font-size: 16px;
    line-height: 1.8;
    text-align: justify;
}

.osa-page img {
    display: block;
    max-width: 100%;
}

.osa-section-label,
.osa-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--osa-blue);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
}

.osa-section-label > span,
.osa-eyebrow > span {
    width: 28px;
    height: 3px;
    border-radius: 50px;
    background: var(--osa-wine);
}

.osa-title {
    max-width: 720px;
    margin: 0 0 22px;
    color: var(--osa-navy);
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.04;
    letter-spacing: -2px;
}

.osa-title strong {
    color: var(--osa-blue);
}

.osa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 54px;
    padding: 13px 22px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: .25s ease;
}

.osa-btn-primary {
    background: var(--osa-blue);
    color: #fff !important;
    box-shadow: 0 12px 30px rgba(7, 136, 223, .22);
}

.osa-btn-primary:hover {
    background: var(--osa-wine);
    transform: translateY(-3px);
}

.osa-btn-outline {
    border-color: rgba(255,255,255,.3);
    background: rgba(255,255,255,.08);
    color: #fff !important;
    backdrop-filter: blur(10px);
}

.osa-btn-outline:hover {
    background: #fff;
    color: var(--osa-navy) !important;
}


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

.osa-hero {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    color: #fff;
    isolation: isolate;
}

.osa-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        url("https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=2000&q=90")
        center / cover no-repeat;
}

.osa-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(
            90deg,
            rgba(4, 22, 41, .97) 0%,
            rgba(4, 28, 52, .91) 45%,
            rgba(4, 30, 55, .58) 100%
        );
}

.osa-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(
            circle at 65% 35%,
            rgba(7,136,223,.18),
            transparent 35%
        );
}

.osa-hero-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: center;
    gap: 80px;
    padding-top: 70px;
    padding-bottom: 110px;
}

.osa-hero-content {
    max-width: 850px;
}

.osa-hero h1 {
    max-width: 850px;
    margin: 0 0 26px;
    font-size: clamp(48px, 6vw, 82px);
    line-height: .96;
    letter-spacing: -3px;
    color: #fff;
}

.osa-hero h1 strong {
    display: block;
    color: var(--osa-blue-light);
}

.osa-hero-content > p {
    max-width: 720px;
    margin-bottom: 30px;
    color: #d4e2ef;
    font-size: 17px;
}

.osa-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.osa-hero-side {
    padding: 28px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;
    background: rgba(5, 29, 52, .88);
    box-shadow: 0 30px 70px rgba(0,0,0,.25);
    backdrop-filter: blur(16px);
}

.osa-side-label {
    display: block;
    margin-bottom: 18px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
}

.osa-side-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.osa-side-item:last-child {
    border-bottom: 0;
}

.osa-side-item > span {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--osa-blue);
    color: #fff;
}

.osa-side-item div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.osa-side-item strong {
    font-size: 15px;
}

.osa-side-item small {
    color: #a9bfd2;
    font-size: 14px;
}

.osa-breadcrumb {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid rgba(255,255,255,.12);
    background: rgba(3, 20, 37, .72);
    backdrop-filter: blur(10px);
}

.osa-breadcrumb .osa-container {
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.osa-breadcrumb a,
.osa-breadcrumb span {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.osa-breadcrumb > .osa-container > i {
    color: var(--osa-blue-light);
    font-size: 10px;
}


/* ==========================================================
   INTRO
========================================================== */

.osa-intro {
    background: #fff;
}

.osa-intro-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 90px;
    align-items: center;
}

.osa-intro-media {
    position: relative;
    min-height: 610px;
}

.osa-intro-main-image {
    width: 83%;
    height: 540px;
    overflow: hidden;
    border-radius: 22px;
}

.osa-intro-main-image img,
.osa-intro-small-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.osa-intro-small-image {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 47%;
    height: 280px;
    padding: 8px;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 25px 60px rgba(7,29,54,.18);
}

.osa-intro-small-image img {
    border-radius: 12px;
}

.osa-image-badge {
    position: absolute;
    top: 35px;
    right: 2%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 17px;
    border-radius: 12px;
    background: var(--osa-navy);
    color: #fff;
    box-shadow: 0 15px 40px rgba(7,29,54,.25);
}

.osa-image-badge > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--osa-blue);
}

.osa-image-badge div {
    display: flex;
    flex-direction: column;
}

.osa-image-badge strong,
.osa-image-badge small {
    font-size: 12px;
}

.osa-lead {
    color: var(--osa-navy);
    font-size: 18px !important;
    font-weight: 700;
}

.osa-intro-content > p {
    color: var(--osa-muted);
}

.osa-intro-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 30px 0;
}

.osa-intro-points div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 13px;
    border: 1px solid var(--osa-border);
    border-radius: 9px;
    background: var(--osa-light);
    font-size: 14px;
    font-weight: 700;
}

.osa-intro-points i {
    color: var(--osa-blue);
}

.osa-text-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--osa-blue);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

.osa-text-link:hover {
    color: var(--osa-wine);
}


/* ==========================================================
   APPROACH
========================================================== */

.osa-approach {
    isolation: isolate;
    background: var(--osa-navy);
}

.osa-approach-background {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        url("https://images.unsplash.com/photo-1581094794329-c8112a89af12?auto=format&fit=crop&w=2000&q=85")
        center / cover no-repeat;
}

.osa-approach::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(4, 24, 44, .94);
}

.osa-section-heading {
    max-width: 800px;
    margin-bottom: 55px;
}

.osa-section-heading-light .osa-title {
    color: #fff;
}

.osa-section-heading-light > p {
    color: #b8cbdc;
}

.osa-approach-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.osa-approach-card {
    position: relative;
    min-height: 310px;
    padding: 32px 27px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    color: #fff;
    transition: .3s ease;
}

.osa-approach-card:hover {
    transform: translateY(-8px);
    border-color: rgba(25,170,243,.6);
    background: rgba(7,136,223,.12);
}

.osa-card-number {
    position: absolute;
    top: 18px;
    right: 20px;
    color: rgba(255,255,255,.15);
    font-size: 42px;
    font-weight: 900;
}

.osa-card-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 30px;
    border-radius: 13px;
    background: var(--osa-blue);
    font-size: 20px;
}

.osa-approach-card h3 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 20px;
}

.osa-approach-card p {
    margin: 0;
    color: #b9ccdc;
    font-size: 14px;
}


/* ==========================================================
   RESIDENTIAL / COMMERCIAL
========================================================== */

.osa-solutions {
    background: var(--osa-light);
}

.osa-centered {
    margin: 0 auto 55px;
    text-align: center;
}

.osa-centered .osa-section-label {
    justify-content: center;
}

.osa-centered .osa-title {
    margin-inline: auto;
}

.osa-centered > p {
    text-align: center;
    color: var(--osa-muted);
}

.osa-solutions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.osa-solution-card {
    overflow: hidden;
    border: 1px solid var(--osa-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(7,29,54,.07);
}

.osa-solution-image {
    position: relative;
    height: 340px;
    overflow: hidden;
}

.osa-solution-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(7,29,54,.55),
        transparent 60%
    );
}

.osa-solution-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.osa-solution-card:hover .osa-solution-image img {
    transform: scale(1.05);
}

.osa-solution-type {
    position: absolute;
    z-index: 2;
    left: 25px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--osa-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.osa-solution-content {
    padding: 34px;
}

.osa-mini-label {
    color: var(--osa-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.osa-solution-content h3 {
    margin: 8px 0 17px;
    color: var(--osa-navy);
    font-size: 29px;
    line-height: 1.15;
}

.osa-solution-content > p {
    color: var(--osa-muted);
}

.osa-solution-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 25px 0;
}

.osa-solution-list span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
}

.osa-solution-list i {
    color: var(--osa-blue);
}

.osa-solution-content > a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--osa-blue);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}


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

.osa-services {
    background: #fff;
}

.osa-services-layout {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 80px;
    align-items: start;
}

.osa-services-intro {
    position: sticky;
    top: 130px;
}

.osa-services-intro > p {
    color: var(--osa-muted);
    margin-bottom: 28px;
}

.osa-service-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.osa-service-row {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 12px 17px;
    border: 1px solid var(--osa-border);
    border-radius: 12px;
    background: var(--osa-light);
    color: var(--osa-navy);
    text-decoration: none;
    transition: .25s ease;
}

.osa-service-row:hover {
    transform: translateY(-3px);
    border-color: var(--osa-blue);
    background: #fff;
    box-shadow: 0 14px 30px rgba(7,29,54,.08);
}

.osa-service-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 11px;
    background: #e4f4fd;
    color: var(--osa-blue);
    font-size: 18px;
}

.osa-service-row strong {
    font-size: 15px;
}

.osa-service-row > i {
    color: var(--osa-blue);
}


/* ==========================================================
   WHY
========================================================== */

.osa-why {
    background: var(--osa-light);
}

.osa-why-grid {
    display: grid;
    grid-template-columns: 1fr .9fr;
    gap: 90px;
    align-items: center;
}

.osa-why-content > p {
    color: var(--osa-muted);
}

.osa-why-list {
    margin-top: 35px;
}

.osa-why-item {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--osa-border);
}

.osa-why-item > span {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 13px;
    background: var(--osa-navy);
    color: #fff;
    font-size: 20px;
}

.osa-why-item h3 {
    margin: 0 0 7px;
    color: var(--osa-navy);
    font-size: 18px;
}

.osa-why-item p {
    margin: 0;
    color: var(--osa-muted);
    font-size: 14px;
}

.osa-why-media {
    position: relative;
    height: 620px;
}

.osa-why-media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 22px;
}

.osa-why-panel {
    position: absolute;
    left: -45px;
    bottom: 35px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 270px;
    padding: 19px;
    border-radius: 13px;
    background: var(--osa-navy);
    color: #fff;
    box-shadow: 0 20px 50px rgba(7,29,54,.25);
}

.osa-why-panel > span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--osa-blue);
}

.osa-why-panel div {
    display: flex;
    flex-direction: column;
}

.osa-why-panel small {
    color: #9db8cf;
    font-size: 11px;
    font-weight: 700;
}

.osa-why-panel strong {
    font-size: 18px;
}


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

.osa-location {
    padding: 75px 0;
    background: #fff;
}

.osa-location-card {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 38px;
    border-radius: 20px;
    background: var(--osa-navy);
    color: #fff;
}

.osa-location-icon {
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;
    border-radius: 17px;
    background: var(--osa-blue);
    font-size: 28px;
}

.osa-location-content > span {
    color: var(--osa-blue-light);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.osa-location-content h2 {
    margin: 5px 0 8px;
    color: #fff;
    font-size: 30px;
}

.osa-location-content h2 strong {
    color: var(--osa-blue-light);
}

.osa-location-content p {
    max-width: 670px;
    margin: 0;
    color: #b9cddd;
    font-size: 14px;
}

.osa-location-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.osa-location-phone {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
}

.osa-location-phone > i {
    color: var(--osa-blue-light);
}

.osa-location-phone span {
    display: flex;
    flex-direction: column;
}

.osa-location-phone small {
    color: #9eb8ce;
    font-size: 10px;
    font-weight: 800;
}

.osa-location-phone strong {
    font-size: 15px;
}


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

.osa-final-cta {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    isolation: isolate;
}

.osa-final-bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        url("https://images.unsplash.com/photo-1585704032915-c3400ca199e7?auto=format&fit=crop&w=2000&q=90")
        center / cover no-repeat;
}

.osa-final-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: rgba(4, 24, 44, .9);
}

.osa-final-content {
    max-width: 850px;
    margin: auto;
    text-align: center;
    color: #fff;
}

.osa-final-content .osa-section-label {
    justify-content: center;
}

.osa-final-content h2 {
    margin: 0 0 20px;
    color: #fff;
    font-size: clamp(40px, 5vw, 65px);
    line-height: 1;
    letter-spacing: -2px;
}

.osa-final-content h2 strong {
    color: var(--osa-blue-light);
}

.osa-final-content > p {
    max-width: 700px;
    margin: 0 auto 30px;
    color: #c2d4e3;
    text-align: center;
}

.osa-final-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.osa-btn-white {
    background: #fff;
    color: var(--osa-navy) !important;
}

.osa-btn-white:hover {
    background: var(--osa-wine);
    color: #fff !important;
    transform: translateY(-3px);
}


/* ==========================================================
   REVEAL ANIMATION
========================================================== */

.osa-reveal {
    opacity: 0;
    transform: translateY(25px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.osa-reveal.osa-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================================
   RESPONSIVE — LAPTOP
========================================================== */

@media (max-width: 1350px) {

    .osa-container {
        width: min(100% - 64px, 1440px);
    }

    .osa-hero-container {
        gap: 45px;
    }

    .osa-intro-grid,
    .osa-why-grid {
        gap: 60px;
    }

}


/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 1050px) {

    .osa-container {
        width: calc(100% - 44px);
    }

    .osa-section {
        padding: 85px 0;
    }

    .osa-hero-container {
        grid-template-columns: 1fr;
    }

    .osa-hero-side {
        display: none;
    }

    .osa-intro-grid,
    .osa-why-grid {
        grid-template-columns: 1fr;
    }

    .osa-intro-media {
        max-width: 720px;
    }

    .osa-approach-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .osa-services-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .osa-services-intro {
        position: static;
    }

    .osa-why-media {
        max-width: 720px;
    }

    .osa-why-panel {
        left: 25px;
    }

    .osa-location-card {
        grid-template-columns: 80px 1fr;
    }

    .osa-location-actions {
        grid-column: 2;
    }

}


/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media (max-width: 767px) {

    .osa-container {
        width: calc(100% - 36px);
    }

    .osa-section {
        padding: 70px 0;
    }

    .osa-title {
        font-size: 37px;
        letter-spacing: -1px;
    }

    .osa-hero {
        min-height: 680px;
    }

    .osa-hero-container {
        padding-top: 70px;
        padding-bottom: 100px;
    }

    .osa-hero h1 {
        font-size: 49px;
        letter-spacing: -2px;
    }

    .osa-hero-content > p {
        font-size: 15px;
    }

    .osa-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .osa-btn {
        width: 100%;
    }

    .osa-intro-media {
        min-height: 480px;
    }

    .osa-intro-main-image {
        width: 91%;
        height: 420px;
    }

    .osa-intro-small-image {
        width: 50%;
        height: 200px;
    }

    .osa-image-badge {
        top: 20px;
    }

    .osa-intro-points,
    .osa-solutions-grid,
    .osa-service-list,
    .osa-solution-list {
        grid-template-columns: 1fr;
    }

    .osa-approach-grid {
        grid-template-columns: 1fr;
    }

    .osa-approach-card {
        min-height: auto;
    }

    .osa-solution-image {
        height: 270px;
    }

    .osa-solution-content {
        padding: 27px 22px;
    }

    .osa-why-media {
        height: 470px;
    }

    .osa-why-panel {
        left: 15px;
        right: 15px;
        bottom: 15px;
        min-width: 0;
    }

    .osa-location {
        padding: 55px 0;
    }

    .osa-location-card {
        grid-template-columns: 1fr;
        padding: 28px 22px;
    }

    .osa-location-actions {
        grid-column: auto;
        flex-direction: column;
        align-items: stretch;
    }

    .osa-location-phone {
        justify-content: center;
        padding-top: 5px;
    }

    .osa-final-cta {
        min-height: 570px;
    }

    .osa-final-content h2 {
        font-size: 42px;
    }

    .osa-final-actions {
        flex-direction: column;
    }

}


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

@media (max-width: 420px) {

    .osa-container {
        width: calc(100% - 32px);
    }

    .osa-hero h1 {
        font-size: 42px;
    }

    .osa-title {
        font-size: 33px;
    }

    .osa-intro-main-image {
        height: 370px;
    }

    .osa-intro-small-image {
        height: 170px;
    }

    .osa-image-badge {
        right: 0;
        padding: 10px;
    }

    .osa-service-row {
        grid-template-columns: 46px 1fr auto;
    }

    .osa-service-icon {
        width: 46px;
        height: 46px;
    }

}


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

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

    .osa-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .osa-page *,
    .osa-page *::before,
    .osa-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

}

/* ==========================================================
   OSORIO PLUMBING SERVICES
   SERVICES DIRECTORY
========================================================== */

.osvs-page {
    --osvs-navy: #071d36;
    --osvs-navy-2: #0a2948;
    --osvs-navy-3: #0d365d;
    --osvs-blue: #0788df;
    --osvs-cyan: #18b6f5;
    --osvs-wine: #84233d;
    --osvs-text: #17324d;
    --osvs-muted: #647b90;
    --osvs-light: #f4f9fd;
    --osvs-border: #dce8f1;
    --osvs-white: #ffffff;

    width: 100%;
    overflow: clip;
    color: var(--osvs-text);
}

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

.osvs-container {
    width: min(calc(100% - 80px), 1440px);
    margin-inline: auto;
}

.osvs-section {
    position: relative;
    padding: 110px 0;
}

.osvs-page img {
    display: block;
    max-width: 100%;
}

.osvs-page p {
    font-size: 16px;
    line-height: 1.8;
    text-align: justify;
}

.osvs-section-label,
.osvs-kicker {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 16px;

    color: var(--osvs-blue);

    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.8px;
}

.osvs-section-label > span,
.osvs-kicker > span {
    display: block;

    width: 28px;
    height: 3px;

    border-radius: 30px;

    background: var(--osvs-wine);
}

.osvs-title {
    max-width: 820px;

    margin: 0 0 22px;

    color: var(--osvs-navy);

    font-size: clamp(38px, 4vw, 59px);
    line-height: 1.03;
    letter-spacing: -2px;
}

.osvs-title strong {
    color: var(--osvs-blue);
}


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

.osvs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 54px;

    padding: 13px 22px;

    border: 1px solid transparent;
    border-radius: 10px;

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

    text-decoration: none;

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

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

.osvs-btn-primary {
    background: var(--osvs-blue);

    color: #fff !important;

    box-shadow:
        0 13px 32px rgba(7, 136, 223, .25);
}

.osvs-btn-primary:hover {
    background: var(--osvs-wine);
}

.osvs-btn-glass {
    border-color: rgba(255, 255, 255, .25);

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

    color: #fff !important;

    backdrop-filter: blur(10px);
}

.osvs-btn-glass:hover {
    background: #fff;

    color: var(--osvs-navy) !important;
}

.osvs-btn-white {
    background: #fff;

    color: var(--osvs-navy) !important;
}

.osvs-btn-white:hover {
    background: var(--osvs-wine);

    color: #fff !important;
}


/* ==========================================================
   SECTION 01
   TECHNOLOGY HERO
========================================================== */

.osvs-hero {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #041526;

    color: #fff;

    isolation: isolate;
}


/* Software / technology background */

.osvs-hero-bg {
    position: absolute;
    inset: 0;

    z-index: -5;

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(7, 136, 223, .28),
            transparent 27%
        ),
        radial-gradient(
            circle at 20% 85%,
            rgba(132, 35, 61, .18),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #031424 0%,
            #061e36 48%,
            #082b4c 100%
        );
}


/* Software grid */

.osvs-hero-grid {
    position: absolute;
    inset: 0;
    z-index: -4;
    opacity: .20;
    background-image: url(../osorio/images/plumbing.jpg);
    background-size: cover;
    mask-image: linear-gradient(to bottom, #000000, #000000 95%);
}


/* Decorative software lines */

.osvs-hero::before {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    right: -280px;
    top: -300px;

    z-index: -3;

    border: 1px solid rgba(24, 182, 245, .15);
    border-radius: 50%;

    box-shadow:
        0 0 0 70px rgba(24, 182, 245, .025),
        0 0 0 140px rgba(24, 182, 245, .02);
}

.osvs-hero::after {
    content: "";

    position: absolute;

    left: 8%;
    bottom: 110px;

    width: 190px;
    height: 2px;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            var(--osvs-blue),
            transparent
        );

    box-shadow:
        60px -110px 0 rgba(24,182,245,.14),
        160px -210px 0 rgba(24,182,245,.1);
}

.osvs-hero-glow {
    position: absolute;

    z-index: -3;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;
}

.osvs-glow-one {
    top: 15%;
    right: 20%;

    width: 250px;
    height: 250px;

    background: rgba(7, 136, 223, .18);
}

.osvs-glow-two {
    bottom: 5%;
    left: 15%;

    width: 200px;
    height: 200px;

    background: rgba(132, 35, 61, .12);
}

.osvs-hero-inner {
    display: grid;

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

    align-items: center;

    gap: 80px;

    padding-top: 85px;
    padding-bottom: 120px;
}

.osvs-hero-content {
    max-width: 850px;
}

.osvs-kicker {
    color: #63c9fb;
}

.osvs-hero h1 {
    max-width: 850px;

    margin: 0 0 25px;

    color: #fff;

    font-size: clamp(53px, 6vw, 86px);
    line-height: .95;
    letter-spacing: -4px;
}

.osvs-hero h1 strong {
    display: block;

    color: var(--osvs-cyan);
}

.osvs-hero-content > p {
    max-width: 730px;

    margin: 0 0 30px;

    color: #c7d9e7;

    font-size: 17px;
}

.osvs-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}

.osvs-hero-mini {
    display: flex;
    flex-wrap: wrap;

    gap: 20px;

    margin-top: 35px;
    padding-top: 27px;

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

.osvs-hero-mini > div {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #d9e7f1;

    font-size: 14px;
}

.osvs-hero-mini span {
    color: var(--osvs-cyan);
}


/* ==========================================================
   SOFTWARE PANEL
========================================================== */

.osvs-system-card {
    position: relative;

    overflow: hidden;

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

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(8, 39, 68, .92),
            rgba(4, 23, 41, .95)
        );

    box-shadow:
        0 35px 90px rgba(0,0,0,.3),
        inset 0 1px rgba(255,255,255,.05);

    backdrop-filter: blur(15px);
}

.osvs-system-card::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -120px;
    right: -80px;

    border-radius: 50%;

    background:
        rgba(7, 136, 223, .13);

    filter: blur(20px);
}

.osvs-system-top {
    position: relative;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 15px;

    min-height: 52px;

    padding: 0 18px;

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

    color: #88a9bf;

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

.osvs-system-dots {
    display: flex;

    gap: 5px;
}

.osvs-system-dots i {
    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #315470;
}

.osvs-system-dots i:first-child {
    background: var(--osvs-wine);
}

.osvs-system-dots i:nth-child(2) {
    background: var(--osvs-blue);
}

.osvs-system-dots i:nth-child(3) {
    background: #45c797;
}

.osvs-system-status {
    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 13px;

    margin: 18px;
    padding: 14px;

    border:
        1px solid rgba(76, 193, 249, .13);

    border-radius: 11px;

    background:
        rgba(8, 54, 91, .42);
}

.osvs-pulse {
    position: relative;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #40d99c;

    box-shadow:
        0 0 0 5px rgba(64,217,156,.1);
}

.osvs-system-status div {
    display: flex;
    flex-direction: column;
}

.osvs-system-status small {
    color: #6f9dbb;

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

.osvs-system-status strong {
    margin-top: 2px;

    color: #fff;

    font-size: 14px;
}

.osvs-system-status b {
    padding: 5px 7px;

    border-radius: 5px;

    background:
        rgba(64, 217, 156, .1);

    color: #5ce2ad;

    font-size: 9px;
}

.osvs-system-list {
    padding: 0 18px 10px;
}

.osvs-system-list > a {
    display: grid;

    grid-template-columns:
        42px
        1fr
        auto;

    align-items: center;

    gap: 12px;

    min-height: 67px;

    padding: 10px 8px;

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

    color: #fff;

    text-decoration: none;

    transition: .25s ease;
}

.osvs-system-list > a:hover {
    padding-left: 13px;

    background:
        rgba(7,136,223,.08);
}

.osvs-system-list > a > span {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: 9px;

    background:
        rgba(7, 136, 223, .16);

    color: var(--osvs-cyan);
}

.osvs-system-list > a > div {
    display: flex;
    flex-direction: column;
}

.osvs-system-list small {
    color: #6c97b3;

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

.osvs-system-list strong {
    margin-top: 2px;

    font-size: 14px;
}

.osvs-system-list > a > i {
    color: #4e7895;

    font-size: 11px;
}

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

    gap: 15px;

    padding: 15px 20px;

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

    color: #6087a2;

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

.osvs-system-footer span {
    display: flex;
    align-items: center;

    gap: 6px;
}


/* ==========================================================
   BREADCRUMB
========================================================== */

.osvs-breadcrumb {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

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

    background:
        rgba(3, 18, 33, .72);

    backdrop-filter: blur(10px);
}

.osvs-breadcrumb .osvs-container {
    min-height: 60px;

    display: flex;
    align-items: center;

    gap: 12px;
}

.osvs-breadcrumb a,
.osvs-breadcrumb span {
    color: #fff;

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

    text-decoration: none;
}

.osvs-breadcrumb > .osvs-container > i {
    color: var(--osvs-cyan);

    font-size: 9px;
}


/* ==========================================================
   SECTION 02
   DIRECTORY
========================================================== */

.osvs-directory {
    background: #fff;
}

.osvs-directory-layout {
    display: grid;

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

    align-items: start;

    gap: 55px;
}


/* ==========================================================
   STICKY SIDEBAR
========================================================== */

.osvs-sidebar {
    align-self: stretch;
}

.osvs-sidebar-inner {
    position: sticky;

    top: 110px;

    /* IMPORTANT:
       no internal scroll */
    overflow: visible;
}

.osvs-sidebar-heading {
    padding: 24px 23px;

    border-radius: 15px 15px 0 0;

    background:
        linear-gradient(
            135deg,
            var(--osvs-navy),
            var(--osvs-navy-3)
        );

    color: #fff;
}

.osvs-sidebar-heading small {
    color: #74cfff;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.6px;
}

.osvs-sidebar-heading h2 {
    margin: 5px 0 0;

    color: #fff;

    font-size: 26px;
}

.osvs-sidebar-nav {
    padding: 9px;

    border-right:
        1px solid var(--osvs-border);

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

    border-left:
        1px solid var(--osvs-border);

    border-radius: 0 0 15px 15px;

    background: #fff;

    box-shadow:
        0 14px 40px rgba(7,29,54,.06);
}

.osvs-sidebar-nav > a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-height: 51px;

    padding: 9px 11px;

    border-bottom:
        1px solid #edf3f7;

    border-radius: 8px;

    color: var(--osvs-text);

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

    text-decoration: none;

    transition: .22s ease;
}

.osvs-sidebar-nav > a:last-child {
    border-bottom: 0;
}

.osvs-sidebar-nav > a > span {
    display: flex;
    align-items: center;

    gap: 10px;
}

.osvs-sidebar-nav > a > span > i {
    width: 19px;

    color: var(--osvs-blue);

    text-align: center;
}

.osvs-sidebar-nav > a > i {
    color: #9aafc0;

    font-size: 9px;
}

.osvs-sidebar-nav > a:hover {
    padding-left: 15px;

    background: #edf8fe;

    color: var(--osvs-blue);
}


/* HELP CARD */

.osvs-sidebar-help {
    position: relative;

    margin-top: 20px;
    padding: 27px 22px;

    overflow: hidden;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #071d36,
            #0a3357
        );

    color: #fff;
}

.osvs-sidebar-help::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -75px;
    bottom: -75px;

    border:
        25px solid rgba(7,136,223,.09);

    border-radius: 50%;
}

.osvs-sidebar-help-icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom: 17px;

    border-radius: 11px;

    background: var(--osvs-blue);

    color: #fff;

    font-size: 18px;
}

.osvs-sidebar-help > small {
    color: #67c9fa;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.osvs-sidebar-help h3 {
    margin: 6px 0 10px;

    color: #fff;

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

.osvs-sidebar-help p {
    margin: 0 0 17px;

    color: #b4cada;

    font-size: 14px;
}

.osvs-sidebar-phone {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 14px;

    color: #fff;

    font-size: 15px;
    font-weight: 900;

    text-decoration: none;
}

.osvs-sidebar-phone i {
    color: var(--osvs-cyan);
}

.osvs-sidebar-button {
    position: relative;
    z-index: 2;

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

    min-height: 48px;

    padding: 10px 13px;

    border-radius: 8px;

    background: var(--osvs-blue);

    color: #fff;

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

    text-decoration: none;
}

.osvs-sidebar-button:hover {
    background: var(--osvs-wine);
}


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

.osvs-content-heading {
    max-width: 850px;

    margin-bottom: 45px;
}

.osvs-content-heading > p {
    max-width: 760px;

    color: var(--osvs-muted);
}

.osvs-service-grid {
    display: grid;

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

    gap: 22px;
}

.osvs-service-card {
    overflow: hidden;

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

    border-radius: 17px;

    background: #fff;

    box-shadow:
        0 13px 35px rgba(7,29,54,.055);

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

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

    border-color:
        rgba(7,136,223,.55);

    box-shadow:
        0 25px 55px rgba(7,29,54,.11);
}

.osvs-service-image {
    position: relative;

    height: 235px;

    overflow: hidden;

    background: var(--osvs-navy);
}

.osvs-service-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(7,29,54,.55),
            transparent 60%
        );
}

.osvs-service-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .6s ease;
}

.osvs-service-card:hover
.osvs-service-image img {
    transform: scale(1.06);
}

.osvs-service-image > span {
    position: absolute;

    z-index: 2;

    top: 16px;
    right: 16px;

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

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

    border-radius: 10px;

    background:
        rgba(7,29,54,.8);

    color: #fff;

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

    backdrop-filter: blur(8px);
}

.osvs-service-body {
    position: relative;

    padding: 30px 25px 26px;
}

.osvs-card-icon {
    position: absolute;

    top: -29px;
    left: 25px;

    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;

    border: 6px solid #fff;

    border-radius: 13px;

    background: var(--osvs-blue);

    color: #fff;

    font-size: 18px;

    box-shadow:
        0 10px 25px rgba(7,29,54,.14);
}

.osvs-service-body > small {
    display: block;

    margin-top: 8px;

    color: var(--osvs-blue);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.osvs-service-body h3 {
    margin: 6px 0 10px;

    color: var(--osvs-navy);

    font-size: 25px;
    line-height: 1.15;
}

.osvs-service-body p {
    min-height: 76px;

    margin: 0 0 18px;

    color: var(--osvs-muted);

    font-size: 14px;
}

.osvs-service-body > a {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: var(--osvs-blue);

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

    text-decoration: none;
}

.osvs-service-body > a:hover {
    color: var(--osvs-wine);
}

.osvs-service-wide {
    grid-column: 1 / -1;

    display: grid;

    grid-template-columns:
        .85fr
        1.15fr;
}

.osvs-service-wide .osvs-service-image {
    height: 100%;
    min-height: 310px;
}

.osvs-service-wide .osvs-service-body {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 45px;
}

.osvs-service-wide .osvs-card-icon {
    position: static;

    margin-bottom: 18px;

    border: 0;
}

.osvs-service-wide
.osvs-service-body p {
    min-height: 0;
}


/* ==========================================================
   SECTION 03
   PROPERTY — IMAGE BACKGROUND
========================================================== */

.osvs-property {
    position: relative;

    padding: 115px 0;

    isolation: isolate;
}

.osvs-property-bg {
    position: absolute;
    inset: 0;

    z-index: -3;

    background:
        url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=2000&q=88")
        center / cover no-repeat;
}

.osvs-property-overlay {
    position: absolute;
    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(4,23,42,.96),
            rgba(4,31,56,.86)
        );
}

.osvs-property-heading {
    max-width: 820px;

    margin-bottom: 50px;
}

.osvs-property-heading h2 {
    margin: 0 0 20px;

    color: #fff;

    font-size: clamp(40px, 4.6vw, 64px);
    line-height: 1;
    letter-spacing: -2px;
}

.osvs-property-heading h2 strong {
    display: block;

    color: var(--osvs-cyan);
}

.osvs-property-heading > p {
    max-width: 700px;

    color: #c0d4e3;
}

.osvs-property-grid {
    display: grid;

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

    gap: 20px;

    max-width: 950px;
}

.osvs-property-card {
    padding: 35px;

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

    border-radius: 16px;

    background:
        rgba(5,32,57,.77);

    color: #fff;

    backdrop-filter: blur(12px);

    transition: .3s ease;
}

.osvs-property-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(24,182,245,.55);
}

.osvs-property-icon {
    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;

    margin-bottom: 24px;

    border-radius: 13px;

    background: var(--osvs-blue);

    font-size: 21px;
}

.osvs-property-card > small {
    color: #66c8f9;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.osvs-property-card h3 {
    margin: 7px 0 12px;

    color: #fff;

    font-size: 25px;
}

.osvs-property-card p {
    color: #bfd2df;

    font-size: 14px;
}

.osvs-property-card a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #fff;

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

    text-decoration: none;
}

.osvs-property-card a i {
    color: var(--osvs-cyan);
}


/* ==========================================================
   SECTION 04
   PROCESS — WHITE
========================================================== */

.osvs-process {
    background: #fff;
}

.osvs-section-heading {
    max-width: 850px;

    margin-bottom: 55px;
}

.osvs-center {
    margin-right: auto;
    margin-left: auto;

    text-align: center;
}

.osvs-center .osvs-section-label {
    justify-content: center;
}

.osvs-center .osvs-title {
    margin-right: auto;
    margin-left: auto;
}

.osvs-center > p {
    max-width: 720px;

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

    color: var(--osvs-muted);

    text-align: center;
}

.osvs-process-grid {
    display: grid;

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

    gap: 17px;
}

.osvs-process-card {
    position: relative;

    min-height: 295px;

    padding: 30px 24px;

    overflow: hidden;

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

    border-radius: 15px;

    background: var(--osvs-light);

    transition: .3s ease;
}

.osvs-process-card:hover {
    transform: translateY(-6px);

    border-color: var(--osvs-blue);

    background: #fff;

    box-shadow:
        0 18px 45px rgba(7,29,54,.08);
}

.osvs-process-card > span {
    position: absolute;

    top: 18px;
    right: 20px;

    color: #dce9f2;

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

.osvs-process-card > div {
    display: grid;
    place-items: center;

    width: 57px;
    height: 57px;

    margin-bottom: 28px;

    border-radius: 13px;

    background: var(--osvs-navy);

    color: #fff;

    font-size: 19px;
}

.osvs-process-card h3 {
    margin: 0 0 12px;

    color: var(--osvs-navy);

    font-size: 20px;
}

.osvs-process-card p {
    margin: 0;

    color: var(--osvs-muted);

    font-size: 14px;
}


/* ==========================================================
   SECTION 05
   SUPPORT — IMAGE BACKGROUND
========================================================== */

.osvs-support {
    position: relative;

    min-height: 650px;

    display: flex;
    align-items: center;

    padding: 100px 0;

    isolation: isolate;
}

.osvs-support-bg {
    position: absolute;
    inset: 0;

    z-index: -3;

    background:
        url("https://images.unsplash.com/photo-1621905252507-b35492cc74b4?auto=format&fit=crop&w=2000&q=88")
        center / cover no-repeat;
}

.osvs-support-overlay {
    position: absolute;
    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(4,23,42,.96) 0%,
            rgba(4,29,53,.89) 52%,
            rgba(4,29,53,.35) 100%
        );
}

.osvs-support-box {
    max-width: 690px;

    color: #fff;
}

.osvs-support-icon {
    display: grid;
    place-items: center;

    width: 65px;
    height: 65px;

    margin-bottom: 25px;

    border-radius: 15px;

    background: var(--osvs-blue);

    color: #fff;

    font-size: 23px;
}

.osvs-support-box h2 {
    margin: 0 0 20px;

    color: #fff;

    font-size: clamp(42px, 5vw, 66px);
    line-height: .98;
    letter-spacing: -2px;
}

.osvs-support-box h2 strong {
    display: block;

    color: var(--osvs-cyan);
}

.osvs-support-box > p {
    color: #c2d5e3;
}

.osvs-support-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 25px;

    margin-top: 30px;
}

.osvs-support-phone {
    display: flex;
    align-items: center;

    gap: 11px;

    color: #fff;

    text-decoration: none;
}

.osvs-support-phone > i {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

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

    border-radius: 50%;

    color: var(--osvs-cyan);
}

.osvs-support-phone span {
    display: flex;
    flex-direction: column;
}

.osvs-support-phone small {
    color: #89a9c0;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.osvs-support-phone strong {
    font-size: 15px;
}


/* ==========================================================
   SECTION 06
   QUICK ACCESS — WHITE
========================================================== */

.osvs-quick {
    background: #fff;
}

.osvs-quick-heading {
    display: grid;

    grid-template-columns:
        1fr
        minmax(300px, 520px);

    align-items: end;

    gap: 60px;

    margin-bottom: 45px;
}

.osvs-quick-heading .osvs-title {
    margin-bottom: 0;
}

.osvs-quick-heading > p {
    margin: 0;

    color: var(--osvs-muted);
}

.osvs-quick-grid {
    display: grid;

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

    gap: 12px;
}

.osvs-quick-item {
    display: grid;

    grid-template-columns:
        46px
        1fr
        auto;

    align-items: center;

    gap: 14px;

    min-height: 72px;

    padding: 12px 17px;

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

    border-radius: 11px;

    background: var(--osvs-light);

    color: var(--osvs-navy);

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

    text-decoration: none;

    transition: .25s ease;
}

.osvs-quick-item > i:first-child {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    border-radius: 9px;

    background: #e1f3fd;

    color: var(--osvs-blue);
}

.osvs-quick-item > i:last-child {
    color: var(--osvs-blue);
}

.osvs-quick-item:hover {
    transform: translateY(-3px);

    border-color: var(--osvs-blue);

    background: #fff;

    box-shadow:
        0 13px 30px rgba(7,29,54,.07);
}


/* ==========================================================
   SECTION 07
   FINAL CTA
========================================================== */

.osvs-final {
    position: relative;

    min-height: 560px;

    display: flex;
    align-items: center;

    isolation: isolate;
}

.osvs-final-bg {
    position: absolute;
    inset: 0;

    z-index: -3;

    background:
        url("https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=2000&q=90")
        center / cover no-repeat;
}

.osvs-final-overlay {
    position: absolute;
    inset: 0;

    z-index: -2;

    background:
        rgba(4, 23, 42, .91);
}

.osvs-final-content {
    max-width: 900px;

    margin: auto;
    padding: 100px 0;

    color: #fff;

    text-align: center;
}

.osvs-final-content
.osvs-section-label {
    justify-content: center;
}

.osvs-final-content h2 {
    margin: 0 0 20px;

    color: #fff;

    font-size: clamp(43px, 5.2vw, 70px);
    line-height: .98;
    letter-spacing: -2px;
}

.osvs-final-content h2 strong {
    display: block;

    color: var(--osvs-cyan);
}

.osvs-final-content > p {
    max-width: 700px;

    margin: 0 auto 30px;

    color: #c4d6e4;

    text-align: center;
}

.osvs-final-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;
}


/* ==========================================================
   SCROLL REVEAL
========================================================== */

.osvs-reveal {
    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.osvs-reveal.osvs-visible {
    opacity: 1;

    transform: translateY(0);
}


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

@media (max-width: 1350px) {

    .osvs-container {
        width:
            min(calc(100% - 64px), 1440px);
    }

    .osvs-hero-inner {
        gap: 50px;
    }

    .osvs-directory-layout {
        grid-template-columns:
            285px
            minmax(0, 1fr);

        gap: 40px;
    }

}


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

@media (max-width: 1050px) {

    .osvs-container {
        width: calc(100% - 44px);
    }

    .osvs-section {
        padding: 85px 0;
    }

    .osvs-hero-inner {
        grid-template-columns: 1fr;
    }

    .osvs-system-card {
        max-width: 650px;
    }


    /* Sidebar stops following scroll */

    .osvs-directory-layout {
        grid-template-columns: 1fr;
    }

    .osvs-sidebar-inner {
        position: static;

        top: auto;
    }

    .osvs-sidebar {
        order: 1;
    }

    .osvs-directory-content {
        order: 2;
    }

    .osvs-sidebar-help {
        display: none;
    }

    .osvs-sidebar-nav {
        display: grid;

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

        gap: 6px;
    }

    .osvs-sidebar-nav > a {
        border-bottom: 0;

        background: var(--osvs-light);
    }

    .osvs-process-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .osvs-quick-heading {
        grid-template-columns: 1fr;

        gap: 20px;
    }

}


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

@media (max-width: 767px) {

    .osvs-container {
        width: calc(100% - 36px);
    }

    .osvs-section {
        padding: 70px 0;
    }

    .osvs-page p {
        font-size: 15px;
    }

    .osvs-title {
        font-size: 37px;

        letter-spacing: -1px;
    }


    /* HERO */

    .osvs-hero {
        min-height: auto;
    }

    .osvs-hero-inner {
        padding-top: 80px;
        padding-bottom: 105px;
    }

    .osvs-hero h1 {
        font-size: 48px;

        letter-spacing: -2px;
    }

    .osvs-hero-content > p {
        font-size: 15px;
    }

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

    .osvs-hero-actions .osvs-btn {
        width: 100%;
    }

    .osvs-hero-mini {
        display: grid;

        grid-template-columns: 1fr;
    }

    .osvs-system-card {
        display: none;
    }


    /* SIDEBAR MOBILE */

    .osvs-sidebar-heading {
        padding: 20px;
    }

    .osvs-sidebar-heading h2 {
        font-size: 23px;
    }

    .osvs-sidebar-nav {
        grid-template-columns: 1fr;

        padding: 7px;
    }

    .osvs-sidebar-nav > a {
        min-height: 49px;
    }


    /* SERVICE GRID */

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

    .osvs-service-wide {
        grid-column: auto;

        display: block;
    }

    .osvs-service-wide
    .osvs-service-image {
        min-height: 0;
        height: 235px;
    }

    .osvs-service-wide
    .osvs-service-body {
        display: block;

        padding: 30px 25px 26px;
    }

    .osvs-service-wide
    .osvs-card-icon {
        position: absolute;

        margin: 0;

        border: 6px solid #fff;
    }


    /* PROPERTY */

    .osvs-property {
        padding: 85px 0;
    }

    .osvs-property-grid {
        grid-template-columns: 1fr;
    }


    /* PROCESS */

    .osvs-process-grid {
        grid-template-columns: 1fr;
    }

    .osvs-process-card {
        min-height: auto;
    }


    /* SUPPORT */

    .osvs-support {
        min-height: 650px;

        padding: 80px 0;
    }

    .osvs-support-box h2 {
        font-size: 42px;
    }

    .osvs-support-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .osvs-support-actions .osvs-btn {
        width: 100%;
    }

    .osvs-support-phone {
        justify-content: center;
    }


    /* QUICK */

    .osvs-quick-grid {
        grid-template-columns: 1fr;
    }


    /* FINAL */

    .osvs-final {
        min-height: 600px;
    }

    .osvs-final-content h2 {
        font-size: 42px;
    }

    .osvs-final-actions {
        flex-direction: column;
    }

    .osvs-final-actions .osvs-btn {
        width: 100%;
    }

}


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

@media (max-width: 420px) {

    .osvs-container {
        width: calc(100% - 32px);
    }

    .osvs-hero h1 {
        font-size: 41px;
    }

    .osvs-title {
        font-size: 33px;
    }

    .osvs-service-image {
        height: 210px;
    }

    .osvs-property-card {
        padding: 27px 22px;
    }

    .osvs-support-box h2,
    .osvs-final-content h2 {
        font-size: 37px;
    }

}


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

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

    .osvs-reveal {
        opacity: 1;

        transform: none;

        transition: none;
    }

    .osvs-page *,
    .osvs-page *::before,
    .osvs-page *::after {
        scroll-behavior: auto !important;

        transition-duration: .01ms !important;
    }

}

/* =========================================================
   OSORIO PLUMBING SERVICES
   GALLERY PAGE
========================================================= */

.osg-page{
    --navy:#071d36;
    --navy2:#0a2948;
    --blue:#0788df;
    --blue2:#18b6f5;
    --wine:#84233d;
    --white:#fff;
    --bg:#f4f8fb;
    --text:#18344f;
    --muted:#687f93;
    --border:#dce7ef;

    width:100%;
    overflow:hidden;
    color:var(--text);
}

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

.osg-container{
    width:min(calc(100% - 80px),1440px);
    margin:auto;
}

.osg-page img,
.osg-page video{
    display:block;
    max-width:100%;
}

.osg-page p{
    font-size:16px;
    line-height:1.8;
    text-align:justify;
}

.osg-label,
.osg-eyebrow{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:14px;
    color:var(--blue);
    font-size:14px;
    font-weight:900;
    letter-spacing:1.5px;
}

.osg-label > span,
.osg-eyebrow > span{
    width:28px;
    height:3px;
    border-radius:20px;
    background:var(--wine);
}

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

.osg-hero{
    position:relative;
    min-height:700px;
    display:flex;
    align-items:center;
    isolation:isolate;
    background:var(--navy);
    color:#fff;
}

.osg-hero-media,
.osg-hero-media video,
.osg-hero-overlay,
.osg-hero-grid{
    position:absolute;
    inset:0;
}

.osg-hero-media{
    z-index:-5;
}

.osg-hero-media video{
    width:100%;
    height:100%;
    object-fit:cover;
}

.osg-hero-overlay{
    z-index:-4;
    background:
        linear-gradient(
            90deg,
            rgba(3,17,31,.98) 0%,
            rgba(4,28,50,.91) 42%,
            rgba(5,31,54,.58) 72%,
            rgba(5,31,54,.65) 100%
        );
}

.osg-hero-grid{
    z-index:-3;
    opacity:.13;
    background-image:
        linear-gradient(rgba(24,182,245,.25) 1px,transparent 1px),
        linear-gradient(90deg,rgba(24,182,245,.25) 1px,transparent 1px);
    background-size:55px 55px;
}

.osg-hero-glow{
    position:absolute;
    z-index:-2;
    right:8%;
    top:15%;
    width:400px;
    height:400px;
    border-radius:50%;
    background:rgba(7,136,223,.16);
    filter:blur(100px);
}

.osg-hero-content{
    padding:120px 0 150px;
}

.osg-eyebrow{
    color:#7ad3fb;
}

.osg-hero h1{
    max-width:900px;
    margin:0 0 25px;
    color:#fff;
    font-size:clamp(58px,7vw,100px);
    line-height:.9;
    letter-spacing:-5px;
}

.osg-hero h1 strong{
    display:block;
    color:var(--blue2);
}

.osg-hero-content > p{
    max-width:720px;
    margin:0 0 30px;
    color:#cad9e5;
    font-size:17px;
}

.osg-hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.osg-btn{
    min-height:55px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:13px 23px;
    border-radius:9px;
    text-decoration:none;
    font-size:14px;
    font-weight:900;
    transition:.25s ease;
}

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

.osg-btn-primary{
    background:var(--blue);
    color:#fff !important;
    box-shadow:0 14px 35px rgba(7,136,223,.25);
}

.osg-btn-primary:hover{
    background:var(--wine);
}

.osg-btn-outline{
    border:1px solid rgba(255,255,255,.3);
    background:rgba(255,255,255,.08);
    color:#fff !important;
    backdrop-filter:blur(10px);
}

.osg-btn-outline:hover{
    background:#fff;
    color:var(--navy) !important;
}

/* BREADCRUMB */

.osg-breadcrumb{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    border-top:1px solid rgba(255,255,255,.1);
    background:rgba(3,17,31,.72);
    backdrop-filter:blur(12px);
}

.osg-breadcrumb .osg-container{
    min-height:64px;
    display:flex;
    align-items:center;
    gap:12px;
}

.osg-breadcrumb a,
.osg-breadcrumb span,
.osg-breadcrumb strong{
    color:#fff;
    text-decoration:none;
    font-size:14px;
}

.osg-breadcrumb > .osg-container > i{
    color:var(--blue2);
    font-size:9px;
}

/* =========================================================
   INTRO — WHITE
========================================================= */

.osg-intro{
    padding:105px 0;
    background:#fff;
}

.osg-intro-grid{
    display:grid;
    grid-template-columns:1fr minmax(350px,560px);
    align-items:end;
    gap:80px;
}

.osg-intro-heading h2,
.osg-gallery-header h2{
    margin:0;
    color:var(--navy);
    font-size:clamp(42px,4.5vw,65px);
    line-height:1;
    letter-spacing:-2px;
}

.osg-intro-heading h2 strong,
.osg-gallery-header h2 strong{
    display:block;
    color:var(--blue);
}

.osg-intro-copy p{
    margin:0;
    color:var(--muted);
}

.osg-intro-note{
    margin-top:22px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:15px;
    border:1px solid #d7ebf7;
    border-radius:10px;
    background:#eef9ff;
}

.osg-intro-note > i{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:var(--blue);
    color:#fff;
}

.osg-intro-note div{
    display:flex;
    flex-direction:column;
}

.osg-intro-note strong{
    color:var(--navy);
    font-size:14px;
}

.osg-intro-note span{
    color:var(--muted);
    font-size:14px;
}

/* =========================================================
   FEATURE — IMAGE BACKGROUND
========================================================= */

.osg-feature{
    position:relative;
    min-height:620px;
    display:flex;
    align-items:center;
    isolation:isolate;
}

.osg-feature-image,
.osg-feature-image img,
.osg-feature-overlay{
    position:absolute;
    inset:0;
}

.osg-feature-image{
    z-index:-3;
}

.osg-feature-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.osg-feature-overlay{
    z-index:-2;
    background:
        linear-gradient(
            90deg,
            rgba(4,22,40,.94),
            rgba(4,25,46,.75) 50%,
            rgba(4,25,46,.25)
        );
}

.osg-feature-card{
    max-width:610px;
    padding:50px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:18px;
    background:rgba(4,27,49,.82);
    color:#fff;
    backdrop-filter:blur(15px);
}

.osg-feature-number{
    display:block;
    margin-bottom:14px;
    color:var(--blue2);
    font-size:14px;
    font-weight:900;
    letter-spacing:1.6px;
}

.osg-feature-card h2{
    margin:0 0 20px;
    color:#fff;
    font-size:clamp(43px,4vw,62px);
    line-height:.98;
}

.osg-feature-card h2 strong{
    color:var(--blue2);
}

.osg-feature-card p{
    color:#c6d8e5;
}

.osg-feature-card > a{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-top:15px;
    color:#fff;
    font-size:14px;
    font-weight:900;
    text-decoration:none;
}

/* =========================================================
   GALLERY — WHITE
========================================================= */

.osg-gallery-section{
    padding:105px 0;
    background:#fff;
}

.osg-gallery-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
    margin-bottom:45px;
}

.osg-filters{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    padding:6px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#f8fbfd;
}

.osg-filter{
    min-height:44px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--muted);
    font-family:inherit;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    transition:.2s ease;
}

.osg-filter span{
    min-width:23px;
    height:23px;
    display:grid;
    place-items:center;
    padding:0 5px;
    border-radius:20px;
    background:#e5edf3;
    color:var(--navy);
    font-size:11px;
}

.osg-filter.is-active{
    background:var(--navy);
    color:#fff;
}

.osg-filter.is-active span{
    background:var(--blue);
    color:#fff;
}

/* GRID */

.osg-gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:260px;
    grid-auto-flow:dense;
    gap:13px;
}

.osg-gallery-card{
    position:relative;
    width:100%;
    height:100%;
    padding:0;
    overflow:hidden;
    border:0;
    border-radius:13px;
    background:var(--navy);
    cursor:pointer;
    text-align:left;
    box-shadow:0 10px 30px rgba(7,29,54,.08);
}

.osg-gallery-card.osg-wide{
    grid-column:span 2;
}

.osg-gallery-card.osg-tall{
    grid-row:span 2;
}

.osg-gallery-card.osg-large{
    grid-column:span 2;
    grid-row:span 2;
}

.osg-gallery-card img,
.osg-gallery-card video{
    width:100%;
    height:100%;
    object-fit:cover;
    pointer-events:none;
    transition:transform .6s ease;
}

.osg-gallery-card:hover img,
.osg-gallery-card:hover video{
    transform:scale(1.055);
}

.osg-card-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to top,
            rgba(3,20,36,.85),
            transparent 65%
        );
    pointer-events:none;
}

.osg-card-type{
    position:absolute;
    z-index:3;
    top:13px;
    left:13px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 9px;
    border-radius:6px;
    background:rgba(5,29,51,.75);
    color:#fff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.7px;
    backdrop-filter:blur(8px);
}

.osg-gallery-card[data-type="video"] .osg-card-type{
    background:rgba(132,35,61,.88);
}

.osg-card-info{
    position:absolute;
    z-index:3;
    left:16px;
    right:16px;
    bottom:15px;
    display:flex;
    flex-direction:column;
}

.osg-card-info small{
    color:var(--blue2);
    font-size:10px;
    font-weight:900;
    letter-spacing:1px;
}

.osg-card-info strong{
    color:#fff;
    font-size:16px;
}

.osg-card-open{
    position:absolute;
    z-index:4;
    top:13px;
    right:13px;
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.2);
    border-radius:8px;
    background:rgba(5,29,51,.72);
    color:#fff;
    opacity:0;
    transform:scale(.8);
    transition:.25s ease;
    backdrop-filter:blur(8px);
}

.osg-gallery-card:hover .osg-card-open{
    opacity:1;
    transform:scale(1);
}

.osg-card-play{
    position:absolute;
    z-index:4;
    top:50%;
    left:50%;
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--blue);
    color:#fff;
    transform:translate(-50%,-50%);
    box-shadow:0 12px 35px rgba(0,0,0,.25);
    pointer-events:none;
}

.osg-card-play::after{
    content:"";
    position:absolute;
    inset:-8px;
    border:1px solid rgba(255,255,255,.4);
    border-radius:50%;
}

/* LOAD MORE */

.osg-load-more{
    padding-top:45px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
}

.osg-gallery-status{
    color:var(--muted);
    font-size:14px;
}

.osg-gallery-status strong{
    color:var(--navy);
}

.osg-load-button{
    min-height:51px;
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:12px 20px;
    border:1px solid var(--border);
    border-radius:9px;
    background:#fff;
    color:var(--navy);
    font-family:inherit;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
    transition:.2s ease;
}

.osg-load-button:hover{
    border-color:var(--blue);
    background:var(--blue);
    color:#fff;
}

/* =========================================================
   VIDEO FEATURE
========================================================= */

.osg-video-feature{
    position:relative;
    min-height:650px;
    display:flex;
    align-items:center;
    isolation:isolate;
    background:var(--navy);
}

.osg-video-feature-bg,
.osg-video-feature-bg video,
.osg-video-feature-overlay{
    position:absolute;
    inset:0;
}

.osg-video-feature-bg{
    z-index:-3;
}

.osg-video-feature-bg video{
    width:100%;
    height:100%;
    object-fit:cover;
}

.osg-video-feature-overlay{
    z-index:-2;
    background:
        linear-gradient(
            90deg,
            rgba(3,18,33,.98),
            rgba(4,27,49,.8) 55%,
            rgba(4,27,49,.48)
        );
}

.osg-video-copy{
    max-width:690px;
    padding:100px 0;
}

.osg-label-light{
    color:var(--blue2);
}

.osg-video-copy h2{
    margin:0 0 20px;
    color:#fff;
    font-size:clamp(46px,5vw,70px);
    line-height:.96;
    letter-spacing:-2px;
}

.osg-video-copy h2 strong{
    display:block;
    color:var(--blue2);
}

.osg-video-copy p{
    color:#c6d8e5;
}

.osg-video-feature-button{
    display:inline-flex;
    align-items:center;
    gap:14px;
    margin-top:20px;
    padding:0;
    border:0;
    background:transparent;
    color:#fff;
    font-family:inherit;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
}

.osg-video-feature-button > span{
    width:55px;
    height:55px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--blue);
    color:#fff;
    box-shadow:0 12px 30px rgba(7,136,223,.3);
}

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

.osg-cta{
    padding:100px 0;
    background:#fff;
}

.osg-cta-box{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
    padding:55px;
    border:1px solid var(--border);
    border-radius:20px;
    background:#f5f9fc;
}

.osg-cta-box::before{
    content:"";
    position:absolute;
    top:-80px;
    right:-80px;
    width:250px;
    height:250px;
    border-radius:50%;
    background:rgba(7,136,223,.08);
}

.osg-cta-copy{
    max-width:680px;
}

.osg-cta-copy h2{
    margin:0;
    color:var(--navy);
    font-size:clamp(40px,4vw,60px);
    line-height:1;
}

.osg-cta-copy h2 strong{
    color:var(--blue);
}

.osg-cta-copy p{
    margin-bottom:0;
    color:var(--muted);
}

.osg-cta-actions{
    position:relative;
    z-index:2;
    min-width:260px;
}

.osg-call{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:17px;
    color:var(--navy);
    text-decoration:none;
}

.osg-call > span{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--navy);
    color:#fff;
}

.osg-call div{
    display:flex;
    flex-direction:column;
}

.osg-call small{
    color:var(--muted);
    font-size:10px;
    font-weight:900;
}

.osg-call strong{
    font-size:15px;
}

/* =========================================================
   LIGHTBOX
========================================================= */

body.osg-lock{
    overflow:hidden !important;
}

.osg-lightbox{
    position:fixed;
    inset:0;
    z-index:999999;
    padding:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:.25s ease;
}

.osg-lightbox.is-open{
    opacity:1;
    visibility:visible;
}

.osg-lightbox-backdrop{
    position:absolute;
    inset:0;
    background:rgba(1,9,17,.95);
    backdrop-filter:blur(12px);
}

.osg-lightbox-dialog{
    position:relative;
    z-index:2;
    width:min(1350px,100%);
    height:min(900px,calc(100vh - 50px));
    display:grid;
    grid-template-rows:60px minmax(0,1fr) 85px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    background:#041321;
    box-shadow:0 40px 100px rgba(0,0,0,.55);
}

.osg-lightbox-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 12px 8px 20px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.osg-lightbox-brand{
    display:flex;
    align-items:center;
    gap:20px;
}

.osg-lightbox-type{
    color:var(--blue2);
    font-size:11px;
    font-weight:900;
    letter-spacing:1px;
}

.osg-lightbox-count{
    display:flex;
    align-items:center;
    gap:8px;
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.osg-lightbox-count i{
    width:28px;
    height:1px;
    background:#48677e;
}

.osg-lightbox-count span:last-child{
    color:#718fa5;
}

.osg-lightbox-controls{
    display:flex;
    gap:6px;
}

.osg-lightbox-controls button{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.1);
    border-radius:8px;
    background:rgba(255,255,255,.05);
    color:#fff;
    cursor:pointer;
}

.osg-lightbox-controls button:hover{
    background:var(--blue);
}

.osg-lightbox-stage{
    position:relative;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#01070d;
}

#osgLightboxImage,
#osgLightboxVideo{
    width:100%;
    height:100%;
    object-fit:contain;
}

#osgLightboxVideo{
    display:none;
    background:#000;
}

.osg-lightbox-nav{
    position:absolute;
    z-index:5;
    top:50%;
    width:48px;
    height:62px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.16);
    border-radius:9px;
    background:rgba(5,28,49,.75);
    color:#fff;
    cursor:pointer;
    transform:translateY(-50%);
    backdrop-filter:blur(8px);
}

.osg-lightbox-nav:hover{
    background:var(--blue);
}

.osg-lightbox-prev{
    left:15px;
}

.osg-lightbox-next{
    right:15px;
}

.osg-lightbox-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:14px 20px;
    border-top:1px solid rgba(255,255,255,.08);
}

.osg-lightbox-bottom span{
    color:var(--blue2);
    font-size:9px;
    font-weight:900;
    letter-spacing:1px;
}

.osg-lightbox-bottom h3{
    margin:2px 0 0;
    color:#fff;
    font-size:18px;
}

.osg-keyboard-help{
    display:flex;
    align-items:center;
    gap:8px;
    color:#7692a7;
    font-size:12px;
}

/* =========================================================
   REVEAL
========================================================= */

.osg-reveal{
    opacity:0;
    transform:translateY(25px);
    transition:opacity .7s ease,transform .7s ease;
}

.osg-reveal.osg-visible{
    opacity:1;
    transform:none;
}

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

@media(max-width:1200px){

    .osg-container{
        width:calc(100% - 64px);
    }

    .osg-gallery-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}

@media(max-width:900px){

    .osg-container{
        width:calc(100% - 44px);
    }

    .osg-intro-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .osg-gallery-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .osg-gallery-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .osg-cta-box{
        align-items:flex-start;
        flex-direction:column;
    }

}

@media(max-width:650px){

    .osg-container{
        width:calc(100% - 36px);
    }

    .osg-page p{
        font-size:15px;
    }

    .osg-hero{
        min-height:690px;
    }

    .osg-hero-content{
        padding:105px 0 145px;
    }

    .osg-hero h1{
        font-size:49px;
        letter-spacing:-2px;
    }

    .osg-hero-buttons{
        flex-direction:column;
    }

    .osg-hero-buttons .osg-btn{
        width:100%;
    }

    .osg-intro,
    .osg-gallery-section,
    .osg-cta{
        padding:70px 0;
    }

    .osg-intro-heading h2,
    .osg-gallery-header h2{
        font-size:39px;
    }

    .osg-feature{
        min-height:650px;
    }

    .osg-feature-card{
        padding:30px 24px;
    }

    .osg-feature-card h2{
        font-size:42px;
    }

    .osg-filters{
        width:100%;
        display:grid;
        grid-template-columns:1fr;
    }

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

    .osg-gallery-grid{
        grid-template-columns:1fr;
        grid-auto-rows:330px;
    }

    .osg-gallery-card.osg-wide,
    .osg-gallery-card.osg-tall,
    .osg-gallery-card.osg-large{
        grid-column:auto;
        grid-row:auto;
    }

    .osg-card-open{
        opacity:1;
        transform:none;
    }

    .osg-video-copy h2{
        font-size:44px;
    }

    .osg-cta-box{
        padding:30px 22px;
    }

    .osg-lightbox{
        padding:0;
    }

    .osg-lightbox-dialog{
        width:100%;
        height:100%;
        max-height:none;
        border:0;
        border-radius:0;
        grid-template-rows:58px minmax(0,1fr) 90px;
    }

    .osg-keyboard-help{
        display:none;
    }

    .osg-lightbox-nav{
        width:42px;
        height:55px;
    }

    .osg-lightbox-prev{
        left:7px;
    }

    .osg-lightbox-next{
        right:7px;
    }

}

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

    .osg-reveal{
        opacity:1;
        transform:none;
        transition:none;
    }

}


/* ==========================================================
   OSORIO PLUMBING SERVICES
   CONTACT PAGE
========================================================== */

.osc-page{
    --navy:#071d36;
    --navy2:#0b2b4b;
    --blue:#0788df;
    --cyan:#19b7f4;
    --wine:#84233d;
    --white:#fff;
    --bg:#f3f7fa;
    --text:#17334e;
    --muted:#647b90;
    --border:#dbe7ef;
    --success:#147a52;
    --error:#b4233b;

    color:var(--text);
    overflow:hidden;
}

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

.osc-container{
    width:min(calc(100% - 80px),1440px);
    margin:auto;
}

.osc-page p{
    font-size:16px;
    line-height:1.8;
    text-align:justify;
}

.osc-label,
.osc-eyebrow{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:14px;
    color:var(--blue);
    font-size:14px;
    font-weight:900;
    letter-spacing:1.4px;
}

.osc-label > span,
.osc-eyebrow > span{
    width:28px;
    height:3px;
    background:var(--wine);
    border-radius:30px;
}


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

.osc-hero{
    position:relative;
    min-height:700px;
    display:flex;
    align-items:center;
    isolation:isolate;
    color:#fff;
    background:#041526;
}

.osc-hero-bg{
    position:absolute;
    inset:0;
    z-index:-5;
    background:
        radial-gradient(circle at 78% 25%,rgba(7,136,223,.28),transparent 25%),
        radial-gradient(circle at 15% 80%,rgba(132,35,61,.15),transparent 24%),
        linear-gradient(120deg,#031322,#061d34 50%,#092d4e);
}

.osc-hero-grid{
    position:absolute;
    inset:0;
    z-index:-4;
    opacity:.15;
    background-image: url(../osorio/images/plumbing.jpg);
    background-size: cover;
    background-blend-mode: soft-light;
}

.osc-hero-glow{
    position:absolute;
    right:10%;
    top:15%;
    z-index:-3;
    width:350px;
    height:350px;
    border-radius:50%;
    background:rgba(7,136,223,.15);
    filter:blur(90px);
}

.osc-hero-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) 430px;
    align-items:center;
    gap:80px;
    padding:110px 0 145px;
}

.osc-eyebrow{
    color:#75d2fb;
}

.osc-hero h1{
    max-width:850px;
    margin:0 0 25px;
    color:#fff;
    font-size:clamp(57px,6.5vw,92px);
    line-height:.92;
    letter-spacing:-4px;
}

.osc-hero h1 strong{
    display:block;
    color:var(--cyan);
}

.osc-hero-content > p{
    max-width:700px;
    margin:0 0 30px;
    color:#c6d8e5;
    font-size:17px;
}

.osc-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}


/* BUTTONS */

.osc-btn{
    min-height:55px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:13px 23px;
    border:1px solid transparent;
    border-radius:9px;
    font-size:14px;
    font-weight:900;
    text-decoration:none;
    transition:.25s ease;
}

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

.osc-btn-primary{
    background:var(--blue);
    color:#fff !important;
    box-shadow:0 14px 35px rgba(7,136,223,.25);
}

.osc-btn-primary:hover{
    background:var(--wine);
}

.osc-btn-glass{
    border-color:rgba(255,255,255,.25);
    background:rgba(255,255,255,.07);
    color:#fff !important;
    backdrop-filter:blur(10px);
}


/* HERO CONTACT PANEL */

.osc-hero-panel{
    padding:17px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:17px;
    background:rgba(4,25,45,.72);
    box-shadow:0 30px 80px rgba(0,0,0,.22);
    backdrop-filter:blur(16px);
}

.osc-panel-head{
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px 8px 18px;
}

.osc-status-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#25d993;
    box-shadow:0 0 0 6px rgba(37,217,147,.1);
}

.osc-panel-head div{
    display:flex;
    flex-direction:column;
}

.osc-panel-head small{
    color:#7999b0;
    font-size:14px;
    font-weight:800;
}

.osc-panel-head strong{
    color:#fff;
    font-size:18px;
}

.osc-quick-contact{
    min-height:73px;
    display:grid;
    grid-template-columns:45px minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    margin-top:7px;
    padding:12px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    background:rgba(255,255,255,.04);
    color:#fff;
    text-decoration:none;
}

.osc-quick-contact > span{
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:rgba(7,136,223,.17);
    color:var(--cyan);
}

.osc-quick-contact div{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.osc-quick-contact small{
    color:#829db1;
    font-size:14px;
    font-weight:800;
}

.osc-quick-contact strong{
    overflow-wrap:anywhere;
    color:#fff;
    font-size:14px;
}


/* BREADCRUMB */

.osc-breadcrumb{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    border-top:1px solid rgba(255,255,255,.1);
    background:rgba(3,18,33,.7);
    backdrop-filter:blur(10px);
}

.osc-breadcrumb .osc-container{
    min-height:62px;
    display:flex;
    align-items:center;
    gap:12px;
}

.osc-breadcrumb a,
.osc-breadcrumb span{
    color:#fff;
    font-size:14px;
    text-decoration:none;
}

.osc-breadcrumb .osc-container > i{
    color:var(--cyan);
    font-size:10px;
}


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

.osc-contact{
    padding:105px 0;
    background:#fff;
}

.osc-section-heading{
    max-width:800px;
    margin-bottom:45px;
}

.osc-section-heading h2{
    margin:0;
    color:var(--navy);
    font-size:clamp(43px,4.5vw,65px);
    line-height:1;
    letter-spacing:-2px;
}

.osc-section-heading h2 strong{
    color:var(--blue);
}

.osc-section-heading p{
    max-width:680px;
    color:var(--muted);
}

.osc-contact-layout{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr);
    align-items:start;
    gap:30px;
}


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

.osc-form-panel{
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:17px;
    background:#fff;
    box-shadow:0 20px 60px rgba(7,29,54,.08);
}

.osc-form-top{
    min-height:100px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 28px;
    background:var(--navy);
}

.osc-form-top div{
    display:flex;
    flex-direction:column;
}

.osc-form-top small{
    color:#6dbfe9;
    font-size:14px;
    font-weight:900;
    letter-spacing:1px;
}

.osc-form-top h3{
    margin:3px 0 0;
    color:#fff;
    font-size:27px;
}

.osc-form-top > span{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:var(--blue);
    color:#fff;
    font-size:18px;
}

.osc-form{
    padding:30px;
}

.osc-form-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:17px;
}

.osc-field{
    position:relative;
    margin-bottom:20px;
}

.osc-field > label{
    display:block;
    margin-bottom:7px;
    color:var(--navy);
    font-size:14px;
    font-weight:800;
}

.osc-field > label span{
    color:var(--wine);
}

.osc-input-wrap{
    position:relative;
}

.osc-input-wrap > i{
    position:absolute;
    top:50%;
    left:14px;
    z-index:2;
    color:#7b91a4;
    transform:translateY(-50%);
}

.osc-input-wrap input,
.osc-input-wrap select{
    padding-left:42px !important;
}

.osc-form input,
.osc-form select,
.osc-form textarea{
    width:100%;
    min-height:51px;
    border:1px solid #cfdee8;
    border-radius:8px;
    outline:none;
    background:#fbfdfe;
    color:var(--navy);
    font-family:inherit;
    font-size:15px;
    transition:.2s ease;
}

.osc-form input,
.osc-form select{
    padding:10px 13px;
}

.osc-form textarea{
    min-height:150px;
    padding:14px;
    resize:vertical;
}

.osc-form input:focus,
.osc-form select:focus,
.osc-form textarea:focus{
    border-color:var(--blue);
    background:#fff;
    box-shadow:0 0 0 3px rgba(7,136,223,.09);
}

.osc-field.has-error input,
.osc-field.has-error select,
.osc-field.has-error textarea{
    border-color:var(--error);
}

.osc-error{
    display:block;
    min-height:0;
    margin-top:5px;
    color:var(--error);
    font-size:14px;
}


/* PROPERTY TYPE */

.osc-property-options{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.osc-property-options label{
    cursor:pointer;
}

.osc-property-options input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.osc-property-options span{
    min-height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#f8fbfd;
    color:var(--muted);
    transition:.2s ease;
}

.osc-property-options input:checked + span{
    border-color:var(--blue);
    background:#eaf7fe;
    color:var(--blue);
}


/* ADDRESS BLOCK */

.osc-address-block{
    margin:5px 0 23px;
    padding:20px;
    border:1px solid #d5e8f4;
    border-radius:12px;
    background:#f4faff;
}

.osc-address-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}

.osc-address-heading div{
    display:flex;
    flex-direction:column;
}

.osc-address-heading small{
    color:var(--blue);
    font-size:14px;
    font-weight:900;
    letter-spacing:.8px;
}

.osc-address-heading strong{
    color:var(--navy);
    font-size:18px;
}

.osc-address-heading > i{
    color:var(--blue);
    font-size:25px;
}

.osc-location-row{
    grid-template-columns:1fr 110px 120px;
}

.osc-map-search{
    width:100%;
    min-height:49px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:0;
    border-radius:8px;
    background:var(--navy);
    color:#fff;
    font-family:inherit;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
}

.osc-map-search:hover{
    background:var(--blue);
}

.osc-address-status{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-top:12px;
    color:var(--muted);
    font-size:14px;
    line-height:1.5;
}

.osc-address-status.is-success{
    color:var(--success);
}

.osc-address-status.is-error{
    color:var(--error);
}


/* COUNTER */

.osc-character-count{
    margin-top:5px;
    color:var(--muted);
    font-size:14px;
    text-align:right;
}


/* CONSENT */

.osc-consent{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin:3px 0 20px;
    color:var(--muted);
    font-size:14px;
    line-height:1.5;
}

.osc-consent input{
    flex:0 0 auto;
    width:17px;
    height:17px;
    min-height:17px;
    margin-top:2px;
}


/* SUBMIT */

.osc-submit{
    width:100%;
    min-height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:9px;
    background:var(--blue);
    color:#fff;
    font-family:inherit;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 13px 30px rgba(7,136,223,.2);
}

.osc-submit:hover{
    background:var(--wine);
}

.osc-submit:disabled{
    opacity:.7;
    cursor:not-allowed;
}

.osc-submit-normal,
.osc-submit-loading{
    align-items:center;
    gap:9px;
}

.osc-submit-normal{
    display:flex;
}

.osc-submit-loading{
    display:none;
}

.osc-submit.is-loading .osc-submit-normal{
    display:none;
}

.osc-submit.is-loading .osc-submit-loading{
    display:flex;
}

.osc-form-security{
    display:flex;
    justify-content:center;
    gap:7px;
    margin-top:12px;
    color:#8498a8;
    font-size:14px;
}


/* RESULT */

.osc-form-result{
    display:none;
    margin-bottom:17px;
    padding:14px 16px;
    border-radius:8px;
    font-size:14px;
    line-height:1.6;
}

.osc-form-result.is-success{
    display:block;
    border:1px solid #bce5d2;
    background:#effbf5;
    color:#116d49;
}

.osc-form-result.is-error{
    display:block;
    border:1px solid #f0c4cc;
    background:#fff3f5;
    color:#a52038;
}

.osc-honeypot{
    position:absolute !important;
    left:-9999px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
}


/* ==========================================================
   MAP
========================================================== */

.osc-map-column{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.osc-map-card{
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:17px;
    background:#fff;
    box-shadow:0 20px 60px rgba(7,29,54,.08);
}

.osc-map-head{
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:15px 18px;
    background:var(--navy);
}

.osc-map-head > div{
    display:flex;
    flex-direction:column;
}

.osc-map-head small{
    color:#7599b4;
    font-size:14px;
    font-weight:800;
}

.osc-map-head strong{
    color:#fff;
    font-size:17px;
}

.osc-map-live{
    display:flex;
    align-items:center;
    gap:6px;
    color:#84a3b9;
    font-size:14px;
    font-weight:800;
}

.osc-map-live i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#25d993;
}

#oscMap{
    width:100%;
    height:430px;
    background:#dfe8ee;
}

.osc-map-bottom{
    min-height:83px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:14px 17px;
}

.osc-map-bottom > div{
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
}

.osc-map-icon{
    flex:0 0 auto;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#eaf7fe;
    color:var(--blue);
}

.osc-map-bottom div div{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.osc-map-bottom small{
    color:var(--muted);
    font-size:14px;
    font-weight:800;
}

.osc-map-bottom strong{
    color:var(--navy);
    font-size:14px;
    line-height:1.35;
}

#oscOpenMaps{
    flex:0 0 auto;
    width:41px;
    height:41px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:var(--navy);
    color:#fff;
    text-decoration:none;
}

#oscOpenMaps.is-disabled{
    opacity:.35;
    pointer-events:none;
}


/* DIRECT CONTACT */

.osc-direct-card{
    padding:25px;
    border-radius:15px;
    background:#f4f8fb;
}

.osc-direct-card h3{
    margin:0;
    color:var(--navy);
    font-size:27px;
}

.osc-direct-card > p{
    margin-bottom:20px;
    color:var(--muted);
    font-size:15px;
}

.osc-direct-card > a{
    display:flex;
    align-items:center;
    gap:11px;
    margin-top:9px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:9px;
    background:#fff;
    color:var(--navy);
    text-decoration:none;
}

.osc-direct-card > a > span{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:var(--navy);
    color:#fff;
}

.osc-direct-card > a div{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.osc-direct-card small{
    color:var(--muted);
    font-size:14px;
    font-weight:800;
}

.osc-direct-card strong{
    overflow-wrap:anywhere;
    font-size:14px;
}


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

.osc-bottom-cta{
    position:relative;
    min-height:570px;
    display:flex;
    align-items:center;
    isolation:isolate;
}

.osc-bottom-bg{
    position:absolute;
    inset:0;
    z-index:-3;
    background:
        url("../osorio/images/osorio-plumbing (1).jpeg")
        center / cover no-repeat;
}

.osc-bottom-overlay{
    position:absolute;
    inset:0;
    z-index:-2;
    background:
        linear-gradient(
            90deg,
            rgba(4,21,39,.97),
            rgba(5,31,54,.8),
            rgba(5,31,54,.4)
        );
}

.osc-bottom-content{
    max-width:720px;
    padding:90px 0;
}

.osc-label-light{
    color:var(--cyan);
}

.osc-bottom-content h2{
    margin:0 0 20px;
    color:#fff;
    font-size:clamp(45px,5vw,68px);
    line-height:.98;
    letter-spacing:-2px;
}

.osc-bottom-content h2 strong{
    display:block;
    color:var(--cyan);
}

.osc-bottom-content p{
    color:#c7d8e5;
}


/* ==========================================================
   LEAFLET MARKER
========================================================== */

.osc-map-marker{
    background:transparent !important;
    border:0 !important;
}

.osc-map-pin{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:4px solid #fff;
    border-radius:50% 50% 50% 8px;
    background:var(--blue);
    color:#fff;
    box-shadow:0 8px 22px rgba(0,0,0,.28);
    transform:rotate(-45deg);
}

.osc-map-pin i{
    font-size:16px;
    transform:rotate(45deg);
}


/* ==========================================================
   REVEAL
========================================================== */

.osc-reveal{
    opacity:0;
    transform:translateY(25px);
    transition:opacity .7s ease,transform .7s ease;
}

.osc-reveal.osc-visible{
    opacity:1;
    transform:none;
}


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

@media(max-width:1200px){

    .osc-container{
        width:calc(100% - 64px);
    }

    .osc-hero-inner{
        gap:45px;
    }

    .osc-contact-layout{
        grid-template-columns:minmax(0,1fr) 380px;
    }

}


@media(max-width:1000px){

    .osc-container{
        width:calc(100% - 44px);
    }

    .osc-hero-inner{
        grid-template-columns:1fr;
    }

    .osc-hero-panel{
        display:none;
    }

    .osc-contact-layout{
        grid-template-columns:1fr;
    }

    .osc-map-column{
        display:grid;
        grid-template-columns:1fr 1fr;
        align-items:start;
    }

    .osc-map-card{
        grid-column:1 / -1;
    }

}


@media(max-width:700px){

    .osc-container{
        width:calc(100% - 36px);
    }

    .osc-hero{
        min-height:690px;
    }

    .osc-hero-inner{
        padding:100px 0 140px;
    }

    .osc-hero h1{
        font-size:49px;
        letter-spacing:-2px;
    }

    .osc-hero-content > p{
        font-size:15px;
    }

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

    .osc-hero-actions .osc-btn{
        width:100%;
    }

    .osc-contact{
        padding:70px 0;
    }

    .osc-section-heading h2{
        font-size:39px;
    }

    .osc-form{
        padding:22px 18px;
    }

    .osc-form-row,
    .osc-location-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .osc-property-options{
        grid-template-columns:1fr;
    }

    .osc-address-block{
        padding:17px 14px;
    }

    .osc-map-column{
        display:flex;
    }

    #oscMap{
        height:360px;
    }

    .osc-map-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .osc-map-live{
        margin-top:3px;
    }

    .osc-bottom-content h2{
        font-size:42px;
    }

}


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

    .osc-reveal{
        opacity:1;
        transform:none;
        transition:none;
    }

}