/* =========================================================
   SERVICES PAGE CSS
========================================================= */


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

:root {

    --lime: #b7e600;
    --lime-dark: #91b800;

    --navy: #071b3a;
    --navy-dark: #041126;

    --blue: #0d467f;

    --white: #ffffff;
    --off-white: #f7f9fb;

    --text-dark: #071a35;
    --text-light: #687487;

    --border: rgba(7, 27, 58, 0.10);

    --header-height: 82px;
    --header-height-scrolled: 72px;

    --sidebar-width: 280px;

    --transition:
        0.5s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


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

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


html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}


body {

    margin: 0;
    padding: 0;

    width: 100%;
    min-width: 0;

    background: var(--white);
    color: var(--text-dark);

    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;
}


body,
button,
a {
    -webkit-font-smoothing: antialiased;
}


img {

    display: block;

    max-width: 100%;

    height: auto;
}


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


button,
input {
    font-family: inherit;
}


button {
    cursor: pointer;
}


input,
button,
textarea,
select {
    max-width: 100%;
}


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

.site-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: var(--header-height);

    z-index: 1000;

    background: transparent;

    transition:
        background 0.4s ease,
        height 0.4s ease,
        box-shadow 0.4s ease;

}


.site-header.scrolled {

    height: var(--header-height-scrolled);

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

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.08);

    backdrop-filter: blur(10px);

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

}


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

.header-container {

    position: relative;

    width: min(1240px, 92%);

    height: 100%;

    margin: 0 auto;

    display: flex;

    align-items: center;

}


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

.brand {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--white);

    text-decoration: none;

    flex-shrink: 0;

    z-index: 20;

}


.brand-logo {

    width: 48px;
    height: 48px;

    object-fit: contain;

    display: block;

    transition:
        transform 0.3s ease;

}


.brand:hover .brand-logo {
    transform: scale(1.05);
}


.brand-name {

    display: flex;

    flex-direction: column;

    line-height: 1;

}


.brand-name span:first-child {

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 1px;

}


.brand-name span:last-child {

    margin-top: 4px;

    font-size: 7px;

    font-weight: 400;

    letter-spacing: 3px;

}


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

.main-nav {

    position: absolute;

    top: 50%;
    left: 50%;

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

    display: flex;

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

    gap: 30px;

    white-space: nowrap;

    z-index: 5;

}


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

.nav-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    padding: 8px 0;

    color: var(--white);

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition:
        color 0.3s ease;

}


.nav-link::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background: var(--lime);

    transition:
        width 0.3s ease;

}


.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}


.nav-link:hover {
    color: var(--lime);
}


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

.site-header.scrolled .brand {
    color: var(--navy);
}


.site-header.scrolled .nav-link {
    color: var(--navy);
}


.site-header.scrolled .nav-link:hover {
    color: var(--lime-dark);
}


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

.header-actions {

    position: absolute;

    top: 50%;
    right: 0;

    transform:
        translateY(-50%);

    display: flex;

    align-items: center;

    gap: 12px;

    z-index: 20;

}


/* =========================================================
   SEARCH
========================================================= */

.header-search {

    width: 180px;
    height: 38px;

    display: flex;
    align-items: center;

    min-width: 0;

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

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

    transition:
        border-color 0.3s ease,
        background 0.3s ease;

}


.header-search input {

    width: 100%;
    min-width: 0;
    height: 100%;

    padding:
        0 10px;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--white);

    font-family: inherit;
    font-size: 11px;

}


.header-search input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}


.header-search button {

    width: 38px;
    height: 100%;

    flex-shrink: 0;

    display: inline-flex;

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

    border: 0;

    background: transparent;

    color: var(--white);

}


.header-search button svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    transition:
        transform 0.3s ease;

}


.header-search button:hover svg {
    transform: scale(1.1);
}


/* =========================================================
   SEARCH — SCROLLED
========================================================= */

.site-header.scrolled .header-search {

    border-color:
        var(--navy);

    background:
        rgba(7, 27, 58, 0.03);

}


.site-header.scrolled .header-search input {
    color: var(--navy);
}


.site-header.scrolled
.header-search input::placeholder {

    color:
        rgba(7, 27, 58, 0.5);

}


.site-header.scrolled
.header-search button {

    color: var(--navy);

}


/* =========================================================
   CONTACT BUTTON
========================================================= */

.contact-button {

    display: inline-flex;

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

    min-width: 105px;
    height: 38px;

    padding:
        0 18px;

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

    background:
        var(--lime);

    color:
        var(--navy);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    white-space: nowrap;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;

}


.contact-button:hover {

    transform:
        translateY(-2px);

    background:
        transparent;

    color:
        var(--lime);

}


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

.menu-toggle {

    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    z-index: 30;

}


.menu-toggle span {

    display: block;

    width: 26px;
    height: 2px;

    margin: 5px auto;

    background: var(--white);

    transition:
        transform 0.3s ease,
        opacity 0.3s ease,
        background 0.3s ease;

}


.site-header.scrolled
.menu-toggle span {

    background:
        var(--navy);

}


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

.menu-toggle.active
span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.menu-toggle.active
span:nth-child(2) {

    opacity: 0;

}


.menu-toggle.active
span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}


/* =========================================================
   TABLET / SMALL LAPTOP HEADER
========================================================= */

@media (max-width: 1200px) {

    .main-nav {
        gap: 20px;
    }


    .nav-link {

        font-size: 10px;

        letter-spacing: 1.1px;

    }


    .header-search {
        width: 145px;
    }


    .contact-button {

        min-width: 90px;

        padding:
            0 14px;

    }

}


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

@media (max-width: 1050px) {

    .main-nav {
        gap: 15px;
    }


    .header-search {
        width: 120px;
    }


    .contact-button {

        min-width: 82px;

        padding:
            0 10px;

        font-size: 9px;

    }


    .brand-name span:first-child {
        font-size: 13px;
    }

}


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

@media (max-width: 900px) {

    .site-header {
        height: 76px;
    }


    .site-header.scrolled {
        height: 70px;
    }


    .header-container {

        width: 92%;

        justify-content:
            space-between;

    }


    .brand {
        z-index: 30;
    }


    .brand-logo {

        width: 44px;
        height: 44px;

    }


    .brand-name span:first-child {

        font-size: 13px;

    }


    .brand-name span:last-child {

        font-size: 6px;

        letter-spacing: 2.5px;

    }


    /* Hide desktop actions */

    .header-actions {
        display: none;
    }


    /* Mobile navigation */

    .main-nav {

        position: fixed;

        top: 76px;
        left: 0;

        width: 100%;

        height:
            calc(100dvh - 76px);

        max-height:
            calc(100dvh - 76px);

        padding:
            40px 8% 50px;

        transform:
            translateY(-110%);

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content:
            flex-start;

        gap: 24px;

        background:
            var(--navy-dark);

        overflow-y: auto;

        overflow-x: hidden;

        overscroll-behavior:
            contain;

        opacity: 0;

        visibility: hidden;

        transition:
            transform 0.4s ease,
            opacity 0.4s ease,
            visibility 0.4s ease;

        z-index: 25;

    }


    .main-nav.active {

        transform:
            translateY(0);

        opacity: 1;

        visibility: visible;

    }


    .main-nav .nav-link {

        display: inline-flex;

        padding:
            10px 0;

        color:
            var(--white);

        font-size: 12px;

        letter-spacing: 1.8px;

    }


    .main-nav .nav-link:hover {
        color: var(--lime);
    }


    .menu-toggle {
        display: block;
    }

}


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

@media (max-width: 480px) {

    .header-container {
        width: 90%;
    }


    .brand {
        gap: 8px;
    }


    .brand-logo {

        width: 40px;
        height: 40px;

    }


    .brand-name span:first-child {

        font-size: 11px;

        letter-spacing:
            0.8px;

    }


    .brand-name span:last-child {

        font-size: 5px;

        letter-spacing:
            2px;

    }


    .main-nav {

        padding-top:
            35px;

        gap:
            20px;

    }


    .main-nav .nav-link {

        font-size: 11px;

    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

    .brand-name span:first-child {
        font-size: 10px;
    }


    .brand-name span:last-child {
        font-size: 4.5px;
    }


    .brand-logo {

        width: 37px;
        height: 37px;

    }


    .menu-toggle {

        width: 40px;
        height: 40px;

    }


    .menu-toggle span {

        width: 23px;

    }

}


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

.services-hero {

    position: relative;

    width: 100%;

    min-height:
        100svh;

    min-height:
        100vh;

    display: flex;

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

    overflow: hidden;

    background-image:
        url("../images/services/1.png");

    background-size: cover;

    background-position: center;

    isolation: isolate;

}


.services-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(4, 17, 38, 0.88),
            rgba(7, 27, 58, 0.55)
        );

    z-index: -1;

}


.services-hero::after {

    content: "";

    position: absolute;

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

    height: 35%;

    background:
        linear-gradient(
            to top,
            rgba(183, 230, 0, 0.18),
            transparent
        );

    pointer-events: none;

}


.services-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            transparent 10%,
            rgba(4, 17, 38, 0.3) 100%
        );

    z-index: -1;

}


.services-hero-content {

    width:
        min(900px, 90%);

    text-align:
        center;

    color:
        var(--white);

    padding:
        120px 20px 50px;

    opacity:
        0;

    transform:
        translateY(40px);

    transition:
        opacity 1s ease,
        transform 1s ease;

}


.services-hero.visible
.services-hero-content {

    opacity:
        1;

    transform:
        translateY(0);

}


.services-hero-eyebrow {

    display:
        inline-block;

    margin-bottom:
        0;

    color:
        var(--lime);

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

    line-height:
        0.9;

    font-weight:
        800;

    letter-spacing:
        0;

}


.services-hero h1 {

    margin-bottom:
        20px;

    font-size:
        clamp(
            42px,
            8vw,
            100px
        );

    line-height:
        0.95;

    font-weight:
        800;

    letter-spacing:
        -0.045em;

    overflow-wrap:
        break-word;

}


.services-hero p {

    width:
        min(650px, 100%);

    margin:
        0 auto 34px;

    font-size:
        clamp(
            14px,
            1.5vw,
            19px
        );

    line-height:
        1.8;

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

}


.hero-scroll-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    max-width:
        100%;

    padding:
        14px 22px;

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

    border-radius:
        999px;

    color:
        var(--white);

    font-size:
        13px;

    font-weight:
        600;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;

}


.hero-scroll-button:hover {

    background:
        var(--lime);

    color:
        var(--navy);

    transform:
        translateY(-3px);

}


/* =========================================================
   SHORT LANDSCAPE DEVICES
========================================================= */

@media (
    max-height: 650px
) and (
    min-width: 901px
) {

    .services-hero-content {
        padding-top: 90px;
        padding-bottom: 30px;
    }


    .services-hero-eyebrow {
        font-size: clamp(40px, 7vw, 72px);
    }


    .services-hero h1 {
        font-size: clamp(40px, 7vw, 72px);
        margin-bottom: 12px;
    }


    .services-hero p {
        margin-bottom: 20px;
        line-height: 1.5;
    }

}


/* =========================================================
   MAIN SERVICES AREA
========================================================= */

.services-main {

    position: relative;

    width: 100%;

    background:
        var(--white);

}


.services-content {
    width: 100%;
}


/* =========================================================
   SERVICE SECTIONS
========================================================= */

.service-section {

    position: relative;

    width: 100%;

    min-height:
        100vh;

    min-height:
        100svh;

    overflow: hidden;

    display: flex;

    align-items: center;

    background:
        var(--white);

    scroll-margin-top:
        0;

    opacity:
        0;

    transform:
        translateY(60px);

    transition:
        opacity 0.9s ease,
        transform 0.9s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.service-section.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


.service-section:nth-child(even) {
    background:
        #fafcfd;
}


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

.service-container {

    position:
        relative;

    width:
        min(1240px, 90%);

    min-height:
        100vh;

    margin:
        0 auto;

    padding:
        100px 40px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        clamp(
            45px,
            7vw,
            110px
        );

}


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

.service-content-column {

    width:
        100%;

    max-width:
        590px;

    position:
        relative;

    z-index:
        3;

}


.service-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        22px;

    color:
        var(--lime-dark);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.2em;

}


.service-eyebrow::before {

    content:
        "";

    width:
        30px;

    height:
        2px;

    flex-shrink:
        0;

    background:
        var(--lime);

}


.service-content-column h2 {

    margin-bottom:
        28px;

    color:
        var(--navy);

    font-size:
        clamp(
            36px,
            4.5vw,
            65px
        );

    line-height:
        1.02;

    letter-spacing:
        -0.045em;

    font-weight:
        800;

    overflow-wrap:
        break-word;

}


.service-lead {

    margin-bottom:
        18px;

    color:
        var(--navy);

    font-size:
        clamp(
            17px,
            1.5vw,
            21px
        );

    line-height:
        1.65;

    font-weight:
        500;

}


.service-content-column p:not(.service-lead) {

    max-width:
        560px;

    margin-bottom:
        30px;

    color:
        var(--text-light);

    font-size:
        14px;

    line-height:
        1.9;

}


/* =========================================================
   SERVICE BUTTON
========================================================= */

.service-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    max-width:
        100%;

    padding:
        14px 21px;

    border-radius:
        999px;

    background:
        var(--navy);

    color:
        var(--white);

    font-size:
        12px;

    font-weight:
        700;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;

}


.service-button i {

    color:
        var(--lime);

    transition:
        transform 0.3s ease;

}


.service-button:hover {

    transform:
        translateY(-3px);

    background:
        var(--blue);

    box-shadow:
        0 12px 30px
        rgba(
            7,
            27,
            58,
            0.18
        );

}


.service-button:hover i {

    transform:
        translateX(4px);

}


/* =========================================================
   SERVICE VISUAL
   IMPORTANT:
   Prevent 200% width overflow
========================================================= */

.section-visual {

    position:
        relative;

    width:
        100%;

    max-width:
        600px;

    margin-left:
        auto;

    --mouse-x:
        0px;

    --mouse-y:
        0px;

    transform:
        translate(
            var(--mouse-x),
            var(--mouse-y)
        );

    transition:
        transform 0.2s ease-out;

}


.image-frame {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        4 / 5;

    overflow:
        hidden;

    background:
        var(--navy);

    box-shadow:
        0 35px 80px
        rgba(
            7,
            27,
            58,
            0.16
        );

}


.image-frame::before {

    content:
        "";

    position:
        absolute;

    inset:
        18px;

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

    z-index:
        2;

    pointer-events:
        none;

}


.image-frame::after {

    content:
        "";

    position:
        absolute;

    right:
        -25px;

    bottom:
        -25px;

    width:
        100px;

    height:
        100px;

    background:
        var(--lime);

    z-index:
        0;

}


.image-frame img {

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.035)
        translateY(
            var(--scroll-y, 0px)
        );

    transition:
        transform 0.35s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


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

.service-summary {
    background:
        var(--white);
}


.service-summary
.service-container {

    padding-top:
        120px;

}


/* =========================================================
   SERVICES CONTACT CTA
========================================================= */

.services-contact {

    position:
        relative;

    width:
        100%;

    min-height:
        80vh;

    min-height:
        80svh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background-image:
        url("../images/services/9.jpg");

    background-size:
        cover;

    background-position:
        center;

    isolation:
        isolate;

}


.services-contact::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            135deg,
            rgba(4, 17, 38, 0.91),
            rgba(7, 27, 58, 0.62)
        );

    z-index:
        -2;

}


.services-contact::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at center,
            transparent 0%,
            rgba(4, 17, 38, 0.4) 100%
        );

    z-index:
        -1;

}


.services-contact-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(183, 230, 0, 0.14),
            transparent 45%
        );

}


.services-contact-content {

    position:
        relative;

    z-index:
        2;

    width:
        min(850px, 90%);

    text-align:
        center;

    color:
        var(--white);

    padding:
        100px 0;

    opacity:
        0;

    transform:
        translateY(60px)
        scale(0.97);

    transition:
        opacity 1s ease,
        transform 1s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.services-contact.visible
.services-contact-content {

    opacity:
        1;

    transform:
        translateY(0)
        scale(1);

}


.services-contact-eyebrow {

    display:
        block;

    margin-bottom:
        20px;

    color:
        var(--lime);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.25em;

}


.services-contact h2 {

    margin-bottom:
        24px;

    font-size:
        clamp(
            42px,
            7vw,
            88px
        );

    line-height:
        0.98;

    font-weight:
        800;

    letter-spacing:
        -0.05em;

    overflow-wrap:
        break-word;

}


.services-contact p {

    width:
        min(650px, 100%);

    margin:
        0 auto 35px;

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

    font-size:
        clamp(
            14px,
            1.5vw,
            18px
        );

    line-height:
        1.8;

}


.services-contact-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    max-width:
        100%;

    padding:
        16px 25px;

    border-radius:
        999px;

    background:
        var(--lime);

    color:
        var(--navy);

    font-size:
        13px;

    font-weight:
        800;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;

}


.services-contact-button:hover {

    transform:
        translateY(-4px);

    background:
        #c8f500;

    box-shadow:
        0 18px 45px
        rgba(
            183,
            230,
            0,
            0.25
        );

}


.services-contact-button i {

    transition:
        transform 0.3s ease;

}


.services-contact-button:hover i {

    transform:
        translateX(4px);

}


/* =========================================================
   SERVICE SECTION — LARGE TABLETS
========================================================= */

@media (max-width: 1100px) {

    .service-container {

        width:
            min(920px, 90%);

        padding:
            90px 20px;

        gap:
            45px;

    }


    .service-content-column h2 {

        font-size:
            clamp(
                34px,
                5vw,
                54px
            );

    }


    .section-visual {

        max-width:
            500px;

    }


    .image-frame::before {
        inset: 14px;
    }

}


/* =========================================================
   TABLET SERVICE SECTIONS
========================================================= */

@media (max-width: 900px) {

    .service-section {

        min-height:
            auto;

        display:
            block;

    }


    .service-container {

        width:
            min(720px, 88%);

        min-height:
            auto;

        padding:
            90px 0;

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            55px;

    }


    .service-content-column {

        max-width:
            100%;

    }


    .service-content-column h2 {

        font-size:
            clamp(
                38px,
                7vw,
                58px
            );

    }


    .service-lead {

        font-size:
            clamp(
                16px,
                2.3vw,
                20px
            );

    }


    .service-content-column p:not(.service-lead) {

        max-width:
            100%;

    }


    .section-visual {

        width:
            min(600px, 100%);

        max-width:
            600px;

        margin:
            0 auto;

    }


    .image-frame {

        aspect-ratio:
            4 / 5;

    }


    .service-summary
    .service-container {

        padding-top:
            90px;

    }


    .services-contact {

        min-height:
            70svh;

    }


    .services-contact-content {

        padding:
            80px 0;

    }

}


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

@media (
    min-width: 601px
) and (
    max-width: 900px
) and (
    orientation: landscape
) {

    .service-container {

        padding:
            75px 0;

    }


    .service-section {

        min-height:
            auto;

    }


    .services-contact-content {

        padding:
            70px 0;

    }

}


/* =========================================================
   MOBILE SERVICE SECTIONS
========================================================= */

@media (max-width: 600px) {

    .service-container {

        width:
            88%;

        padding:
            70px 0;

        gap:
            42px;

    }


    .service-eyebrow {

        margin-bottom:
            17px;

        font-size:
            9px;

        letter-spacing:
            0.17em;

    }


    .service-eyebrow::before {

        width:
            24px;

    }


    .service-content-column h2 {

        margin-bottom:
            20px;

        font-size:
            clamp(
                34px,
                10vw,
                48px
            );

        line-height:
            1.02;

        letter-spacing:
            -0.04em;

    }


    .service-lead {

        margin-bottom:
            15px;

        font-size:
            16px;

        line-height:
            1.6;

    }


    .service-content-column p:not(.service-lead) {

        margin-bottom:
            25px;

        font-size:
            13px;

        line-height:
            1.8;

    }


    .service-button {

        padding:
            13px 18px;

        font-size:
            11px;

    }


    .section-visual {

        width:
            100%;

        max-width:
            100%;

    }


    .image-frame {

        width:
            100%;

        aspect-ratio:
            4 / 5;

    }


    .image-frame::before {

        inset:
            12px;

    }


    .image-frame::after {

        right:
            -18px;

        bottom:
            -18px;

        width:
            75px;

        height:
            75px;

    }


    .service-summary
    .service-container {

        padding-top:
            70px;

    }


    .services-contact {

        min-height:
            65svh;

    }


    .services-contact-content {

        width:
            88%;

        padding:
            70px 0;

    }


    .services-contact-eyebrow {

        margin-bottom:
            15px;

        font-size:
            9px;

        letter-spacing:
            0.2em;

    }


    .services-contact h2 {

        margin-bottom:
            18px;

        font-size:
            clamp(
                38px,
                11vw,
                58px
            );

    }


    .services-contact p {

        margin-bottom:
            27px;

        font-size:
            13px;

        line-height:
            1.7;

    }


    .services-contact-button {

        padding:
            14px 21px;

        font-size:
            11px;

    }

}


/* =========================================================
   VERY SMALL PHONES — 320px / 360px
========================================================= */

@media (max-width: 380px) {

    .service-container {

        width:
            90%;

        padding:
            60px 0;

        gap:
            35px;

    }


    .service-content-column h2 {

        font-size:
            32px;

    }


    .service-lead {

        font-size:
            15px;

    }


    .service-content-column p:not(.service-lead) {

        font-size:
            12.5px;

    }


    .service-button {

        width:
            100%;

    }


    .services-contact-content {

        width:
            90%;

    }


    .services-contact h2 {

        font-size:
            35px;

    }

}


/* =========================================================
   SECTION 12 — FREE SERVICE CATALOG
========================================================= */

#neat-section-12 {

    --neat12-lime:
        #b7e600;

    --neat12-lime-dark:
        #91b800;

    --neat12-navy:
        #071b3a;

    --neat12-navy-dark:
        #041126;

    --neat12-text:
        #17233a;

    --neat12-muted:
        #687386;

    position:
        relative;

    width:
        100%;

    min-height:
        120vh;

    background:
        #ffffff;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

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

    isolation:
        isolate;

}


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

#neat-section-12 .neat12-container {

    width:
        min(1200px, 90%);

    min-height:
        100%;

    margin:
        0 auto;

    display:
        grid;

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

    align-items:
        center;

    gap:
        70px;

    position:
        relative;

    z-index:
        2;

}


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

#neat-section-12 .neat12-left {

    width:
        100%;

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    position:
        relative;

    opacity:
        0;

    transform:
        translateX(-70px)
        scale(.96);

    transition:
        opacity .9s ease,
        transform 1s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}


#neat-section-12.neat12-visible
.neat12-left {

    opacity:
        1;

    transform:
        translateX(0)
        scale(1);

}


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

#neat-section-12
.neat12-image-wrap {

    position:
        relative;

    width:
        min(470px, 100%);

    aspect-ratio:
        4 / 3;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


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

#neat-section-12
.neat12-image-glow {

    position:
        absolute;

    width:
        75%;

    height:
        75%;

    background:
        radial-gradient(
            circle,
            rgba(183, 230, 0, .24),
            transparent 70%
        );

    filter:
        blur(35px);

    z-index:
        -1;

    transform:
        translate(
            -10px,
            20px
        );

}


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

#neat-section-12
.neat12-catalog-card {

    position:
        relative;

    width:
        82%;

    height:
        140%;

    max-height:
        680px;

    background:
        #ffffff;

    padding:
        12px;

    border-radius:
        4px;

    box-shadow:
        0 30px 70px
        rgba(7, 27, 58, .16),
        0 8px 25px
        rgba(7, 27, 58, .08);

    transform:
        rotate(-2deg)
        translateY(20px);

    opacity:
        0;

    transition:
        opacity 1s ease .15s,
        transform 1.2s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}


#neat-section-12.neat12-visible
.neat12-catalog-card {

    opacity:
        1;

    transform:
        rotate(-2deg)
        translateY(0);

}


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

#neat-section-12
.neat12-catalog-image {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    border-radius:
        2px;

    transition:
        transform 1.2s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}


#neat-section-12.neat12-scroll-down
.neat12-catalog-image {

    transform:
        scale(1.035)
        translateY(-5px);

}


#neat-section-12.neat12-scroll-up
.neat12-catalog-image {

    transform:
        scale(1.02)
        translateY(5px);

}


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

#neat-section-12
.neat12-floating-label {

    position:
        absolute;

    left:
        0;

    bottom:
        8%;

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

    padding:
        12px 18px;

    background:
        var(--neat12-navy);

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

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

    opacity:
        0;

    transform:
        translateX(-25px);

    transition:
        opacity .8s ease .4s,
        transform .8s ease .4s;

}


#neat-section-12.neat12-visible
.neat12-floating-label {

    opacity:
        1;

    transform:
        translateX(0);

}


#neat-section-12
.neat12-label-dot {

    width:
        7px;

    height:
        7px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        var(--neat12-lime);

    box-shadow:
        0 0 0 4px
        rgba(
            183,
            230,
            0,
            .12
        );

}


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

#neat-section-12
.neat12-right {

    width:
        100%;

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    height:
        100%;

    opacity:
        0;

    transform:
        translateX(70px);

    transition:
        opacity .9s ease .1s,
        transform 1s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}


#neat-section-12.neat12-visible
.neat12-right {

    opacity:
        1;

    transform:
        translateX(0);

}


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

#neat-section-12
.neat12-content {

    width:
        100%;

    max-width:
        520px;

}


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

#neat-section-12
.neat12-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        14px;

    color:
        var(--neat12-navy);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        3px;

}


#neat-section-12
.neat12-eyebrow::before {

    content:
        "";

    display:
        block;

    width:
        35px;

    height:
        3px;

    flex-shrink:
        0;

    background:
        var(--neat12-lime);

}


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

#neat-section-12
.neat12-title {

    margin:
        0;

    color:
        var(--neat12-navy);

    font-size:
        clamp(
            36px,
            4vw,
            58px
        );

    line-height:
        .98;

    letter-spacing:
        -2.5px;

    font-weight:
        800;

    overflow-wrap:
        break-word;

}


#neat-section-12
.neat12-title span {

    color:
        var(--neat12-lime-dark);

    position:
        relative;

}


#neat-section-12
.neat12-title span::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        -5px;

    height:
        4px;

    background:
        var(--neat12-lime);

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform .8s ease .8s;

}


#neat-section-12.neat12-visible
.neat12-title span::after {

    transform:
        scaleX(1);

}


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

#neat-section-12
.neat12-description {

    margin:
        22px 0 28px;

    max-width:
        500px;

    color:
        var(--neat12-muted);

    font-size:
        14px;

    line-height:
        1.75;

}


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

#neat-section-12
.neat12-form {

    width:
        100%;

}


#neat-section-12
.neat12-form-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        24px;

}


#neat-section-12
.neat12-field {

    position:
        relative;

    min-width:
        0;

    margin-bottom:
        20px;

}


#neat-section-12
.neat12-field label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--neat12-navy);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;

}


#neat-section-12
.neat12-field input {

    display:
        block;

    width:
        100%;

    height:
        40px;

    padding:
        0 0 8px;

    border:
        none;

    border-radius:
        0;

    outline:
        none;

    background:
        transparent;

    color:
        var(--neat12-navy);

    font-family:
        inherit;

    font-size:
        14px;

    border-bottom:
        1px solid
        #d7dce3;

    transition:
        border-color .3s ease;

}


#neat-section-12
.neat12-field input::placeholder {

    color:
        #a2a9b4;

    font-size:
        13px;

}


#neat-section-12
.neat12-field input:focus {

    border-bottom-color:
        var(--neat12-lime-dark);

}


#neat-section-12
.neat12-email-field {

    margin-bottom:
        18px;

}


/* =========================================================
   RECAPTCHA
========================================================= */

#neat-section-12
.neat12-recaptcha {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        7px;

    margin:
        3px 0 20px;

    max-width:
        500px;

}


#neat-section-12
.neat12-recaptcha-icon {

    flex-shrink:
        0;

    width:
        25px;

    height:
        17px;

    border-radius:
        4px;

    background:
        #f1f4f7;

    color:
        #607080;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        11px;

}


#neat-section-12
.neat12-recaptcha p {

    margin:
        0;

    color:
        #8a929d;

    font-size:
        10px;

    line-height:
        1.55;

}


#neat-section-12
.neat12-recaptcha a {

    color:
        #687584;

    text-decoration:
        underline;

    text-underline-offset:
        2px;

}


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

#neat-section-12
.neat12-button {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    min-width:
        225px;

    min-height:
        52px;

    height:
        auto;

    padding:
        9px 10px;

    border:
        none;

    border-radius:
        0;

    background:
        var(--neat12-navy);

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    cursor:
        pointer;

    overflow:
        hidden;

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}


#neat-section-12
.neat12-button::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        var(--neat12-lime);

    transform:
        translateX(-101%);

    transition:
        transform .4s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

    z-index:
        0;

}


#neat-section-12
.neat12-button:hover::before {

    transform:
        translateX(0);

}


#neat-section-12
.neat12-button:hover {

    color:
        var(--neat12-navy);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px
        rgba(
            7,
            27,
            58,
            .16
        );

}


#neat-section-12
.neat12-button-text,
#neat-section-12
.neat12-button-icon {

    position:
        relative;

    z-index:
        2;

}


#neat-section-12
.neat12-button-icon {

    width:
        34px;

    height:
        34px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--neat12-lime);

    color:
        var(--neat12-navy);

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

}


#neat-section-12
.neat12-button:hover
.neat12-button-icon {

    transform:
        translateX(4px);

    background:
        var(--neat12-navy);

    color:
        var(--neat12-lime);

}


/* =========================================================
   SUCCESS
========================================================= */

#neat-section-12
.neat12-success {

    display:
        none;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        18px;

    padding:
        13px 16px;

    background:
        #f5f9e7;

    border-left:
        4px solid
        var(--neat12-lime-dark);

    color:
        var(--neat12-navy);

}


#neat-section-12
.neat12-success.show {

    display:
        flex;

    animation:
        neat12SuccessIn .5s ease both;

}


#neat-section-12
.neat12-success-icon {

    width:
        30px;

    height:
        30px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        var(--neat12-lime);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--neat12-navy);

    font-size:
        12px;

}


#neat-section-12
.neat12-success strong {

    display:
        block;

    font-size:
        12px;

}


#neat-section-12
.neat12-success p {

    margin:
        2px 0 0;

    color:
        var(--neat12-muted);

    font-size:
        11px;

}


/* =========================================================
   VALIDATION
========================================================= */

#neat-section-12
.neat12-field.error input {

    border-bottom-color:
        #d64242;

}


#neat-section-12
.neat12-field.valid input {

    border-bottom-color:
        var(--neat12-lime-dark);

}


/* =========================================================
   SCROLL EFFECTS
========================================================= */

#neat-section-12.neat12-scroll-down
.neat12-left {

    transform:
        translateY(-5px);

}


#neat-section-12.neat12-scroll-down
.neat12-right {

    transform:
        translateY(-3px);

}


#neat-section-12.neat12-scroll-up
.neat12-left {

    transform:
        translateY(5px);

}


#neat-section-12.neat12-scroll-up
.neat12-right {

    transform:
        translateY(3px);

}


/* =========================================================
   KEYFRAME
========================================================= */

@keyframes neat12SuccessIn {

    from {

        opacity:
            0;

        transform:
            translateY(10px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   CATALOG — LARGE TABLET
========================================================= */

@media (max-width: 1000px) {

    #neat-section-12 {

        min-height:
            auto;

        padding:
            90px 0;

    }


    #neat-section-12
    .neat12-container {

        width:
            min(720px, 88%);

        grid-template-columns:
            1fr;

        gap:
            60px;

    }


    #neat-section-12
    .neat12-left {

        height:
            auto;

    }


    #neat-section-12
    .neat12-image-wrap {

        width:
            min(480px, 100%);

        aspect-ratio:
            4 / 3;

    }


    #neat-section-12
    .neat12-catalog-card {

        width:
            82%;

        height:
            100%;

        max-height:
            none;

    }


    #neat-section-12
    .neat12-right {

        height:
            auto;

        justify-content:
            center;

    }


    #neat-section-12
    .neat12-content {

        max-width:
            600px;

    }

}


/* =========================================================
   CATALOG — TABLET
========================================================= */

@media (max-width: 768px) {

    #neat-section-12 {

        padding:
            80px 0;

    }


    #neat-section-12
    .neat12-container {

        width:
            88%;

        gap:
            50px;

    }


    #neat-section-12
    .neat12-image-wrap {

        width:
            min(500px, 100%);

    }


    #neat-section-12
    .neat12-catalog-card {

        width:
            82%;

    }


    #neat-section-12
    .neat12-title {

        font-size:
            clamp(
                36px,
                7vw,
                52px
            );

    }

}


/* =========================================================
   CATALOG — MOBILE
========================================================= */

@media (max-width: 600px) {

    #neat-section-12 {

        min-height:
            auto;

        padding:
            65px 0 75px;

    }


    #neat-section-12
    .neat12-container {

        width:
            88%;

        gap:
            42px;

    }


    #neat-section-12
    .neat12-image-wrap {

        width:
            100%;

        aspect-ratio:
            4 / 3;

    }


    #neat-section-12
    .neat12-catalog-card {

        width:
            86%;

        height:
            88%;

        padding:
            8px;

    }


    #neat-section-12
    .neat12-floating-label {

        left:
            0;

        bottom:
            4%;

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

        padding:
            10px 13px;

        font-size:
            8px;

        letter-spacing:
            1.5px;

    }


    #neat-section-12
    .neat12-eyebrow {

        font-size:
            9px;

        letter-spacing:
            2px;

    }


    #neat-section-12
    .neat12-eyebrow::before {

        width:
            25px;

    }


    #neat-section-12
    .neat12-title {

        font-size:
            clamp(
                34px,
                11vw,
                48px
            );

        letter-spacing:
            -1.8px;

    }


    #neat-section-12
    .neat12-description {

        margin:
            18px 0 25px;

        font-size:
            13px;

        line-height:
            1.7;

    }


    #neat-section-12
    .neat12-form-row {

        grid-template-columns:
            1fr;

        gap:
            0;

    }


    #neat-section-12
    .neat12-field {

        margin-bottom:
            18px;

    }


    #neat-section-12
    .neat12-recaptcha {

        margin-bottom:
            20px;

    }


    #neat-section-12
    .neat12-button {

        width:
            100%;

        min-width:
            0;

    }


    #neat-section-12
    .neat12-success {

        align-items:
            flex-start;

    }

}


/* =========================================================
   CATALOG — VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    #neat-section-12 {

        padding:
            55px 0 65px;

    }


    #neat-section-12
    .neat12-container {

        width:
            90%;

        gap:
            35px;

    }


    #neat-section-12
    .neat12-title {

        font-size:
            32px;

    }


    #neat-section-12
    .neat12-description {

        font-size:
            12.5px;

    }


    #neat-section-12
    .neat12-catalog-card {

        width:
            88%;

    }


    #neat-section-12
    .neat12-button {

        min-height:
            50px;

    }

}


/* =========================================================
   CATALOG — LANDSCAPE MOBILE
========================================================= */

@media (
    max-width: 900px
) and (
    orientation: landscape
) and (
    max-height: 600px
) {

    #neat-section-12 {

        padding:
            70px 0;

    }


    #neat-section-12
    .neat12-container {

        grid-template-columns:
            1fr 1fr;

        width:
            90%;

        gap:
            35px;

    }


    #neat-section-12
    .neat12-image-wrap {

        max-width:
            360px;

    }


    #neat-section-12
    .neat12-right {

        height:
            auto;

    }


    #neat-section-12
    .neat12-title {

        font-size:
            clamp(
                30px,
                5vw,
                44px
            );

    }


    #neat-section-12
    .neat12-description {

        margin:
            14px 0 18px;

        font-size:
            12px;

    }


    #neat-section-12
    .neat12-field {

        margin-bottom:
            12px;

    }

}


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

.neat-footer {

    --footer-navy:
        #071b3a;

    --footer-lime:
        #b8f000;

    --footer-white:
        #ffffff;

    position:
        relative;

    width:
        100%;

    min-height:
        45px;

    height:
        5vh;

    background:
        var(--footer-navy);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    box-sizing:
        border-box;

}


.neat-footer-line {

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        2px;

    background:
        var(--footer-lime);

    transform:
        scaleX(.4);

    transition:
        transform .8s ease;

}


.neat-footer-content {

    width:
        100%;

    padding:
        0 15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

}


.neat-footer-copyright {

    margin:
        0;

    color:
        var(--footer-white);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        .5px;

    line-height:
        1;

    text-align:
        center;

}


.neat-footer-copyright p {

    margin:
        0;

    font-size:
        8px;

    letter-spacing:
        .7px;

}


.neat-footer-copyright span {

    color:
        var(--lime);

}


.neat-footer-brand,
.neat-footer-accent {

    display:
        none;

}


.neat-footer:hover
.neat-footer-line {

    transform:
        scaleX(1);

}


/* =========================================================
   FOOTER — MOBILE
========================================================= */

@media (max-width: 768px) {

    .neat-footer {

        height:
            auto;

        min-height:
            45px;

        padding:
            12px 0;

    }


    .neat-footer-copyright {

        font-size:
            10px;

        padding:
            0 15px;

        letter-spacing:
            .2px;

        line-height:
            1.4;

    }


    .neat-footer-copyright p {

        font-size:
            7.5px;

        line-height:
            1.4;

    }

}


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

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

    html {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;

    }

}