:root{
    --bg:#ffffff;
    --surface:#f8f8f9;
    --accent:#b76e79;
    --accent-2:#264653;
    --text:#222;
    --muted:#6b6b6b;
    --max-width:1100px;
    --radius:8px;
    --container-padding:1rem;
    --transition:200ms ease;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* layout */
.container{
    width:100%;
    max-width:var(--max-width);
    margin:0 auto;
    padding:0 var(--container-padding);
}

/* header */
.site-header{
    background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
    position:sticky;
    top:0;
    z-index:40;
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:0.75rem 0;
}
.logo{
    font-weight:700;
    color:var(--accent-2);
    text-decoration:none;
    font-size:1.1rem;
}
.nav-toggle{
    background:none;
    border:1px solid transparent;
    padding:0.5rem 0.75rem;
    border-radius:6px;
    display:inline-block;
}
.main-nav{display:none}
.main-nav.open{display:block}
.nav-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:.5rem;
}
.nav-list a{
    color:var(--text);
    text-decoration:none;
    padding:0.25rem 0.5rem;
    display:inline-block;
}

/* hero */
.hero{
    background:linear-gradient(120deg, rgba(183,110,121,0.06), rgba(38,70,83,0.04)), url('assets/images/hero.jpg') center/cover no-repeat;
    padding:3.5rem 0;
    color:var(--accent-2);
    text-align:center;
}
.hero-inner{max-width:900px;margin:0 auto}
.hero-title{
    font-size:clamp(1.6rem, 4vw, 2.6rem);
    margin:0 0 .5rem;
}
.hero-sub{margin:0 0 1.25rem;color:var(--muted)}

/* buttons */
.btn{
    display:inline-block;
    text-decoration:none;
    border:none;
    cursor:pointer;
    padding:.55rem .9rem;
    border-radius:6px;
    transition:transform var(--transition);
}
.btn-primary{
    background:var(--accent);
    color:#fff;
    box-shadow:0 6px 18px rgba(183,110,121,0.12);
}
.btn-primary:hover{transform:translateY(-3px)}

/* sections */
.section{padding:2rem 0}
.section h2{margin-top:0}
.services-grid{
    display:grid;
    gap:1rem;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    margin-top:1rem;
}
.service{
    background:var(--surface);
    padding:1rem;
    border-radius:var(--radius);
    box-shadow:0 6px 18px rgba(30,30,30,0.03);
}

/* gallery */
.gallery-grid{
    display:grid;
    gap:0.5rem;
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
    margin-top:1rem;
}
.gallery-grid img{
    width:100%;
    height:160px;
    object-fit:cover;
    border-radius:6px;
    display:block;
}

/* about */
.about-inner{
    display:grid;
    gap:1rem;
}
.about-image img{width:100%;height:auto;border-radius:6px;display:block}

/* contact */
.contact-grid{
    display:grid;
    gap:1rem;
}
.contact-card{
    background:var(--surface);
    padding:1rem;
    border-radius:var(--radius);
}
.contact-form{
    display:flex;
    flex-direction:column;
    gap:.5rem;
}
.contact-form input,
.contact-form textarea,
.contact-form select{
    padding:.55rem;
    border-radius:6px;
    border:1px solid #e6e6e6;
    font:inherit;
}
.contact-form button{align-self:flex-start;margin-top:.5rem}

/* footer */
.site-footer{padding:1rem 0;background:#fff;border-top:1px solid #f0f0f0}
.footer-inner{text-align:center;color:var(--muted)}

/* responsive: >= 768px */
@media (min-width:768px){
    .nav-toggle{display:none}
    .main-nav{display:block}
    .nav-list{flex-direction:row;gap:1rem}
    .hero{padding:5rem 0}
    .about-inner{grid-template-columns:1fr 360px;align-items:center}
    .contact-grid{grid-template-columns:1fr 420px}
}