/* ---------- Tokens ---------- */
:root{
  --charcoal: #211d1a;
  --charcoal-2: #2b2621;
  --charcoal-3: #35302a;
  --paper: #f3ede3;
  --paper-2: #eae1d2;
  --wood: #b5652c;
  --wood-deep: #8a4a1f;
  --walnut: #5c4632;
  --ink: #ece5d8;
  --ink-dim: #c9bfae;
  --line-on-dark: rgba(236,229,216,0.16);
  --line-on-paper: rgba(33,29,26,0.14);
  --radius-s: 3px;
  --maxw: 1180px;
  --pad: clamp(24px, 5vw, 64px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--walnut);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  line-height:1.08;
  margin:0 0 0.4em;
  color:var(--charcoal);
}
p{margin:0 0 1em;}
.container{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  border-radius:var(--radius-s);
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{background:var(--wood); color:var(--paper);}
.btn-primary:hover{background:var(--wood-deep);}
.btn-ghost-dark{border-color:var(--line-on-dark); color:var(--ink);}
.btn-ghost-dark:hover{border-color:var(--ink); background:rgba(236,229,216,0.06);}
.btn-ghost-paper{border-color:var(--line-on-paper); color:var(--charcoal);}
.btn-ghost-paper:hover{border-color:var(--walnut);}
:focus-visible{outline:2px solid var(--wood); outline-offset:3px;}

/* subtle grain texture, used as a background layer on both dark and paper sections */
.grain{position:relative;}
.grain::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.5;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.035) 0px,
    rgba(0,0,0,0.035) 1px,
    transparent 1px,
    transparent 3px
  ),
  repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.02) 0px,
    rgba(255,255,255,0.02) 2px,
    transparent 2px,
    transparent 7px
  );
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--charcoal);
  border-bottom:1px solid var(--line-on-dark);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px; padding-bottom:18px;
}
.site-logo{
  font-family:'Fraunces',serif; font-weight:600; font-size:22px;
  color:var(--ink); text-decoration:none; letter-spacing:0.2px;
}
.site-logo span{color:var(--wood);}
.main-nav{display:flex; align-items:center; gap:34px;}
.main-nav ul{list-style:none; display:flex; gap:30px; margin:0; padding:0; flex-wrap:wrap;}
.main-nav a{text-decoration:none; font-size:15px; font-weight:500; color:var(--ink-dim);}
.main-nav a:hover{color:var(--ink);}

@media (max-width: 860px){
  .site-header .container{flex-direction:column; align-items:flex-start; gap:16px;}
  .main-nav{width:100%; flex-direction:column; align-items:flex-start; gap:14px;}
  .main-nav ul{gap:10px 18px;}
  .main-nav .btn{align-self:flex-start;}
}

/* ---------- Hero ---------- */
.hero{
  background:var(--charcoal);
  color:var(--ink);
  padding:88px 0 72px;
  border-bottom:6px solid var(--wood);
}
.hero .container{max-width:960px;}
.hero h1{
  color:var(--ink);
  font-size:clamp(34px, 5.4vw, 58px);
  max-width:15ch;
  margin-bottom:22px;
}
.hero .lede{
  font-size:19px; color:var(--ink-dim); max-width:56ch; margin-bottom:34px;
}
.hero .actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:46px;}
.hero .materials{
  font-size:14px; color:var(--ink-dim); border-top:1px solid var(--line-on-dark);
  padding-top:18px; letter-spacing:0.3px;
}
.hero .materials strong{color:var(--ink); font-weight:600;}

/* ---------- Intro / about strip ---------- */
.intro{padding:76px 0; background:var(--paper);}
.intro .grid{
  display:grid; grid-template-columns: 1.3fr 1fr; gap:64px; align-items:start;
}
.intro h2{font-size:clamp(26px,3vw,34px); max-width:14ch;}
.intro .lede-text{font-size:17px; max-width:52ch;}
.intro-facts{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-on-paper);}
.intro-facts li{
  display:flex; justify-content:space-between; gap:20px;
  padding:16px 0; border-bottom:1px solid var(--line-on-paper);
  font-size:15px;
}
.intro-facts li span:first-child{color:var(--walnut); opacity:.75;}
.intro-facts li span:last-child{font-weight:600; color:var(--charcoal); text-align:right;}

@media (max-width: 860px){
  .intro .grid{grid-template-columns:1fr; gap:32px;}
}

/* ---------- Services ---------- */
.services{padding:20px 0 84px; background:var(--paper);}
.services-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:36px; flex-wrap:wrap;}
.services-head h2{font-size:clamp(26px,3vw,34px); max-width:16ch; margin-bottom:0;}
.services-head p{max-width:38ch; margin:0; font-size:15px; opacity:.85;}

.service-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
}
.service-card{
  border:1px solid var(--line-on-paper);
  padding:30px 26px;
  background:var(--paper-2);
}
.service-card h3{font-size:20px; margin-bottom:10px;}
.service-card p{font-size:15px; margin:0; opacity:.9;}
.service-card.tall{grid-column:span 3; grid-row:span 2; background:var(--charcoal); border-color:var(--charcoal);}
.service-card.tall h3, .service-card.tall p{color:var(--ink);}
.service-card.tall p{color:var(--ink-dim);}
.service-card.wide{grid-column:span 3;}
.service-card.reg{grid-column:span 2;}
.service-card.accent{border-color:transparent; background:transparent; padding-left:0;}
.service-card.accent h3{color:var(--wood-deep);}

@media (max-width: 980px){
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .service-card.tall, .service-card.wide, .service-card.reg{grid-column:span 2; grid-row:auto;}
}

/* ---------- Process ---------- */
.process{background:var(--charcoal); color:var(--ink); padding:80px 0;}
.process-head{max-width:46ch; margin-bottom:48px;}
.process-head h2{color:var(--ink); font-size:clamp(26px,3vw,34px);}
.process-head p{color:var(--ink-dim); margin:0;}
.process-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--line-on-dark);
}
.process-list li{
  border-right:1px solid var(--line-on-dark);
  padding:28px 22px 0;
}
.process-list li:last-child{border-right:none;}
.process-num{
  font-family:'Fraunces',serif; font-size:34px; color:var(--wood);
  display:block; margin-bottom:14px;
}
.process-list h3{color:var(--ink); font-size:18px; margin-bottom:8px;}
.process-list p{color:var(--ink-dim); font-size:14.5px; margin:0;}

@media (max-width: 860px){
  .process-list{grid-template-columns:1fr; }
  .process-list li{border-right:none; border-bottom:1px solid var(--line-on-dark); padding-bottom:28px; margin-bottom:0;}
}

/* ---------- Gallery ---------- */
.gallery{padding:84px 0; background:var(--paper);}
.gallery-head{max-width:46ch; margin-bottom:36px;}
.gallery-head h2{font-size:clamp(26px,3vw,34px);}
.gallery-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.gallery-item{
  aspect-ratio:4/3;
  background:
    linear-gradient(rgba(33,29,26,0.55), rgba(33,29,26,0.55)),
    repeating-linear-gradient(100deg, #6b4426, #6b4426 10px, #7a4f2c 10px, #7a4f2c 20px);
  position:relative;
  display:flex; align-items:flex-end;
  color:var(--paper);
  overflow:hidden;
}
.gallery-item span{
  padding:16px; font-size:14px; font-weight:600;
  background:linear-gradient(transparent, rgba(0,0,0,0.45));
  width:100%;
}
.gallery-item::after{
  content:"replace with project photo";
  position:absolute; top:14px; right:14px;
  font-size:11px; letter-spacing:0.3px; color:rgba(243,237,227,0.75);
  border:1px solid rgba(243,237,227,0.4); padding:4px 8px; border-radius:2px;
}

@media (max-width: 860px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 560px){
  .gallery-grid{grid-template-columns:1fr;}
}

/* ---------- Testimonial ---------- */
.testimonial{background:var(--paper-2); padding:76px 0;}
.testimonial blockquote{
  margin:0; max-width:760px;
  font-family:'Fraunces',serif; font-weight:500; font-style:italic;
  font-size:clamp(22px,2.6vw,30px); color:var(--charcoal); line-height:1.4;
}
.testimonial cite{
  display:block; margin-top:22px; font-style:normal; font-family:'Inter',sans-serif;
  font-size:14px; color:var(--walnut); opacity:.8;
}

/* ---------- Contact / CTA ---------- */
.contact{background:var(--charcoal); color:var(--ink); padding:88px 0;}
.contact .grid{display:grid; grid-template-columns:1fr 1fr; gap:64px;}
.contact h2{color:var(--ink); font-size:clamp(26px,3vw,36px); max-width:14ch;}
.contact > .container > .grid > div > p.lede{color:var(--ink-dim); max-width:44ch;}
.contact-details{list-style:none; margin:28px 0 0; padding:0; border-top:1px solid var(--line-on-dark);}
.contact-details li{padding:14px 0; border-bottom:1px solid var(--line-on-dark); font-size:15px;}
.contact-details li span{display:block; color:var(--ink-dim); font-size:12.5px; margin-bottom:3px; text-transform:none;}
.contact-details li a, .address-card ul li a{color:inherit; text-decoration:underline; text-decoration-color:var(--wood);}

.contact-form{display:grid; gap:14px;}
.contact-form label{display:block; font-size:13.5px; color:var(--ink-dim); margin-bottom:6px;}
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; background:var(--charcoal-2); border:1px solid var(--line-on-dark);
  color:var(--ink); padding:12px 14px; font-family:'Inter',sans-serif; font-size:15px;
  border-radius:var(--radius-s);
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  border-color:var(--wood); outline:none;
}
.contact-form textarea{min-height:120px; resize:vertical;}
.form-row-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-success{
  background:rgba(181,101,44,0.15); border:1px solid var(--wood);
  color:var(--ink); padding:14px 16px; border-radius:var(--radius-s); margin-bottom:18px; font-size:14.5px;
}

@media (max-width: 860px){
  .contact .grid{grid-template-columns:1fr; gap:36px;}
  .form-row-2{grid-template-columns:1fr;}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--charcoal-3); color:var(--ink-dim); padding:44px 0; border-top:1px solid var(--line-on-dark);}
.site-footer .container{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;}
.site-footer .foot-logo{font-family:'Fraunces',serif; color:var(--ink); font-size:17px;}
.site-footer nav ul{list-style:none; display:flex; gap:22px; margin:0; padding:0;}
.site-footer nav a{text-decoration:none; font-size:14px; color:var(--ink-dim);}
.site-footer nav a:hover{color:var(--ink);}
.site-footer small{font-size:13px; opacity:.7;}

/* ---------- Generic page template ---------- */
.page-content{padding:80px 0; max-width:760px; margin:0 auto;}
.page-content h1{font-size:clamp(30px,4vw,44px);}

/* ---------- Page hero (Contact / Services) ---------- */
.page-hero{background:var(--charcoal); color:var(--ink); padding:64px 0 54px; border-bottom:6px solid var(--wood);}
.page-hero h1{color:var(--ink); font-size:clamp(30px,4.4vw,48px); margin-bottom:14px; max-width:18ch;}
.page-hero p{color:var(--ink-dim); margin:0; max-width:56ch; font-size:17px;}

/* ---------- Contact page ---------- */
.contact-page{padding:76px 0; background:var(--paper);}
.contact-page .grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.address-card{border:1px solid var(--line-on-paper); background:var(--paper-2); padding:34px;}
.address-card h2{font-size:21px; margin-bottom:14px;}
.address-card .addr{
  font-family:'Fraunces',serif; font-size:19px; color:var(--charcoal);
  margin-bottom:16px; font-style:normal;
}
.address-card .addr a{color:var(--wood-deep); text-decoration:underline;}
.address-card ul{list-style:none; margin:22px 0 0; padding:0; border-top:1px solid var(--line-on-paper);}
.address-card ul li{padding:13px 0; border-bottom:1px solid var(--line-on-paper); font-size:15px;}
.address-card ul li span{display:block; color:var(--walnut); opacity:.7; font-size:12.5px; margin-bottom:3px;}
.map-wrap{border:1px solid var(--line-on-paper); overflow:hidden; margin-top:22px;}
.map-wrap iframe{width:100%; height:340px; border:0; display:block;}

.contact-form-light{display:grid; gap:14px;}
.contact-form-light label{display:block; font-size:13.5px; color:var(--walnut); opacity:.85; margin-bottom:6px;}
.contact-form-light input, .contact-form-light select, .contact-form-light textarea{
  width:100%; background:#fff; border:1px solid var(--line-on-paper);
  color:var(--charcoal); padding:12px 14px; font-family:'Inter',sans-serif; font-size:15px;
  border-radius:var(--radius-s);
}
.contact-form-light input:focus, .contact-form-light select:focus, .contact-form-light textarea:focus{
  border-color:var(--wood); outline:none;
}
.contact-form-light textarea{min-height:120px; resize:vertical;}
.form-row-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-success-light{
  background:rgba(181,101,44,0.12); border:1px solid var(--wood);
  color:var(--charcoal); padding:14px 16px; border-radius:var(--radius-s); margin-bottom:18px; font-size:14.5px;
}

@media (max-width: 860px){
  .contact-page .grid{grid-template-columns:1fr; gap:36px;}
}

/* ---------- Services page ---------- */
.services-page-intro{padding:56px 0 8px; background:var(--paper);}
.services-page-intro p{max-width:62ch; font-size:17px;}
.services-cta{background:var(--paper-2); padding:64px 0; text-align:left; border-top:1px solid var(--line-on-paper);}
.services-cta h2{font-size:clamp(24px,3vw,30px); max-width:20ch;}
.services-cta p{max-width:52ch; margin-bottom:24px;}


/* ---------- Photos ---------- */
.hero.hero--photo{
  padding:120px 0 104px;
  background:
    linear-gradient(90deg, rgba(33,29,26,.94) 0%, rgba(33,29,26,.80) 45%, rgba(33,29,26,.40) 100%),
    url('images/hero-wood-kitchen.jpg') center/cover no-repeat;
}

.shop-strip{padding:0 0 76px; background:var(--paper);}
.shop-strip .strip-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.shop-strip figure{margin:0; position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--charcoal-2);}
.shop-strip img{width:100%; height:100%; object-fit:cover; display:block;}
.shop-strip figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:28px 18px 14px;
  font-size:14px; font-weight:600; color:var(--paper);
  background:linear-gradient(transparent, rgba(0,0,0,.55));
}

.gallery-item{background:var(--charcoal-2);}
.gallery-item::after{content:none;}
.gallery-item img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.gallery-item span{position:relative; z-index:1;}

.service-card.has-img{padding:0; overflow:hidden; display:flex; flex-direction:column;}
.service-card.has-img img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block;}
.service-card.has-img .card-body{padding:26px 26px 30px;}
.service-card.tall.has-img img{flex:1; aspect-ratio:auto; min-height:220px;}

@media (max-width: 860px){
  .shop-strip .strip-grid{grid-template-columns:1fr;}
  .hero.hero--photo{padding:84px 0 72px;}
}

/* ---------- Service grid: clean two-column layout ---------- */
.service-grid{grid-template-columns:repeat(2,1fr);}
.service-card.tall, .service-card.wide, .service-card.reg, .service-card.accent{grid-column:span 1; grid-row:auto;}
.service-card.tall.has-img{grid-row:span 2;}
.service-card.accent{
  background:var(--paper-2); border:1px solid var(--line-on-paper); padding:30px 26px;
  display:flex; flex-direction:column; justify-content:center;
}
.services-head + .service-grid .service-card.accent{grid-column:1 / -1;}
@media (max-width: 860px){
  .service-grid{grid-template-columns:1fr;}
  .service-card.tall.has-img{grid-row:auto;}
  .service-card.tall.has-img img{flex:none; aspect-ratio:16/10; min-height:0;}
}

.service-card.accent.has-img{padding:0; justify-content:flex-start;}

@media (max-width: 860px){
  .hero.hero--photo{
    background:
      linear-gradient(rgba(33,29,26,.86), rgba(33,29,26,.86)),
      url('images/hero-wood-kitchen.jpg') center/cover no-repeat;
  }
}