/* =========================
   DESIGN TOKENS
========================= */
:root{
  --bg-main:#f6f3ee;
  --bg-soft:#ebe6dd;
  --bg-dark:#2c2a27;

  --text-main:#2c2a27;
  --text-muted:#7a756f;

  --accent:#3f5d4b;
}

/* =========================
   GLOBAL RESET
========================= */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

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

/* =========================
   TYPOGRAPHY
========================= */
h1,h2,h3{
  font-family:'Playfair Display',serif;
  font-weight:400;
}

h1{
  font-size:56px;
  line-height:1.1;
}

h2{
  font-size:38px;
  margin-bottom:24px;
}

h3{
  font-size:20px;
  margin-top:18px;
}

p{
  font-size:15px;
  color:var(--text-muted);
}

em{
  font-style:italic;
}

.center{
  text-align:center;
}

.eyebrow{
  display:block;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:16px;
}

/* =========================
   BUTTONS
========================= */
.btn{
  display:inline-block;
  padding:14px 28px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  border-radius:3px;
  font-size:14px;
  transition:all .2s ease;
}

.btn:hover{
  opacity:.9;
}

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

.btn-dark{
  background:var(--bg-dark);
}

/* =========================
   NAVBAR
========================= */
.nav{
  padding:28px 60px;
}

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

.logo{
  font-family:'Playfair Display',serif;
  font-size:22px;
}

.nav nav a{
  margin-left:26px;
  text-decoration:none;
  font-size:14px;
  color:var(--text-main);
}

/* =========================
   HERO (FIXED VERSION)
========================= */
.hero{
  position:relative;
  height:85vh;
  background-image:url('/assets/images/hero.jpg');
  background-size:cover;
  background-position:center;
}

/* FULL-WIDTH OVERLAY */
.hero-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center; 
  background:linear-gradient(
    to right,
    rgba(246,243,238,0.9) 0%,
    rgba(246,243,238,0.75) 40%,
    rgba(246,243,238,0.3) 70%,
    rgba(246,243,238,0.1) 100%
  );
}

/* CONTENT WRAPPER (THIS FIXES SPLIT ISSUE) */
.hero-content{
  max-width:760px;
  text-align:center;        /* 👈 centers all text */
  padding:0 24px;
}


.hero-buttons{
  margin-top:32px;
  display:flex;
  justify-content:center;   /* 👈 centers buttons */
  gap:14px;
}


/* =========================
   INTRO SECTION
========================= */
.intro{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:80px;
  padding:120px 60px;
}

.stat{
  font-size:64px;
  font-family:'Playfair Display',serif;
}

/* =========================
   WORK / PORTFOLIO
========================= */
.work{
  padding:120px 60px;
}

.work-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}

.work-card img{
  width:100%;
  height:360px;
  object-fit:cover;
}

/* =========================
   SERVICES
========================= */
.services{
  background:var(--bg-soft);
  padding:120px 60px;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}

.service-card{
  background:#fff;
  padding:32px;
}

/* =========================
   ABOUT
========================= */
.about{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  padding:120px 60px;
}

.about-visual{
  background:#ddd;
  height:420px;
}

/* =========================
   TESTIMONIALS
========================= */
.testimonials{
  background:var(--bg-dark);
  color:#fff;
  padding:120px 60px;
}

.testimonials p{
  color:#ddd;
}

.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
}

blockquote span{
  display:block;
  margin-top:16px;
  color:#aaa;
}

/* =========================
   CTA
========================= */
.cta{
  padding:120px 60px;
  text-align:center;
}

/* =========================
   FOOTER
========================= */
footer{
  background:#1f1e1c;
  color:#aaa;
  text-align:center;
  padding:40px;
}

/* =========================
   RESPONSIVE TYPOGRAPHY
========================= */

/* Large screens */
@media (min-width:1440px){
  h1{font-size:64px}
  h2{font-size:42px}
  p{font-size:16px}
}

/* Tablet */
@media (max-width:1023px){
  h1{font-size:44px}
  h2{font-size:32px}

  .intro{
    grid-template-columns:1fr;
    gap:40px;
    padding:100px 40px;
  }

  .work-grid,
  .services-grid{
    grid-template-columns:1fr 1fr;
  }

  .hero-content{
    padding-left:40px;
  }
}

/* Mobile */
@media (max-width:767px){
  h1{font-size:34px;line-height:1.2}
  h2{font-size:28px}
  p{font-size:14px}

  .nav{
    padding:20px;
  }

  .hero{
    height:auto;
  }

  .hero-content{
    padding:80px 24px;
  }

  section{
    padding:80px 24px;
  }

  .work-grid,
  .services-grid,
  .testimonial-grid{
    grid-template-columns:1fr;
  }

  .about{
    grid-template-columns:1fr;
  }
}