/*
Theme Name: Bluffton Builders
Theme URI: https://bluffton.builders
Author: Bluffton Builders
Description: Custom lead-generation theme for Bluffton Builders. Black, cream, and gold brand system with Playfair Display, Cinzel, and Archivo typography.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: bluffton-builders
*/

:root{
  --spruce:#181815; --spruce-deep:#0c0c0a; --oyster:#faf7f2; --shell:#f1ede3;
  --brass:#c9a244; --brass-soft:#ddba62; --cta:#a5822d; --cta-dark:#8c6d24;
  --ink:#25251f; --mist:#6b675c; --line:#e4dfd1; --white:#fff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Archivo',sans-serif;color:var(--ink);background:var(--oyster);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.serif{font-family:'Playfair Display',serif;font-weight:500;line-height:1.15}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--brass)}
.btn{display:inline-block;padding:16px 32px;border-radius:2px;font-weight:700;font-size:15px;text-decoration:none;transition:all .2s;text-align:center;cursor:pointer;border:none;font-family:'Archivo'}
.btn-cta{background:linear-gradient(135deg,#b28a34,#dcb75e);color:#141410}
.btn-cta:hover{background:linear-gradient(135deg,#c9a244,#e8c878)}
.btn-outline{border:1px solid var(--spruce);color:var(--spruce);background:transparent}
.btn-outline:hover{background:var(--spruce);color:var(--white)}
.btn-outline.on-dark{border-color:#5c7069;color:var(--oyster)}
.btn:focus-visible{outline:3px solid var(--brass-soft);outline-offset:2px}
section{padding:84px 0}
.sec-head{max-width:660px;margin-bottom:46px}
.sec-head h2{font-size:clamp(28px,3.4vw,40px);color:var(--spruce);margin-top:12px}
.sec-head p{margin-top:14px;color:var(--mist)}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* photo slots */
.slot{background:linear-gradient(135deg,#e7e2d5,#d9d2c0);border:1px dashed var(--brass);display:flex;align-items:center;justify-content:center;color:var(--mist);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:16px}

/* topbar + header */
.topbar{background:var(--spruce-deep);color:#cfd8d3;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:8px 24px}
.topbar a{color:var(--brass-soft);text-decoration:none;font-weight:700}
.topbar .lic{letter-spacing:.08em;text-transform:uppercase;font-size:11px}
header{background:var(--spruce-deep);border-bottom:1px solid rgba(201,162,68,.35);position:sticky;top:0;z-index:50}
header .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:12px;padding-bottom:12px}
.logo{font-family:'Playfair Display',serif;font-size:21px;font-weight:600;color:var(--white);text-decoration:none;cursor:pointer;letter-spacing:.02em}
.logo span{color:var(--brass-soft)}

/* ===== PRIMARY NAV (native WordPress menu) ===== */
#nav{display:flex;gap:24px;align-items:center}
#nav ul.nav-menu{display:flex;flex-direction:row;gap:24px;align-items:center;list-style:none;margin:0;padding:0}
#nav ul.nav-menu li{list-style:none;position:relative;display:flex;align-items:center}
#nav ul.nav-menu li::before,#nav ul.nav-menu li::marker{content:none}
#nav ul.nav-menu a{text-decoration:none;font-size:14px;font-weight:500;color:#e8e4da;line-height:1;padding:8px 0;cursor:pointer}
#nav ul.nav-menu a:hover{color:var(--brass-soft)}
#nav ul.nav-menu .current-menu-item > a{color:var(--brass-soft);font-weight:700}
#nav ul.nav-menu .menu-item-has-children > a{padding-right:14px}
#nav ul.nav-menu .menu-item-has-children > a::after{content:"\25BE";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:10px;color:var(--brass-soft)}
#nav ul.nav-menu .sub-menu{display:none;position:absolute;top:100%;left:-14px;background:var(--spruce-deep);border:1px solid rgba(201,162,68,.3);min-width:230px;box-shadow:0 14px 34px rgba(0,0,0,.4);padding:8px 0;z-index:60;flex-direction:column;gap:0;list-style:none}
#nav ul.nav-menu li:hover > .sub-menu{display:flex}
#nav ul.nav-menu .sub-menu li{display:block}
#nav ul.nav-menu .sub-menu a{display:block;padding:10px 18px;width:100%}
#nav ul.nav-menu .sub-menu a:hover{background:rgba(201,162,68,.12)}
#nav .btn{padding:11px 20px;font-size:13px}
.mobile-toggle{display:none;background:none;border:none;font-size:26px;color:var(--brass-soft);cursor:pointer}
@media(max-width:880px){
  #nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--spruce-deep);flex-direction:column;align-items:flex-start;padding:18px 24px;gap:14px;border-bottom:1px solid rgba(201,162,68,.3)}
  #nav.open{display:flex}
  #nav ul.nav-menu{flex-direction:column;align-items:flex-start;width:100%;gap:14px}
  #nav ul.nav-menu .sub-menu{display:flex;position:static;box-shadow:none;border:none;padding:2px 0 2px 14px;min-width:0;background:transparent}
  .mobile-toggle{display:block}
}

/* hero patterns */
.hero-dark{background:var(--spruce);color:var(--oyster);position:relative;overflow:hidden}
.hero-dark::after{content:"";position:absolute;right:-120px;top:-120px;width:460px;height:460px;border-radius:50%;border:1px solid rgba(201,169,105,.22);pointer-events:none}
.hero-dark h1{color:var(--white);font-size:clamp(34px,4.6vw,54px)}
.hero-dark h1 em{font-style:italic;color:var(--brass-soft)}
.tagline-h1{font-family:'Cinzel',serif;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--brass-soft);font-size:clamp(26px,3.8vw,46px);line-height:1.25}
.hero-dark p.lede{margin:22px 0 30px;font-size:17px;color:#c8d2cd;max-width:540px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;position:relative;z-index:1}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.phone-line{margin-top:20px;font-size:14px;color:#a9b8b2}
.phone-line a{color:var(--brass-soft);font-weight:700;text-decoration:none;font-size:16px}

/* forms */
.form-card{background:var(--white);color:var(--ink);border-radius:4px;padding:30px;box-shadow:0 24px 60px rgba(10,24,20,.32)}
.form-card h3{font-size:21px;margin-bottom:4px;color:var(--spruce)}
.form-card .sub{font-size:13px;color:var(--mist);margin-bottom:18px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-card input,.form-card select,.form-card textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:2px;font-family:'Archivo';font-size:14px;margin-bottom:12px;background:var(--oyster);color:var(--ink)}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{outline:2px solid var(--brass)}
.consent{font-size:11px;color:var(--mist);line-height:1.5;margin:2px 0 14px;display:flex;gap:8px;align-items:flex-start}
.consent input{width:auto;margin:3px 0 0}
.form-card .btn{width:100%}

/* stat bar */
.stats{background:var(--spruce-deep);color:var(--oyster)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;padding-top:22px;padding-bottom:22px;gap:16px}
.stats b{display:block;font-family:'Playfair Display',serif;font-size:19px;color:var(--brass-soft);font-weight:600}
.stats span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#93a49e}
@media(max-width:760px){.stats .wrap{grid-template-columns:repeat(2,1fr)}}

/* cards & grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:860px){.grid-3,.grid-2{grid-template-columns:1fr}}
.card{background:var(--white);border:1px solid var(--line);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.card .slot{height:190px}
.card .pad{padding:26px}
.card h3{font-size:20px;color:var(--spruce);margin-bottom:8px}
.card p{font-size:14px;color:var(--mist);margin-bottom:16px}
.card .link{font-weight:700;font-size:14px;color:var(--cta);text-decoration:none;cursor:pointer;margin-top:auto}
.card.feature{border-color:var(--brass);box-shadow:0 18px 46px rgba(30,58,52,.09)}
.badge{display:inline-block;background:var(--cta);color:var(--white);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:4px 10px;border-radius:2px;margin-bottom:10px}

/* cells (benefits) */
.cells{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cell{background:var(--oyster);padding:34px 28px}
.cell .num{font-family:'Playfair Display',serif;font-style:italic;color:var(--brass);font-size:15px}
.cell h3{font-size:19px;color:var(--spruce);margin:10px 0}
.cell p{font-size:14px;color:var(--mist)}
@media(max-width:860px){.cells{grid-template-columns:1fr}}

/* dark section */
.sec-dark{background:var(--spruce);color:var(--oyster)}
.sec-dark .sec-head h2{color:var(--white)}
.sec-dark .sec-head p{color:#b7c4bf}
.svc{border:1px solid rgba(201,169,105,.35);padding:32px 28px;border-radius:3px}
.svc h3{color:var(--brass-soft);font-size:20px;margin-bottom:10px}
.svc p{font-size:14px;color:#c0ccc7;margin-bottom:16px}
.svc a{color:var(--white);font-weight:700;font-size:14px;text-decoration:none;border-bottom:1px solid var(--brass);cursor:pointer}

/* timeline */
.tl-band{background:var(--shell)}
.timeline{display:grid;grid-template-columns:repeat(5,1fr);position:relative;margin-top:8px}
.timeline::before{content:"";position:absolute;top:11px;left:10%;right:10%;height:1px;background:var(--brass)}
.t-stop{text-align:center;padding:0 12px;position:relative}
.t-dot{width:10px;height:10px;border-radius:50%;background:var(--brass);margin:6px auto 16px;position:relative;z-index:1;box-shadow:0 0 0 6px var(--shell)}
.t-time{font-family:'Playfair Display',serif;font-size:21px;color:var(--spruce);font-weight:600}
.t-stop h4{font-size:14px;font-weight:700;margin:8px 0 6px;font-family:'Archivo'}
.t-stop p{font-size:13px;color:var(--mist);line-height:1.55}
@media(max-width:860px){.timeline{grid-template-columns:1fr;gap:26px}.timeline::before{left:19px;right:auto;top:5%;bottom:5%;width:1px;height:auto}.t-stop{display:grid;grid-template-columns:40px 1fr;text-align:left;gap:2px 14px}.t-dot{margin:8px auto}.t-time,.t-stop h4,.t-stop p{grid-column:2}}

/* chips */
.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:var(--white);border:1px solid var(--line);padding:10px 18px;border-radius:2px;font-size:14px;font-weight:500;text-decoration:none;color:var(--spruce);cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--cta);color:var(--cta)}
.comm-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);font-weight:700;margin:24px 0 12px}

/* reviews */
.review-quote{max-width:760px;margin:0 auto;text-align:center}
.review-quote blockquote{font-family:'Playfair Display',serif;font-size:clamp(20px,2.6vw,27px);font-style:italic;color:var(--spruce);line-height:1.5}
.review-quote cite{display:block;margin-top:18px;font-style:normal;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);font-weight:700}
.stars{color:var(--brass);letter-spacing:4px;font-size:18px;margin-bottom:16px}

/* faq */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item button{width:100%;background:none;border:none;text-align:left;padding:20px 40px 20px 0;font-family:'Playfair Display',serif;font-size:18px;color:var(--spruce);cursor:pointer;position:relative}
.faq-item button::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--cta);font-size:24px;font-family:'Archivo';font-weight:300;transition:transform .2s}
.faq-item.open button::after{transform:translateY(-50%) rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 0 22px;font-size:15px;color:var(--mist);max-width:720px}

/* final cta */
.final{background:var(--spruce);color:var(--oyster);text-align:center}
.final h2{color:var(--white);font-size:clamp(28px,3.8vw,42px);max-width:740px;margin:12px auto 0}
.final h2 em{font-style:italic;color:var(--brass-soft)}
.final p{max-width:560px;margin:18px auto 30px;color:#c0ccc7}

/* footer */
footer{background:var(--spruce-deep);color:#93a49e;font-size:13px}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-top:52px;padding-bottom:36px}
footer h5{color:var(--oyster);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;font-family:'Archivo';font-weight:700}
footer a{color:#93a49e;text-decoration:none;display:block;padding:4px 0;cursor:pointer}
footer a:hover{color:var(--brass-soft)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding:16px 0;text-align:center;font-size:12px}
@media(max-width:760px){footer .wrap{grid-template-columns:1fr}}

/* sticky mobile bar */
.sticky-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:99;grid-template-columns:1fr 1fr}
.sticky-bar a{padding:15px;text-align:center;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer}
.sticky-bar .call{background:var(--spruce-deep);color:var(--white)}
.sticky-bar .quote{background:linear-gradient(135deg,#b28a34,#dcb75e);color:#141410}
@media(max-width:760px){.sticky-bar{display:grid}body{padding-bottom:52px}}
.ribbon{background:linear-gradient(135deg,#b28a34,#d4ac52);color:#141410;text-align:center;font-size:14px;font-weight:700;padding:10px 16px}
.lic-strip{background:var(--shell);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;text-align:center;font-size:13px;color:var(--mist);letter-spacing:.04em}
.lic-strip b{color:var(--spruce)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

@media(max-width:820px){
  /* One-Day "six reasons" section: stack photo on top, benefits below */
  .why-grid{grid-template-columns:1fr!important}
  .why-grid > img{min-height:0!important;height:auto!important;max-height:300px;width:100%;order:-1;margin-bottom:8px}
}

/* ============================================
   FULL-SITE MOBILE RESPONSIVENESS PASS
   ============================================ */

/* Any 2-column inline-styled grid collapses on mobile */
@media(max-width:820px){
  .wrap [style*="grid-template-columns:1fr 1fr"],
  .wrap [style*="grid-template-columns:1.15fr .85fr"],
  .wrap [style*="grid-template-columns:1.1fr 1fr"],
  .wrap [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
}

/* Images inside those grids: cap height, never balloon */
@media(max-width:820px){
  .hero-grid img,
  .why-grid img,
  #about-grid img,
  #home-about-grid img{
    min-height:0!important;
    height:auto!important;
    max-height:320px!important;
    width:100%!important;
    object-fit:cover;
  }
}

/* Hero: photo above text on mobile, comfortable padding */
@media(max-width:820px){
  .hero-grid{gap:32px!important}
  .hero-grid img{order:-1;margin-bottom:4px}
  .hero-dark h1{font-size:clamp(28px,7vw,40px)!important}
  .hero-dark .wrap{padding-top:48px!important;padding-bottom:48px!important}
}

/* "Six reasons" style benefit grid: stack, photo on top */
@media(max-width:820px){
  .why-grid{grid-template-columns:1fr!important}
  .why-grid > img{order:-1;max-height:300px}
}

/* Section padding tightens on phones so pages don't feel endless */
@media(max-width:680px){
  section{padding:52px 0!important}
  .sec-head{margin-bottom:32px}
}

/* Team / any 3-up card grid already stacks via .grid-3, ensure images scale */
@media(max-width:860px){
  .card img{height:220px!important}
}

/* Before/after pair and gallery bands: keep 2-up but shrink, or stack very small */
@media(max-width:560px){
  .wrap [style*="grid-template-columns:1fr 1fr"] img{max-height:260px}
}

/* Tables/strips that might overflow: allow wrap */
@media(max-width:680px){
  .lic-strip{font-size:11px;line-height:1.7;padding:14px 16px}
  .ribbon{font-size:12px}
}

/* Stat bar already handled, but tighten text */
@media(max-width:760px){
  .stats b{font-size:17px}
  .stats span{font-size:10px}
}

/* WordPress admin bar offset for sticky header */
body.admin-bar header{top:32px}