:root{
  --brand:#06b6d4;     /* turquoise accent (tweak to match your logo if needed) */
  --ink:#0f172a;       /* dark text */
  --muted:#475569;     /* secondary text */
  --bg:#ffffff;
  --card:#f8fafc;
  --ring:rgba(6,182,212,.35);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Inter, Lato, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; background:#fff; border-bottom:1px solid #e5e7eb;
}
.brand img{height:44px; width:auto; display:block}

.site-nav{display:flex; align-items:center; gap:.75rem}
.nav-link{padding:.5rem .75rem; color:var(--ink); text-decoration:none; border-radius:10px}
.nav-link:hover{background:#f1f5f9}
.nav-link.active{color:#000; font-weight:700}
.nav-cta{background:var(--brand); color:#fff; padding:.6rem .9rem; border-radius:999px; text-decoration:none; font-weight:700}
.nav-cta:hover{opacity:.9}

/* Mobile nav */
.nav-toggle{display:none; background:none; border:none; padding:.5rem; margin-left:auto}
.nav-toggle span{display:block; width:24px; height:2px; background:#0f172a; margin:5px 0; border-radius:2px}
@media (max-width: 780px){
  .nav-toggle{display:block}
  .site-nav{position:fixed; right:1rem; top:64px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:.5rem; display:none; flex-direction:column; min-width:220px; box-shadow:0 10px 30px rgba(0,0,0,.08)}
  .site-nav.open{display:flex}
}

/* Hero */
.hero{padding:2rem 1rem 1rem}
.hero-content{max-width:950px; margin:0 auto 1.25rem auto; text-align:center}
.hero h1{font-size:clamp(2rem,4vw,3rem); line-height:1.1; margin:.25rem 0}
.hero p{color:var(--muted); margin:0 auto 1rem}
.hero-ctas{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap}

.btn{display:inline-block; text-decoration:none; border:1px solid var(--brand); padding:.7rem 1rem; border-radius:999px; font-weight:700}
.btn-primary{background:var(--brand); color:#fff}
.btn-outline{background:transparent; color:var(--brand)}
.btn:hover{filter:brightness(.98)}

.hero-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; max-width:1200px; margin:1rem auto 0}
.hero-card{background:var(--card); border-radius:var(--radius); overflow:hidden}
.hero-card img{width:100%; height:240px; object-fit:cover; display:block}
@media (max-width: 900px){ .hero-gallery{grid-template-columns:1fr; } .hero-card img{height:220px} }

.nowrap{white-space:nowrap}

/* Features */
.features{padding:2rem 1rem}
.features h2{text-align:center; margin:0 0 1rem}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:1100px; margin:0 auto}
.feature{background:var(--card); border-radius:var(--radius); padding:1rem}
.feature h3{margin:.25rem 0 .25rem}
.center{text-align:center}
.m-top{margin-top:1.25rem}
@media (max-width: 900px){ .feature-grid{grid-template-columns:1fr} }

/* Info strip */
.info-strip{background:#f1f5f9; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding:1rem}
.info{padding:.25rem .5rem}
.info h4{margin:.25rem 0}
@media (max-width: 900px){ .info-strip{grid-template-columns:1fr} }

/* Containers */
.container{max-width:1100px; padding:1rem; margin:0 auto}
.lead{color:var(--muted); max-width:70ch}

/* Services */
.service{margin:1.5rem 0; background:#fff; border:1px solid #e5e7eb; border-radius:var(--radius); overflow:hidden}
.service-hero{width:100%; height:260px; object-fit:cover; display:block}
.service-body{padding:1rem}
.price-list{list-style:none; padding:0; margin:.5rem 0 0}
.price-list li{padding:.35rem 0}

/* About page */
.about-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:1rem; align-items:start; margin-top:1rem}
@media (max-width: 900px){ .about-grid{grid-template-columns:1fr} }
.checklist{padding-left:1.1rem}
.checklist li{margin:.35rem 0}
.contact-card{background:var(--card); border-radius:var(--radius); padding:1rem; border:1px solid #e5e7eb}
.contact-card .full{display:block; width:100%; text-align:center; margin-top:.75rem}

/* Footer */
.site-footer{margin-top:2rem; padding:1rem; background:#0b1220; color:#cbd5e1}
.footer-row{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.footer-brand{display:flex; align-items:center; gap:.75rem}
.footer-brand img{height:36px}
.footer-links a{color:#e2e8f0}
.copy{text-align:center; margin:.75rem 0 0; color:#94a3b8}

/* Focus rings */
a,button{outline-color:var(--ring)}
a:focus-visible, button:focus-visible{outline:3px solid var(--ring); outline-offset:2px}