/* =========================================================
   FOWERS FINISH CARPENTRY — Global Styles
   Palette pulled from logo: charcoal + white (+ warm off-white)
   For GHL: paste into Settings > Custom CSS (site-wide)
   ========================================================= */
:root{
  --charcoal:#232323;
  --charcoal-2:#2e2e2e;
  --ink:#1a1a1a;
  --white:#ffffff;
  --offwhite:#f4f2ee;
  --stone:#e6e2db;
  --muted:#6b6864;
  --accent:#9a7b5c;            /* subtle warm wood tone — use sparingly */
  --radius:4px;
  --maxw:1180px;
  --font-head:'Montserrat',Arial,sans-serif;
  --font-body:'Montserrat',Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--charcoal);background:var(--white);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;margin:0 0 .6em;font-weight:700;letter-spacing:.02em}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem);text-transform:uppercase;letter-spacing:.06em}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem);text-transform:uppercase;letter-spacing:.06em}
h3{font-size:1.2rem;letter-spacing:.04em}
p{margin:0 0 1em}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.section--tight{padding:64px 0}
.bg-dark{background:var(--charcoal);color:var(--white)}
.bg-off{background:var(--offwhite)}
.center{text-align:center}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.bg-dark .eyebrow{color:#c9b59e}
.lead{font-size:1.1rem;color:var(--muted);max-width:640px}
.bg-dark .lead{color:#cfcac3}
.center .lead{margin-left:auto;margin-right:auto}
.rule{width:56px;height:3px;background:currentColor;border:0;margin:0 0 24px}
.center .rule{margin-left:auto;margin-right:auto}

/* Grunge texture overlay for dark sections (echoes the distressed logo ring) */
.texture{position:relative;isolation:isolate}
.texture::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.07;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Buttons */
.btn{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:15px 30px;border:2px solid var(--charcoal);border-radius:var(--radius);transition:all .2s ease;cursor:pointer}
.btn--dark{background:var(--charcoal);color:var(--white)}
.btn--dark:hover{background:transparent;color:var(--charcoal)}
.btn--outline{background:transparent;color:var(--charcoal)}
.btn--outline:hover{background:var(--charcoal);color:var(--white)}
.btn--light{background:var(--white);color:var(--charcoal);border-color:var(--white)}
.btn--light:hover{background:transparent;color:var(--white)}
.btn--ghost{background:transparent;color:var(--white);border-color:var(--white)}
.btn--ghost:hover{background:var(--white);color:var(--charcoal)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.center .btn-row{justify-content:center}
.link-arrow{font-weight:600;font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:3px}

/* ---------- HEADER ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--stone)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:88px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{width:64px;height:64px}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text strong{font-size:1.2rem;letter-spacing:.22em;font-weight:600}
.brand-text span{font-size:.62rem;letter-spacing:.38em;font-weight:300;margin-top:6px}
.nav{display:flex;align-items:center;gap:30px}
.nav a{text-decoration:none;font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a.active{border-color:var(--charcoal)}
.nav .btn{padding:11px 20px;border-bottom:2px solid var(--charcoal)}
.nav .btn:hover{border-color:var(--charcoal)}
.nav-toggle{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;padding:10px}
.nav-toggle span{display:block;height:2px;background:var(--charcoal);margin:6px 0;transition:.25s}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- HERO (home) ---------- */
.hero{padding:90px 0 100px}
.hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.hero h1 span{display:block;font-weight:300;font-size:.5em;letter-spacing:.3em;margin-top:14px}
.hero-list{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.hero-list li{position:relative;padding-left:22px;font-size:.95rem;color:#e2ded8}
.hero-list li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border:2px solid #fff;transform:rotate(45deg)}
.hero-media{position:relative}
.hero-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.hero-badge{position:absolute;left:-36px;bottom:-36px;width:140px;height:140px;background:var(--white);border-radius:50%;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.step{background:var(--white);border:1px solid var(--stone);padding:34px 30px;border-radius:var(--radius);text-align:left}
.step--dark{background:var(--charcoal);color:var(--white);border-color:var(--charcoal)}
.step-num{font-size:.75rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.step--dark .step-num{color:#c9b59e}
.step h3{margin-top:10px}
.step p{margin:0;font-size:.95rem;color:var(--muted)}
.step--dark p{color:#cfcac3}

/* ---------- SPLIT (service brief / feature) ---------- */
.split .container{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split--reverse .split-media{order:2}
.split-media img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--radius)}
.checklist{list-style:none;padding:0;margin:20px 0 0}
.checklist li{position:relative;padding:8px 0 8px 30px;border-bottom:1px solid var(--stone)}
.bg-dark .checklist li{border-color:#3a3a3a}
.checklist li::before{content:"";position:absolute;left:2px;top:15px;width:12px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}

/* ---------- CARDS ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:48px}
.card{background:var(--white);border:1px solid var(--stone);border-radius:var(--radius);padding:32px 28px;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.08)}
.card-icon{width:46px;height:46px;border:2px solid var(--charcoal);border-radius:50%;display:grid;place-items:center;margin-bottom:18px;font-weight:700}
.card-icon svg{width:22px;height:22px}
.card p{color:var(--muted);font-size:.95rem;margin-bottom:0}

/* ---------- WHY / ADVANTAGE ---------- */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.photo-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.photo-mosaic img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius)}
.photo-mosaic img:last-child{grid-column:span 2;aspect-ratio:2/1}

/* ---------- TESTIMONIALS ---------- */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.quote{border:1px solid #3a3a3a;padding:32px 28px;border-radius:var(--radius);position:relative}
.quote::before{content:"\201C";font-size:4rem;line-height:1;position:absolute;top:10px;right:22px;opacity:.2}
.quote p{font-style:italic;color:#e2ded8}
.quote cite{font-style:normal;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase}
.placeholder-tag{display:inline-block;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;background:#ffd94d;color:#232323;padding:3px 8px;border-radius:2px;margin-bottom:14px;font-weight:700}

/* ---------- SERVICE AREA ---------- */
.area-box{border:2px solid var(--charcoal);padding:48px;border-radius:var(--radius);display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.area-box h2{margin-bottom:.3em}

/* ---------- CTA / CONTACT ---------- */
.cta-band .container{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contact-list{list-style:none;padding:0;margin:24px 0 0}
.contact-list li{padding:10px 0;border-bottom:1px solid #3a3a3a;display:flex;gap:14px}
.contact-list strong{min-width:84px;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:#c9b59e;padding-top:3px}
.form{background:var(--white);color:var(--charcoal);padding:36px;border-radius:var(--radius)}
.form h3{text-transform:uppercase;letter-spacing:.12em}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin:14px 0 6px}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;border:1px solid #cfcac3;border-radius:var(--radius);font:inherit;font-size:.95rem;background:#fff}
.form textarea{min-height:110px;resize:vertical}
.form .btn{width:100%;margin-top:20px}
.form-note{font-size:.75rem;color:var(--muted);margin-top:10px}

/* ---------- PAGE BANNER (inner pages) ---------- */
.page-banner{padding:110px 0 90px;background-size:cover;background-position:center;position:relative}
.page-banner::after{content:"";position:absolute;inset:0;background:rgba(20,20,20,.72);z-index:-1}
.page-banner .container{position:relative}
.page-banner{z-index:0}
.page-banner-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.breadcrumbs{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:#cfcac3;margin-bottom:18px}
.breadcrumbs a{text-decoration:none}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:40px auto 0}
.faq details{border-bottom:1px solid var(--stone);padding:18px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:12px 0 0;color:var(--muted)}

/* ---------- GALLERY ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.filter-btn{font:inherit;font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;background:transparent;border:2px solid var(--charcoal);padding:10px 18px;border-radius:var(--radius);cursor:pointer}
.filter-btn.active,.filter-btn:hover{background:var(--charcoal);color:#fff}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:40px}
.gallery-item{position:relative;overflow:hidden;border-radius:var(--radius);cursor:zoom-in;background:var(--stone);border:0;padding:0}
.gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));opacity:0;transition:.3s}
.gallery-item:hover figcaption{opacity:1}
.gallery-item.hidden{display:none}
.lightbox{position:fixed;inset:0;background:rgba(15,15,15,.94);display:none;align-items:center;justify-content:center;z-index:200;padding:60px 70px}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:82vh;border-radius:var(--radius)}
.lightbox-caption{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#ddd;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}
.lb-btn{position:absolute;background:none;border:0;color:#fff;font-size:2.4rem;cursor:pointer;width:56px;height:56px;line-height:1}
.lb-close{top:14px;right:16px}
.lb-prev{left:10px;top:50%;transform:translateY(-50%)}
.lb-next{right:10px;top:50%;transform:translateY(-50%)}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--ink);color:#cfcac3;padding:72px 0 28px;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
.footer-logo{width:120px;margin-bottom:18px}
.site-footer h4{color:#fff;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:18px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:10px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid #333;margin-top:48px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.78rem;letter-spacing:.08em}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .hero .container,.split .container,.why-grid,.cta-band .container,.area-box{grid-template-columns:1fr;gap:40px}
  .split--reverse .split-media{order:0}
  .steps,.testimonials{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-badge{left:auto;right:16px;bottom:-30px;width:110px;height:110px}
  .section{padding:72px 0}
}
@media (max-width:860px){
  .nav-toggle{display:block}
  .nav{position:fixed;top:88px;left:0;right:0;bottom:0;background:var(--white);flex-direction:column;align-items:flex-start;gap:0;padding:20px 24px;transform:translateX(100%);transition:transform .3s ease;overflow-y:auto}
  .nav-open .nav{transform:none}
  .nav a{width:100%;padding:18px 0;border-bottom:1px solid var(--stone);font-size:.9rem}
  .nav a:hover,.nav a.active{border-color:var(--stone)}
  .nav .btn{margin-top:20px;text-align:center;padding:15px}
  body.nav-open{overflow:hidden}
}
@media (max-width:560px){
  .container{padding:0 20px}
  .site-header .container{height:76px}
  .nav{top:76px}
  .brand img{width:52px;height:52px}
  .brand-text strong{font-size:1rem}
  .hero{padding:56px 0 70px}
  .hero-list{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .area-box{padding:30px 24px}
  .form{padding:26px 20px}
  .btn-row .btn{flex:1 1 100%;text-align:center}
  .lightbox{padding:50px 10px}
}

/* --- fixes --- */
.hero-media img.hero-badge{width:140px;height:140px;aspect-ratio:1/1;object-fit:contain;border-radius:50%}
.area-box .btn-row{justify-content:flex-end}
@media (max-width:960px){
  .hero-media img.hero-badge{width:104px;height:104px}
  .area-box .btn-row{justify-content:flex-start}
}
.gallery-item{margin:0}
.cards--3{grid-template-columns:repeat(3,1fr)}
.page-banner::after{background:rgba(20,20,20,.55)}
.page-banner-img{object-position:right bottom}
@media (max-width:960px){.cards--3{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cards--3{grid-template-columns:1fr}}
/* "Insert Photo" tag on banners — delete this span once a real photo is in place */
.banner-photo-tag{position:absolute;right:24px;bottom:20px;z-index:1;background:#fff;color:#232323;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:8px 14px;border-radius:2px;border:2px dashed #232323}
@media (max-width:560px){.banner-photo-tag{right:auto;left:20px;bottom:auto;top:14px;font-size:.6rem}.page-banner{padding-top:120px}}
@media (max-width:560px){.gallery-grid{grid-template-columns:1fr 1fr;gap:8px}.filters{gap:8px}.filter-btn{padding:9px 12px;font-size:.68rem}}
/* --- v2: mission + contact page --- */
.mission{font-size:1.12rem;line-height:1.75;color:#f1eee9;max-width:600px;border-left:3px solid #fff;padding-left:20px;margin:8px 0 22px}
.area-list{font-size:1.05rem;font-weight:600;margin:0 0 10px}
.contact-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.contact-card{text-decoration:none;display:block}
.contact-card p{word-break:break-word;color:var(--charcoal);font-weight:500}
@media (max-width:960px){.contact-cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.contact-cards{grid-template-columns:1fr}.mission{font-size:1rem}}
.contact-list a,.contact-list span,.site-footer a,.lead a{overflow-wrap:anywhere;min-width:0}
.contact-card p{font-size:.86rem}

.project-summary::before{content:none}.project-summary p{font-style:normal}

.contact-card .contact-email{font-size:11px;white-space:nowrap;letter-spacing:-.2px}

.hero-media>img:first-child{aspect-ratio:3/4;object-position:center}.project-photos img{object-fit:contain;background:#242424}.project-photos img:last-child{aspect-ratio:4/3}

.repair-pairs{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}.repair-pairs figure{margin:0}.repair-pairs img{width:100%;height:auto}.repair-pairs figcaption{margin-top:12px}.gallery-item.repair-comparison img{object-fit:contain;background:#202020}@media(max-width:700px){.repair-pairs{grid-template-columns:1fr}}

.repair-mosaic img,.repair-mosaic img:last-child{object-fit:contain;background:#202020;aspect-ratio:1600/1500}

.home-project-mosaic img{aspect-ratio:3/4;object-fit:contain;background:#202020}.home-project-mosaic img:last-child{aspect-ratio:1600/1300;object-fit:contain}

.gallery-brand-banner{overflow:hidden}.gallery-watermark{position:absolute;right:8%;top:50%;transform:translateY(-50%);width:min(380px,50vw);height:90%;object-fit:contain;opacity:.12;pointer-events:none}.gallery-brand-banner .container{position:relative;z-index:1}
.project-slider{background:#202020;border-radius:4px;overflow:hidden}.project-slider .gallery-item{display:none;margin:0;width:100%;border:0}.project-slider .gallery-item.is-current{display:block}.project-slider .gallery-item img{display:block;width:100%;height:min(72vh,760px);aspect-ratio:auto;object-fit:contain}.project-slider .gallery-item:hover img{transform:none}.project-slider .gallery-item figcaption{position:static;opacity:1;background:none;text-align:center;padding:16px}.slider-controls{display:flex;justify-content:center;align-items:center;gap:20px;padding:16px;color:white}.slider-controls button{background:transparent;border:1px solid #aaa;color:white;padding:10px 14px;cursor:pointer}@media(max-width:560px){.slider-controls{gap:8px}.slider-controls button{padding:10px}.project-slider .gallery-item img{height:60vh}}

/* Quiet motion for page entrances and scrolling. */
@keyframes gentle-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
.hero h1,.page-banner h1{animation:gentle-enter .65s ease-out both}
.hero .mission,.page-banner .lead{animation:gentle-enter .7s .1s ease-out both}
.reveal-ready{opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s ease;transition-delay:var(--reveal-delay,0ms)}
.reveal-ready.is-visible{opacity:1;transform:translateY(0)}
.btn{transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 14px #00000018}
.project-slider .is-current{animation:gentle-enter .45s ease-out both}
}
@media(prefers-reduced-motion:reduce){.reveal-ready{opacity:1;transform:none;transition:none}.hero h1,.page-banner h1,.hero .mission,.page-banner .lead,.project-slider .is-current{animation:none}}