:root {
    --brand: #35623C;
    --brand-2: #2A4C2F;
    --ink: #152017;
    --muted: #4e544e;
    --soft: #F3F6F3;
    --card: #ffffff;
    --ring: rgba(53, 98, 60, .18);

    --topbar-height: 48px;
    --navbar-height: 104px;
    --header-offset: calc(var(--topbar-height) + var(--navbar-height));
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--ink);
    padding-top: var(--header-offset);
}

/* -------------------- */
/* TOPBAR */
/* -------------------- */

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: var(--topbar-height);
    z-index: 1031;
    display: flex;
    align-items: center;
    background:
            radial-gradient(1100px 450px at 10% 10%, rgba(255, 255, 255, .12), transparent 55%),
            radial-gradient(900px 420px at 90% 25%, rgba(255, 255, 255, .10), transparent 55%),
            linear-gradient(135deg, var(--brand) 0%, #234529 100%);
    color: #fff;
    font-size: 14px;
    padding: 0.35rem 0;
}

.topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.topbar-left,
.topbar-center,
.topbar-right {
    min-width: 0;
}

.topbar-left {
    flex: 1 1 260px;
}

.topbar-center {
    flex: 1 1 280px;
    text-align: center;
    font-weight: 700;
    letter-spacing: .04em;
    font-size: 16px;
    padding: 0 .5rem;
}

.topbar-right {
    flex: 1 1 220px;
    text-align: right;
}

.topbar i {
    opacity: .85;
}

/* -------------------- */
/* NAVBAR */
/* -------------------- */

.navbar {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    width: 100%;
    min-height: var(--navbar-height);
    z-index: 1030;
    backdrop-filter: saturate(180%) blur(10px);
    /*background: rgba(255, 255, 255, .92);*/
    background: rgba(255, 255, 255);
    border-bottom: 1px solid rgba(21, 32, 23, .08);
}

.navbar .nav-link {
    font-weight: 600;
    color: var(--ink);
    opacity: .78;
}

.navbar .nav-link:hover {
    opacity: 1;
    color: var(--brand);
}

.navbar-brand img {
    height: 88px;
    width: auto;
}

/* -------------------- */
/* BUTTONS */
/* -------------------- */

.btn-brand {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-2);
    --bs-btn-hover-border-color: var(--brand-2);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}

.btn-outline-brand {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
}

/* -------------------- */
/* HERO */
/* -------------------- */

.hero {
    position: relative;
    min-height: calc(100vh - var(--header-offset));
    overflow: hidden;
    background-image: url("../img/background.jpg");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    /*background:
            radial-gradient(1100px 620px at 18% 18%, rgba(53, 98, 60, .55), transparent 60%),
            radial-gradient(900px 520px at 88% 22%, rgba(53, 98, 60, .42), transparent 58%),
            radial-gradient(1100px 620px at 50% 92%, rgba(53, 98, 60, .32), transparent 55%),
            linear-gradient(180deg, #f2fbf2 0%, #e8f5ea 42%, #ffffff 70%);*/
}

.hero-content {
    position: relative;
    padding: 3rem 0;
}

.hero-row {
    padding: 32px;
}

.hero-row-laws {
    min-height: 35vh;
}

.hero h1 {
    letter-spacing: -0.03em;
    line-height: 1.02;
}

.hero-lead {
    max-width: 58ch;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .85rem;
    border: 1px solid rgba(53, 98, 60, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    color: var(--brand);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .78rem;
    box-shadow: 0 10px 24px rgba(53, 98, 60, .10);
}

/* -------------------- */
/* SECTIONS */
/* -------------------- */

.section {
    padding: 5rem 0;
}

.section-soft {
    background: var(--soft);
}

.section-about {
    background: var(--soft);
}

.eyebrow {
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
}

.section-title {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    letter-spacing: -0.02em;
}

.muted {
    color: var(--muted);
}

/* -------------------- */
/* CARDS */
/* -------------------- */

.feature-card,
.service-card,
.about-card {
    background: var(--card);
    border: 1px solid rgba(21, 32, 23, .08);
    border-radius: 1.25rem;
    box-shadow: 0 14px 45px rgba(0, 0, 0, .06);
}

.about-card {
    padding: 2.5rem;
}

.hero .feature-card {
    box-shadow: 0 18px 60px rgba(0, 0, 0, .10);
}

.icon-pill {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(53, 98, 60, .10);
    border: 1px solid rgba(53, 98, 60, .18);
    color: var(--brand);
}

.service-wide {
    align-items: flex-start;
}

.service-wide .icon-pill {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}

/* -------------------- */
/* CHECKLIST */
/* -------------------- */

.checklist li {
    margin-bottom: .55rem;
    display: flex;
    gap: .65rem;
}

.checklist i {
    color: var(--brand);
}

/* -------------------- */
/* CONTACT */
/* -------------------- */

.contact {
    background:
            radial-gradient(1100px 450px at 10% 10%, rgba(255, 255, 255, .12), transparent 55%),
            radial-gradient(900px 420px at 90% 25%, rgba(255, 255, 255, .10), transparent 55%),
            linear-gradient(135deg, var(--brand) 0%, #234529 100%);
    color: #fff;
}

.contact .muted {
    color: rgba(255, 255, 255, .78);
}

.contact a {
    color: #fff;
}

.contact .contact-card {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 1.25rem;
}

/* -------------------- */
/* FOOTER */
/* -------------------- */

.footer {
    background:
            radial-gradient(1100px 450px at 10% 10%, rgba(255, 255, 255, .10), transparent 55%),
            radial-gradient(900px 420px at 90% 25%, rgba(255, 255, 255, .08), transparent 55%),
            linear-gradient(135deg, var(--brand) 0%, #234529 100%);
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.footer-links a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .78rem;
}

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

.footer-copy {
    color: rgba(255, 255, 255, .7);
}

/* -------------------- */
/* HELPERS */
/* -------------------- */

.anchor-offset {
    scroll-margin-top: calc(var(--header-offset) + 16px);
}

.brand-highlight {
    color: var(--brand);
}

.text-brand {
    color: var(--brand);
}

/* -------------------- */
/* STEP LIST */
/* -------------------- */

.step-list {
    display: grid;
    gap: 1rem;
}

.step {
    display: flex;
    gap: 1rem;
}

/* -------------------- */
/* BACK TO TOP */
/* -------------------- */

.btt {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    z-index: 9999;
}

.btt.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* -------------------- */
/* REVEAL */
/* -------------------- */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* -------------------- */
/* CERT */
/* -------------------- */

.cert-img {
    max-height: 72px;
}

/* -------------------- */
/* RESPONSIVE */
/* -------------------- */

@media (max-width: 1199px) {
    :root {
        --topbar-height: 96px;
        --header-offset: calc(var(--topbar-height) + var(--navbar-height));
    }

    .topbar {
        height: var(--topbar-height);
        min-height: 0;
    }

    .topbar .container {
        justify-content: center;
        align-content: center;
        gap: .35rem;
        height: 100%;
    }

    .topbar-left,
    .topbar-center,
    .topbar-right {
        flex: 1 1 100%;
        text-align: center;
    }

    .topbar-center {
        font-size: 15px;
        line-height: 1.2;
    }
}

@media (max-width: 768px) {
    :root {
        --topbar-height: 108px;
        --navbar-height: 88px;
        --header-offset: calc(var(--topbar-height) + var(--navbar-height));
    }

    .topbar {
        height: var(--topbar-height);
    }

    .topbar {
        font-size: 13px;
    }

    .topbar-center {
        font-size: 15px;
        letter-spacing: .02em;
    }

    .topbar .container {
        padding-left:0;
    }

    .display-4 {
        font-size: calc(1.2rem + 2.3vw);
    }

    .navbar-brand img {
        height: 72px;
    }

    .hero-content {
        margin-top: 64px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}