/* ==========================================================================
   The Christmas Light Whisperer — Luxury Holiday Lighting
   ========================================================================== */

:root{
  --forest-green: #123524;
  --deep-green: #0f2f25;
  --warm-cream: #faf7f0;
  --deep-red: #b22222;
  --muted-gold: #c8a45d;
  --charcoal: #1b1b1b;
  --white: #ffffff;
  --ink-soft: #4a534e;
  --border-soft: rgba(18,53,36,0.12);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(15,30,25,0.06);
  --shadow-md: 0 12px 32px rgba(15,30,25,0.10);
  --shadow-lg: 0 24px 60px rgba(15,30,25,0.16);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::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;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }

.container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}
.container-narrow{ max-width: 820px; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--forest-green);
  line-height: 1.18;
  margin: 0;
}
h1{ font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2{ font-size: clamp(2rem, 3.2vw, 2.7rem); }
h3{ font-size: 1.3rem; }
p{ margin: 0; }

.eyebrow{
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--deep-red);
  font-weight: 600;
  margin-bottom: 14px;
}
.eyebrow-light{ color: var(--muted-gold); }
.h-light{ color: var(--white); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.98rem;
  border: 1.5px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn-primary{
  background: linear-gradient(135deg, var(--deep-red), #8c1a1a);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover, .btn-primary:focus-visible{ transform: translateY(-2px); box-shadow: var(--shadow-md); background: linear-gradient(135deg, #c22626, var(--deep-red)); }
.btn-outline{
  background: transparent;
  border-color: var(--forest-green);
  color: var(--forest-green);
}
.btn-outline:hover, .btn-outline:focus-visible{ background: var(--forest-green); color: var(--white); }
.btn-outline-light{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.55);
  color: var(--white);
  backdrop-filter: blur(6px);
}
.btn-outline-light:hover, .btn-outline-light:focus-visible{ background: rgba(255,255,255,0.16); transform: translateY(-2px); }
.btn-lg{ padding: 17px 36px; font-size: 1.02rem; }
.btn-block{ width:100%; white-space: normal; }
.btn:focus-visible{ outline: 2px solid var(--muted-gold); outline-offset: 3px; }
.btn-call{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--forest-green); font-weight:600; font-size:0.95rem;
}
.btn-call svg{ width:16px; height:16px; color: var(--deep-red); }

/* ---------- Header ---------- */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  background: rgba(250,247,240,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s;
}
.site-header.scrolled{
  background: rgba(250,247,240,0.98);
  box-shadow: var(--shadow-sm);
  border-color: var(--border-soft);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 14px; padding-bottom: 14px;
  gap: 20px;
}
.logo{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.logo-badge{
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; flex-shrink:0;
  box-shadow: 0 0 0 1px rgba(18,53,36,0.1);
}
.logo-text{
  font-family: var(--font-display);
  font-weight:600; font-size: 1.02rem; line-height:1.15;
  color: var(--forest-green);
}
.logo-text em{ font-style:italic; color: var(--deep-red); }
.main-nav{ display:flex; gap: 16px; }
.main-nav a{
  font-size: 0.9rem; font-weight: 500; color: var(--ink-soft);
  transition: color .2s;
}
.main-nav a:hover, .main-nav a:focus-visible{ color: var(--deep-red); }
.main-nav a.nav-active{ color: var(--forest-green); font-weight: 700; }
.header-actions{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.header-actions .btn-primary{ padding-left: 22px; padding-right: 22px; font-size: 0.9rem; }
.header-call{ display:flex; }
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; width:34px; height:34px; padding:0;
}
.nav-toggle span{ display:block; height:2px; background: var(--forest-green); border-radius:2px; transition: transform .25s, opacity .25s; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex; align-items:center;
  overflow:hidden;
  color: var(--white);
}
.hero-media{
  position:absolute; inset:0;
  overflow:hidden;
  transform: scale(1.06);
}
.hero-slide{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center 30%;
  opacity: 0;
  animation: heroFade 35s infinite;
}
.hero-slide-1{ background-image: url('../images/hero-slide-1.jpg?v=3'); background-position: center 18%; animation-delay: 0s; }
.hero-slide-2{
  background-image: url('../images/hero-slide-2.jpg?v=2');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #070b09;
  animation-delay: 7s;
}
.hero-slide-3{ background-image: url('../images/hero-slide-3.jpg?v=2'); background-position: center 28%; animation-delay: 14s; }
.hero-slide-4{ background-image: url('../images/hero-slide-4.jpg?v=3'); background-position: center 30%; animation-delay: 21s; }
.hero-slide-5{ background-image: url('../images/hero-slide-5.jpg?v=1'); background-position: center 25%; animation-delay: 28s; }
.hero-gradient{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,20,15,0.35) 0%, rgba(6,20,15,0.55) 60%, rgba(6,20,15,0.88) 100%);
}
@keyframes heroFade{
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  20%  { opacity: 1; }
  23%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .hero-slide{ animation: none; opacity: 0; }
  .hero-slide-1{ opacity: 1; }
}
.hero-scrim{
  position:absolute; inset:0;
  background: radial-gradient(120% 90% at 50% 100%, rgba(10,26,20,0.5), transparent 60%);
}
.hero-content{
  position:relative; z-index:2;
  padding-top: 140px; padding-bottom: 90px;
  max-width: 780px;
}
.hero h1{
  color: var(--white);
  margin-bottom: 18px;
}
.hero-sub{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--muted-gold);
  margin-bottom: 22px;
}
.hero-support{
  font-size: 1.08rem;
  color: rgba(255,255,255,0.9);
  max-width: 580px;
  margin-bottom: 36px;
}
.hero-ctas{ display:flex; gap:18px; flex-wrap:wrap; }
.hero-ctas-center{ justify-content:center; }
.hero-trust-list{
  display:flex; flex-wrap:wrap; gap: 12px 26px;
  margin-top: 34px;
  max-width: 640px;
}
.hero-trust-list li{
  display:flex; align-items:center; gap:8px;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}
.hero-trust-list li::before{
  content:"✓";
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%;
  background: var(--muted-gold); color: #1b1b1b;
  font-size: 0.62rem; font-weight:700; flex-shrink:0;
}
.scroll-cue{
  position:absolute; bottom: 34px; left:50%; transform:translateX(-50%);
  z-index:2; width:26px; height:42px; border:2px solid rgba(255,255,255,0.55);
  border-radius: 20px;
}
.scroll-cue span{
  position:absolute; top:8px; left:50%; width:4px; height:8px; margin-left:-2px;
  background: var(--muted-gold); border-radius:3px;
  animation: scrollcue 1.8s infinite;
}
@keyframes scrollcue{ 0%{ opacity:1; transform:translateY(0);} 70%{opacity:0; transform:translateY(14px);} 100%{opacity:0;} }

/* ---------- Inner page hero (Residential, Commercial, Gallery, About, etc.) ---------- */
.page-hero{
  position:relative;
  min-height: 56vh;
  display:flex; align-items:center;
  overflow:hidden;
  color: var(--white);
  background-size: cover;
  background-position: center;
}
.page-hero-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,20,15,0.55) 0%, rgba(6,20,15,0.65) 50%, rgba(6,20,15,0.85) 100%);
}
.page-hero-content{
  position:relative; z-index:2;
  padding-top: 150px; padding-bottom: 70px;
  max-width: 720px;
}
.page-hero h1{ color: var(--white); margin-bottom: 16px; font-size: clamp(2.2rem, 5vw, 3.4rem); }
.page-hero-sub{ font-size: 1.08rem; color: rgba(255,255,255,0.9); max-width: 560px; margin-bottom: 32px; }
.page-hero-residential{ background-image: url('../images/gallery-4.jpg'); background-position: center 30%; }
.page-hero-commercial{ background-image: url('../images/service-municipal.jpg'); background-position: center 25%; }
.page-hero-gallery{ background-image: url('../images/hero-slide-1.jpg'); background-position: center 20%; }
.page-hero-about{ background-image: url('../images/gallery-6.jpg'); background-position: center 30%; }
.page-hero-areas{ background-image: url('../images/gallery-3.jpg'); background-position: center 28%; }
.page-hero-faq{ background-image: url('../images/gallery-8.jpg'); background-position: center 30%; }
.page-hero-contact{ background-image: url('../images/service-wreath.jpg'); background-position: center 28%; }

/* ---------- HubSpot form overrides ----------
   Restyles the embedded HubSpot estimate form to match the site.
   HubSpot injects its own markup, so these target its generated classes.
   If HubSpot changes their class names, the form still works — it just
   falls back to their default styling.
   ------------------------------------------- */
.hs-form-wrap .hs-form-field{ margin-bottom: 18px; }

.hs-form-wrap .hs-form-field > label,
.hs-form-wrap .hs-form-field > label span{
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--forest-green);
  display: block;
  margin-bottom: 8px;
}
.hs-form-wrap .hs-form-required{ color: var(--deep-red); }

.hs-form-wrap .hs-field-desc{
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-style: normal;
  margin: 0 0 8px;
}

.hs-form-wrap input[type="text"],
.hs-form-wrap input[type="email"],
.hs-form-wrap input[type="tel"],
.hs-form-wrap input[type="number"],
.hs-form-wrap select,
.hs-form-wrap textarea{
  width: 100% !important;
  font-family: var(--font-body);
  font-size: 0.98rem;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1.5px solid #e2ddd0;
  background: var(--warm-cream);
  color: var(--charcoal);
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.hs-form-wrap textarea{ resize: vertical; min-height: 90px; }

.hs-form-wrap input:focus,
.hs-form-wrap select:focus,
.hs-form-wrap textarea:focus{
  outline: none;
  border-color: var(--muted-gold);
  box-shadow: 0 0 0 3px rgba(200,164,93,0.25);
}

/* Checkbox / radio groups */
.hs-form-wrap .inputs-list{ list-style: none; margin: 0; padding: 0; }
.hs-form-wrap .inputs-list li{ margin-bottom: 9px; }
.hs-form-wrap .inputs-list label{
  display: flex; align-items: center; gap: 9px;
  font-size: 0.92rem; font-weight: 400; color: var(--charcoal);
  cursor: pointer; margin: 0;
}
.hs-form-wrap .inputs-list input[type="checkbox"],
.hs-form-wrap .inputs-list input[type="radio"]{
  width: 16px; height: 16px; accent-color: var(--deep-red); flex-shrink: 0; margin: 0;
}

/* Submit button — matches .btn .btn-primary */
.hs-form-wrap input[type="submit"],
.hs-form-wrap .hs-button{
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 17px 36px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.02rem;
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, var(--deep-red), #8c1a1a);
  color: var(--white);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  white-space: normal;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.hs-form-wrap input[type="submit"]:hover,
.hs-form-wrap .hs-button:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, #c22626, var(--deep-red));
}

/* Validation messages */
.hs-form-wrap .hs-error-msg,
.hs-form-wrap .hs-error-msgs label{
  color: var(--deep-red);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Post-submit thank-you message */
.hs-form-wrap .submitted-message{
  text-align: center;
  font-weight: 600;
  color: var(--forest-green);
  padding: 20px 0;
}

/* Two-column rows on desktop */
@media (min-width: 681px){
  .hs-form-wrap .form-columns-2 .hs-form-field{
    width: 48% !important;
    float: left;
    margin-right: 4%;
  }
  .hs-form-wrap .form-columns-2 .hs-form-field:last-child{ margin-right: 0; }
  .hs-form-wrap .form-columns-2::after{ content: ""; display: table; clear: both; }
}
@media (max-width: 680px){
  .hs-form-wrap .form-columns-2 .hs-form-field{ width: 100% !important; float: none; margin-right: 0; }
}

/* ==========================================================================
   SERVICE AREAS PAGE
   ========================================================================== */

/* ---------- Region block: photo beside copy ---------- */
.area-region-grid{
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 54px; align-items:center; margin-bottom: 56px;
}
.area-region-media img{
  width:100%; height: 340px; object-fit: cover;
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.area-region-copy h2{ margin-bottom: 16px; }
.area-region-copy p{ color: var(--ink-soft); font-size: 1.04rem; }

/* ---------- Grouped city lists ---------- */
.city-group-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 34px;
}
.city-group-grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
/* Four sub-regions read better as a 2x2 block than as four narrow columns. */
.city-group-grid-quad{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 60px; }
.city-group h4{
  font-family: var(--font-body);
  font-size: 0.8rem; font-weight:700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--deep-red);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}
.chip-list{ display:flex; flex-wrap:wrap; gap: 8px; }
.chip-list-center{ justify-content:center; margin: 26px 0 8px; }
.chip{
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--white); border: 1px solid var(--border-soft);
  font-size: 0.84rem; font-weight:500; color: var(--charcoal);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.chip:hover{ border-color: var(--muted-gold); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.section-tint .chip{ background: var(--white); }

/* ---------- I-35 corridor route ---------- */
.corridor-section{ padding-bottom: 100px; }
.corridor-route{
  position:relative;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 8px;
  max-width: 1000px; margin: 0 auto;
  padding-top: 8px;
}
/* the connecting I-35 line */
.corridor-route::before{
  content:""; position:absolute;
  top: 13px; left: 6%; right: 6%; height: 2px;
  background: linear-gradient(90deg, var(--muted-gold), rgba(200,164,93,0.45), var(--muted-gold));
}
.corridor-stop{
  position:relative; z-index:1;
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.corridor-dot{
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: 2px solid var(--deep-green);
  box-shadow: 0 0 0 3px var(--deep-green);
  margin-bottom: 14px;
}
.corridor-label{
  font-size: 0.78rem; font-weight: 500;
  color: rgba(255,255,255,0.78);
  line-height: 1.35;
}
.corridor-stop.is-anchor .corridor-dot{
  width: 18px; height: 18px; margin-top: -3px; margin-bottom: 11px;
  background: var(--muted-gold); border-color: var(--muted-gold);
}
.corridor-stop.is-anchor .corridor-label{
  color: var(--white); font-weight: 700; font-size: 0.86rem;
}
.corridor-stop.is-featured .corridor-dot{
  width: 16px; height: 16px; margin-top: -2px; margin-bottom: 12px;
  background: var(--deep-red); border-color: var(--deep-red);
}
.corridor-stop.is-featured .corridor-label{ color: var(--white); font-weight: 700; }
.corridor-tag{
  display:inline-block; margin-top: 6px;
  font-size: 0.62rem; font-weight:700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-gold);
  border: 1px solid rgba(200,164,93,0.5); border-radius: var(--radius-pill);
  padding: 2px 8px;
}
.corridor-note{
  text-align:center; max-width: 620px; margin: 48px auto 0;
  color: rgba(255,255,255,0.75); font-size: 0.96rem;
}
.corridor-section .services-cta{ margin-top: 30px; padding-bottom: 0; }

/* ---------- Austin emphasis block ---------- */
.austin-block{
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--muted-gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 46px 44px;
  text-align:center;
}
.austin-block h2{ margin-bottom: 6px; }
.austin-block .services-cta{ margin-top: 26px; }

/* ---------- Residential / Commercial split cards ---------- */
.split-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px;
}
.split-card{
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.split-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
.split-media{ width:100%; height: 210px; object-fit: cover; }
.split-body{ padding: 30px 28px 32px; display:flex; flex-direction:column; flex:1; }
.split-body h3{ font-size: 1.25rem; margin-bottom: 12px; }
.split-body > p{ color: var(--ink-soft); font-size: 0.96rem; margin-bottom: 20px; }
.split-list{
  display:flex; flex-wrap:wrap; gap: 7px;
  margin-bottom: 26px; flex:1; align-content:flex-start;
}
.split-list li{
  font-size: 0.8rem; font-weight:500; color: var(--forest-green);
  background: var(--warm-cream); border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill); padding: 5px 12px;
}
.split-body .btn{ align-self:flex-start; }

/* ---------- Final CTA process line ---------- */
.final-cta-steps{
  margin-top: 28px;
  font-size: 0.82rem; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.72) !important;
}

/* ---------- Service areas responsive ---------- */
@media (max-width: 1080px){
  .city-group-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-region-grid{ gap: 36px; }
  .area-region-media img{ height: 280px; }
  .corridor-label{ font-size: 0.72rem; }
}
@media (max-width: 860px){
  .area-region-grid{ grid-template-columns: minmax(0, 1fr); }
  .area-region-reverse .area-region-media{ order: -1; }
  .split-grid{ grid-template-columns: minmax(0, 1fr); }

  /* corridor becomes a vertical route */
  .corridor-route{
    flex-direction: column; align-items:flex-start;
    gap: 0; max-width: 420px; padding-left: 4px;
  }
  .corridor-route::before{
    top: 10px; bottom: 10px; left: 9px; right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg, var(--muted-gold), rgba(200,164,93,0.45), var(--muted-gold));
  }
  .corridor-stop{
    flex-direction: row; align-items:center; text-align:left;
    gap: 16px; padding: 11px 0; width:100%;
  }
  .corridor-dot{ margin: 0 0 0 4px; flex-shrink:0; }
  .corridor-stop.is-anchor .corridor-dot,
  .corridor-stop.is-featured .corridor-dot{ margin: 0 0 0 1px; }
  .corridor-stop.is-anchor .corridor-dot{ margin-left: 1px; }
  .corridor-label{ font-size: 0.9rem; }
  .corridor-tag{ margin: 0 0 0 10px; }
}
@media (max-width: 680px){
  .city-group-grid,
  .city-group-grid-2{ grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .austin-block{ padding: 34px 24px; }
  .split-body{ padding: 26px 22px 28px; }
}

/* ==========================================================================
   REFERRALS PAGE
   Additive only — every selector below is scoped to classes that appear
   nowhere else on the site.
   ========================================================================== */
.page-hero-referrals{ background-image: url('../images/home-gallery-c.jpg'); }

/* Customer offer */
.referral-offer{
  display:grid; grid-template-columns: auto minmax(0,1fr);
  gap: 34px; align-items:center;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--muted-gold);
  border-radius: var(--radius-md);
  padding: 38px 40px;
  max-width: 940px; margin: 0 auto;
}
.referral-offer-amount{
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 4.6rem);
  font-weight: 700; line-height: 1;
  color: var(--forest-green);
}
.referral-offer-body h3{ font-size: 1.3rem; margin-bottom: 12px; }
.referral-offer-body p{ color: var(--ink-soft); font-size: 0.97rem; line-height: 1.65; }
.referral-offer-body p + p{ margin-top: 12px; }
.referral-fine{
  font-size: 0.86rem !important;
  color: var(--ink-soft);
  font-style: italic;
}
.referral-note{
  text-align:center; font-size: 0.9rem; color: var(--ink-soft);
  margin-top: 16px; max-width: 62ch; margin-left:auto; margin-right:auto;
}

/* Partner terms */
.partner-terms{
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 34px 36px;
  max-width: 760px; margin: 0 auto;
}
.partner-headline{ text-align:center; margin-bottom: 26px; }
.partner-headline h3{ font-size: 1.42rem; margin-bottom: 6px; }
.partner-headline p{
  font-size: 0.95rem; color: var(--muted-gold);
  font-weight: 600; letter-spacing: 0.04em;
}
.partner-table-wrap{ overflow-x:auto; }
.partner-table{
  width:100%; border-collapse: collapse;
  font-size: 0.96rem; min-width: 320px;
}
.partner-table th{
  text-align:left; padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--forest-green);
  border-bottom: 2px solid var(--border-soft);
}
.partner-table td{
  padding: 13px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-variant-numeric: tabular-nums;
}
.partner-table tr:last-child td{ border-bottom:none; }
.partner-pay{
  font-family: var(--font-display);
  font-weight: 700; color: var(--forest-green);
}

/* Partner form */
.partner-form-wrap{
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 30px 32px;
}
.partner-fallback{
  padding: 18px 20px;
  background: var(--warm-cream);
  border-left: 3px solid var(--muted-gold);
  font-size: 0.94rem; line-height: 1.6;
}
.partner-fallback a{ color: var(--forest-green); font-weight:600; border-bottom:1px solid var(--muted-gold); }
.partner-fallback a:hover{ color: var(--deep-red); }

/* Link generator */
.ref-generator{ max-width: 560px; margin: 0 auto; }
.ref-generator label{
  display:block; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--forest-green); margin-bottom: 9px;
}
.ref-generator-row{ display:flex; gap: 10px; }
.ref-generator input{
  flex: 1 1 auto; min-width: 0;
  padding: 13px 16px;
  font-family: var(--font-body); font-size: 0.97rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.ref-generator input:focus{
  outline: none; border-color: var(--muted-gold);
  box-shadow: 0 0 0 3px rgba(200,164,93,0.18);
}
.ref-generator .btn{ flex: 0 0 auto; }
.ref-error{
  margin-top: 10px; font-size: 0.88rem;
  color: var(--deep-red); font-weight: 500;
}
.ref-output{
  max-width: 560px; margin: 22px auto 0;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 24px 26px; text-align:center;
}
.ref-output-label{
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-gold); margin-bottom: 10px;
}
.ref-link{
  display:block; word-break: break-all;
  font-size: 0.97rem; font-weight: 500;
  color: var(--forest-green);
  margin-bottom: 16px; line-height: 1.5;
}
.ref-link:hover{ color: var(--deep-red); }
.ref-qr{ margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border-soft); }
.ref-qr #refQrCode{ display:flex; justify-content:center; }
.ref-qr #refQrCode img,
.ref-qr #refQrCode canvas{ display:block; }

@media (max-width: 680px){
  .referral-offer{
    grid-template-columns: minmax(0,1fr);
    gap: 16px; padding: 30px 26px; text-align:center;
  }
  .partner-terms{ padding: 26px 22px; }
  .partner-form-wrap{ padding: 22px 20px; }
  .ref-generator-row{ flex-direction: column; }
  .ref-generator .btn{ width: 100%; }
}

/* ==========================================================================
   ESTIMATE RECEIVED (confirmation page)
   Shown only after a successful form submission — no second form on it.
   ========================================================================== */
.confirm-section{ padding-top: 150px; }
.confirm-mark{
  display:flex; justify-content:center;
  color: var(--forest-green);
  margin-bottom: 26px;
}
.confirm-mark svg{ width: 62px; height: 62px; }

.confirm-section .section-head{ margin-bottom: 34px; }
.confirm-section h1{
  font-size: clamp(2rem, 4vw, 2.9rem);
  margin-bottom: 16px;
}

.confirm-next{
  text-align:center;
  padding-top: 30px;
  border-top: 1px solid var(--border-soft);
}
.confirm-next-label{
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted-gold);
  margin-bottom: 16px;
}
.confirm-email{
  margin-top: 16px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.confirm-email a{ color: var(--forest-green); font-weight: 600; border-bottom: 1px solid var(--muted-gold); }
.confirm-email a:hover{ color: var(--deep-red); }

/* While-you-wait cards */
.confirm-links{ margin-top: 6px; }
.confirm-card{
  display:flex; flex-direction:column;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.confirm-card:hover, .confirm-card:focus-visible{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.confirm-card img{
  width:100%; height: 168px;
  object-fit: cover;
}
.confirm-card-body{ padding: 22px 22px 24px; }
.confirm-card-body h3{ font-size: 1.15rem; margin-bottom: 8px; }
.confirm-card-body p{
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.confirm-card-link{
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--deep-red);
}

@media (max-width: 860px){
  .confirm-section{ padding-top: 128px; }
  .confirm-card img{ height: 190px; }
}
@media (max-width: 680px){
  .confirm-mark svg{ width: 52px; height: 52px; }
  .confirm-links{ grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Legal pages (Privacy, Terms) ---------- */
.legal-page{ padding-top: 150px; }
.legal-page h1{ font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 10px; }
.legal-updated{ color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 44px; }
.legal-content h2{
  font-size: 1.35rem;
  margin-top: 42px; margin-bottom: 14px;
}
.legal-content p{
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 16px;
}
.legal-content a{ color: var(--deep-red); font-weight: 600; }
.legal-content a:hover{ text-decoration: underline; }
.legal-list{
  margin: 0 0 20px; padding-left: 4px;
  color: var(--ink-soft); line-height: 1.8;
}
.legal-list li{
  position: relative; padding-left: 22px; margin-bottom: 8px;
}
.legal-list li::before{
  content: ""; position: absolute; left: 4px; top: 12px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted-gold);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  display:flex; flex-wrap:wrap; gap: 6px; align-items:center;
  font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 40px;
}
.breadcrumb a{ color: var(--forest-green); font-weight:600; }
.breadcrumb a:hover{ color: var(--deep-red); }
.breadcrumb span{ opacity:0.5; }

/* ---------- Sections ---------- */
.section{ padding: 100px 0; }
.section-compact{ padding: 68px 0; }
.section-tint{ background: var(--warm-cream); }
.section-dark{ background: var(--deep-green); padding-bottom: 0; }
.section-head{ max-width: 680px; margin: 0 auto 56px; text-align:center; }
.section-sub{ margin-top: 16px; color: var(--ink-soft); font-size: 1.05rem; }
.section-sub-light{ color: rgba(255,255,255,0.78); }
.grid{ display:grid; gap: 28px; }
.grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Emotional intro ---------- */
.intro-copy{ margin-top: 18px; color: var(--ink-soft); font-size: 1.08rem; line-height: 1.75; }
.intro-copy + .intro-copy{ margin-top: 16px; }

/* ---------- Feature sections (residential / commercial) ---------- */
.feature-grid{
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items:center;
}
.feature-media img{
  width:100%; height: 440px; object-fit: cover;
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.feature-copy h2{ margin-bottom: 20px; }
.feature-copy p{ color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 16px; }
.feature-copy .btn{ margin-top: 12px; }

/* ---------- Service card learn-more link ---------- */
.service-link{
  display:inline-flex; align-items:center; gap:6px;
  margin: 0 20px 22px; font-size: 0.88rem; font-weight:600; color: var(--deep-red);
  transition: gap .2s;
}
.service-link:hover{ gap: 10px; }
.service-card{ display:flex; flex-direction:column; }
.service-card p{ flex:1; }

/* ---------- Gallery CTA ---------- */
.gallery-cta{ text-align:center; padding: 54px 0; }

/* ---------- Footer legal ---------- */
.footer-legal{ display:flex; gap: 20px; }
.footer-legal a{ font-size: 0.82rem; opacity: 0.75; }
.footer-legal a:hover{ opacity: 1; }

/* ---------- Honeypot (spam trap, hidden from real users) ---------- */
.form-honeypot{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

/* ---------- Why choose us ---------- */
.why-card{
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 30px 24px;
  text-align:center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.why-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.why-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background: linear-gradient(135deg, #eaf1ec, #f8f0de);
  color: var(--forest-green);
  margin-bottom: 16px;
}
.why-icon svg{ width:25px; height:25px; }
.why-card h3{ font-size: 1.08rem; }

.why-detail-card{
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  display:flex; flex-direction:column;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.why-detail-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.why-detail-card h3{ font-size: 1.1rem; margin-bottom: 10px; }
.why-detail-card p{ color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Trust bar ----------
   The service-area line sits on its own row so it never competes with the four
   service promises, which are held in an even four-column rhythm below it. */
.trust-bar{
  background: var(--warm-cream);
  border-bottom: 1px solid var(--border-soft);
  padding: 26px 0;
}
/* The bar carries only the service-area line now, so it reads as a deliberate
   band rather than a leftover strip: gold rules flank the text on wide screens. */
.trust-location{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin: 0;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest-green);
  text-align:center;
}
.trust-location svg{ width:19px; height:19px; color: var(--muted-gold); flex-shrink:0; }
.trust-location em{
  font-style: normal;
  color: var(--muted-gold);
  margin: 0 7px;
}
.trust-location::before,
.trust-location::after{
  content:"";
  flex: 0 1 90px;
  height:1px;
  background: linear-gradient(90deg, rgba(200,164,93,0), var(--muted-gold));
}
.trust-location::after{ background: linear-gradient(90deg, var(--muted-gold), rgba(200,164,93,0)); }

/* ---------- Benefit list (pre-form) ----------
   Deliberately lighter than the boxed .why-detail-card grid further down the
   page: two columns, icon to the left, hairline separators, no card chrome. */
.benefit-list{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  max-width: 980px;
  margin: 0 auto;
}
.benefit-row{
  /* Grid, not flex: h3 and p are siblings, so flex would lay them out as two
     narrow columns beside the icon instead of stacking them. */
  display:grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon title" "icon body";
  column-gap: 18px;
  padding: 26px 0;
  border-top: 1px solid var(--border-soft);
}
.benefit-icon{ grid-area: icon; align-self: start; }
.benefit-row h3{ grid-area: title; }
.benefit-row p{ grid-area: body; }
.benefit-list > .benefit-row:nth-child(1),
.benefit-list > .benefit-row:nth-child(2){ border-top: none; padding-top: 4px; }
/* An odd final item would otherwise sit alone with a half-width rule above it.
   It spans the row and centres as a closing line; the text column is pinned to
   the same width as the columns above so the block stays visually aligned. */
.benefit-list > .benefit-row:nth-child(odd):last-child{
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, calc((100% - 56px) / 2 - 64px));
  justify-content: center;
}
.benefit-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; flex-shrink:0;
  border-radius: 50%;
  background: rgba(200,164,93,0.14);
  color: var(--forest-green);
}
.benefit-icon svg{ width:23px; height:23px; }
.benefit-row h3{
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height:1.35;
  color: var(--forest-green);
  margin: 4px 0 6px;
}
.benefit-row p{
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- Estimate form ---------- */
.estimate-wrap{
  display:grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 60px; align-items:start;
}
.estimate-intro h2{ margin-bottom: 18px; }
.estimate-intro p{ color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 30px; }
.estimate-call{
  display:flex; flex-direction:column; gap:8px;
  padding: 20px 22px; border-radius: var(--radius-md);
  background: var(--white); border: 1px solid var(--border-soft);
}
.estimate-call span{ font-size:0.88rem; color: var(--ink-soft); }
.btn-call-inline{ font-family: var(--font-display); font-size:1.4rem; font-weight:600; color: var(--deep-red); display:flex; align-items:center; gap:10px; }
.btn-call-inline svg{ width:20px; height:20px; }

.estimate-form{
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 40px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-soft);
}
.form-row{ margin-bottom: 20px; }
.form-row-2{ display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.estimate-form label{
  display:flex; flex-direction:column; gap:8px;
  font-size:0.85rem; font-weight:600; color: var(--forest-green);
}
.estimate-form input,
.estimate-form select,
.estimate-form textarea{
  font-family: var(--font-body);
  font-size: 0.98rem;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1.5px solid #e2ddd0;
  background: var(--warm-cream);
  color: var(--charcoal);
  transition: border-color .2s, box-shadow .2s;
  resize: vertical;
}
.estimate-form input:focus,
.estimate-form select:focus,
.estimate-form textarea:focus{
  outline:none; border-color: var(--muted-gold); box-shadow: 0 0 0 3px rgba(200,164,93,0.25);
}
.services-fieldset{ border: none; padding: 0; margin: 0 0 20px; }
.services-fieldset legend{
  font-size:0.85rem; font-weight:600; color: var(--forest-green); margin-bottom: 10px; padding: 0;
}
.checkbox-grid{
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px;
}
.estimate-form .checkbox-label{
  display:flex; flex-direction: row; align-items:center; gap:9px;
  font-size: 0.92rem; font-weight: 400; color: var(--charcoal);
  cursor:pointer;
}
.checkbox-label input{ width:16px; height:16px; accent-color: var(--deep-red); flex-shrink:0; }
.form-note-list{
  text-align:center;
  margin-top: 16px; font-size: 0.85rem; color: var(--ink-soft); font-weight:600;
}
.form-status{ text-align:center; margin-top:14px; font-weight:600; color: var(--forest-green); min-height: 1.2em; }
.form-status-error{ color: var(--deep-red); }

/* ---------- Services ---------- */
.service-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.service-card{
  background: var(--white);
  border-radius: var(--radius-md);
  overflow:hidden;
  border: 1px solid var(--border-soft);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.service-img{
  width:100%; height: 170px; object-fit: cover;
}
.service-card h3{ font-size: 1.06rem; padding: 20px 20px 6px; }
.service-card p{ padding: 0 20px 22px; color: var(--ink-soft); font-size: 0.9rem; }

.services-cta{ text-align:center; margin-top: 54px; }

/* ---------- Gallery filters ---------- */
.gallery-filters{
  display:flex; flex-wrap:wrap; gap: 10px; justify-content:center;
  margin-bottom: 44px;
}
.filter-chip{
  padding: 9px 18px; border-radius: var(--radius-pill);
  background: var(--white); border: 1.5px solid var(--border-soft);
  font-size: 0.85rem; font-weight:600; color: var(--ink-soft);
  transition: background .2s, border-color .2s, color .2s;
}
.filter-chip:hover{ border-color: var(--muted-gold); color: var(--forest-green); }
.filter-chip.is-active{ background: var(--forest-green); border-color: var(--forest-green); color: var(--white); }
.gallery-empty{ text-align:center; padding: 40px 0; color: var(--ink-soft); }

/* ---------- Gallery ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 54px;
}
.gallery-grid-full{ margin-top: 0; }
.gallery-item-btn{
  display:block; width:100%; aspect-ratio: 1/1;
  padding:0; border:none; background:none; overflow:hidden; cursor: zoom-in;
}
.gallery-item-btn img{
  width:100%; height:100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.gallery-item-btn:hover img, .gallery-item-btn:focus-visible img{ transform: scale(1.05); }

/* ---------- Lightbox ---------- */
.lightbox{
  position: fixed; inset:0; z-index: 500;
  background: rgba(8,16,12,0.94);
  display:flex; align-items:center; justify-content:center;
  padding: 40px;
}
.lightbox[hidden]{ display:none; }
.lightbox-figure{ max-width: 1000px; max-height: 88vh; margin:0; text-align:center; }
.lightbox-figure img{ max-width:100%; max-height: 78vh; border-radius: var(--radius-sm); margin: 0 auto; }
.lightbox-figure figcaption{ color: rgba(255,255,255,0.85); margin-top: 14px; font-size: 0.92rem; }
.lightbox-close{
  position:absolute; top: 22px; right: 28px;
  background:none; border:none; color:#fff; font-size: 2.2rem; line-height:1;
}
.lightbox-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3);
  color:#fff; width: 48px; height: 48px; border-radius:50%;
  font-size: 1.8rem; display:flex; align-items:center; justify-content:center;
}
.lightbox-nav:hover{ background: rgba(255,255,255,0.2); }
.lightbox-prev{ left: 24px; }
.lightbox-next{ right: 24px; }

/* ---------- Process ---------- */
.process-grid{
  display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px;
}
.process-step{ text-align:center; padding: 0 10px; }
.process-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  font-family: var(--font-display); font-weight:700; font-size:1.25rem;
  background: var(--forest-green); color: var(--muted-gold);
  margin-bottom: 16px;
}
.process-step h3{ font-size: 1.02rem; margin-bottom: 8px; }
.process-step p{ color: var(--ink-soft); font-size: 0.9rem; }

/* ---------- Service areas ---------- */
.areas-wrap{ display:flex; flex-direction:column; gap: 34px; max-width: 900px; margin: 0 auto; }
.area-group h4{
  font-family: var(--font-body); text-transform:uppercase; letter-spacing:0.08em;
  font-size:0.85rem; color: var(--deep-red); margin-bottom: 16px; font-weight:700;
}
.pill-list{ display:flex; flex-wrap:wrap; gap: 10px; }
.pill-list span{
  padding: 9px 18px; border-radius: var(--radius-pill);
  background: var(--warm-cream); border: 1px solid var(--border-soft);
  font-size: 0.88rem; font-weight:500; color: var(--charcoal);
}
.pill-list a{
  padding: 9px 18px; border-radius: var(--radius-pill);
  background: var(--warm-cream); border: 1px solid var(--border-soft);
  font-size: 0.88rem; font-weight:500; color: var(--charcoal);
  text-decoration:none; display:inline-block;
  transition: border-color .2s, transform .2s, box-shadow .2s, color .2s;
}
.pill-list a:hover,
.pill-list a:focus-visible{
  border-color: var(--muted-gold); color: var(--forest-green);
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.pill-list a:focus-visible{ outline: 2px solid var(--muted-gold); outline-offset: 2px; }
.pill-list a::after{ content:" \2192"; color: var(--muted-gold); opacity:0; margin-left:2px; transition: opacity .2s; }
.pill-list a:hover::after,
.pill-list a:focus-visible::after{ opacity:1; }
.areas-note{ text-align:center; margin-top: 40px; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- FAQ / Accordion ---------- */
.accordion-item{ border-bottom: 1px solid var(--border-soft); }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; padding: 22px 4px; text-align:left;
  font-family: var(--font-display); font-size: 1.12rem; font-weight:600; color: var(--forest-green);
}
.accordion-icon{
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--white); color: var(--deep-red); font-size:1.1rem;
  transition: transform .3s var(--ease), background .3s, color .3s;
}
.accordion-item.open .accordion-icon{ transform: rotate(135deg); background: var(--muted-gold); color:#fff; }
.accordion-panel{
  max-height:0; overflow:hidden; transition: max-height .35s var(--ease);
}
.accordion-panel p{ padding: 0 4px 22px; color: var(--ink-soft); max-width: 640px; }

/* ---------- Reviews ---------- */
.reviews-placeholder{
  text-align:center; background: var(--warm-cream); border: 1px dashed var(--border-soft);
  border-radius: var(--radius-md); padding: 50px 40px;
}
.reviews-placeholder p{ color: var(--ink-soft); max-width: 520px; margin: 0 auto 26px; }

/* ---------- Final CTA ---------- */
.final-cta{ position:relative; padding: 120px 0; overflow:hidden; text-align:center; }
.final-cta-media{
  position:absolute; inset:0;
  background-image: url('../images/final-cta-home.jpg');
  background-size:cover; background-position:center;
}
.final-cta-scrim{ position:absolute; inset:0; background: linear-gradient(160deg, rgba(10,26,20,0.9), rgba(120,20,20,0.78)); }
.final-cta-content{ position:relative; z-index:2; max-width: 680px; }
.final-cta h2{ margin-bottom: 18px; }
.final-cta p{ color: rgba(255,255,255,0.88); font-size: 1.08rem; margin-bottom: 36px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--deep-green); color: rgba(255,255,255,0.75); padding: 66px 0 0; }
.footer-grid{
  display:grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px;
  padding-bottom: 46px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand .logo-text{ color: var(--white); }
.footer-brand .logo-badge{ width: 56px; height: 56px; box-shadow: 0 0 0 1px rgba(255,255,255,0.2); }
.footer-brand p{ margin-top: 16px; font-size:0.92rem; max-width: 280px; }
.footer-social{ display:flex; gap: 14px; margin-top: 20px; }
.footer-social a{
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center; transition: background .2s, border-color .2s;
}
.footer-social a:hover{ background: rgba(255,255,255,0.12); border-color: var(--muted-gold); }
.footer-social svg{ width:17px; height:17px; }
.footer-col{ display:flex; flex-direction:column; gap: 12px; }
.footer-col h5{ color: var(--muted-gold); font-family: var(--font-display); font-size:1.02rem; margin-bottom: 6px; }
.footer-col a{ font-size: 0.92rem; transition: color .2s; }
.footer-col a:hover{ color: var(--muted-gold); }
.footer-note{ font-size:0.85rem; opacity:0.65; }
.footer-bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 12px;
  padding: 22px 0; font-size: 0.82rem; opacity: 0.6;
}

/* ---------- Mobile sticky bar ---------- */
.mobile-sticky-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:250;
  background: var(--forest-green);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.2);
}
.mobile-sticky-call{
  flex: 1 1 auto;
  display:flex; align-items:center; justify-content:center; gap:8px;
  color:#fff; font-weight:600; font-size:0.92rem;
  padding: 14px 12px;
  min-width:0;
}
.mobile-sticky-call span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mobile-sticky-call svg{ width:17px; height:17px; flex-shrink:0; }
.mobile-sticky-estimate{
  flex: 1.3 1 auto;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--deep-red), #8c1a1a);
  color:#fff; font-weight:700; font-size:0.92rem;
  padding: 14px 12px;
  white-space: nowrap;
}

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px){
  .grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .estimate-wrap{ grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .footer-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .feature-grid{ gap: 40px; }
  .feature-media img{ height: 360px; }
}

@media (max-width: 860px){
  .main-nav{ display:none; }
  .header-actions{ display:none; }
  .nav-toggle{ display:flex; }
  /* Four across gets cramped here — fall back to a 2x2 block. */
  .benefit-list{ gap: 0 34px; }
  .hero-content{ padding-top: 120px; }
  .page-hero-content{ padding-top: 120px; padding-bottom: 50px; }
  .page-hero{ min-height: 44vh; }
  body.menu-open .main-nav{
    display:flex; flex-direction:column; gap: 4px;
    position:absolute; top:100%; left:0; right:0;
    background: var(--warm-cream); padding: 14px 28px 24px;
    box-shadow: var(--shadow-md);
  }
  body.menu-open .main-nav a{ padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
  body.menu-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  body.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.menu-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  .mobile-sticky-bar{ display:flex; }
  body{ padding-bottom: 54px; }
  .checkbox-grid{ grid-template-columns: minmax(0, 1fr); }
  .feature-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 680px){
  .grid-3{ grid-template-columns: minmax(0, 1fr); }
  .grid-4{ grid-template-columns: minmax(0, 1fr); }
  .service-grid{ grid-template-columns: minmax(0, 1fr); }
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .form-row-2{ grid-template-columns: minmax(0, 1fr); }
  .estimate-form{ padding: 28px 22px; }
  .footer-grid{ grid-template-columns: minmax(0, 1fr); }
  .section{ padding: 72px 0; }
  .hero-ctas{ flex-direction:column; }
  .hero-ctas .btn{ width:100%; }
  /* Long CTA labels must wrap instead of running past the screen edge on phones. */
  .btn{ white-space: normal; max-width: 100%; }
  .btn-lg{ padding: 16px 26px; font-size: 0.98rem; }
  .trust-bar{ padding: 20px 0; }
  /* Let the pin sit inline so it stays with the text once the line wraps. */
  /* Pin flows inline so it stays with the text once the line wraps; the gold
     flanking rules are dropped because there is no width left for them. */
  .trust-location{ display:block; font-size: 0.74rem; line-height:1.7; letter-spacing:0.08em; margin:0; }
  .trust-location svg{ display:inline-block; vertical-align:-4px; margin-right:6px; }
  .trust-location::before, .trust-location::after{ display:none; }
  .benefit-list{ grid-template-columns: minmax(0, 1fr); gap:0; }
  .benefit-list > .benefit-row:nth-child(odd):last-child{
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: start;
  }
  .benefit-list > .benefit-row:nth-child(2){ border-top: 1px solid var(--border-soft); padding-top: 26px; }
  .benefit-row{ padding: 22px 0; gap:15px; }
  .benefit-icon{ width:42px; height:42px; }
  .lightbox{ padding: 20px; }
  .lightbox-nav{ width:40px; height:40px; }
  .lightbox-prev{ left: 8px; }
  .lightbox-next{ right: 8px; }
}

/* ===================================================================
   REFERRAL PROGRAM v2
   Added for the /referrals rebuild. Scoped to new class names so it
   cannot affect any existing page. Offer figures are never written
   here — they come from REFERRAL in build/build.py.
   =================================================================== */

/* ---------- Homepage teaser ---------- */
/* Outline buttons only: this sits below the estimate form and must read as
   secondary to it. A filled primary button here would compete. */
.referral-teaser .section-head { margin-bottom: 1.5rem; }

/* ---------- Customer four-step process ---------- */
.ref-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 1.75rem 2rem;
  margin-top: 2.75rem;
}
.ref-step-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--muted-gold);
  line-height: 1;
  margin-bottom: 0.55rem;
}
.ref-step h3 {
  font-size: 1.02rem;
  color: var(--forest-green);
  margin: 0 0 0.4rem;
  line-height: 1.3;
}
.ref-step p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- Partner pitch ---------- */
.partner-pitch {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--forest-green);
  border-radius: var(--radius-md);
  padding: 2rem 2rem 1.75rem;
  box-shadow: var(--shadow-sm);
}
.partner-pitch-lead {
  font-family: var(--font-display);
  font-size: 1.28rem;
  line-height: 1.35;
  color: var(--forest-green);
  margin: 0 0 1.6rem;
}
.partner-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 1.5rem 2.25rem;
}
.partner-col-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted-gold);
  margin: 0 0 0.7rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-soft);
}
.partner-col-list { list-style: none; margin: 0; padding: 0; }
.partner-col-list li {
  position: relative;
  padding-left: 1.05rem;
  margin-bottom: 0.45rem;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.partner-col-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 5px; height: 5px;
  background: var(--muted-gold);
  transform: rotate(45deg);
}
.partner-commission-note {
  margin: 1.6rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--forest-green);
  font-weight: 500;
}

/* ---------- Who this is for ---------- */
.section-head-sub { margin-top: 3rem; margin-bottom: 1.25rem; }
.section-head-sub h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--forest-green);
  margin: 0;
}
.partner-types {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.partner-types li {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--forest-green);
}

/* ---------- Form containers + fallbacks ---------- */
.ref-form-wrap {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}
.ref-fallback-lead {
  margin: 0 0 1.4rem;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.ref-fallback-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1.5rem 2rem;
}
.ref-fallback-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted-gold);
  margin: 0 0 0.65rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border-soft);
}
.ref-fallback ul { list-style: none; margin: 0; padding: 0; }
.ref-fallback ul li {
  position: relative;
  padding-left: 1.05rem;
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.ref-fallback ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 5px; height: 5px;
  background: var(--muted-gold);
  transform: rotate(45deg);
}
.ref-fallback a { color: var(--forest-green); font-weight: 600; }
.ref-fallback a:hover { color: var(--deep-red); }

/* ---------- Link builder actions ---------- */
.ref-output-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

/* ---------- Program terms ---------- */
.ref-terms {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.ref-terms > summary {
  cursor: pointer;
  padding: 1.1rem 1.5rem;
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--forest-green);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.ref-terms > summary::-webkit-details-marker { display: none; }
.ref-terms > summary::after {
  content: "+";
  font-size: 1.35rem;
  line-height: 1;
  color: var(--muted-gold);
  flex: 0 0 auto;
  transition: transform 0.25s var(--ease);
}
.ref-terms[open] > summary::after { transform: rotate(45deg); }
.ref-terms > summary:hover { color: var(--deep-red); }
.ref-terms > summary:focus-visible {
  outline: 2px solid var(--muted-gold);
  outline-offset: -2px;
}
.ref-terms-list {
  margin: 0;
  padding: 0 1.5rem 1.5rem;
  list-style: none;
  border-top: 1px solid var(--border-soft);
}
.ref-terms-list li {
  position: relative;
  padding-left: 1.15rem;
  margin-top: 0.85rem;
  font-size: 0.91rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.ref-terms-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  background: var(--muted-gold);
  transform: rotate(45deg);
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
  .partner-pitch { padding: 1.5rem 1.25rem 1.35rem; }
  .partner-split { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .partner-pitch-lead { font-size: 1.12rem; }
  .ref-form-wrap { padding: 1.35rem 1.15rem; }
  .ref-steps { gap: 1.4rem; margin-top: 2rem; }
  .ref-output-actions .btn { flex: 1 1 auto; }
  .ref-terms > summary { padding: 1rem 1.15rem; }
  .ref-terms-list { padding: 0 1.15rem 1.25rem; }
}

/* ===================================================================
   CITY LANDING PAGES
   Hero backgrounds for the local SEO pages. Everything else on these
   pages reuses existing components — no new layout system.
   =================================================================== */
.page-hero-city-fort-worth{    background-image: url('../images/hero-slide-2.jpg'); background-position: center 30%; }
.page-hero-city-southlake{     background-image: url('../images/gallery-1.jpg');    background-position: center 32%; }
.page-hero-city-westlake{      background-image: url('../images/home-gallery-a.jpg'); background-position: center 55%; }
.page-hero-city-highland-park{ background-image: url('../images/home-gallery-b.jpg'); background-position: center 60%; }
.page-hero-city-san-antonio{   background-image: url('../images/hero-slide-3.jpg'); background-position: center 30%; }
.page-hero-city-alamo-heights{ background-image: url('../images/gallery-7.jpg');    background-position: center 30%; }
.page-hero-city-boerne{        background-image: url('../images/hero-slide-4.jpg'); background-position: center 32%; }
.page-hero-city-stone-oak{     background-image: url('../images/hero-slide-5.jpg'); background-position: center 30%; }
.page-hero-city-azle{          background-image: url('../images/home-gallery-c.jpg'); background-position: center 45%; }
.page-hero-city-grapevine{     background-image: url('../images/home-gallery-a.jpg'); background-position: center 50%; }
.page-hero-city-colleyville{   background-image: url('../images/gallery-2.jpg');      background-position: center 40%; }
.page-hero-city-north-richland-hills{ background-image: url('../images/home-gallery-b.jpg'); background-position: center 60%; }
.page-hero-city-bedford{       background-image: url('../images/gallery-3.jpg');      background-position: center 30%; }
.page-hero-city-euless{        background-image: url('../images/hero-slide-2.jpg');   background-position: center 30%; }

/* A chip that links to a city page. Same pill as a plain chip — the only
   difference is that it reacts like a link, so the ones that go somewhere
   are distinguishable from the ones that are just labels. */
a.chip{ text-decoration: none; display: inline-block; }
a.chip:hover,
a.chip:focus-visible{ border-color: var(--muted-gold); color: var(--forest-green); }
a.chip:focus-visible{ outline: 2px solid var(--muted-gold); outline-offset: 2px; }
a.chip::after{
  content: " \2192";
  color: var(--muted-gold);
  opacity: 0; margin-left: 2px;
  transition: opacity .2s;
}
a.chip:hover::after,
a.chip:focus-visible::after{ opacity: 1; }

/* Scope-of-service list on city landing pages. Two columns where there is
   room, one where there is not — the items are short, so a single tall
   column wastes the width on desktop. */
.included-list{
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px,100%), 1fr));
  gap: 10px 32px;
}
.included-list li{
  position: relative; padding-left: 22px;
  color: var(--ink-soft); line-height: 1.55;
}
.included-list li::before{
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; background: var(--muted-gold); transform: rotate(45deg);
}

/* ===================================================================
   PARTNER OFFER PAGES  (/delarossa, /empire)
   Not indexed: these exist for people who scanned a partner's QR, so
   the code stays with the partner who earned it.
   =================================================================== */
.page-hero-partner{   background-image: url('../images/home-gallery-b.jpg'); background-position: center 60%; }
.page-hero-partner-b{ background-image: url('../images/home-gallery-a.jpg'); background-position: center 50%; }
.page-hero-partner-c{ background-image: url('../images/hero-slide-4.jpg'); background-position: center 60%; }
/* Big Daddy's clients are buying larger homes, so this page shows the biggest work. */
.final-cta-estate .final-cta-media{ background-image: url('../images/home-gallery-b.jpg'); }

.partner-offer{
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--deep-red);
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem 1.75rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.partner-offer-label{
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--muted-gold); margin: 0 0 .5rem;
}
.partner-offer-code{
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  font-weight: 700; letter-spacing: .06em;
  color: var(--forest-green); margin: 0 0 .6rem; line-height: 1;
  word-break: break-word;
}
.partner-offer-terms{
  font-size: 1.05rem; font-weight: 500; color: var(--deep-red); margin: 0 0 .75rem;
}
.partner-offer .referral-fine{ margin: 0; }