:root{
  --bg:#f5f7f5;
  --surface:#ffffff;
  --soft:#eef3ef;
  --text:#151917;
  --muted:#606963;
  --line:#d8dfda;
  --accent:#184f3b;
  --accent2:#12382b;
  --shadow:0 12px 34px rgba(18,23,21,.08);
  --radius:22px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--text);background:linear-gradient(180deg,#fbfcfb 0%,#f1f4f1 100%)}
a{text-decoration:none;color:inherit}
img{display:block;width:100%}
.container{width:min(var(--max),calc(100% - 2rem));margin:0 auto}

.site-header{position:sticky;top:0;z-index:1000;backdrop-filter:blur(14px);background:rgba(251,252,251,.9);border-bottom:1px solid rgba(216,223,218,.8)}
.nav-wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:1rem;position:relative}
.brand{display:flex;align-items:center;gap:.85rem}
.brand-logo{width:48px;height:48px;border-radius:16px;overflow:hidden;box-shadow:0 12px 24px rgba(24,79,59,.18)}
.brand-text{display:flex;flex-direction:column;gap:.12rem}
.brand-text strong{font-size:1rem;letter-spacing:-.03em}
.brand-text span{font-size:.84rem;color:var(--muted)}
.nav{display:flex;align-items:center;gap:1.15rem}
.nav a{color:var(--muted);font-weight:500}
.nav a:hover{color:var(--text)}
.menu-toggle{display:none;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.68rem .85rem;cursor:pointer}
.header-actions{display:flex;gap:.6rem}
.header-pill,.header-cta,.cta-primary,.cta-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.88rem 1.15rem;border-radius:999px;font-weight:700;transition:.2s ease}
.header-pill,.cta-secondary{background:var(--surface);border:1px solid var(--line);color:var(--text)}
.header-cta,.cta-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow)}
.header-pill:hover,.cta-secondary:hover{background:#fafcfa;border-color:#c4cdc7;transform:translateY(-1px)}
.header-cta:hover,.cta-primary:hover{background:var(--accent2);transform:translateY(-1px)}

.hero{padding:4.2rem 0 2rem}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;align-items:center}
.hero-copy,.hero-media,.service-card,.contact-card,.work-card,.instagram-box,.seo-card{background:rgba(255,255,255,.92);border:1px solid rgba(216,223,218,.9);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-copy{padding:2rem}
.hero-media{overflow:hidden}
.hero-media img{aspect-ratio:4/3;object-fit:cover}
.eyebrow{display:inline-flex;padding:.46rem .8rem;border-radius:999px;background:var(--soft);color:var(--accent);font-size:.82rem;font-weight:700;margin-bottom:1rem}
h1,h2,h3{margin:0;line-height:1.08;letter-spacing:-.04em}
h1{font-size:clamp(1.6rem, 4vw, 2.6rem);max-width: none;}
h2{font-size:clamp(1.8rem,3vw,2.7rem)}
.lead{margin:1rem 0 0;color:var(--muted);font-size:1.08rem;max-width:58ch}
.quick-list{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.quick-list span{padding:.62rem .82rem;border-radius:999px;background:#f7faf7;border:1px solid var(--line);font-size:.92rem;color:#314039}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.helper-text{margin:.95rem 0 0;color:var(--muted)}

section{padding:1.15rem 0 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1rem}
.section-head p{margin:0;color:var(--muted);max-width:54ch}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.service-card{padding:1.2rem}
.icon{width:50px;height:50px;border-radius:16px;background:#edf4ef;color:var(--accent);display:grid;place-items:center;font-size:1.2rem;margin-bottom:1rem}
.service-card p,.contact-card p,.seo-card p{color:var(--muted);margin:.6rem 0 0}
.seo-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem}
.seo-card{padding:1.2rem}
.area-list{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.6rem}
.area-list li{display:flex;gap:.6rem;color:var(--muted)}
.area-list li::before{content:"•";color:var(--accent)}
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.work-card{overflow:hidden}
.work-card img{aspect-ratio:4/3;object-fit:cover}
.instagram-box{margin-top:1rem;padding:1.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.instagram-box p{margin:.25rem 0 0;color:var(--muted)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.contact-card{padding:1.2rem}
.contact-actions{display:grid;gap:.75rem;margin-top:1rem}
.contact-actions a{width:100%}
.message-box{margin-top:.9rem;padding:1rem;border-radius:18px;background:#f8fbf8;border:1px solid var(--line);white-space:pre-line;color:#2c3933}
.site-footer{padding:1.5rem 0 2.5rem}
.footer-box{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.2rem;border-top:1px solid var(--line);color:var(--muted)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

@media (max-width:980px){
  .hero-grid,.services-grid,.works-grid,.contact-grid,.seo-grid{grid-template-columns:1fr}
  .nav{position:absolute;top:calc(100% + .7rem);left:1rem;right:1rem;display:none;flex-direction:column;align-items:stretch;gap:.3rem;padding:.8rem;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .menu-toggle{display:inline-flex}
  .desktop-only{display:none}
}
@media (min-width:981px){
  .mobile-only{display:none}
}
@media (max-width:640px){
  .hero{padding-top:3.3rem}
  .hero-copy,.service-card,.contact-card,.instagram-box,.seo-card{padding:1rem}
  .cta-row{flex-direction:column}
  .cta-primary,.cta-secondary{width:100%}
  h1{max-width:9ch}
  .brand-logo{width:42px;height:42px}
}


/* Premium service cards */
.services-grid-premium .service-card{
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.services-grid-premium .service-card h3{
  margin-bottom: .2rem;
}
.services-grid-premium .service-card p{
  margin-top: .55rem;
}
.services-grid-premium .icon{
  box-shadow: inset 0 0 0 1px rgba(24,79,59,.08);
}