:root{
  --bg:#FAF7F2;
  --ink:#2F2F2F;
  --muted:#5B5B5B;
  --brand:#8FAF9F;
  --brand2:#E7D7C8;
  --card:#FFFFFF;
  --line:rgba(47,47,47,.12);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
}

a{color:inherit;}
.container{max-width:980px;margin:0 auto;padding:0 18px;}

.topbar{
  background:var(--brand);
  color:#fff;
  position:sticky; top:0; z-index:10;
  border-bottom:1px solid rgba(255,255,255,.22);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:18px 0;
}
.brand{
  display:flex; align-items:baseline; gap:10px; text-decoration:none;
}
.brand strong{font-size:18px; letter-spacing:.2px;}
.brand span{font-size:12px; opacity:.9;}
.links{display:flex; gap:14px; flex-wrap:wrap;}
.links a{
  color:#fff; text-decoration:none; font-weight:600; font-size:14px;
  padding:8px 10px; border-radius:10px;
}
.links a[aria-current="page"], .links a:hover{
  background:rgba(255,255,255,.18);
}

.hero{
  padding:40px 0 32px;
  background: linear-gradient(180deg, rgba(143,175,159,.22), rgba(250,247,242,0));
}
.hero h1{margin:0 0 8px; font-size:38px; letter-spacing:.2px;}
.hero p{margin:0; color:var(--muted); font-weight:800; font-size:16px;}
.hero .ctaRow{margin-top:18px; display:flex; gap:12px; flex-wrap:wrap;}
.btn{
  display:inline-block; text-decoration:none;
  padding:10px 14px; border-radius:12px;
  border:1px solid var(--line);
  background:#fff; font-weight:700; font-size:14px;
}
.btn.primary{
  background:var(--brand);
  color:#fff; border-color:rgba(255,255,255,.0);
}
.btn:hover{transform:translateY(-1px); transition:.12s ease;}

.section{padding:26px 0;}
.section h2{margin:0 0 10px; font-size:22px;}
.section p{margin:0 0 10px; color:var(--muted);}
.ctaRow {margin-top: 48px !important;} 
.cardGrid{
  display:grid; gap:14px;
  grid-template-columns: repeat(12, 1fr);
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
}
.card h3{margin:0 0 6px; font-size:16px;}
.card p{margin:0; color:var(--muted); font-size:14px;}
.span4{grid-column: span 4;}
.span6{grid-column: span 6;}
.span12{grid-column: span 12;}

.badge{
  display:inline-block;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(143,175,159,.18);
  border:1px solid rgba(143,175,159,.35);
  font-size:12px; font-weight:700; color:#2d4c3f;
}

.galleryGrid{
  display:grid; gap:14px;
  grid-template-columns: repeat(12, 1fr);
}
.ph{
  grid-column: span 4;
  aspect-ratio: 4 / 3;
  border-radius:16px;
  border:1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(143,175,159,.35), rgba(231,215,200,.55));
  display:flex; align-items:center; justify-content:center;
  color:#2d4c3f; font-weight:800;
}

.list{
  margin:10px 0 0;
  padding-left:18px;
  color:var(--muted);
}
.kicker{color:#5f8f7b; font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase;}

.footer{
  margin-top:28px;
  border-top:1px solid var(--line);
  padding:18px 0;
  color:var(--muted);
  font-size:13px;
}

.form{
  display:grid; gap:12px; max-width:640px;
}
label{font-weight:700; font-size:13px;}
input, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font:inherit;
}
textarea{min-height:140px; resize:vertical;}
.note{font-size:13px; color:var(--muted);}

@media (max-width: 820px){
  .hero h1{font-size:30px;}
  .span4{grid-column: span 12;}
  .span6{grid-column: span 12;}
  .ph{grid-column: span 6;}
}
@media (max-width: 520px){
  .ph{grid-column: span 12;}
  .links a{padding:8px 8px;}
}

/* Hero image (optional): add an image file at images/hero.jpg and it will show automatically */
.hero.hasImage{
  background:
    linear-gradient(180deg, rgba(47,47,47,.25), rgba(250,247,242,0) 70%),
    url("images/hero.jpg");
  background-size: cover;
  background-position: center;
  color:#fff;
}
.hero.hasImage p{color:rgba(255,255,255,.92);}
.hero.hasImage .kicker{color:rgba(255,255,255,.92);}