/* ===========================================================
   Cesar's Hardwood Floors — design tokens
   Palette: parchment #F3EEE4, walnut #2E2118, oak #B9814F,
            ink #221D19, sage #5C6B4F (accent, not the cliché terracotta)
   Type: Fraunces (display, serif) + Inter (body, sans)
   =========================================================== */

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

:root{
  --parchment:#F3EEE4;
  --parchment-dim:#EAE2D3;
  --walnut:#2E2118;
  --walnut-soft:#3F2E20;
  --oak:#B9814F;
  --oak-deep:#8C5F35;
  --ink:#221D19;
  --sage:#5C6B4F;
  --sage-deep:#455038;
  --line: rgba(34,29,25,0.14);
  --max: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
}
h1,h2,h3{
  font-family:'Fraunces',serif;
  font-weight:600;
  color:var(--walnut);
  line-height:1.12;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.4rem,5vw,3.6rem); font-weight:500;}
h2{font-size:clamp(1.7rem,3vw,2.3rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em; max-width:62ch;}
a{color:inherit;}
img{max-width:100%; display:block;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(243,238,228,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:var(--max); margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand svg{flex:none;}
.brand-text{font-family:'Fraunces',serif; font-size:1.15rem; color:var(--walnut); font-weight:600; letter-spacing:.2px;}
.brand-text span{display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:.68rem; color:var(--oak-deep); letter-spacing:.04em;}
nav.links{display:flex; gap:26px; align-items:center;}
nav.links a{text-decoration:none; font-size:.94rem; color:var(--walnut); font-weight:500; position:relative;}
nav.links a:hover{color:var(--oak-deep);}
.cta-btn{
  background:var(--sage); color:#fff !important; padding:11px 20px;
  border-radius:3px; text-decoration:none; font-weight:600; font-size:.9rem;
  border:1px solid var(--sage);
}
.cta-btn:hover{background:var(--sage-deep); border-color:var(--sage-deep);}
.cta-btn.ghost{background:transparent; color:var(--walnut) !important; border:1px solid var(--walnut);}
.menu-toggle{display:none;}

/* ---------- hero ---------- */
.hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:0;
  align-items:stretch; min-height:560px;
  border-bottom:1px solid var(--line);
}
.hero-copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:64px 56px; gap:22px;
}
.hero-copy .kicker{
  font-size:.92rem; color:var(--oak-deep); font-weight:600;
}
.hero-copy p.lede{font-size:1.15rem; color:var(--walnut-soft); max-width:46ch;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:6px;}
.hero-stats{display:flex; gap:34px; margin-top:22px; padding-top:22px; border-top:1px solid var(--line);}
.hero-stats div b{display:block; font-family:'Fraunces',serif; font-size:1.7rem; color:var(--walnut);}
.hero-stats div span{font-size:.85rem; color:var(--walnut-soft);}
.hero-photo{position:relative; overflow:hidden; background:var(--walnut);}
.hero-photo img{width:100%; height:100%; object-fit:cover; min-height:360px;}

/* ---------- sections ---------- */
section{padding:76px 0;}
section.tight{padding:52px 0;}
.section-head{max-width:640px; margin-bottom:40px;}
.section-head p{color:var(--walnut-soft);}
.band{background:var(--walnut); color:var(--parchment);}
.band h2, .band h3{color:var(--parchment);}
.band p{color:#DCD2C2;}

/* services grid — asymmetric masonry feel, not identical cards */
.svc-grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:14px; gap:18px;
}
.svc-card{
  grid-row:span 24; position:relative; overflow:hidden; border-radius:2px;
  text-decoration:none; color:#fff; display:flex; align-items:flex-end;
}
.svc-card.tall{grid-row:span 30;}
.svc-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.62);}
.svc-card .lbl{position:relative; padding:20px; font-family:'Fraunces',serif; font-size:1.15rem; font-weight:500;}
.svc-card:hover img{filter:brightness(.72);}

/* promo strip */
.promo{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:var(--oak); color:#fff; padding:26px 40px; border-radius:3px; flex-wrap:wrap;
}
.promo h3{color:#fff; margin:0;}

/* reviews */
.review-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.review{background:var(--parchment-dim); border-left:3px solid var(--oak); padding:26px 28px;}
.review p{font-size:1.02rem; color:var(--walnut-soft); font-style:italic;}
.review cite{display:block; font-style:normal; font-weight:600; color:var(--walnut); font-size:.92rem;}

/* gallery */
.gal-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.gal-grid img{aspect-ratio:1/1; object-fit:cover; border-radius:2px;}

/* contact form */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
form.request{display:grid; grid-template-columns:1fr; gap:14px;}
form.request input, form.request select, form.request textarea{
  font-family:'Inter',sans-serif; font-size:1rem; padding:13px 14px;
  border:1px solid var(--line); border-radius:3px; background:#fff; color:var(--ink);
}
form.request label{font-size:.85rem; font-weight:600; color:var(--walnut-soft); margin-bottom:-8px;}
form.request button{
  justify-self:start; background:var(--sage); color:#fff; border:none; padding:13px 26px;
  font-weight:600; border-radius:3px; cursor:pointer; font-size:1rem;
}
form.request button:hover{background:var(--sage-deep);}

/* footer */
footer.site{background:var(--walnut); color:#DCD2C2; padding:56px 0 26px;}
footer.site h3{color:var(--parchment);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;}
footer.site a{color:#DCD2C2; text-decoration:none; font-size:.94rem;}
footer.site a:hover{color:var(--oak);}
footer.site ul{list-style:none; padding:0; margin:0; display:grid; gap:9px;}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem; color:#B8AB94;
}

@media (max-width:880px){
  .hero{grid-template-columns:1fr;}
  .hero-photo{order:-1; min-height:280px;}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .review-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .gal-grid{grid-template-columns:repeat(2,1fr);}
  nav.links{display:none;}
}