:root{
  --bg:#fcfbf8;
  --text:#2b2a28;
  --muted:#6b6358;
  --accent:#c36a2e;
  --accent-2:#8b5e3c;
  --focus:#f2c38f;
  --container:56rem;
  --gap:1rem;
  --radius:.5rem;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.4;
  font-size:clamp(.9rem,1.2vw,1rem);
  /* layout to keep footer at the bottom */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.container{max-width:var(--container);margin:0 auto;padding:clamp(.75rem,2vw,1.25rem)}

/* make main fill available vertical space so footer sits at bottom */
main#main{flex:1}

/* header */
.site-header{border-bottom:1px solid rgba(0,0,0,.06);background:transparent}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--gap)}
.site-title{margin:0;font-weight:700;color:var(--accent-2)}
.site-tag{margin:0;color:var(--muted);font-size:.95rem}

/* top-nav */
.top-nav .social-list{display:flex;gap:.5rem;list-style:none;margin:0;padding:0}
.top-nav a{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .6rem;border-radius:var(--radius);background:transparent;color:var(--accent-2);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
.top-nav a:focus{outline:3px solid var(--focus);outline-offset:3px}

/* hover/active visual feedback for pointer users */
.top-nav a:hover,
.top-nav a:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 .4rem 1rem rgba(0,0,0,0.06);
  /* subtle background for neutral buttons only; CTA overrides below */
  background-color:rgba(195,106,46,0.06);
}

/* CTA hover: keep strong accent and white text for contrast */
.cta-mail a:hover,
.cta-mail a:focus-visible{
  background-color:var(--accent);
  color:white;
  transform:translateY(-2px);
  box-shadow:0 .45rem 1.25rem rgba(195,106,46,0.18);
  filter:none;
}
.top-nav img{width:1.1rem;height:auto;display:block}

/* CTA */
.cta-mail a{background:var(--accent);color:white}
.cta-text{font-weight:600}

/* main content */
.hero{padding-block:1rem}
.hero h2{margin:.2rem 0 .5rem 0;font-size:clamp(1.25rem,2.2vw,1.75rem)}
.lead{color:var(--muted)}

.services ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(.75rem, 1.6vw, 1rem);
}
.service-item{
  display:flex;
  gap: clamp(.6rem, 1.6vw, 1rem);
  align-items:flex-start;
  padding: clamp(.65rem,1.6vw,.95rem);
  border-radius: .5rem;
  background: linear-gradient(180deg, #fbf7f3 0%, #fffaf8 60%);
  border-left: .35rem solid rgba(195,106,46,0.10);
  box-shadow: 0 .2rem .6rem rgba(0,0,0,0.03);
  transition:transform .18s ease,box-shadow .18s ease;
}
.service-item:where(:hover, :focus-within){
  transform:translateY(-3px);
  box-shadow:0 .55rem 1rem rgba(0,0,0,0.055);
}
.service-icon{
  width: clamp(1.1rem, 2.4vw, 1.6rem);
  height: auto;
  flex: 0 0 auto;
  display: block;
  color: var(--accent); /* for SVGs using currentColor */
}
.service-body h4{margin:.1rem 0 .25rem 0;font-size:1rem;color:var(--accent-2)}
.service-body p{margin:0;color:var(--muted);font-size:.95rem}

/* footer */
.site-footer{border-top:1px solid rgba(0,0,0,.04);padding-block:.75rem;text-align:center;color:var(--muted)}

/* mobile tweaks */
@media (max-width:780px){
  .site-header .container{flex-direction:column;align-items:flex-start}
  .cta-text{display:none}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}