/* =========================================================
   Honeybee Home Renovations — shared styles
   Tokens: honey gold (brand-literal accent), timber/walnut
   darks, warm paper background, hairline blueprint-style
   rules instead of soft SaaS cards.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;500;600;700&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --charcoal:   #201a13;
  --walnut:     #46331f;
  --walnut-70:  #6b563c;
  --honey:      #d69a2d;
  --honey-deep: #a97318;
  --paper:      #f6f1e3;
  --paper-dim:  #ede4cd;
  --line:       #d8cba9;
  --slate:      #5a5142;
  --white:      #fffdf7;

  --font-head: 'Zilla Slab', Georgia, serif;
  --font-body: 'Work Sans', system-ui, sans-serif;

  --measure: 62ch;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--charcoal);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:var(--honey-deep);}
a:focus-visible, button:focus-visible{outline:3px solid var(--honey); outline-offset:2px;}

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:700;
  color:var(--charcoal);
  line-height:1.12;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.3rem,5vw,3.6rem);}
h2{font-size:clamp(1.6rem,3vw,2.2rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1em; max-width:var(--measure);}
.lede{font-size:1.15rem; color:var(--walnut);}

.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
.section{padding:64px 0;}
.section--tight{padding:40px 0;}
.rule{border:0; border-top:1px solid var(--line); margin:0;}

/* ---------- Honeycomb divider (brand-grounded motif) ---------- */
.comb{
  display:flex; gap:6px; align-items:center; margin:0 0 28px;
}
.comb span{
  width:14px; height:16px;
  background:var(--honey);
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
}
.comb span:nth-child(2){background:var(--honey-deep);}
.comb span:nth-child(3){background:var(--walnut-70);}

/* ---------- Header ---------- */
.site-header{
  background:var(--charcoal);
  color:var(--paper);
  position:sticky; top:0; z-index:20;
  border-bottom:3px solid var(--honey);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px; gap:24px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--paper);
}
.brand-mark{
  width:40px; height:40px; flex:none;
  background:var(--honey);
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; color:var(--charcoal);
}
.brand-logo{
  height:46px; width:auto; flex:none;
}
.brand-word{
  font-family:var(--font-head); font-weight:700; font-size:1.2rem; letter-spacing:.01em;
}
.brand-word small{display:block; font-family:var(--font-body); font-weight:500; font-size:.7rem; letter-spacing:.06em; color:var(--honey);}

.nav{display:flex; gap:4px; flex-wrap:wrap;}
.nav a{
  color:var(--paper); text-decoration:none; font-size:.95rem;
  padding:8px 12px; border-radius:2px;
}
.nav a:hover, .nav a[aria-current="page"]{color:var(--charcoal); background:var(--honey);}

/* ---------- Hero ---------- */
.hero{
  background:var(--charcoal); color:var(--paper);
  padding:76px 0 84px;
  border-bottom:1px solid var(--walnut);
}
.hero .wrap{max-width:820px;}
.hero h1{color:var(--white);}
.hero .tagline{
  font-family:var(--font-head); font-size:1.25rem; color:var(--honey);
  margin-bottom:6px;
}
.hero .subtag{color:var(--paper-dim); font-size:1rem; margin-bottom:28px;}
.btn{
  display:inline-block; font-family:var(--font-body); font-weight:600;
  text-decoration:none; padding:13px 26px; border:2px solid var(--honey);
  color:var(--charcoal); background:var(--honey); font-size:1rem;
}
.btn:hover{background:transparent; color:var(--honey);}
.btn--ghost{background:transparent; color:var(--paper); border-color:var(--paper);}
.btn--ghost:hover{background:var(--paper); color:var(--charcoal);}

/* ---------- Panels (spec-sheet style, not rounded cards) ---------- */
.panel-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.panel{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:24px 26px; background:var(--white);
}
.panel-icon{
  width:26px; height:30px; margin-bottom:12px;
  background:var(--honey);
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
}
.panel h3{font-size:1.05rem; margin-bottom:.4em;}
.panel p{margin:0; font-size:.96rem; color:var(--slate);}
.section-kicker{
  font-family:var(--font-head); font-size:1.05rem; color:var(--walnut);
  margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
@media (max-width:640px){ .panel-grid{grid-template-columns:1fr;} }

/* ---------- Image strip ---------- */
.strip{
  display:grid; grid-auto-flow:column; grid-auto-columns:220px;
  gap:10px; overflow-x:auto; padding:4px 0 16px;
  scrollbar-width:thin;
}
.strip img{height:150px; width:220px; object-fit:cover;}

.gallery{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px;
}
.gallery img{aspect-ratio:1/1; object-fit:cover;}

/* ---------- Carousel (scrollable project gallery) ---------- */
.carousel{position:relative;}
.carousel-track{
  display:flex; gap:14px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  padding:2px 2px 18px;
}
.carousel-track::-webkit-scrollbar{height:8px;}
.carousel-track::-webkit-scrollbar-track{background:var(--paper-dim);}
.carousel-track::-webkit-scrollbar-thumb{background:var(--walnut-70);}
.carousel-item{flex:0 0 auto; width:300px; scroll-snap-align:start;}
.carousel-item img{width:300px; height:220px; object-fit:cover;}
.carousel-nav{display:flex; gap:10px; margin-top:4px;}
.carousel-btn{
  width:42px; height:42px; border:2px solid var(--walnut);
  background:var(--white); color:var(--walnut);
  font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.carousel-btn:hover{background:var(--honey); border-color:var(--honey); color:var(--charcoal);}
@media (max-width:560px){
  .carousel-item{width:220px;}
  .carousel-item img{width:220px; height:160px;}
}

/* ---------- Testimonials ---------- */
.testi{
  border-left:3px solid var(--honey);
  padding:6px 0 6px 22px; margin-bottom:34px;
}
.testi h3{font-size:1.15rem; margin-bottom:.3em;}
.testi p{color:var(--walnut); font-size:1rem;}
.testi cite{
  display:block; font-style:normal; font-weight:600; margin-top:.6em;
  color:var(--charcoal); font-family:var(--font-head); font-size:1rem;
}

/* ---------- Project list ---------- */
.project-row{
  display:grid; grid-template-columns:180px 1fr; gap:24px;
  padding:26px 0; border-top:1px solid var(--line);
  align-items:start;
}
.project-row:last-child{border-bottom:1px solid var(--line);}
.project-row img{width:180px; height:130px; object-fit:cover;}
.project-row .thumb-empty{
  width:180px; height:130px; background:var(--paper-dim);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); color:var(--walnut-70); font-size:.85rem; text-align:center;
}
.project-row h3{margin-bottom:.3em;}
.project-row .meta{font-size:.85rem; color:var(--slate); margin-bottom:.5em;}
@media (max-width:560px){ .project-row{grid-template-columns:1fr;} .project-row img,.project-row .thumb-empty{width:100%;height:180px;} }

/* ---------- Callout / CTA band ---------- */
.callout{
  background:var(--walnut); color:var(--paper);
  padding:56px 0; text-align:left;
}
.callout h2{color:var(--white);}
.callout p{color:var(--paper-dim);}

/* ---------- Contact block ---------- */
.contact-block{
  border:1px solid var(--line); background:var(--white);
  padding:32px; margin:28px 0;
}
.contact-block .big{font-family:var(--font-head); font-size:1.6rem;}
.contact-block .big a{color:var(--honey-deep); text-decoration:none;}
.contact-block .big a:hover{text-decoration:underline;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--charcoal); color:var(--paper-dim);
  padding:48px 0 28px; margin-top:64px;
  border-top:3px solid var(--honey);
}
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px;
  margin-bottom:28px;
}
.footer-grid h4{color:var(--honey); font-size:.85rem; letter-spacing:.04em; margin-bottom:.8em; font-family:var(--font-body); font-weight:600;}
.footer-grid ul{list-style:none; margin:0; padding:0;}
.footer-grid li{margin-bottom:.5em;}
.footer-grid a{color:var(--paper-dim); text-decoration:none; font-size:.95rem;}
.footer-grid a:hover{color:var(--honey);}
.footer-bottom{
  border-top:1px solid var(--walnut); padding-top:20px;
  font-size:.85rem; color:var(--walnut-70);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
@media (max-width:640px){ .footer-grid{grid-template-columns:1fr;} }

.back-link{display:inline-block; margin:24px 0; font-size:.95rem; text-decoration:none;}

/* ---------- Lightbox ---------- */
img.zoomable{cursor:zoom-in; transition:opacity .15s ease;}
img.zoomable:hover{opacity:.85;}

#lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(24,18,10,.94);
  display:none; align-items:center; justify-content:center;
  padding:56px 24px;
}
#lightbox.is-open{display:flex;}
#lightbox img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  box-shadow:0 12px 48px rgba(0,0,0,.55);
  cursor:default;
}
#lightbox-close{
  position:absolute; top:18px; right:20px;
  width:44px; height:44px;
  background:transparent; border:2px solid var(--paper);
  color:var(--paper); font-size:1.6rem; line-height:1;
  font-family:var(--font-body);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
#lightbox-close:hover{background:var(--honey); border-color:var(--honey); color:var(--charcoal);}
@media (max-width:600px){
  #lightbox{padding:70px 16px 24px;}
  #lightbox-close{top:14px; right:14px; width:38px; height:38px; font-size:1.3rem;}
}