:root{
  --leaf:#77C24D;      /* primary light green from logo */
  --leaf-dark:#5BA636; /* darker green */
  --earth:#6b4b3e;     /* brown from logo */
  --ink:#2a2a2a;
  --cream:#F7F5F2;
  --card:#ffffffcc;
  --ring: rgba(119,194,77,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --radius: 32px;
  --header-h: 78px;
  --maxw: 1100px;
}
/* Reset & base */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background: radial-gradient(1200px 1200px at 10% 10%, #f8fff3 0%, #f3fff0 30%, #eef8ea 55%, #ecf6e9 100%) fixed;
}
a{color:inherit;text-decoration:none}

/* Header */
.header{
  position:sticky; top:0; z-index:50; height:var(--header-h);
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.75));
  box-shadow:0 1px 0 rgba(0,0,0,.06)
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px; height:100%;
  display:flex; align-items:center; gap:14px}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand img{height:46px; width:auto; display:block}
.brand .wordmark{display:flex; flex-direction:column; line-height:1}
.brand .title{font-family:"Playfair Display", serif; font-weight:700; letter-spacing:.3px; font-size:1.125rem; color:var(--earth)}
.brand .script{font-family:"Dancing Script", cursive; font-size:1.05rem; color:var(--leaf-dark)}

nav{margin:0 auto;}
.nav{display:flex; align-items:center; gap:18px; font-weight:600}
.nav a{padding:10px 8px; border-radius:12px; opacity:.8}
.nav a:hover{background:#00000008; opacity:1}
.nav a.active{color:var(--earth); box-shadow:inset 0 0 0 2px var(--ring); background:#ffffffbf}

.cta{margin-left:auto}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 16px; border-radius:999px; font-weight:700;
  border:2px solid var(--leaf-dark);
  background:linear-gradient(180deg, var(--leaf) 0%, var(--leaf-dark) 100%);
  color:#fff; box-shadow:var(--shadow)
}
.btn:focus{outline:4px solid var(--ring); outline-offset:2px}

/* Stage */
.stage{max-width:var(--maxw); margin:26px auto 22px; padding:0 20px}
.card{
  position:relative; border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; border:1px solid #e8efe5;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.88));
}
/* Subtle gradient border */
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(119,194,77,.55), rgba(107,75,62,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none
}

/* Horiz. carousel */
.viewport{
  height:clamp(540px, 72vh, 740px);
  overflow:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  display:grid; grid-auto-flow:column; grid-auto-columns:100%;
}
.panel{
  scroll-snap-align:start; padding:34px;
  display:grid; grid-template-columns: 1.1fr .9fr;
  gap:28px; align-items:stretch
}
.panel:nth-child(odd){
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.75))
}

/* Content styles */
.blob{
  background:
    radial-gradient(120% 120% at 15% 15%, rgba(119,194,77,.16), rgba(119,194,77,.10) 40%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #ffffff, #f9fbf7);
  border:1px solid #e6efe4; border-radius:36px;
  padding:26px; box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.03)
}
.kicker{font-weight:700; color:var(--leaf-dark); letter-spacing:.06em; text-transform:uppercase; font-size:.75rem}
h1,h2{font-family:"Playfair Display", serif; color:var(--earth); margin:10px 0}
h1{font-size:clamp(1.8rem, 2.6vw + 1rem, 2.6rem)}
h2{font-size:clamp(1.4rem, 1.7vw + .9rem, 2.0rem)}
p{line-height:1.7; margin:10px 0 14px}
ul{margin:10px 0 0 1.1em}

.photo{position:relative; border-radius:30px; overflow:hidden;
  background:linear-gradient(180deg, #eaf6e5, #f8fff2); border:1px solid #e6eee2}
.photo .ph{position:absolute; inset:0; background-size:cover; background-position:center}
.photo .overlay{
  position:absolute; inset:auto 16px 16px auto; background:#ffffffda;
  color:var(--earth); padding:8px 12px; border-radius:999px; font-weight:700;
  border:1px solid #ede7e1
}

/* Services grid */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}
.service{border:1px solid #e6eee2; border-radius:16px; padding:14px; background:#fff}
.service .name{font-weight:700}
.prices{display:flex; gap:10px; flex-wrap:wrap; font-variant-numeric:tabular-nums}

/* Staff */
.staff{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.person{border:1px solid #e6eee2; background:#fff; border-radius:18px; padding:14px}
.person .avatar{aspect-ratio: 1 / 1; border-radius:14px; background:linear-gradient(180deg,#ecf6ea,#f9fff5)}
.person h3{margin:.5rem 0 .25rem; font-family:"Playfair Display", serif; color:var(--earth)}
.muted{color:#6b6b6b; font-size:.95rem}

/* Socials */
.socials{display:flex; gap:12px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:#fff; border:1px solid #e6eee2; font-weight:600}

/* Contact strip */
.contact{
  max-width:var(--maxw); margin:12px auto 36px; padding:16px 20px;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  border:1px solid #e6eee2; background:#fff; border-radius:16px
}
.contact a{font-weight:700; color:var(--earth)}

/* Mobile */
@media (max-width: 860px){
  nav{display:none}
  .panel{grid-template-columns: 1fr; gap:16px; padding:20px}
  .viewport{height:clamp(520px, 72vh, 800px)}
  .brand .title{font-size:1rem}
  .brand .script{font-size:.95rem}
  .btn{padding:10px 14px}
}