/* ============================== */
/* 1) BRAND TOKENS (single source) */
/* ============================== */
:root{
  /* brand & palette */
  --brand:#3a170c;
  --dark:#4B2E1E;
  --dark-hover:#6B3F2B;
  --wood-tint:#A47449;

  --bg:#FAF7F3;
  --text:#2b2b2b;
  --white:#FFFFFF;
  --muted:#6B6B6B;
  --heading:#111;

  --border:#E9E3DB;
  --line:#E9E3DB;
  --panel:#FBF9F6;

  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --maxw:1120px;

  /* NEW: spacing scale (site-wide) */
  --space-1: clamp(10px, 1.2vw, 14px);
  --space-2: clamp(14px, 1.6vw, 18px);
  --space-3: clamp(18px, 2.2vw, 26px);
  --space-4: clamp(22px, 2.8vw, 34px);

  /* NEW: microcopy */
  --micro: clamp(12.5px, 1.2vw, 13.5px);
}

/* ==============================
   2) BASE / TYPOGRAPHY
============================== */
*{ box-sizing:border-box; }

html, body{
  min-height:100%;
  margin:0;
  overflow-x:hidden;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:16px;
  line-height:1.65;

  /* FIX: prevents copyright/footer from being cut off */
  display:flex;
  flex-direction:column;
}

/* FIX: main grows, footers never shrink */
main{ flex:1 0 auto; }
.footer-band,
.site-footer{ flex-shrink:0; }

h1,h2,h3{
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--heading);
  margin:0 0 .45em;
}

h1{font-size:clamp(26px,4vw,42px)}
h2{font-size:clamp(22px,2.6vw,30px)}
h3{font-size:clamp(17px,1.9vw,19px)}

p{margin:0 0 .85em}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ==============================
   3) LAYOUT NORMALIZATION
============================== */
.container{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:20px 24px;
}
/* Prevent double vertical spacing: section padding + container padding */
section .container{
  padding-top: 0;
  padding-bottom: 0;
}

/* UPDATED: tighter, consistent global section rhythm (reduces big gaps) */
/* UPDATED: tighter, consistent global section rhythm */
section.section{
  padding-block: 0;
}


/* Optional: prevent hidden extra margins from stacking too much */
section > *:first-child{ margin-top:0; }
section > *:last-child{ margin-bottom:0; }

/* ==============================
   4) HEADER / NAV (GLOBAL)
============================== */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(250,247,243,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}

.header-inner{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:6px;
}

.brand-logo{ height:56px; }

.brand-text{
  font-weight:600;
  font-size:16px;
  line-height:1;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:14px;
}

.site-nav a{
  font-weight:600;
  font-size:14.5px;
}

/* Mobile nav */
.nav-toggle{
  display:none;
  background:none;
  border:0;
  padding:8px;
  cursor:pointer;
}

.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:var(--heading);
  margin:5px 0;
}

@media (max-width:900px){
  .nav-toggle{display:block}
  .site-nav{
    position:absolute;
    left:0;
    right:0;
    top:64px;
    background:var(--bg);
    border-bottom:1px solid var(--border);
    display:none;
    flex-direction:column;
    padding:14px 20px;
    gap:14px;
  }
  .site-nav.open{display:flex}
}

/* ==============================
   5) BUTTONS
============================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:10px;
  font:700 14px/1 "Poppins";
}

.btn-primary{
  background:var(--dark);
  color:#fff;
  padding:11px 16px;
}

.btn-primary:hover{ background:var(--dark-hover); }

/* ==============================
   NEW: FORM MICROCOPY (Consent + 24h response note)
   Works across pages; can be enhanced with classes in HTML later.
============================== */

/* Consent row: supports either:
   - .form-consent wrapper, OR
   - label that contains a checkbox, OR
   - checkbox + label pairs
*/
.form-consent,
.consent,
.quote-consent,
form .consent{
  display:flex;
  align-items:center;   /* ✅ THIS FIXES IT */
  gap:10px;
  margin-top: var(--space-1);
}


.form-consent input[type="checkbox"],
.consent input[type="checkbox"],
.quote-consent input[type="checkbox"],
form .consent input[type="checkbox"],
form label input[type="checkbox"]{
  margin-top: .18em;
  width:16px;
  height:16px;
  accent-color: var(--dark);
  flex:0 0 auto;
}

/* The consent text itself (smaller, quieter, readable) */
.form-consent label,
.consent label,
.quote-consent label,
form .consent label,
form label:has(input[type="checkbox"]){
  font-size: var(--micro);
  line-height:1.35;
  color: rgba(43,43,43,.78);
  font-weight:500;
}

/* A subtle link style if you ever add "privacy policy" link */
.form-consent a,
.consent a,
.quote-consent a{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* The "We usually respond within 24 hours" line */
.form-helper,
.form-note,
.quote-note,
.cta-note,
.response-time{
  margin-top: 10px;
  text-align:center;
  font-size: var(--micro);
  line-height:1.2;
  color: rgba(43,43,43,.70);
  font-weight:600;

  /* One-line requirement */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Keep helper text tied to primary CTA if wrapped together */
.cta-stack,
.quote-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.form-consent input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;            /* no vertical nudging */
  flex-shrink:0;
}

.form-consent span{
  line-height:1.4;     /* natural reading rhythm */
}

/* ==============================
   6) CARDS (COMMON)
============================== */
.service-card,
.why-card,
.card{ padding:20px; }

@media (max-width:640px){
  .service-card,
  .why-card,
  .card{ padding:18px; }
}

/* =================================================
   7) WHY CHOOSE US — SHARED (HOME + SERVICES)
   (KEEP THIS — do not remove)
================================================= */
#why-us.why-cream{
  position:relative;
  background:
    radial-gradient(600px 200px at 10% -20%, rgba(90,52,33,.07), transparent),
    radial-gradient(600px 200px at 90% 120%, rgba(90,52,33,.08), transparent);
}

/* Section title */
#why-us .why-title{
  text-align:left;
  margin-bottom:22px;
  font-size:clamp(24px,3vw,34px);
  color:#111;
}

/* Grid */
#why-us .why-row{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:16px;
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

@media (max-width:1000px){
  #why-us .why-row{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  #why-us .why-row{ grid-template-columns:1fr; }
}

/* Card */
#why-us .why-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow:0 12px 28px rgba(0,0,0,.05);
  text-align:left;
  transition:transform .18s ease, box-shadow .18s ease;
  display:flex;
  flex-direction:column;
  gap:8px;
}

#why-us .why-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(0,0,0,.07);
}

/* Icon */
#why-us .why-ico{
  width:56px;
  height:56px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#faf5ee;
  border:1px solid var(--border);
  color:#3a170c;
  flex-shrink:0;
}

#why-us .why-ico svg{
  width:26px;
  height:26px;
  stroke:currentColor;
}

/* Card heading */
#why-us .why-card h3{
  margin:0;
  font-weight:800;
  color:#111;
  font-size:18px;
  line-height:1.25;
  min-height:2.6em; /* keeps cards aligned */
}

/* Card text */
#why-us .why-card p{
  margin:0;
  color:#555;
  font-size:15px;
  line-height:1.5;
}

/* Value block (image + text) */
#why-us .why-value{
  margin-top:28px;
  display:grid;
  gap:22px;
  align-items:center;
  grid-template-columns:minmax(280px, .9fr) 1.1fr;
}

@media (max-width:900px){
  #why-us .why-value{ grid-template-columns:1fr; }
}

#why-us .val-media{
  position:relative;
  margin:0;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.1));
}

#why-us .val-media img{
  width:100%;
  border-radius:18px;
  border:1px solid var(--border);
  background:#fff;
}

#why-us .val-copy h3{
  margin:0 0 6px;
  font-size:clamp(20px, 3vw, 28px);
  color:#111;
  font-weight:900;
}

#why-us .val-copy .lead{
  margin:0 0 12px;
  color:#333;
  font-size:15.5px;
}

#why-us .ticks{
  list-style:none;
  padding:0;
  margin:0 0 14px;
  display:grid;
  gap:8px;
}

#why-us .ticks li{
  position:relative;
  padding-left:26px;
  color:#2b2b2b;
  font-size:15px;
}

#why-us .ticks li::before{
  content:"";
  position:absolute;
  left:0;
  top:.35em;
  width:16px;
  height:16px;
  border-radius:50%;
  border:1px solid var(--border);
  background:#fff;
  box-shadow: inset 0 0 0 3px #2ecc71;
}
/* Tighten top spacing for Why Choose Us (shared section) */
#why-us{
  padding-top: 0;
}

#why-us .why-title{
  margin-top: 0;
  margin-bottom: 14px;
}

#why-us .why-value{
  margin-top: 20px;
}

/* ==============================
   8) GLOBAL FOOTER (ALL PAGES)
   (Fix: headings + text forced white)
============================== */
.footer-band{
  margin-top:48px;
  background:linear-gradient(180deg, #29160e, #1f120c);
  border-top:1px solid rgba(255,255,255,.08);
  color:#fff;
  padding:36px 0 28px;
}

.footer-band .fb-grid{
  max-width:1120px;
  margin-inline:auto;
  padding:0 18px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:28px;
  text-align:center;
  align-items:start;
}

@media (max-width:900px){
  .footer-band .fb-grid{ grid-template-columns:1fr; }
}

/* Force footer typography to white (your requested fix) */
.footer-band h3,
.footer-band p,
.footer-band a,
.footer-band .tagline,
.footer-band .muted{
  color:#fff;
}

.footer-band h3{
  font-weight:800;
  margin:0 0 10px;
}

.footer-band p{
  font-size:15px;
  margin:.15rem 0;
}

.footer-band a{
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.footer-band a:hover{
  border-bottom-color:rgba(255,255,255,.6);
}

.footer-band .muted{
  opacity:.8;
  font-size:14px;
}

/* Brand column */
.fb-col.fb-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.footer-band .brand-mark{
  display:grid;
  justify-items:center;
  gap:8px;
}

.footer-band .brand-mark img{
  height:54px;
  filter:brightness(0) invert(1);
}

.footer-band .brand-mark .tagline{
  font-weight:700;
  letter-spacing:.04em;
  opacity:.92;
}

/* Social icons */
.footer-socials{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:10px;
}

.footer-socials img{
  width:20px;
  height:20px;
  opacity:.85;
  transition:opacity .2s ease;
}

.footer-socials a:hover img{ opacity:1; }

/* ==============================
   9) SUB FOOTER (COPYRIGHT)
   (Fix: always visible + not clipped)
============================== */
.site-footer{
  background:#120a06;
  border-top:1px solid rgba(255,255,255,.06);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.site-footer p{
  color:rgba(255,255,255,.86);
  text-align:center;
  padding:14px 12px; /* small side padding to avoid edge clipping */
  margin:0;
  font-size:14px;
  line-height:1.4;
}
/* ==============================
   FIX: CTA ALIGNMENT (QUOTE FORM)
============================== */
.q-actions.cta-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  margin-top:16px;
  gap:8px;
}

.q-actions.cta-stack .btn{
  margin:0 auto;
}

.q-actions.cta-stack .response-time{
  text-align:center;
  width:100%;
}
.form-consent{
  display:flex;
  align-items:center; /* true vertical centering */
  gap:10px;
}

.form-consent input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
  flex-shrink:0;
}

.form-consent span{
  line-height:1.3;
}
/* =========================================
   GDPR CHECKBOX
========================================= */
#contact.quote-lite .quote-form .q-check{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  font-size:14px;
  color:var(--muted);
}

#contact.quote-lite .quote-form .q-check input{
  margin:0;
  flex:0 0 auto;
}

#contact.quote-lite .quote-form .q-check span{
  margin:0;
  line-height:1.4;
}