/* Layout */
.site {
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
}

.site-body {
    flex: 1;
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    backdrop-filter: saturate(180%) blur(6px);
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid #eee;
}

.nav {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    gap: 24px;
    align-items: center;
}

.brand {
    font-weight: 700;
    letter-spacing: .3px;
    margin-right: auto;
    text-decoration: none;
    color: #111;
}

/* Buttons */
.btn {
    padding: .55rem .9rem;
    border-radius: .5rem;
    text-decoration: none;
    border: 1px solid transparent;
}

.btn-primary {
    background: #178795;
    color: white;
}

    .btn-primary:hover {
        filter: brightness(.95);
    }

/* Footer */
.site-footer {
    border-top: 1px solid #eee;
    background: #fafafa;
}

    .site-footer .wrap {
        max-width: 1100px;
        margin: 0 auto;
        padding: 20px;
        display: flex;
        gap: 16px;
        align-items: center;
        flex-wrap: wrap;
    }

/* Sections */
.wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
}

.hero {
    background: linear-gradient(180deg,#f9fafb, #fff);
    border-bottom: 1px solid #eee;
}

    .hero h1 {
        font-size: 2.25rem;
        margin: 0 0 .5rem;
    }

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 14px;
    padding: 0;
    list-style: none;
}

    .features li {
        border: 1px solid #eee;
        border-radius: 12px;
        padding: 14px;
        background: #fff;
    }

/* Case study strip */
.case-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    gap: 16px;
}

    .case-strip article {
        border: 1px solid #eee;
        border-radius: 12px;
        padding: 16px;
        background: #fff;
    }

    .case-strip a {
        text-decoration: none;
    }
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    gap: 16px;
    margin: 24px 0;
}

.form-span {
    grid-column: 1 / -1;
}

.form-field label {
    display: block;
    font-weight: 600;
    margin: 0 0 6px;
}

.req {
    color: #b91c1c;
}

.input, .textarea {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    background: #fff;
}

    .input:focus, .textarea:focus {
        outline: none;
        border-color: #178795;
        box-shadow: 0 0 0 3px rgba(23,135,149,.15);
    }

.alert {
    border-radius: .5rem;
    padding: .75rem .9rem;
    margin: 1rem 0;
    border: 1px solid transparent;
}

    .alert.success {
        background: #ecfdf5;
        border-color: #a7f3d0;
    }

    .alert.error {
        background: #fef2f2;
        border-color: #fecaca;
    }
/* Header container */
.lx-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    transition: background-color .2s, box-shadow .2s, backdrop-filter .2s, border-color .2s;
}

    /* Top row + menu row share the glassy start */
    .lx-header.transparent .lx-topbar,
    .lx-header.transparent .lx-menubar {
        background: rgba(255,255,255,.58);
        backdrop-filter: saturate(160%) blur(8px);
        border-bottom: 1px solid rgba(0,0,0,.06);
    }

    /* Solid after scroll */
    .lx-header.scrolled .lx-topbar,
    .lx-header.scrolled .lx-menubar {
        background: #fff;
        backdrop-filter: none;
        box-shadow: 0 4px 14px rgba(0,0,0,.06);
        border-bottom-color: rgba(0,0,0,.08);
    }

/* Topbar spacing */
.lx-topbar {
    padding: .5rem 0;
}

.lx-brand img {
    display: block;
}

.lx-phone {
    white-space: nowrap;
}

/* Menu bar spacing */
.lx-menubar {
    padding: .35rem 0;
}

.nav-link {
    padding: .5rem .85rem;
}

/* Hero with image behind header */
.lx-hero {
    min-height: var(--hero-h, 45vh);
    display: grid;
    align-items: end;
    background-image: var(--hero-img), linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35));
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    padding: 5rem 0 2.25rem; /* space for text and to peek under header */
    position: relative;
}

    /* Top fade so white header text stays readable when glassy */
    .lx-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 35%);
        pointer-events: none;
    }

/* Mobile: keep header solid for contrast and when menu open */
@media (max-width: 991.98px) {
    .lx-header.transparent .lx-topbar,
    .lx-header.transparent .lx-menubar {
        background: #fff;
        backdrop-filter: none;
        box-shadow: 0 2px 10px rgba(0,0,0,.05);
    }
}

/* When mobile menu opens, force solid */
.lx-header.menu-open .lx-topbar,
.lx-header.menu-open .lx-menubar {
    background: #fff;
    backdrop-filter: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
}