/* Quote page styling preserved from the supplied Nexa Infrastructure page. */
/* =========================================================
           RESET
        ========================================================= */

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Inter", sans-serif;
            background: #05070a;
            color: #ffffff;
            line-height: 1.6;
            overflow-x: hidden;
        }

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

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


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

        :root {
            --blue: #087cff;
            --blue-bright: #1594ff;
            --dark: #05070a;
            --dark-2: #080c12;
            --dark-3: #0d131c;
            --border: rgba(255,255,255,0.10);
            --border-light: rgba(255,255,255,0.16);
            --muted: #9aa5b1;
            --white: #ffffff;
            --max-width: 1200px;
        }


        /* =========================================================
           GLOBAL
        ========================================================= */

        .container {
            width: min(90%, var(--max-width));
            margin: 0 auto;
        }


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

        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;

            background: rgba(5, 7, 10, 0.82);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);

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

        .nav {
            height: 78px;

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


        /* LOGO */

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;

            font-size: 21px;
            font-weight: 800;
            letter-spacing: 1px;
        }

        .logo-mark {
            width: 38px;
            height: 38px;

            border: 2px solid var(--blue);

            display: grid;
            place-items: center;

            transform: skew(-8deg);

            box-shadow:
                0 0 20px rgba(8,124,255,0.25);
        }

        .logo-mark span {
            color: var(--blue);
            font-size: 20px;
            font-weight: 900;

            transform: skew(8deg);
        }

        .logo small {
            display: block;

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

            letter-spacing: 2px;
            color: #8d96a0;

            margin-top: -3px;
        }


        /* NAV LINKS */

        .nav-links {
            display: flex;
            align-items: center;
            gap: 34px;
        }

        .nav-links a {
            font-size: 13px;
            font-weight: 600;

            color: #c7cdd3;

            transition: 0.25s ease;
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--blue-bright);
        }

        .nav-button {
            padding: 12px 22px;

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

            color: white !important;

            transition: 0.25s ease;
        }

        .nav-button:hover {
            background: var(--blue);

            box-shadow:
                0 0 25px rgba(8,124,255,0.35);
        }


        /* MOBILE MENU */

        .mobile-menu {
            display: none;

            border: 0;
            background: none;

            color: white;

            font-size: 28px;

            cursor: pointer;
        }


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

        .page-hero {
            position: relative;

            min-height: 500px;

            display: flex;
            align-items: center;

            overflow: hidden;

            background:
                linear-gradient(
                    90deg,
                    #05070a 0%,
                    rgba(5,7,10,0.92) 45%,
                    rgba(5,7,10,0.60) 100%
                ),
                url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=2000&q=85")
                center/cover no-repeat;
        }

        .page-hero::after {
            content: "";

            position: absolute;

            width: 600px;
            height: 600px;

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

            border-radius: 50%;

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

            filter: blur(100px);
        }

        .page-hero-content {
            position: relative;
            z-index: 2;

            padding-top: 80px;

            max-width: 800px;
        }

        .eyebrow {
            color: var(--blue-bright);

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

            letter-spacing: 2px;
            text-transform: uppercase;

            margin-bottom: 18px;
        }

        .page-hero h1 {
            font-size: clamp(48px, 7vw, 78px);

            line-height: 0.98;

            letter-spacing: -4px;

            font-weight: 900;

            margin-bottom: 25px;
        }

        .page-hero h1 span {
            color: var(--blue);
        }

        .page-hero p {
            max-width: 650px;

            color: #aeb7c0;

            font-size: 17px;

            line-height: 1.8;
        }


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

        .quote-section {
            padding: 100px 0;

            background: #070a0f;

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

        .quote-layout {
            display: grid;

            grid-template-columns: 1.7fr 0.9fr;

            gap: 30px;

            align-items: start;
        }


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

        .quote-card {
            background: #0b1017;

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

            border-radius: 8px;

            padding: 45px;
        }

        .quote-card-header {
            margin-bottom: 35px;
        }

        .quote-card-header h2 {
            font-size: 30px;

            line-height: 1.1;

            letter-spacing: -1px;

            margin-bottom: 12px;
        }

        .quote-card-header p {
            color: var(--muted);

            font-size: 14px;
        }


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

        .form-row {
            display: grid;

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

            gap: 20px;

            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-row .form-group {
            margin-bottom: 0;
        }

        label {
            display: block;

            font-size: 12px;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 1px;

            color: #d7dce1;

            margin-bottom: 9px;
        }

        label span {
            color: var(--blue);
        }

        input,
        textarea,
        select {
            width: 100%;

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

            border-radius: 5px;

            background: #070a0f;

            color: white;

            padding: 14px 15px;

            font-size: 14px;

            outline: none;

            transition: 0.25s ease;
        }

        input::placeholder,
        textarea::placeholder {
            color: #59636e;
        }

        input:focus,
        textarea:focus,
        select:focus {
            border-color: var(--blue);

            box-shadow:
                0 0 0 3px rgba(8,124,255,0.08);
        }

        select {
            appearance: none;

            cursor: pointer;

            background-image:
                linear-gradient(45deg, transparent 50%, #71808e 50%),
                linear-gradient(135deg, #71808e 50%, transparent 50%);

            background-position:
                calc(100% - 18px) 50%,
                calc(100% - 12px) 50%;

            background-size:
                6px 6px,
                6px 6px;

            background-repeat: no-repeat;
        }

        textarea {
            min-height: 150px;

            resize: vertical;
        }


        /* =========================================================
           SERVICE SELECTOR
        ========================================================= */

        .service-options {
            display: grid;

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

            gap: 10px;
        }

        .service-option input {
            display: none;
        }

        .service-option label {
            margin: 0;

            padding: 17px;

            min-height: 65px;

            display: flex;
            align-items: center;

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

            border-radius: 5px;

            background: #070a0f;

            color: #aeb7c0;

            cursor: pointer;

            transition: 0.25s ease;
        }

        .service-option label:hover {
            border-color: rgba(8,124,255,0.5);

            color: white;
        }

        .service-option input:checked + label {
            border-color: var(--blue);

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

            color: white;

            box-shadow:
                inset 0 0 20px rgba(8,124,255,0.04);
        }

        .service-option label::before {
            content: "";

            width: 8px;
            height: 8px;

            border-radius: 50%;

            background: #3d4752;

            margin-right: 12px;

            transition: 0.25s ease;
        }

        .service-option input:checked + label::before {
            background: var(--blue);

            box-shadow:
                0 0 10px rgba(8,124,255,0.8);
        }


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

        .form-footer {
            margin-top: 30px;

            padding-top: 25px;

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

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 20px;
        }

        .privacy-note {
            color: #69737e;

            font-size: 11px;

            line-height: 1.6;

            max-width: 320px;
        }

        .submit-button {
            border: 0;

            background: var(--blue);

            color: white;

            padding: 15px 25px;

            border-radius: 5px;

            font-size: 13px;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 0.5px;

            cursor: pointer;

            transition: 0.25s ease;
        }

        .submit-button:hover {
            background: var(--blue-bright);

            transform: translateY(-2px);

            box-shadow:
                0 12px 30px rgba(8,124,255,0.25);
        }


        /* =========================================================
           SIDEBAR
        ========================================================= */

        .quote-sidebar {
            position: sticky;

            top: 105px;
        }


        /* WHAT HAPPENS */

        .info-card {
            padding: 35px;

            background: #0b1017;

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

            border-radius: 8px;

            margin-bottom: 20px;
        }

        .info-card h3 {
            font-size: 22px;

            margin-bottom: 25px;
        }

        .steps {
            display: flex;

            flex-direction: column;

            gap: 25px;
        }

        .step {
            display: flex;

            gap: 15px;
        }

        .step-number {
            flex-shrink: 0;

            width: 34px;
            height: 34px;

            display: grid;
            place-items: center;

            border-radius: 50%;

            border: 1px solid rgba(8,124,255,0.5);

            color: var(--blue);

            font-size: 11px;

            font-weight: 800;
        }

        .step h4 {
            font-size: 14px;

            margin-bottom: 4px;
        }

        .step p {
            color: var(--muted);

            font-size: 12px;

            line-height: 1.6;
        }


        /* CONTACT CARD */

        .contact-card {
            position: relative;

            overflow: hidden;

            padding: 35px;

            background:
                linear-gradient(
                    145deg,
                    #0c1826,
                    #070a0f
                );

            border: 1px solid rgba(8,124,255,0.25);

            border-radius: 8px;
        }

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

            position: absolute;

            width: 180px;
            height: 180px;

            border-radius: 50%;

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

            filter: blur(50px);

            right: -80px;
            bottom: -80px;
        }

        .contact-card > * {
            position: relative;
            z-index: 2;
        }

        .contact-card .eyebrow {
            margin-bottom: 10px;
        }

        .contact-card h3 {
            font-size: 23px;

            line-height: 1.2;

            margin-bottom: 12px;
        }

        .contact-card p {
            color: var(--muted);

            font-size: 13px;

            margin-bottom: 25px;
        }

        .contact-details {
            display: flex;

            flex-direction: column;

            gap: 13px;
        }

        .contact-detail {
            display: flex;

            align-items: center;

            gap: 12px;

            font-size: 13px;

            color: #c5cbd1;
        }

        .contact-icon {
            width: 32px;
            height: 32px;

            display: grid;
            place-items: center;

            border: 1px solid rgba(8,124,255,0.3);

            border-radius: 4px;

            color: var(--blue);
        }


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

        footer {
            background: #030507;

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

        .footer-main {
            padding: 70px 0;

            display: grid;

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

            gap: 50px;
        }

        .footer-brand p {
            color: var(--muted);

            max-width: 350px;

            margin-top: 20px;

            font-size: 14px;
        }

        .footer-column h5 {
            font-size: 12px;

            text-transform: uppercase;

            letter-spacing: 1.5px;

            margin-bottom: 22px;
        }

        .footer-column a {
            display: block;

            color: #7f8994;

            font-size: 13px;

            margin-bottom: 12px;

            transition: 0.2s ease;
        }

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

        .contact-line {
            color: #8e98a2;

            font-size: 13px;

            margin-bottom: 12px;
        }

        .footer-bottom {
            padding: 20px 0;

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

            display: flex;

            justify-content: space-between;

            gap: 20px;

            color: #646e79;

            font-size: 12px;
        }


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

        .success-message {
            display: none;

            margin-top: 25px;

            padding: 18px;

            border: 1px solid rgba(8,124,255,0.4);

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

            border-radius: 5px;

            color: #bcdcff;

            font-size: 13px;
        }

        .success-message.show {
            display: block;
        }


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

        @media (max-width: 900px) {

            .nav-links {
                position: absolute;

                top: 78px;
                left: 0;

                width: 100%;

                display: none;

                flex-direction: column;

                align-items: flex-start;

                gap: 0;

                padding: 20px 5%;

                background: #070a0f;

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

            .nav-links.show {
                display: flex;
            }

            .nav-links a {
                width: 100%;

                padding: 15px 0;

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

            .mobile-menu {
                display: block;
            }

            .quote-layout {
                grid-template-columns: 1fr;
            }

            .quote-sidebar {
                position: static;
            }

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

        }


        @media (max-width: 600px) {

            .page-hero {
                min-height: 450px;

                background:
                    linear-gradient(
                        90deg,
                        #05070a 0%,
                        rgba(5,7,10,0.85) 100%
                    ),
                    url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1200&q=80")
                    center/cover;
            }

            .page-hero h1 {
                font-size: 48px;

                letter-spacing: -2.5px;
            }

            .page-hero p {
                font-size: 15px;
            }

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

            .quote-card {
                padding: 25px;
            }

            .form-row {
                grid-template-columns: 1fr;

                gap: 0;
            }

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

            .form-footer {
                flex-direction: column;

                align-items: stretch;
            }

            .submit-button {
                width: 100%;
            }

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

                gap: 35px;
            }

            .footer-bottom {
                flex-direction: column;
            }

        }
/* WordPress form additions */
.form-error{display:none;margin-top:25px;padding:18px;border:1px solid rgba(255,90,90,.45);background:rgba(255,90,90,.08);border-radius:5px;color:#ffd0d0;font-size:13px}.form-error.show{display:block}
