:root{
  --bg:#f2f2f4; --ink:#151515; --muted:#6b7280;
  --brand:#2f6dff; --maxw:1200px; --radius:14px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{background:var(--bg); color:var(--ink);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height:1.6}

/* Layout helpers */
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.section{padding:64px 0}
.section-title{margin:0 0 24px; font-size:clamp(24px,3vw,38px)}

/* Header / nav */
.site-header{position:sticky; top:0; z-index:10; background:rgba(255,255,255,.7);
  backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid rgba(0,0,0,.06)}
.site-header .container{display:flex; align-items:center; justify-content:space-between; min-height:64px}
.brand{font-weight:600; font-size:1.25rem; text-decoration:none; color:var(--ink)}
.nav{display:flex; gap:26px}
.nav-link{color:var(--ink); text-decoration:none; position:relative; padding:8px 0}
.nav-link.active::after, .nav-link:hover::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:100%; background:var(--ink)
}

/* Hero */
.hero{position:relative; min-height:78vh; display:grid; align-items:center}
.hero-bg{position:absolute; inset:0; background-size:cover; background-position:center}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25))}
.hero-content{position:relative; color:#fff; max-width:900px}
.hero h1{font-weight:500; font-size:clamp(28px,5vw,48px); margin:0 0 24px}
.btn-row{display:flex; gap:14px; flex-wrap:wrap}

/* Buttons */
.btn{display:inline-block; padding:14px 26px; border-radius:40px; background:var(--brand);
  color:#fff; text-decoration:none; transition:transform .15s ease, opacity .2s ease}
.btn.ghost {background: transparent;border: 2px solid rgba(119,119,119,0.7);color: #777;transition: all 0.3s ease}
.btn.ghost:hover {background: #777;color: #fff}

/* Gallery */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px}
.grid a{display:block; border-radius:12px; overflow:hidden; background:#e5e7eb}
.grid img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s}
.grid a:hover img{transform:scale(1.02)}
.cta-centre{margin:26px 0 0; text-align:center}

/* Contact split */
.contact-wrap{display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:start}
.contact-text a{color:inherit; text-decoration:none}
.contact-text a:hover{text-decoration:underline}
.contact-img{width:100%; border-radius:12px; display:block}

/* Footer */
.site-footer{padding:26px 0; border-top:1px solid rgba(0,0,0,.06); color:var(--muted); font-size:.95rem}

/* Mobile */
@media (max-width:860px){
  .contact-wrap{grid-template-columns:1fr}
  .hero{min-height:68vh}
}