/* =========================================================
   HARGIS BUSINESS SERVICES
   MAIN WEBSITE STYLESHEET
========================================================= */

:root {

    --bg: #f5f5f2;
    --surface: #ffffff;
    --surface-dark: #101418;
    --text: #11161a;
    --muted: #667078;
    --line: #dfe3e4;

    --accent: #c8ff32;
    --accent-dark: #9cc900;

    --dark: #101418;
    --dark-soft: #171d21;

    --max-width: 1240px;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;

    --shadow:
        0 20px 60px rgba(10, 15, 20, 0.08);

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

}

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

html {
    scroll-behavior: smooth;
}

body {

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

    background: var(--bg);

    color: var(--text);

    overflow-x: hidden;

    line-height: 1.6;

}

body.modal-open {
    overflow: hidden;
}

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

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

.container {

    width: min(
        calc(100% - 48px),
        var(--max-width)
    );

    margin: 0 auto;

}

.section {
    padding: 130px 0;
}

.section-small {
    padding: 70px 0;
}


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

.background-grid {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: -10;

    opacity: 0.28;

    background-image:

        linear-gradient(
            rgba(15, 20, 25, 0.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(15, 20, 25, 0.045) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

}

.ambient {

    position: fixed;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;

    z-index: -9;

    opacity: 0.12;

}

.ambient-one {

    background: var(--accent);

    top: -250px;
    right: -200px;

}

.ambient-two {

    background: #89a3ff;

    bottom: -250px;
    left: -200px;

}

.ambient-three {

    background: #ffffff;

    top: 35%;
    left: 40%;

}


/* =========================================================
   LOADER
========================================================= */

.page-loader {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 25px;

    background: var(--dark);

    transition:
        opacity 0.6s ease,
        visibility 0.6s ease;

}

.page-loader.hidden {

    opacity: 0;

    visibility: hidden;

}

.loader-logo {

    color: white;

    font-family: "Manrope", sans-serif;

    font-size: 28px;

    font-weight: 800;

    letter-spacing: 0.08em;

}

.loader-logo span {
    color: var(--accent);
}

.loader-line {

    width: 160px;

    height: 2px;

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

    overflow: hidden;

}

.loader-line span {

    display: block;

    width: 45%;

    height: 100%;

    background: var(--accent);

    animation: loader 1.2s ease-in-out infinite;

}

@keyframes loader {

    0% {
        transform: translateX(-150%);
    }

    100% {
        transform: translateX(350%);
    }

}


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

.site-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    padding: 20px 0;

    transition:
        background var(--transition),
        padding var(--transition),
        box-shadow var(--transition);

}

.site-header.scrolled {

    padding: 12px 0;

    background:
        rgba(245,245,242,0.88);

    backdrop-filter: blur(20px);

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

}

.nav-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}

.brand {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    flex-shrink: 0;

}

.brand-mark {

    display: grid;

    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: 11px;

    background: var(--dark);

    color: var(--accent);

    font-family: "Manrope", sans-serif;

    font-weight: 800;

    font-size: 18px;

}

.brand-text {

    display: flex;

    flex-direction: column;

    font-family: "Manrope", sans-serif;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 0.12em;

    line-height: 1;

}

.brand-text small {

    margin-top: 5px;

    color: var(--muted);

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

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.18em;

}

.desktop-nav {

    display: flex;

    align-items: center;

    gap: 28px;

}

.desktop-nav a {

    position: relative;

    color: #3f484e;

    font-size: 13px;

    font-weight: 600;

    transition: color var(--transition);

}

.desktop-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 2px;

    background: var(--dark);

    transition: width var(--transition);

}

.desktop-nav a:hover {
    color: var(--dark);
}

.desktop-nav a:hover::after {
    width: 100%;
}

.nav-button {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 13px 18px;

    border-radius: 8px;

    background: var(--dark);

    color: white;

    font-size: 12px;

    font-weight: 700;

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

}

.nav-button span {

    color: var(--accent);

    font-size: 16px;

}

.nav-button:hover {

    transform: translateY(-2px);

    background: #20272c;

}

.mobile-menu-button {

    display: none;

    border: 0;

    background: transparent;

    width: 42px;
    height: 42px;

    flex-direction: column;

    justify-content: center;

    gap: 5px;

}

.mobile-menu-button span {

    width: 25px;

    height: 2px;

    background: var(--dark);

    transition: var(--transition);

}

.mobile-nav {

    display: none;

}


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

.hero {

    min-height: 900px;

    display: flex;

    align-items: center;

    position: relative;

    padding-top: 170px;

    overflow: hidden;

}

.hero-container {

    display: grid;

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

    align-items: center;

    gap: 80px;

}

.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 22px;

    color: #6d767c;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.18em;

}

.eyebrow.light {
    color: rgba(255,255,255,0.65);
}

.status-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 0 0 5px rgba(200,255,50,0.12);

    animation:
        pulse-dot 2s ease-in-out infinite;

}

@keyframes pulse-dot {

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

    50% {
        transform: scale(1.35);
    }

}

.hero h1 {

    max-width: 760px;

    font-family: "Manrope", sans-serif;

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

    font-weight: 800;

    line-height: 0.98;

    letter-spacing: -0.065em;

}

.hero h1 span {

    display: block;

    color: #8b9499;

}

.hero-description {

    max-width: 610px;

    margin-top: 30px;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.8;

}

.hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 38px;

}

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    min-height: 55px;

    padding: 0 22px;

    border-radius: 9px;

    font-size: 12px;

    font-weight: 800;

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

}

.button-primary {

    background: var(--dark);

    color: white;

}

.button-primary:hover {

    transform: translateY(-3px);

    background: #252d32;

}

.button-primary .button-arrow {

    color: var(--accent);

    font-size: 17px;

}

.button-secondary {

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

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

    color: var(--dark);

}

.button-secondary:hover {

    transform: translateY(-3px);

    border-color: #bfc5c8;

}

.hero-trust {

    display: flex;

    align-items: center;

    gap: 35px;

    margin-top: 55px;

    padding-top: 24px;

    border-top: 1px solid var(--line);

}

.trust-item {

    display: flex;

    flex-direction: column;

    gap: 3px;

}

.trust-item strong {

    font-family: "Manrope", sans-serif;

    font-size: 18px;

}

.trust-item span {

    color: var(--muted);

    font-size: 10px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.08em;

}


/* HERO VISUAL */

.hero-visual {

    position: relative;

    min-height: 580px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.hero-card-main {

    position: relative;

    width: 430px;

    min-height: 490px;

    padding: 25px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #1a2126,
            #0c1013
        );

    box-shadow:
        0 40px 90px rgba(10,15,20,0.25);

    transform:
        rotate(3deg);

    transition:
        transform 0.8s cubic-bezier(.22,1,.36,1);

}

.hero-card-main:hover {

    transform:
        rotate(0deg)
        translateY(-8px);

}

.card-topline {

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.14em;

}

.live-indicator {

    display: flex;

    align-items: center;

    gap: 7px;

    color: var(--accent);

}

.live-indicator::before {

    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--accent);

    animation: pulse-dot 1.6s infinite;

}

.document-preview {

    margin-top: 55px;

    padding: 26px;

    border-radius: 18px;

    background: #f2f3ee;

    min-height: 310px;

}

.document-header {

    display: flex;

    align-items: center;

    gap: 14px;

}

.document-symbol {

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    background: var(--dark);

    color: var(--accent);

    border-radius: 9px;

    font-weight: 800;

}

.document-header strong {

    display: block;

    font-size: 10px;

    letter-spacing: 0.08em;

}

.document-header span {

    display: block;

    margin-top: 2px;

    color: #7b8489;

    font-size: 9px;

}

.document-lines {

    margin-top: 45px;

    display: flex;

    flex-direction: column;

    gap: 14px;

}

.document-lines span {

    height: 7px;

    border-radius: 10px;

    background: #d8dcd8;

}

.document-lines span:nth-child(1) {
    width: 90%;
}

.document-lines span:nth-child(2) {
    width: 74%;
}

.document-lines span:nth-child(3) {
    width: 83%;
}

.document-lines span:nth-child(4) {
    width: 58%;
}

.document-signature {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 40px;

}

.document-signature small {

    display: block;

    color: #8a9295;

    font-size: 8px;

}

.document-signature strong {

    display: block;

    margin-top: 4px;

    font-size: 10px;

}

.check-circle {

    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--accent);

    color: var(--dark);

    font-weight: 800;

}

.hero-card-footer {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 20px;

    margin-top: 28px;

}

.hero-card-footer small {

    display: block;

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

    font-size: 8px;

}

.hero-card-footer strong {

    display: block;

    margin-top: 3px;

    color: white;

    font-size: 12px;

}

.progress {

    width: 180px;

    height: 4px;

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

    overflow: hidden;

}

.progress span {

    display: block;

    width: 75%;

    height: 100%;

    background: var(--accent);

    animation:
        progress-animation 3s ease-in-out infinite alternate;

}

@keyframes progress-animation {

    from {
        width: 40%;
    }

    to {
        width: 82%;
    }

}

.floating-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 14px 17px;

    border-radius: 14px;

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

    backdrop-filter: blur(15px);

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

    animation:
        float-card 4s ease-in-out infinite;

}

@keyframes float-card {

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

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

}

.floating-card-one {

    left: -20px;

    top: 120px;

}

.floating-card-two {

    right: -25px;

    bottom: 80px;

    animation-delay: -2s;

}

.floating-icon {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background: var(--dark);

    color: var(--accent);

    font-weight: 800;

}

.floating-card small {

    display: block;

    color: #7c8589;

    font-size: 8px;

}

.floating-card strong {

    display: block;

    font-size: 11px;

}

.mini-chart {

    display: flex;

    align-items: end;

    gap: 3px;

    height: 28px;

}

.mini-chart span {

    width: 4px;

    border-radius: 3px;

    background: var(--dark);

}

.mini-chart span:nth-child(1) {
    height: 40%;
}

.mini-chart span:nth-child(2) {
    height: 65%;
}

.mini-chart span:nth-child(3) {
    height: 50%;
}

.mini-chart span:nth-child(4) {
    height: 85%;
}

.mini-chart span:nth-child(5) {
    height: 100%;
}

.hero-scroll {

    position: absolute;

    left: 50%;

    bottom: 35px;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    color: #8b9397;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.18em;

}

.scroll-line {

    width: 1px;

    height: 50px;

    background: linear-gradient(
        to bottom,
        #8b9397,
        transparent
    );

    animation:
        scroll-line 2s infinite;

}

@keyframes scroll-line {

    0%,
    100% {
        opacity: .3;
        transform: scaleY(.6);
    }

    50% {
        opacity: 1;
        transform: scaleY(1);
    }

}


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

.marquee-section {

    padding: 22px 0;

    overflow: hidden;

    background: var(--dark);

    color: white;

}

.marquee-track {

    display: flex;

    width: max-content;

    align-items: center;

    gap: 35px;

    animation:
        marquee 35s linear infinite;

}

.marquee-item {

    font-family: "Manrope", sans-serif;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.14em;

    white-space: nowrap;

}

.marquee-separator {

    color: var(--accent);

    font-size: 8px;

}

@keyframes marquee {

    from {
        transform: translateX(0);
    }

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

}


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

.stats-grid {

    display: grid;

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

    border-top: 1px solid var(--line);

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

}

.stat {

    min-height: 150px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 25px;

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

}

.stat:last-child {
    border-right: 0;
}

.stat strong {

    font-family: "Manrope", sans-serif;

    font-size: 45px;

    line-height: 1;

    letter-spacing: -0.06em;

}

.stat strong span {

    color: #8c969a;

}

.stat > span {

    margin-top: 9px;

    color: var(--muted);

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;

}


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

.section-heading {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, .7fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 70px;

}

.section-heading.centered {

    display: block;

    max-width: 760px;

    margin-left: auto;

    margin-right: auto;

    text-align: center;

}

.section-heading h2 {

    font-family: "Manrope", sans-serif;

    font-size: clamp(
        42px,
        5vw,
        68px
    );

    line-height: 1;

    letter-spacing: -0.055em;

}

.section-heading h2 span {

    color: #8c9599;

}

.section-heading > p {

    color: var(--muted);

    font-size: 15px;

    line-height: 1.8;

}


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

.services-section {

    background: #eeefec;

}

.services-grid {

    display: grid;

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

    gap: 16px;

}

.service-card {

    position: relative;

    min-height: 470px;

    display: flex;

    flex-direction: column;

    padding: 32px;

    border: 1px solid #dfe2df;

    border-radius: 20px;

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

    overflow: hidden;

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

}

.service-card::before {

    content: "";

    position: absolute;

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

    width: 230px;
    height: 230px;

    border-radius: 50%;

    background: var(--accent);

    opacity: 0;

    filter: blur(60px);

    transition:
        opacity var(--transition);

}

.service-card:hover {

    transform: translateY(-9px);

    background: white;

    border-color: #d2d6d2;

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

}

.service-card:hover::before {
    opacity: .18;
}

.service-number {

    color: #9ba3a6;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.14em;

}

.service-icon {

    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    margin-top: 45px;

    border-radius: 13px;

    background: var(--dark);

    color: var(--accent);

    font-family: "Manrope", sans-serif;

    font-weight: 800;

    transition:
        transform var(--transition);

}

.service-card:hover .service-icon {

    transform:
        rotate(-6deg)
        scale(1.05);

}

.service-card h3 {

    margin-top: 25px;

    font-family: "Manrope", sans-serif;

    font-size: 24px;

    letter-spacing: -0.04em;

}

.service-card p {

    margin-top: 10px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.7;

}

.service-card ul {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-top: 24px;

    padding: 0;

    list-style: none;

}

.service-card li {

    position: relative;

    padding-left: 17px;

    color: #566067;

    font-size: 11px;

}

.service-card li::before {

    content: "";

    position: absolute;

    left: 0;
    top: 8px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--accent-dark);

}

.service-link {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: auto;

    padding-top: 28px;

    color: var(--dark);

    font-size: 11px;

    font-weight: 800;

    border-top: 1px solid var(--line);

}

.service-link span {

    font-size: 17px;

    transition:
        transform var(--transition);

}

.service-link:hover span {

    transform:
        translate(4px,-4px);

}


/* =========================================================
   ABOUT
========================================================= */

.about-section {

    background: var(--dark);

    color: white;

}

.about-grid {

    display: grid;

    grid-template-columns:
        .9fr
        1fr;

    gap: 110px;

    align-items: center;

}

.about-visual {

    min-height: 560px;

}

.about-panel {

    position: relative;

    min-height: 560px;

    border-radius: 25px;

    background:

        linear-gradient(
            145deg,
            #1b2227,
            #0b0f12
        );

    overflow: hidden;

}

.about-panel::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),

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

    background-size: 45px 45px;

}

.panel-label {

    position: absolute;

    top: 30px;
    left: 30px;

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

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .16em;

}

.large-number {

    position: absolute;

    bottom: -50px;
    left: 10px;

    font-family: "Manrope", sans-serif;

    font-size: 260px;

    line-height: 1;

    font-weight: 800;

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

    letter-spacing: -.1em;

}

.vertical-copy {

    position: absolute;

    right: 30px;
    top: 50%;

    transform:
        translateY(-50%)
        rotate(90deg);

    display: flex;

    gap: 35px;

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

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .2em;

}

.panel-orbit {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 300px;
    height: 300px;

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

}

.orbit-center {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 82px;
    height: 82px;

    display: grid;

    place-items: center;

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

    border-radius: 50%;

    background: var(--accent);

    color: var(--dark);

    font-family: "Manrope", sans-serif;

    font-size: 30px;

    font-weight: 800;

    z-index: 3;

}

.orbit-ring {

    position: absolute;

    inset: 0;

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

    border-radius: 50%;

}

.ring-one {

    animation:
        orbit-spin 15s linear infinite;

}

.ring-two {

    inset: 40px;

    animation:
        orbit-spin 10s linear infinite reverse;

}

@keyframes orbit-spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

.about-copy .eyebrow {
    color: rgba(255,255,255,.45);
}

.about-copy h2 {

    font-family: "Manrope", sans-serif;

    font-size: clamp(
        43px,
        5vw,
        70px
    );

    line-height: 1;

    letter-spacing: -.06em;

}

.about-copy h2 span {

    display: block;

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

}

.about-copy > p {

    max-width: 600px;

    margin-top: 27px;

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

    font-size: 15px;

    line-height: 1.85;

}

.feature-list {

    margin-top: 45px;

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

}

.feature-row {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 20px 0;

    border-bottom:
        1px solid rgba(255,255,255,.12);

}

.feature-icon {

    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--accent);

    color: var(--dark);

    font-size: 12px;

    font-weight: 800;

}

.feature-row strong {

    display: block;

    color: white;

    font-size: 12px;

}

.feature-row span {

    display: block;

    margin-top: 3px;

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

    font-size: 10px;

}


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

.process-timeline {

    position: relative;

    max-width: 900px;

    margin: 0 auto;

}

.process-line {

    position: absolute;

    top: 0;
    bottom: 0;

    left: 35px;

    width: 1px;

    background: var(--line);

    overflow: hidden;

}

.process-line span {

    display: block;

    width: 100%;

    height: 30%;

    background: var(--dark);

    animation:
        process-line-animation
        4s
        ease-in-out
        infinite alternate;

}

@keyframes process-line-animation {

    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(330%);
    }

}

.process-step {

    position: relative;

    display: grid;

    grid-template-columns: 70px 1fr;

    gap: 35px;

    min-height: 210px;

}

.process-marker {

    width: 70px;
    height: 70px;

    display: grid;

    place-items: center;

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

    border-radius: 50%;

    background: var(--bg);

    font-family: "Manrope", sans-serif;

    font-size: 12px;

    font-weight: 800;

    z-index: 2;

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

}

.process-step:hover .process-marker {

    background: var(--dark);

    color: var(--accent);

    border-color: var(--dark);

    transform: scale(1.08);

}

.process-content {

    padding-top: 10px;

    padding-bottom: 50px;

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

}

.process-label {

    color: #929b9f;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .16em;

}

.process-content h3 {

    margin-top: 12px;

    font-family: "Manrope", sans-serif;

    font-size: 27px;

    letter-spacing: -.04em;

}

.process-content p {

    max-width: 600px;

    margin-top: 10px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.8;

}


/* =========================================================
   PRICING
========================================================= */

.pricing-section {

    background: #eceeeb;

}

.pricing-grid {

    display: grid;

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

    gap: 16px;

}

.pricing-card {

    position: relative;

    padding: 35px;

    border: 1px solid #d7dcd8;

    border-radius: 20px;

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

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}

.pricing-card:hover {

    transform: translateY(-8px);

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

}

.pricing-featured {

    background: var(--dark);

    color: white;

    border-color: var(--dark);

    transform:
        translateY(-12px);

}

.pricing-featured:hover {

    transform:
        translateY(-19px);

}

.popular-badge {

    position: absolute;

    top: 0;
    right: 25px;

    transform: translateY(-50%);

    padding: 7px 10px;

    border-radius: 5px;

    background: var(--accent);

    color: var(--dark);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .12em;

}

.pricing-label {

    color: #7e878b;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .15em;

}

.pricing-featured .pricing-label {
    color: rgba(255,255,255,.45);
}

.pricing-price {

    display: flex;

    align-items: baseline;

    gap: 6px;

    margin-top: 15px;

}

.pricing-price small {

    color: #929a9e;

    font-size: 8px;

    font-weight: 800;

}

.pricing-price strong {

    font-family: "Manrope", sans-serif;

    font-size: 55px;

    letter-spacing: -.07em;

}

.pricing-top p {

    margin-top: 10px;

    color: var(--muted);

    font-size: 12px;

}

.pricing-featured .pricing-top p {
    color: rgba(255,255,255,.5);
}

.pricing-divider {

    height: 1px;

    margin: 30px 0;

    background: var(--line);

}

.pricing-featured .pricing-divider {
    background: rgba(255,255,255,.12);
}

.pricing-features {

    display: flex;

    flex-direction: column;

    gap: 14px;

    list-style: none;

}

.pricing-features li {

    position: relative;

    padding-left: 20px;

    color: #555f64;

    font-size: 11px;

}

.pricing-featured .pricing-features li {
    color: rgba(255,255,255,.65);
}

.pricing-features li::before {

    content: "✓";

    position: absolute;

    left: 0;

    color: var(--accent-dark);

    font-weight: 900;

}

.pricing-featured .pricing-features li::before {
    color: var(--accent);
}

.pricing-button {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 35px;

    padding: 15px 17px;

    border-radius: 8px;

    background: #e9ece8;

    color: var(--dark);

    font-size: 10px;

    font-weight: 800;

    transition:
        background var(--transition);

}

.pricing-button:hover {
    background: white;
}

.pricing-featured .pricing-button {

    background: var(--accent);

}

.pricing-note {

    display: flex;

    align-items: center;

    gap: 14px;

    max-width: 750px;

    margin: 35px auto 0;

    padding: 18px;

    border: 1px solid #d7dcd8;

    border-radius: 12px;

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

}

.note-icon {

    width: 25px;
    height: 25px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--dark);

    color: var(--accent);

    font-size: 10px;

    font-weight: 800;

}

.pricing-note p {

    color: #6c7579;

    font-size: 10px;

}


/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonial-slider {

    overflow: hidden;

}

.testimonial-track {

    display: flex;

    transition:
        transform .65s cubic-bezier(.22,1,.36,1);

}

.testimonial {

    min-width: 100%;

    padding: 65px;

    border-radius: 25px;

    background: var(--dark);

    color: white;

}

.quote-mark {

    color: var(--accent);

    font-family: Georgia, serif;

    font-size: 70px;

    line-height: .5;

}

.testimonial p {

    max-width: 900px;

    margin-top: 35px;

    font-family: "Manrope", sans-serif;

    font-size: clamp(
        24px,
        3vw,
        38px
    );

    font-weight: 600;

    line-height: 1.25;

    letter-spacing: -.04em;

}

.testimonial-author {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 45px;

}

.author-avatar {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--accent);

    color: var(--dark);

    font-size: 10px;

    font-weight: 900;

}

.testimonial-author strong {

    display: block;

    font-size: 11px;

}

.testimonial-author span {

    display: block;

    margin-top: 2px;

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

    font-size: 9px;

}

.testimonial-controls {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    margin-top: 25px;

}

.testimonial-controls > button {

    width: 40px;
    height: 40px;

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

    border-radius: 50%;

    background: transparent;

    transition: var(--transition);

}

.testimonial-controls > button:hover {

    background: var(--dark);

    color: white;

}

.testimonial-dots {

    display: flex;

    gap: 7px;

}

.testimonial-dots button {

    width: 6px;
    height: 6px;

    border: 0;

    border-radius: 50%;

    background: #cbd0d1;

    transition: var(--transition);

}

.testimonial-dots button.active {

    width: 22px;

    border-radius: 10px;

    background: var(--dark);

}


/* =========================================================
   FAQ
========================================================= */

.faq-section {

    background: #eceeeb;

}

.faq-grid {

    display: grid;

    grid-template-columns:
        .7fr
        1.3fr;

    gap: 100px;

}

.faq-intro h2 {

    font-family: "Manrope", sans-serif;

    font-size: clamp(
        45px,
        5vw,
        65px
    );

    line-height: 1;

    letter-spacing: -.06em;

}

.faq-intro h2 span {

    display: block;

    color: #90999d;

}

.faq-intro p {

    max-width: 440px;

    margin-top: 25px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;

}

.text-button {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-top: 30px;

    font-size: 11px;

    font-weight: 800;

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

    padding-bottom: 5px;

}

.faq-list {

    border-top: 1px solid #d4d8d6;

}

.faq-item {

    border-bottom: 1px solid #d4d8d6;

}

.faq-question {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 25px 0;

    border: 0;

    background: transparent;

    text-align: left;

    color: var(--dark);

    font-size: 14px;

    font-weight: 700;

}

.faq-icon {

    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border: 1px solid #cbd0cf;

    border-radius: 50%;

    font-size: 17px;

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

}

.faq-item.active .faq-icon {

    transform: rotate(45deg);

    background: var(--dark);

    color: var(--accent);

}

.faq-answer {

    max-height: 0;

    overflow: hidden;

    transition:
        max-height .45s ease;

}

.faq-answer p {

    max-width: 700px;

    padding-bottom: 25px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.8;

}

.faq-item.active .faq-answer {

    max-height: 300px;

}


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

.location-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 70px;

    align-items: center;

}

.location-content h2 {

    font-family: "Manrope", sans-serif;

    font-size: clamp(
        43px,
        5vw,
        65px
    );

    line-height: 1;

    letter-spacing: -.06em;

}

.location-content h2 span {

    display: block;

    color: #8d979b;

}

.location-content > p {

    max-width: 580px;

    margin-top: 25px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.85;

}

.address-card {

    display: flex;

    align-items: center;

    gap: 17px;

    margin-top: 35px;

    padding: 20px;

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

    border-radius: 15px;

    background: white;

}

.address-icon {

    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 12px;

    background: var(--dark);

    color: var(--accent);

    font-family: "Manrope", sans-serif;

    font-weight: 800;

}

.address-card span,
.address-card small {

    display: block;

    color: #91999c;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .12em;

}

.address-card strong {

    display: block;

    margin-top: 2px;

    font-size: 12px;

}

.address-card small {

    margin-top: 4px;

    letter-spacing: normal;

    font-weight: 500;

}

.location-meta {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 20px;

    margin-top: 25px;

}

.location-meta div {

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.location-meta span {

    color: #929b9e;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .12em;

}

.location-meta a,
.location-meta strong {

    font-size: 11px;

    font-weight: 700;

}

.location-meta a:hover {

    text-decoration: underline;

}

.map-wrapper {

    min-height: 530px;

}

.map-placeholder {

    position: relative;

    height: 530px;

    overflow: hidden;

    border-radius: 25px;

    background:
        #dfe3dd;

}

.map-grid-lines {

    position: absolute;

    inset: -100px;

    background-image:

        linear-gradient(
            45deg,
            transparent 48%,
            rgba(255,255,255,.55) 49%,
            rgba(255,255,255,.55) 51%,
            transparent 52%
        ),

        linear-gradient(
            -45deg,
            transparent 48%,
            rgba(255,255,255,.55) 49%,
            rgba(255,255,255,.55) 51%,
            transparent 52%
        );

    background-size: 80px 80px;

    transform: rotate(8deg);

}

.map-road {

    position: absolute;

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

    box-shadow:
        0 0 0 5px rgba(180,187,181,.15);

}

.road-one {

    width: 140%;
    height: 35px;

    top: 25%;

    left: -20%;

    transform: rotate(-15deg);

}

.road-two {

    width: 120%;
    height: 24px;

    top: 65%;

    left: -10%;

    transform: rotate(9deg);

}

.road-three {

    width: 30px;
    height: 120%;

    left: 35%;

    top: -10%;

    transform: rotate(18deg);

}

.road-four {

    width: 20px;
    height: 120%;

    right: 25%;

    top: -10%;

    transform: rotate(-22deg);

}

.map-pin {

    position: absolute;

    left: 50%;
    top: 50%;

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

}

.pin-core {

    position: relative;

    width: 62px;
    height: 62px;

    display: grid;

    place-items: center;

    border: 4px solid white;

    border-radius: 50%;

    background: var(--dark);

    color: var(--accent);

    font-family: "Manrope", sans-serif;

    font-size: 20px;

    font-weight: 800;

    z-index: 2;

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

}

.pin-pulse {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 130px;
    height: 130px;

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

    border-radius: 50%;

    background: rgba(200,255,50,.3);

    animation:
        map-pulse 2s ease-out infinite;

}

@keyframes map-pulse {

    0% {
        transform:
            translate(-50%,-50%)
            scale(.5);

        opacity: .8;
    }

    100% {
        transform:
            translate(-50%,-50%)
            scale(1.3);

        opacity: 0;
    }

}

.map-label {

    position: absolute;

    left: 25px;
    bottom: 25px;

    padding: 14px 17px;

    border-radius: 10px;

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

    backdrop-filter: blur(10px);

}

.map-label strong {

    display: block;

    font-size: 9px;

    letter-spacing: .08em;

}

.map-label span {

    display: block;

    margin-top: 3px;

    color: #788184;

    font-size: 9px;

}


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

.cta-section {

    padding-top: 0;

}

.cta-card {

    position: relative;

    min-height: 480px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;

    padding: 75px;

    border-radius: 28px;

    overflow: hidden;

    background: var(--dark);

    color: white;

}

.cta-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(200,255,50,.15),
            transparent 35%
        );

}

.cta-content {

    position: relative;

    z-index: 2;

    max-width: 730px;

}

.cta-content h2 {

    font-family: "Manrope", sans-serif;

    font-size: clamp(
        45px,
        6vw,
        80px
    );

    line-height: .98;

    letter-spacing: -.065em;

}

.cta-content h2 span {

    display: block;

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

}

.cta-content > p {

    max-width: 600px;

    margin-top: 25px;

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

    font-size: 14px;

    line-height: 1.8;

}

.cta-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 35px;

}

.button-light {

    background: var(--accent);

    color: var(--dark);

}

.button-light:hover {

    transform: translateY(-3px);

    background: #d8ff67;

}

.cta-phone {

    color: white;

    font-size: 12px;

    font-weight: 700;

}

.cta-symbol {

    position: relative;

    width: 300px;
    height: 300px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

}

.cta-symbol > span {

    width: 95px;
    height: 95px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--accent);

    color: var(--dark);

    font-family: "Manrope", sans-serif;

    font-size: 35px;

    font-weight: 800;

    z-index: 3;

}

.cta-ring {

    position: absolute;

    inset: 0;

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

    border-radius: 50%;

}

.ring-a {

    animation:
        orbit-spin 18s linear infinite;

}

.ring-b {

    inset: 45px;

    animation:
        orbit-spin 10s linear infinite reverse;

}


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

.contact-section {

    background: #eceeeb;

}

.contact-grid {

    display: grid;

    grid-template-columns:
        .85fr
        1.15fr;

    gap: 90px;

    align-items: start;

}

.contact-intro h2 {

    font-family: "Manrope", sans-serif;

    font-size: clamp(
        45px,
        5vw,
        68px
    );

    line-height: 1;

    letter-spacing: -.06em;

}

.contact-intro h2 span {

    display: block;

    color: #90999d;

}

.contact-intro > p {

    max-width: 500px;

    margin-top: 25px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;

}

.contact-details {

    display: flex;

    flex-direction: column;

    gap: 22px;

    margin-top: 45px;

}

.contact-detail {

    display: flex;

    align-items: center;

    gap: 14px;

}

.detail-icon {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 10px;

    background: var(--dark);

    color: var(--accent);

    font-size: 10px;

    font-weight: 900;

}

.contact-detail small {

    display: block;

    color: #8f989c;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .12em;

}

.contact-detail a,
.contact-detail strong,
.contact-detail > div > span {

    display: block;

    margin-top: 3px;

    font-size: 12px;

    font-weight: 700;

}

.contact-detail a:hover {
    text-decoration: underline;
}

.contact-form-wrapper {

    padding: 35px;

    border: 1px solid #d8dcda;

    border-radius: 22px;

    background: white;

    box-shadow:
        0 30px 80px rgba(0,0,0,.06);

}

.form-header {

    display: flex;

    justify-content: space-between;

    padding-bottom: 20px;

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

    color: #8b9498;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .14em;

}

.form-status {

    color: #708000;

}

.form-row {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 15px;

}

.form-group {

    margin-top: 20px;

}

.form-group label {

    display: block;

    margin-bottom: 8px;

    color: #4e585d;

    font-size: 10px;

    font-weight: 800;

}

.form-group input,
.form-group textarea,
.form-group select {

    width: 100%;

    border: 1px solid #dfe3e1;

    border-radius: 8px;

    padding: 14px 15px;

    background: #fafbf9;

    color: var(--dark);

    outline: none;

    font-size: 12px;

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

}

.form-group textarea {

    resize: vertical;

    min-height: 130px;

}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {

    border-color: var(--dark);

    background: white;

    box-shadow:
        0 0 0 4px rgba(16,20,24,.05);

}

.checkbox-row {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 20px;

    color: #7b8488;

    font-size: 9px;

    line-height: 1.6;

}

.checkbox-row input {

    margin-top: 3px;

    accent-color: var(--dark);

}

.form-submit {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 22px;

    padding: 16px 18px;

    border: 0;

    border-radius: 9px;

    background: var(--dark);

    color: white;

    font-size: 11px;

    font-weight: 800;

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

}

.form-submit span {

    color: var(--accent);

    font-size: 17px;

}

.form-submit:hover {

    transform: translateY(-3px);

    background: #252c30;

}

.form-message {

    margin-top: 15px;

    font-size: 10px;

    font-weight: 700;

}


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

.site-footer {

    padding: 80px 0 25px;

    background: var(--dark);

    color: white;

}

.footer-main {

    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1fr;

    gap: 60px;

    padding-bottom: 65px;

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

}

.footer-brand p {

    max-width: 330px;

    margin-top: 22px;

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

    font-size: 11px;

    line-height: 1.8;

}

.footer-brand .brand-mark {
    background: white;
    color: var(--dark);
}

.footer-brand .brand-text {
    color: white;
}

.footer-brand .brand-text small {
    color: rgba(255,255,255,.4);
}

.footer-address {

    margin-top: 25px;

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

    font-size: 10px;

    line-height: 1.8;

}

.footer-column {

    display: flex;

    flex-direction: column;

    gap: 11px;

}

.footer-column h4 {

    margin-bottom: 8px;

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

    font-size: 9px;

    letter-spacing: .15em;

}

.footer-column a {

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

    font-size: 10px;

    transition:
        color var(--transition);

}

.footer-column a:hover {
    color: var(--accent);
}

.footer-legal {

    padding: 22px 0;

}

.footer-legal p {

    max-width: 850px;

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

    font-size: 9px;

    line-height: 1.7;

}

.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 22px;

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

    font-size: 8px;

}


/* =========================================================
   LEGAL MODALS
========================================================= */

.legal-modal {

    position: fixed;

    inset: 0;

    z-index: 3000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        rgba(5,8,10,.75);

    backdrop-filter: blur(10px);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;

}

.legal-modal.active {

    opacity: 1;

    visibility: visible;

}

.legal-modal-inner {

    position: relative;

    width: min(
        800px,
        100%
    );

    max-height: 85vh;

    overflow-y: auto;

    padding: 45px;

    border-radius: 20px;

    background: white;

    transform:
        translateY(25px)
        scale(.98);

    transition:
        transform .45s cubic-bezier(.22,1,.36,1);

}

.legal-modal.active .legal-modal-inner {

    transform:
        translateY(0)
        scale(1);

}

.legal-close {

    position: absolute;

    top: 18px;
    right: 18px;

    width: 36px;
    height: 36px;

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

    border-radius: 50%;

    background: white;

    font-size: 20px;

}

.legal-modal-inner h2 {

    font-family: "Manrope", sans-serif;

    font-size: 45px;

    line-height: 1;

    letter-spacing: -.05em;

}

.legal-modal-inner h3 {

    margin-top: 28px;

    font-family: "Manrope", sans-serif;

    font-size: 18px;

}

.legal-modal-inner p {

    margin-top: 15px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.8;

}


/* =========================================================
   COOKIE
========================================================= */

.cookie-banner {

    position: fixed;

    left: 25px;
    bottom: 25px;

    z-index: 2000;

    width: min(
        440px,
        calc(100% - 50px)
    );

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 18px;

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

    border-radius: 15px;

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

    color: white;

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

    transform:
        translateY(150%);

    transition:
        transform .5s cubic-bezier(.22,1,.36,1);

}

.cookie-banner.visible {

    transform:
        translateY(0);

}

.cookie-banner strong {

    display: block;

    font-size: 11px;

}

.cookie-banner p {

    margin-top: 5px;

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

    font-size: 8px;

    line-height: 1.6;

}

.cookie-banner button {

    flex-shrink: 0;

    padding: 10px 15px;

    border: 0;

    border-radius: 7px;

    background: var(--accent);

    color: var(--dark);

    font-size: 9px;

    font-weight: 900;

}


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

.reveal {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1);

}

.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}

.reveal-delay {

    transition-delay: .15s;

}


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

@media (max-width: 1100px) {

    .desktop-nav {
        gap: 18px;
    }

    .hero-container {

        grid-template-columns:
            1fr;

        gap: 70px;

    }

    .hero-copy {
        max-width: 800px;
    }

    .hero-visual {
        max-width: 650px;
    }

    .hero {
        padding-top: 150px;
    }

    .services-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .about-grid {
        gap: 60px;
    }

    .footer-main {
        grid-template-columns:
            2fr 1fr 1fr;
    }

    .footer-column:last-child {
        grid-column: 2;
    }

}


@media (max-width: 850px) {

    .desktop-nav,
    .nav-button {
        display: none;
    }

    .mobile-menu-button {
        display: flex;
    }

    .mobile-nav {

        position: absolute;

        top: calc(100% + 10px);

        left: 24px;
        right: 24px;

        display: flex;

        flex-direction: column;

        gap: 4px;

        padding: 15px;

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

        border-radius: 15px;

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

        backdrop-filter: blur(20px);

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

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-10px);

        transition: var(--transition);

    }

    .mobile-nav.active {

        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);

    }

    .mobile-nav a {

        padding: 12px;

        border-radius: 7px;

        font-size: 12px;

        font-weight: 700;

    }

    .mobile-nav a:hover {
        background: #f0f2ef;
    }

    .mobile-cta {

        margin-top: 8px;

        background: var(--dark);

        color: white !important;

        text-align: center;

    }

    .section {
        padding: 95px 0;
    }

    .section-heading {

        grid-template-columns:
            1fr;

        gap: 25px;

        margin-bottom: 50px;

    }

    .about-grid {

        grid-template-columns:
            1fr;

    }

    .location-grid {

        grid-template-columns:
            1fr;

    }

    .faq-grid {

        grid-template-columns:
            1fr;

        gap: 50px;

    }

    .contact-grid {

        grid-template-columns:
            1fr;

        gap: 50px;

    }

    .cta-card {

        padding: 55px 40px;

    }

    .cta-symbol {
        display: none;
    }

}


@media (max-width: 650px) {

    .container {
        width: min(
            calc(100% - 32px),
            var(--max-width)
        );
    }

    .hero {
        min-height: auto;
        padding-top: 135px;
        padding-bottom: 90px;
    }

    .hero h1 {

        font-size:
            clamp(
                46px,
                14vw,
                70px
            );

    }

    .hero-description {
        font-size: 14px;
    }

    .hero-actions {

        flex-direction: column;

        align-items: stretch;

    }

    .button {
        width: 100%;
    }

    .hero-trust {

        display: grid;

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

        gap: 10px;

    }

    .trust-item {
        padding-right: 8px;
    }

    .trust-item strong {
        font-size: 15px;
    }

    .trust-item span {
        font-size: 8px;
    }

    .hero-visual {

        min-height: 450px;

        transform:
            scale(.85);

        margin:
            -40px
            0;

    }

    .hero-card-main {

        width:
            min(
                380px,
                100%
            );

    }

    .floating-card-one {
        left: 0;
    }

    .floating-card-two {
        right: 0;
    }

    .stats-grid {

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

    }

    .stat {

        min-height: 120px;

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

    }

    .stat:nth-child(2) {
        border-right: 0;
    }

    .stat:nth-child(3) {
        border-bottom: 0;
    }

    .stat:nth-child(4) {
        border-bottom: 0;
        border-right: 0;
    }

    .services-grid {

        grid-template-columns:
            1fr;

    }

    .service-card {
        min-height: 420px;
    }

    .about-panel {
        min-height: 430px;
    }

    .about-visual {
        min-height: 430px;
    }

    .large-number {
        font-size: 190px;
    }

    .process-step {

        grid-template-columns:
            55px 1fr;

        gap: 20px;

    }

    .process-marker {

        width: 55px;
        height: 55px;

    }

    .process-line {
        left: 27px;
    }

    .pricing-grid {

        grid-template-columns:
            1fr;

    }

    .pricing-featured {

        transform: none;

    }

    .pricing-featured:hover {

        transform:
            translateY(-8px);

    }

    .testimonial {
        padding: 40px 25px;
    }

    .location-meta {

        grid-template-columns:
            1fr;

    }

    .map-wrapper,
    .map-placeholder {

        min-height: 400px;
        height: 400px;

    }

    .cta-card {
        padding: 50px 25px;
    }

    .form-row {

        grid-template-columns:
            1fr;

    }

    .contact-form-wrapper {
        padding: 25px;
    }

    .footer-main {

        grid-template-columns:
            1fr 1fr;

        gap: 40px;

    }

    .footer-brand {
        grid-column:
            1 / -1;
    }

    .footer-column:last-child {
        grid-column: auto;
    }

    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

    }

    .cookie-banner {

        left: 15px;
        bottom: 15px;

        width:
            calc(100% - 30px);

        flex-direction: column;

        align-items: stretch;

    }

    .cookie-banner button {
        width: 100%;
    }

    .legal-modal {
        padding: 15px;
    }

    .legal-modal-inner {
        padding: 30px 23px;
    }

}