/* =========================================================
   LandscapesPA — Brand Theme
   Grounded in the trade: blueprint grids, survey dimension
   lines, and the green from the company's own logo mark.
   ========================================================= */

:root {
    /* --- Brand palette --- */
    --brand-green: #135019;
    --brand-green-deep: #0d3812;
    --quote-heading: #92d050;
    --quote-subheading: #c6e0b4;
    --ink: #1c1f1b;
    --limestone: #edeae1;
    --safety-orange: #e2632a;
    --clay: #8c7a5e;
    --success-green: #2d7a3a;
    /* --- Type --- */
    --font-display: "Space Grotesk", sans-serif;
    --font-body: "IBM Plex Sans", sans-serif;
    --font-mono: "IBM Plex Mono", monospace;
    --font-script: "Great Vibes", cursive;
    /* --- Bootstrap 5.3 variable overrides --- */
    --bs-primary: var(--brand-green);
    --bs-primary-rgb: 19, 80, 25;
    --bs-primary-text-emphasis: var(--brand-green-deep);
    --bs-primary-bg-subtle: #e6efe2;
    --bs-primary-border-subtle: #b9d2af;
    --bs-link-color: var(--brand-green);
    --bs-link-hover-color: var(--brand-green-deep);
    --bs-body-bg: var(--limestone);
    --bs-body-color: var(--ink);
    --bs-body-font-family: var(--font-body);
    --bs-border-radius: 0.25rem;
    --bs-border-radius-sm: 0.125rem;
    --bs-border-radius-lg: 0.25rem;
}

body {
    font-family: var(--font-body);
}

h1, h2, h3, h4, .display-1, .display-2, .display-3, .display-4 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.font-mono {
    font-family: var(--font-mono);
}

/* --- Brand mark --- */
.brand-mark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.15rem;
    line-height: 1;
}

    .brand-mark .brand-script {
        font-family: var(--font-script);
        font-size: 1.6rem;
        color: var(--brand-green);
    }

    .brand-mark .brand-bold {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--ink);
    }

/* --- Eyebrow labels --- */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clay);
}

/* --- Signature element: dimension-line divider --- */
.dimension-divider {
    display: flex;
    align-items: center;
    margin: 2.5rem 0;
}

    .dimension-divider .dim-tick {
        width: 1px;
        height: 10px;
        background: var(--clay);
        flex-shrink: 0;
    }

    .dimension-divider .dim-line {
        flex: 1;
        height: 1px;
        background: var(--clay);
        margin: 0 2px;
    }

    .dimension-divider.dimension-divider-accent .dim-line,
    .dimension-divider.dimension-divider-accent .dim-tick {
        background: var(--brand-green);
    }

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    zoom: 0.4;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: forestgreen;
}

input:focus + .slider {
    box-shadow: 0 0 1px forestgreen;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

@media (prefers-reduced-motion: no-preference) {
    .hero .dimension-divider .dim-line {
        transform-origin: left center;
        animation: dim-draw 900ms ease-out 250ms both;
    }

    @keyframes dim-draw {
        from {
            transform: scaleX(0);
        }

        to {
            transform: scaleX(1);
        }
    }
}

/* --- Hero --- */
.hero {
    background-color: var(--limestone);
    background-image: linear-gradient(rgba(19, 80, 25, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(19, 80, 25, 0.07) 1px, transparent 1px);
    background-size: 32px 32px;
    padding: 5rem 0 4rem;
}

    .hero h1 {
        font-size: clamp(2.25rem, 4vw, 3.25rem);
        color: var(--ink);
    }

    .hero .lead {
        color: var(--clay);
        max-width: 38rem;
    }

/* --- Feature cards --- */
.feature-card {
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: var(--bs-border-radius);
    background: #fff;
    height: 100%;
}

    .feature-card .feature-icon {
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bs-primary-bg-subtle);
        color: var(--brand-green);
        border-radius: var(--bs-border-radius);
        font-family: var(--font-mono);
        font-weight: 700;
    }

/* --- Pricing --- */
.pricing-card {
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: var(--bs-border-radius);
    background: #fff;
}

    .pricing-card .price {
        font-family: var(--font-mono);
        font-size: 2.25rem;
        color: var(--ink);
    }

        .pricing-card .price .period {
            font-size: 1rem;
            color: var(--clay);
            font-family: var(--font-body);
        }

/* --- CTA band --- */
.cta-band {
    background: var(--ink);
    color: #fff;
    padding: 4rem 0;
}

    .cta-band .btn-accent {
        background: var(--safety-orange);
        border-color: var(--safety-orange);
        color: #fff;
    }

        .cta-band .btn-accent:hover {
            background: #c8511f;
            border-color: #c8511f;
        }

/* --- Footer --- */
footer.site-footer {
    background: var(--ink);
    color: rgba(255,255,255,0.7);
    padding: 2.5rem 0;
    font-size: 0.9rem;
}

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

        footer.site-footer a:hover {
            color: #fff;
            text-decoration: underline;
        }