:root{
  --bg-main:#f3efe6;
  --bg-alt:#ebe4d6;
  --bg-accent:#ded4c2;
  --ink:#2f2a26;
  --ink-soft:#5a524a;
  --wood:#7a5a3e;
  --wood-dark:#5b4632;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:Inter,sans-serif;
  color:var(--ink);
  background:var(--bg-main);
  line-height:1.6;
}

h1,h2,h3{
  font-family:"Playfair Display",serif;
  line-height:1.15;
}

section{
  padding:3.6rem 2rem;
  text-align:center;
}

section:nth-of-type(even){
  background:var(--bg-alt);
}

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(222,212,194,.92);
  backdrop-filter:blur(6px);
  padding:1rem 2rem;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
}

.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo{
  height:56px;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));
}

nav a{
  margin-left:1.5rem;
  text-decoration:none;
  color:var(--wood);
  font-weight:600;
}

.hero{
  position:relative;
  height:80vh;
  overflow:hidden;
}

.hero-bg{
  position:absolute;
  inset:0;
  background:url("../img/ancient-futures-main-001.jpg") center/cover;
  transition:transform .35s ease;
}

.hero:hover .hero-bg{transform:scale(1.04)}

.hero-box{
  position:relative;
  background:rgba(243,239,230,.9);
  max-width:720px;
  margin:auto;
  padding:2.5rem;
  top:50%;
  transform:translateY(-50%);
}

.hero-box h1{margin-bottom:1.6rem}

.hero-sub{
  line-height:1.25;
  margin-bottom:1.2rem;
}

.btn{
  display:inline-block;
  background:var(--wood);
  color:#fff;
  padding:.75rem 1.6rem;
  margin:.5rem;
  text-decoration:none;
  box-shadow:0 6px 14px rgba(0,0,0,.15);
  transition:.2s;
}

.btn:hover{background:var(--wood-dark)}

.btn-outline{
  background:transparent;
  color:var(--wood);
  border:2px solid var(--wood);
}

.btn-outline:hover{
  background:rgba(122,90,62,.12);
  color:var(--wood-dark);
  border-color:var(--wood-dark);
}

.three-col{
  display:flex;
  gap:2rem;
  justify-content:center;
  flex-wrap:wrap;
  margin:2.2rem 0;
}

.three-col img{
  max-width:240px;
  width:100%;
  transition:transform .25s;
}

.three-col figure:hover img{transform:scale(1.04)}

.icon{
  width:140px;
  margin-bottom:1rem;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.18));
}

.feature-image{
  background:url("../img/ancient-futures-content-block.webp") center/cover;
}

.feature-overlay{
  background:rgba(0,0,0,.45);
  color:#fff;
  padding:3rem;
  max-width:720px;
  margin:auto;
}

.contact-wrap{
  background:var(--bg-accent);
  max-width:960px;
  margin:0 auto;
  padding:3rem;
  border-radius:6px;
  box-shadow:0 10px 28px rgba(0,0,0,.14);
}

.contact-grid{
  display:flex;
  gap:2rem;
  justify-content:center;
  flex-wrap:wrap;
}

form{
  max-width:360px;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

input,textarea{
  padding:.7rem;
  border:1px solid #bbb;
}

.contact-box{
  background:var(--bg-main);
  padding:2rem;
  max-width:300px;
}

.image-break{
  height:50vh;
}

.gallery-row{
  display:flex;
  gap:1.5rem;
  justify-content:center;
  flex-wrap:wrap;
}

.gallery-row img{
  max-width:320px;
  transition:transform .25s;
}

.gallery-row a:hover img{transform:scale(1.05)}

footer{
  background:var(--bg-accent);
  padding:3rem 2rem;
  text-align:center;
}

footer .btn{
  background:var(--bg-main);
  color:var(--wood-dark);
  box-shadow:none;
}

footer .btn:hover{
  background:var(--bg-alt);
}

.btn.small{
  padding:.5rem 1.2rem;
  font-size:.85rem;
}