:root {
    --ink: #171f2e;
    --muted: #58627a;
    --canvas: #f7f4ef;
    --card: #fffdf9;
    --accent: #2f6f5f;
    --line: #d8d1c4;
}

html,
body {
    background:
        radial-gradient(circle at 20% 0%, rgba(47, 111, 95, 0.12), transparent 40%),
        radial-gradient(circle at 90% 20%, rgba(20, 31, 46, 0.12), transparent 36%),
        var(--canvas);
    color: var(--ink);
    min-height: 100%;
}

body {
    font-family: "Source Serif 4", "Georgia", serif;
}

.site-shell {
    min-height: 100vh;
}

.brand-mark {
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
}

.hero-card,
.section-card,
.contact-module {
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: 0 12px 36px rgba(23, 31, 46, 0.08);
}

.hero-card {
    border-radius: 20px;
    padding: 2.2rem;
}

.section-card {
    border-radius: 16px;
    padding: 1.8rem;
}

.contact-module {
    border-radius: 16px;
}

.section-image-wrap,
.section-image {
    border-radius: 14px;
    object-fit: cover;
}

.tracking {
    letter-spacing: 0.16em;
    color: var(--muted);
}

.form-grid {
    display: grid;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .hero-card {
        padding: 1.4rem;
    }

    .section-card {
        padding: 1.2rem;
    }
}