:root {
            --brand-primary: #2563eb;
            --brand-primary-hover: color-mix(in srgb, var(--brand-primary) 92%, black);
            --brand-on-primary: #ffffff; /* auto-set by JS — do not edit */
            --brand-secondary: #eff6ff;
            --brand-glow: color-mix(in srgb, var(--brand-primary) 15%, transparent);

            --color-ink: #111827;
            --color-muted: #6b7280;
            --color-border: #e5e7eb;
            --color-surface: #f9fafb;
            --color-white: #ffffff;

            --font-heading: 'DM Serif Display', Georgia, serif;
            --font-body: 'DM Sans', sans-serif;
        }

        html {
            scroll-behavior: smooth;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--color-ink);
            background: var(--color-white);
            -webkit-font-smoothing: antialiased;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-heading);
        }

        /* NAV */
        .navbar {
            background: var(--color-white);
            border-bottom: 1px solid var(--color-border);
            padding: 1rem 0;
        }

        .navbar-brand {
            font-family: var(--font-body);
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--color-ink) !important;
            display: flex;
            align-items: center;
            gap: .6rem;
        }

        .nav-logo {
            max-width: 290px;
            height: auto;
        }

            .navbar-brand img {
                max-height: 36px;
                border-radius: 6px;
                object-fit: contain;
            }

        .nav-link {
            font-size: .9rem;
            font-weight: 500;
            color: var(--color-muted) !important;
            padding: .4rem .8rem !important;
            border-radius: 6px;
            transition: color .15s, background .15s;
        }

            .nav-link:hover {
                color: var(--color-ink) !important;
                background: var(--color-surface);
            }

        .btn-nav {
            background: var(--brand-primary);
            color: var(--brand-on-primary, #ffffff) !important;
            border-radius: 8px;
            padding: .45rem 1.1rem !important;
            font-size: .88rem;
            font-weight: 600;
            transition: background .15s;
        }

            .btn-nav:hover {
                background: var(--brand-primary-hover);
                color: var(--brand-on-primary, #ffffff) !important;
            }

        /* HERO */
        .hero {
            background: var(--color-surface);
            padding: 80px 0 72px;
            border-bottom: 1px solid var(--color-border);
        }

        .hero-label {
            font-size: .75rem;
            font-weight: 600;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--brand-primary);
            margin-bottom: .75rem;
            font-family: var(--font-body);
        }

        .hero h1 {
            font-size: clamp(2.4rem, 5vw, 3.6rem);
            color: var(--color-ink);
            line-height: 1.15;
            margin-bottom: 1rem;
            font-weight: 400;
        }

        .hero-sub {
            font-size: 1.05rem;
            color: var(--color-muted);
            max-width: 520px;
            line-height: 1.75;
            margin-bottom: 2rem;
        }

        .hero-btns {
            display: flex;
            gap: .75rem;
            flex-wrap: wrap;
            margin-bottom: 2.5rem;
        }

        .btn-primary {
            background: var(--brand-primary) !important;
            color: var(--brand-on-primary, #ffffff) !important;
            border: none !important;
            border-radius: 8px;
            padding: .75rem 1.5rem;
            font-family: var(--font-body);
            font-weight: 600;
            font-size: .9rem;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            transition: background .15s;
        }

            .btn-primary:hover {
                background: var(--brand-primary-hover) !important;
            }

        .btn-secondary {
            background: var(--color-white);
            color: var(--color-ink);
            border: 1.5px solid var(--color-border);
            border-radius: 8px;
            padding: .75rem 1.5rem;
            font-family: var(--font-body);
            font-weight: 500;
            font-size: .9rem;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            transition: border-color .15s, color .15s;
        }

            .btn-secondary:hover {
                border-color: var(--brand-primary);
                color: var(--brand-primary);
            }

        /* stats */
        .hero-stats {
            display: flex;
            gap: 2.5rem;
            flex-wrap: wrap;
        }

        .stat-num {
            font-family: var(--font-heading);
            font-size: 1.9rem;
            color: var(--color-ink);
            line-height: 1;
        }

        .stat-lbl {
            font-size: .78rem;
            font-weight: 500;
            color: var(--color-muted);
            margin-top: .2rem;
        }

        /* hero image */
        .hero-img {
            width: 100%;
            border-radius: 12px;
            object-fit: cover;
            aspect-ratio: 4/3;
            display: block;
            box-shadow: 0 4px 24px rgba(0,0,0,.08);
        }

        /* SECTION */
        .sec-pad {
            padding: 72px 0;
        }

        .sec-label {
            font-size: .75rem;
            font-weight: 600;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--brand-primary);
            margin-bottom: .5rem;
            font-family: var(--font-body);
        }

        .sec-title {
            font-size: clamp(1.8rem, 3.5vw, 2.4rem);
            color: var(--color-ink);
            line-height: 1.2;
            font-weight: 400;
        }

        .sec-body {
            font-size: .98rem;
            color: var(--color-muted);
            max-width: 540px;
            line-height: 1.75;
        }

        /* SERVICES */
        .svc-section {
            background: var(--color-white);
        }

        .svc-card {
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: 10px;
            padding: 1.5rem;
            height: 100%;
            transition: border-color .2s, box-shadow .2s;
        }

            .svc-card:hover {
                border-color: var(--brand-primary);
                box-shadow: 0 4px 20px var(--brand-glow);
            }

        .svc-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            background: var(--brand-secondary);
            color: var(--brand-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
            margin-bottom: .9rem;
            transition: background .2s, color .2s;
        }

        .svc-card:hover .svc-icon {
            background: var(--brand-primary);
            color: var(--brand-on-primary, #ffffff);
        }

        .svc-card h5 {
            font-family: var(--font-body);
            font-size: .98rem;
            font-weight: 700;
            color: var(--color-ink);
            margin-bottom: .35rem;
        }

        .svc-card p {
            font-size: .86rem;
            color: var(--color-muted);
            margin: 0;
            line-height: 1.65;
        }

        /* ABOUT */
        .about-section {
            background: var(--color-surface);
            border-top: 1px solid var(--color-border);
            border-bottom: 1px solid var(--color-border);
        }

        .about-img {
            width: 100%;
            border-radius: 12px;
            object-fit: cover;
            aspect-ratio: 4/3;
            display: block;
        }

        .feat-list {
            list-style: none;
            padding: 0;
            margin: 1.5rem 0 2rem;
        }

            .feat-list li {
                display: flex;
                align-items: flex-start;
                gap: .75rem;
                padding: .65rem 0;
                border-bottom: 1px solid var(--color-border);
            }

                .feat-list li:last-child {
                    border-bottom: none;
                }

        .feat-check {
            width: 20px;
            height: 20px;
            min-width: 20px;
            border-radius: 50%;
            background: var(--brand-secondary);
            color: var(--brand-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .6rem;
            margin-top: .15rem;
        }

        .feat-list h6 {
            font-family: var(--font-body);
            font-size: .9rem;
            font-weight: 700;
            color: var(--color-ink);
            margin-bottom: .1rem;
        }

        .feat-list p {
            font-size: .82rem;
            color: var(--color-muted);
            margin: 0;
        }

        .btn-dark {
            background: var(--color-ink);
            color: var(--color-white);
            border: none;
            border-radius: 8px;
            padding: .75rem 1.5rem;
            font-family: var(--font-body);
            font-weight: 600;
            font-size: .9rem;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            transition: background .15s;
        }

            .btn-dark:hover {
                background: #1f2937;
                color: var(--color-white);
            }

        /* TESTIMONIALS */
.testi-section {
    background: var(--color-ink);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.testi-section::before {
    content: '';
    position: absolute;
    top: -18%;
    right: -10%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--brand-glow) 0%, transparent 68%);
    pointer-events: none;
}

.testi-section::after {
    content: 'Reviews';
    position: absolute;
    bottom: -3.5rem;
    left: -1rem;
    font-family: var(--font-heading);
    font-size: clamp(7rem, 16vw, 15rem);
    line-height: 1;
    color: rgba(255,255,255,.035);
    pointer-events: none;
    user-select: none;
}

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

.testi-section .sec-label {
    color: var(--brand-primary);
}

.testi-section .sec-title {
    color: var(--color-white);
}

.testi-section .text-center {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.testi-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    padding: 1.65rem;
    height: 100%;
    transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    backdrop-filter: blur(8px);
}

    .testi-card:hover {
        background: rgba(255,255,255,.09);
        border-color: var(--brand-primary);
        transform: translateY(-4px);
        box-shadow: 0 16px 42px rgba(0,0,0,.2);
    }

.testi-stars {
    color: #f59e0b;
    font-size: .82rem;
    margin-bottom: .85rem;
    letter-spacing: .08em;
}

.testi-text {
    font-size: .92rem;
    color: rgba(255,255,255,.8);
    line-height: 1.8;
    margin-bottom: 1.35rem;
}

.testi-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-secondary);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}

.testi-name {
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 700;
    color: var(--color-white);
}

.testi-role {
    font-size: .78rem;
    color: rgba(255,255,255,.48);
}

        /* CONTACT */
        .contact-section {
            background: var(--color-surface);
            border-top: 1px solid var(--color-border);
        }

        .contact-card {
            background: var(--color-white);
            border: 1px solid var(--color-border);
            border-radius: 12px;
            padding: 2rem;
        }

            .contact-card h4 {
                font-family: var(--font-body);
                font-size: 1.15rem;
                font-weight: 700;
                color: var(--color-ink);
                margin-bottom: 1.4rem;
            }

        .form-label {
            font-size: .78rem;
            font-weight: 600;
            color: var(--color-ink);
            margin-bottom: .35rem;
        }

        .form-control, .form-select {
            border: 1px solid var(--color-border);
            border-radius: 8px;
            padding: .65rem .9rem;
            font-family: var(--font-body);
            font-size: .9rem;
            color: var(--color-ink);
            background: var(--color-white);
            transition: border-color .15s, box-shadow .15s;
        }

            .form-control:focus, .form-select:focus {
                border-color: var(--brand-primary);
                box-shadow: 0 0 0 3px var(--brand-glow);
                outline: none;
            }

            .form-control::placeholder {
                color: #9ca3af;
            }

        textarea.form-control {
            resize: vertical;
            min-height: 130px;
        }

        .btn-submit {
            background: var(--brand-primary);
            color: var(--brand-on-primary, #ffffff);
            border: none;
            border-radius: 8px;
            padding: .75rem 1.6rem;
            font-family: var(--font-body);
            font-weight: 600;
            font-size: .9rem;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            transition: background .15s;
        }

            .btn-submit:hover {
                background: var(--brand-primary-hover);
            }

        .ci-row {
            display: flex;
            align-items: flex-start;
            gap: .9rem;
            padding: .85rem 0;
            border-bottom: 1px solid var(--color-border);
        }

            .ci-row:last-of-type {
                border-bottom: none;
            }

        .ci-ico {
            width: 38px;
            height: 38px;
            min-width: 38px;
            border-radius: 8px;
            background: var(--brand-secondary);
            color: var(--brand-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .85rem;
        }

        .ci-lbl {
            font-size: .72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: var(--color-muted);
            margin-bottom: .15rem;
        }

        .ci-val {
            font-size: .88rem;
            color: var(--color-ink);
            margin: 0;
            line-height: 1.6;
        }

        .contact-photo {
            width: 100%;
            border-radius: 10px;
            object-fit: cover;
            aspect-ratio: 16/9;
            display: block;
            margin-top: auto;
        }

        /* FOOTER */
        footer {
            background: var(--color-ink);
            padding: 1.5rem 0;
        }

        .footer-copy {
            font-size: .82rem;
            color: rgba(255,255,255,.4);
        }

            .footer-copy a {
                color: rgba(255,255,255,.55);
                text-decoration: none;
            }

                .footer-copy a:hover {
                    color: var(--color-white);
                }

        .footer-social {
            display: flex;
            gap: .4rem;
        }

            .footer-social a {
                width: 32px;
                height: 32px;
                border-radius: 6px;
                background: rgba(255,255,255,.08);
                color: rgba(255,255,255,.45);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: .78rem;
                text-decoration: none;
                transition: background .15s, color .15s;
            }

                .footer-social a:hover {
                    background: var(--brand-primary);
                    color: var(--brand-on-primary, #ffffff);
                }

        @media (max-width: 767.98px) {
            .hero {
                padding: 56px 0 48px;
            }

                .hero h1 {
                    font-size: 2.2rem;
                }

            .hero-stats {
                gap: 1.5rem;
            }

            .sec-pad {
                padding: 56px 0;
            }
        }

/* =========================================================
   THEME READABILITY OVERRIDES
   Controlled by <body data-theme="light|dark">
   Keep this block at the bottom of the CSS file.
   ========================================================= */

/* Light mode safety */
.singlepage-site[data-theme="light"] {
    color-scheme: light;
}

/* Dark mode base safety */
.singlepage-site[data-theme="dark"] {
    color-scheme: dark;
    background: var(--color-dark, var(--color-ink, #111827));
    color: var(--color-white, #ffffff);
}

/* Navigation readability */
.singlepage-site[data-theme="dark"] .navbar {
    background: var(--color-dark, var(--color-ink, #111827));
    border-bottom-color: rgba(255,255,255,.1);
}

.singlepage-site[data-theme="dark"] .navbar-brand,
.singlepage-site[data-theme="dark"] .navbar-brand span {
    color: var(--color-white, #ffffff) !important;
}

.singlepage-site[data-theme="dark"] .nav-link:not(.btn-nav) {
    color: rgba(255,255,255,.74) !important;
}

.singlepage-site[data-theme="dark"] .nav-link:not(.btn-nav):hover {
    color: color-mix(in srgb, var(--brand-primary) 45%, #ffffff) !important;
    background: rgba(255,255,255,.08);
}


.singlepage-site[data-theme="light"] .navbar {
    background: var(--color-white, #ffffff);
    border-bottom-color: var(--color-border, #e5e7eb);
}

.singlepage-site[data-theme="light"] .navbar-brand,
.singlepage-site[data-theme="light"] .navbar-brand span {
    color: var(--color-dark, var(--color-ink, #111827)) !important;
}

.singlepage-site[data-theme="light"] .nav-link:not(.btn-nav) {
    color: var(--color-muted, #6b7280) !important;
}

.singlepage-site[data-theme="light"] .nav-link:not(.btn-nav):hover {
    color: var(--brand-primary) !important;
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
}


/* Hero readability */
.singlepage-site[data-theme="dark"] .hero h1,
.singlepage-site[data-theme="dark"] .hero h2,
.singlepage-site[data-theme="dark"] .hero h3,
.singlepage-site[data-theme="dark"] .hero-sub,
.singlepage-site[data-theme="dark"] .hero-eyebrow,
.singlepage-site[data-theme="dark"] .hero-label,
.singlepage-site[data-theme="dark"] .hero-brandmark-text {
    color: var(--color-white, #ffffff);
}

.singlepage-site[data-theme="dark"] .hero-sub {
    color: rgba(255,255,255,.74);
}

.singlepage-site[data-theme="light"] .hero h1,
.singlepage-site[data-theme="light"] .hero h2,
.singlepage-site[data-theme="light"] .hero h3 {
    color: var(--color-dark, var(--color-ink, #111827));
}

.singlepage-site[data-theme="light"] .hero-sub {
    color: var(--color-muted, #6b7280);
}

/* Dark section readability */
.singlepage-site[data-theme="dark"] .sec-pad,
.singlepage-site[data-theme="dark"] .svc-section,
.singlepage-site[data-theme="dark"] .services-section,
.singlepage-site[data-theme="dark"] .about-section,
.singlepage-site[data-theme="dark"] .testimonial-section,
.singlepage-site[data-theme="dark"] .testimonials-section,
.singlepage-site[data-theme="dark"] .faq-section,
.singlepage-site[data-theme="dark"] .contact-section,
.singlepage-site[data-theme="dark"] .cta-section {
    background: var(--color-dark, var(--color-ink, #111827));
    color: var(--color-white, #ffffff);
}

.singlepage-site[data-theme="dark"] h1,
.singlepage-site[data-theme="dark"] h2,
.singlepage-site[data-theme="dark"] h3,
.singlepage-site[data-theme="dark"] h4,
.singlepage-site[data-theme="dark"] h5,
.singlepage-site[data-theme="dark"] h6,
.singlepage-site[data-theme="dark"] .section-title,
.singlepage-site[data-theme="dark"] .sec-title,
.singlepage-site[data-theme="dark"] .section-heading {
    color: var(--color-white, #ffffff);
}

.singlepage-site[data-theme="dark"] p,
.singlepage-site[data-theme="dark"] .section-sub,
.singlepage-site[data-theme="dark"] .sec-sub,
.singlepage-site[data-theme="dark"] .text-muted,
.singlepage-site[data-theme="dark"] .lead {
    color: rgba(255,255,255,.72) !important;
}

/* Dark card/readability safety */
.singlepage-site[data-theme="dark"] .card,
.singlepage-site[data-theme="dark"] .svc-card,
.singlepage-site[data-theme="dark"] .service-card,
.singlepage-site[data-theme="dark"] .feature-card,
.singlepage-site[data-theme="dark"] .why-card,
.singlepage-site[data-theme="dark"] .testimonial-card,
.singlepage-site[data-theme="dark"] .faq-item,
.singlepage-site[data-theme="dark"] .contact-card,
.singlepage-site[data-theme="dark"] .info-card,
.singlepage-site[data-theme="dark"] .trust-item,
.singlepage-site[data-theme="dark"] .cred-item {
    background: var(--color-dark-soft, rgba(255,255,255,.06));
    color: var(--color-white, #ffffff);
    border-color: rgba(255,255,255,.12);
}

.singlepage-site[data-theme="dark"] .card p,
.singlepage-site[data-theme="dark"] .svc-card p,
.singlepage-site[data-theme="dark"] .service-card p,
.singlepage-site[data-theme="dark"] .feature-card p,
.singlepage-site[data-theme="dark"] .why-card p,
.singlepage-site[data-theme="dark"] .testimonial-card p,
.singlepage-site[data-theme="dark"] .faq-item p,
.singlepage-site[data-theme="dark"] .contact-card p,
.singlepage-site[data-theme="dark"] .info-card p {
    color: rgba(255,255,255,.72) !important;
}

/* Form field contrast safety outside locked form markup */
.singlepage-site[data-theme="dark"] input,
.singlepage-site[data-theme="dark"] textarea,
.singlepage-site[data-theme="dark"] select {
    background: rgba(255,255,255,.08);
    color: var(--color-white, #ffffff);
    border-color: rgba(255,255,255,.18);
}

.singlepage-site[data-theme="dark"] input::placeholder,
.singlepage-site[data-theme="dark"] textarea::placeholder {
    color: rgba(255,255,255,.5);
}



/* CTA/buttons keep each template's original hover and text-color behavior.
   This avoids forcing white text onto light brand colors like gold, blush, or pale accents. */

/* Ghost/outline button readability */
.singlepage-site[data-theme="dark"] .btn-secondary,
.singlepage-site[data-theme="dark"] .btn-ghost-white,
.singlepage-site[data-theme="dark"] .btn-hero-ghost,
.singlepage-site[data-theme="dark"] .btn-outline-brass,
.singlepage-site[data-theme="dark"] .btn-outline-coral,
.singlepage-site[data-theme="dark"] .btn-outline-soft {
    color: rgba(255,255,255,.9) !important;
    border-color: rgba(255,255,255,.32);
}

/* Contact form submit button safety */
.singlepage-site form button[type="submit"],
.singlepage-site form input[type="submit"],
.singlepage-site form .btn-primary {
    background: var(--brand-primary) !important;
    color: var(--brand-on-primary, #ffffff) !important;
    border-color: var(--brand-primary) !important;
}

.singlepage-site form button[type="submit"]:hover,
.singlepage-site form input[type="submit"]:hover,
.singlepage-site form .btn-primary:hover {
    background: var(--brand-primary-hover, var(--brand-primary)) !important;
    color: var(--brand-on-primary, #ffffff) !important;
    border-color: var(--brand-primary-hover, var(--brand-primary)) !important;
}

/* Footer readability */
.singlepage-site[data-theme="dark"] footer,
.singlepage-site[data-theme="dark"] .footer {
    background: var(--color-dark, var(--color-ink, #111827));
    color: rgba(255,255,255,.72);
    border-color: rgba(255,255,255,.1);
}

.singlepage-site[data-theme="dark"] footer a,
.singlepage-site[data-theme="dark"] .footer a {
    color: rgba(255,255,255,.82);
}

.singlepage-site[data-theme="dark"] footer a:hover,
.singlepage-site[data-theme="dark"] .footer a:hover {
    color: color-mix(in srgb, var(--brand-primary) 45%, #ffffff);
}

/* Section label dark mode — lightened brand for readability on dark bg */
.singlepage-site[data-theme="dark"] .sec-label {
    color: color-mix(in srgb, var(--brand-primary) 45%, #ffffff);
}
/* Feature check dark mode */
.singlepage-site[data-theme="dark"] .feat-check {
    background: rgba(255,255,255,.08);
    color: color-mix(in srgb, var(--brand-primary) 45%, #ffffff);
}