/* Page header */
.page-hero{
  margin-top: 26px;
  border-radius: var(--radius-xl);
  padding: 26px;
  background: rgba(255,255,255,.68);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:-80px -80px auto auto;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(209,163,127,.55), transparent 60%),
              radial-gradient(circle at 65% 65%, rgba(122,92,77,.25), transparent 55%);
  filter: blur(2px);
}
.page-hero h1{
  margin: 0 0 8px;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing:-.4px;
}
.page-hero p{
  margin:0;
  color: rgba(31,27,22,.70);
  max-width: 70ch;
}

/* Reveal animations */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s var(--ease), transform .75s var(--ease);
}
.reveal.in{
  opacity: 1;
  transform: translateY(0);
}

.stagger > *{
  opacity:0;
  transform: translateY(14px);
}
.stagger.in > *{
  opacity:1;
  transform: translateY(0);
  transition: opacity .65s var(--ease), transform .75s var(--ease);
}
.stagger.in > *:nth-child(1){ transition-delay:.00s; }
.stagger.in > *:nth-child(2){ transition-delay:.06s; }
.stagger.in > *:nth-child(3){ transition-delay:.12s; }
.stagger.in > *:nth-child(4){ transition-delay:.18s; }
.stagger.in > *:nth-child(5){ transition-delay:.24s; }
.stagger.in > *:nth-child(6){ transition-delay:.30s; }

/* Service page layout */
.two-col{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items:start;
}
@media(max-width: 980px){ .two-col{ grid-template-columns: 1fr; } }

.panel{
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.70);
  border: 1px solid var(--line);
  box-shadow: 0 14px 42px rgba(20,14,10,.08);
  padding: 18px;
}

.klist{
  display:grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style:none;
}
.klist li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(122,92,77,.06);
  border: 1px solid rgba(122,92,77,.10);
}
.kdot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--brand));
  margin-top: 5px;
  flex: 0 0 auto;
}

/* About page layout */

.about-hero{
  margin-top: 26px;
  border-radius: var(--radius-xl);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
}

.about-hero img{
  width:100%;
  height:420px;
  object-fit:cover;
}

.about-content{
  margin-top:40px;
  max-width:720px;
}

.about-content h1{
  font-size:34px;
  margin-bottom:16px;
}

.about-content p{
  margin-bottom:16px;
  color: var(--muted);
  font-size:16px;
  line-height:1.6;
}