:root {
    --ink: #17212b;
    --muted: #66727d;
    --accent: #d8892b;
    --paper: #f6f3ee;
    --line: #e8e2d8;
}
* {
    box-sizing: border-box;
}
body {
    font-family: Manrope, sans-serif;
    color: var(--ink);
    background: #fff;
}
.navbar-brand {
    font-weight: 800;
    letter-spacing: -0.6px;
}
.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-grid;
    place-items: center;
    background: var(--accent);
    color: #fff;
    margin-right: 8px;
}
.nav-link {
    font-weight: 600;
}
.btn-brand {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn-brand:hover {
    background: #bd741f;
    border-color: #bd741f;
    color: #fff;
}
.hero {
    min-height: 76vh;
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg, rgba(9, 16, 24, 0.85), rgba(9, 16, 24, 0.35)),
        url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1800&q=85")
            center/cover;
}
.hero h1 {
    font-family: "Playfair Display", serif;
    font-size: clamp(2.7rem, 6vw, 5.7rem);
    line-height: 0.96;
}
.eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--accent);
}
.section-pad {
    padding: 88px 0;
}
.service-card,
.project-card {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(23, 33, 43, 0.08);
    height: 100%;
    transition: 0.25s;
}
.service-card:hover,
.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 44px rgba(23, 33, 43, 0.13);
}
.service-card img,
.project-card img {
    height: 220px;
    object-fit: cover;
}
.soft {
    background: var(--paper);
}
.stat {
    border-left: 3px solid var(--accent);
    padding-left: 18px;
}
.icon-box {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #fff3e5;
    color: var(--accent);
    font-size: 1.3rem;
}
.footer {
    background: #101820;
    color: #cbd1d6;
}
.footer a {
    color: #cbd1d6;
    text-decoration: none;
}
.page-hero {
    padding: 120px 0 70px;
    background:
        linear-gradient(90deg, rgba(12, 20, 28, 0.88), rgba(12, 20, 28, 0.5)),
        url("https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1600&q=85")
            center/cover;
    color: white;
}
.filter-btn.active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}