@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');

:root{
  --cream:#fdf8f1;
  --cream-dark:#f5efe6;
  --charcoal:#1c1e1b;
  --forest:#2d3a2e;
  --clay:#34b2d3;
  --clay-dark:#a86549;
  --sage:#e8ebe3;
  --line:#e9e1d6;
}

*{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans', sans-serif;
  background:var(--cream);
  color:var(--charcoal);
  line-height:1.7;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,.display-font{
  font-family:'Fraunces', serif;
  letter-spacing:-0.02em;
  font-weight:600;
}
a{text-decoration:none}
.text-clay{color:var(--clay)}
.bg-cream{background:var(--cream)}
.bg-cream-dark{background:var(--cream-dark)}
.bg-forest{background:var(--forest)}
.bg-sage{background:var(--sage)}

/* Navbar */
.navbar{
  background:rgba(253,248,241,0.85);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  padding-top:1rem;
  padding-bottom:1rem;
}
.navbar-brand{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:-0.03em;
}
.navbar-brand span{color:var(--clay); font-style:italic; font-weight:500}
.nav-link{
  font-weight:500;
  font-size:0.95rem;
  color:var(--charcoal) !important;
  margin:0 0.35rem;
  position:relative;
}
.nav-link:after{
  content:'';
  position:absolute;
  bottom:0; left:0.5rem; right:0.5rem;
  height:1px; background:var(--clay);
  transform:scaleX(0); transition:.3s;
}
.nav-link:hover:after{transform:scaleX(1)}
.btn-clay{
  background:var(--clay);
  color:white;
  border-radius:100px;
  padding:0.7rem 1.6rem;
  font-weight:600;
  border:none;
  transition:.3s;
}
.btn-clay:hover{background:var(--clay-dark); color:white; transform:translateY(-1px)}
.btn-outline-dark-custom{
  border:1.5px solid var(--charcoal);
  border-radius:100px;
  padding:0.7rem 1.6rem;
  font-weight:600;
  color:var(--charcoal);
  background:transparent;
  transition:.3s;
}
.btn-outline-dark-custom:hover{background:var(--charcoal); color:white}

/* Hero */
.hero{
  padding:6rem 0 4rem;
  position:relative;
  overflow:hidden;
}
.hero h1{
  font-size:clamp(2.8rem, 6vw, 5rem);
  line-height:0.95;
  font-weight:600;
}
.hero h1 em{
  font-style:italic;
  font-weight:400;
  color:var(--clay);
}
.hero-img-wrap{
  position:relative;
  border-radius:2.2rem;
  overflow:hidden;
  aspect-ratio:4/5;
}
.hero-img-wrap img{width:100%; height:100%; object-fit:cover}
.hero-badge{
  position:absolute;
  bottom:1.2rem; left:1.2rem;
  background:var(--cream);
  border-radius:1.2rem;
  padding:1rem 1.2rem;
  display:flex; gap:0.9rem; align-items:center;
  box-shadow:0 12px 40px rgba(0,0,0,0.12);
  max-width:85%;
}
.hero-blob{
  position:absolute;
  width:520px; height:520px;
  background:radial-gradient(circle, rgba(192,122,90,0.18) 0%, transparent 70%);
  top:-10%; right:-10%; pointer-events:none;
}

/* Section */
.section-padding{padding:5.5rem 0}
.section-label{
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.75rem;
  font-weight:700;
  color:var(--clay);
  margin-bottom:1rem;
  display:inline-block;
}
.service-card{
  background:white;
  border-radius:1.8rem;
  overflow:hidden;
  border:1px solid var(--line);
  transition:all .4s ease;
  height:100%;
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 50px rgba(28,30,27,0.08);
  border-color:rgba(192,122,90,0.25);
}
.service-card img{
  height:220px;
  width:100%;
  object-fit:cover;
  transition:.6s;
}
.service-card:hover img{transform:scale(1.04)}
.service-card-body{padding:1.6rem 1.6rem 1.3rem}
.service-card h5{font-size:1.25rem; margin-bottom:0.6rem}
.service-card p{font-size:0.93rem; color:#5a5e5b; margin-bottom:1.2rem}

/* About */
.about-img-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:1rem;
}
.about-img-grid img{border-radius:1.6rem; width:100%; object-fit:cover}
.about-img-grid .img-large{height:420px}
.about-img-grid .img-small{height:200px}
.about-img-grid .stack{display:flex; flex-direction:column; gap:1rem}

/* Blog */
.blog-card{
  background:white;
  border-radius:1.6rem;
  overflow:hidden;
  border:1px solid var(--line);
  height:100%;
  transition:.35s;
}
.blog-card:hover{transform:translateY(-5px); box-shadow:0 16px 40px rgba(0,0,0,0.07)}
.blog-card img{height:240px; width:100%; object-fit:cover}
.blog-card-body{padding:1.5rem}
.blog-tag{
  font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
  font-weight:700; color:var(--clay); background:var(--cream-dark);
  padding:0.35rem 0.7rem; border-radius:100px;
}

/* Newsletter */
.newsletter-box{
  background:var(--forest);
  border-radius:2rem;
  padding:3rem;
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
.newsletter-box:after{
  content:'';
  position:absolute;
  width:400px; height:400px;
  background:radial-gradient(circle, rgba(192,122,90,0.3), transparent 70%);
  top:-20%; right:-10%;
}
.newsletter-box h2{color:var(--cream)}
.newsletter-box .form-control{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  color:white;
  border-radius:100px;
  padding:0.9rem 1.3rem;
}
.newsletter-box .form-control::placeholder{color:rgba(255,255,255,0.5)}

/* Footer */
footer{
  background:#111311;
  color:#c9c5bd;
  padding:4rem 0 2.5rem;
}
footer h5{color:var(--cream); font-size:1.1rem}
footer a{color:#c9c5bd; font-size:0.93rem}
footer a:hover{color:var(--cream)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08);
  margin-top:3rem;
  padding-top:1.8rem;
  font-size:0.85rem;
  color:#8a8782;
}

/* Contact page special */
.contact-card{
  background:white;
  border-radius:1.8rem;
  border:1px solid var(--line);
  padding:2rem;
}
.icon-circle{
  width:48px; height:48px;
  border-radius:50%;
  background:var(--cream-dark);
  display:flex; align-items:center; justify-content:center;
  color:var(--clay);
  font-size:1.2rem;
  flex-shrink:0;
}

/* Forms */
.form-control, .form-select{
  border-radius:0.9rem;
  padding:0.85rem 1.1rem;
  border:1px solid var(--line);
  background:white;
}
.form-control:focus{
  border-color:var(--clay);
  box-shadow:0 0 0 4px rgba(192,122,90,0.12);
}

/* Anim */
.reveal{animation:fadeUp .8s ease both}
@keyframes fadeUp{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)}}

/* Utilities to avoid numbers in content - helper */
.no-number-note{font-size:0.8rem; color:#9a9590}