/* ============================================= */
/* === SHIMMER AND SHINE - COLOR PALETTE V2 === */
/* ============================================= */

:root {
  /* -- Primary Colors -- */
  --clr-sage: #d2e2d8;
  --clr-forest: #385b3f;

  /* -- Accent Colors -- */
  --clr-gold: #e5b45b;
  --clr-terracotta: #c75454;
  --clr-slate: #69869a;

  /* -- Neutral Colors -- */
  --clr-white: #f8f8f6;
  --clr-gray: #eef0f0;
  --clr-text: #333333;

  /* -- Soft Box Colors -- */
  --soft-bg: #e9f0ec;
  --soft-brd: #d7e3dc;

  /* -- Shadows and Radii -- */
  --shadow-1: 0 2px 6px rgba(0,0,0,.06);
  --shadow-2: 0 6px 24px rgba(0,0,0,.10);
  --shadow-glow: 0 4px 20px rgba(229, 180, 91, 0.25); /* Gold glow for highlighted cards */
  
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* -- Sizing and rhythm -- */
  --container: 1140px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;

  /* -- Font & Sizing -- */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* ============================================= */
/* ===            GLOBAL RESETS              === */
/* ============================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--clr-white);
  color: var(--clr-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: 64px; /* Room for mobile sticky bar */
}

img { max-width: 100%; display: block; height: auto; }

button, input, select, textarea { font-family: inherit; font-size: 100%; }

:focus-visible {
  outline: 3px solid var(--clr-slate);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================= */
/* ===        TYPOGRAPHY & CONTENT         === */
/* ============================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--clr-forest);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--space-4);
}

h1 { font-size: clamp(1.8rem, 2.4rem, 3rem); }
h2 { font-size: clamp(1.4rem, 1.8rem, 2.2rem); }
h3 { font-size: clamp(1.1rem, 1.25rem, 1.4rem); }

p { margin: 0 0 var(--space-5); font-size: 1rem; }

.muted { color: #6b7280; }
.small { font-size: .9rem; color: #6b7280; }
.lead { font-size: clamp(1.1rem, 1.25rem, 1.5rem); font-weight: 600; color: var(--clr-forest); }

/* Links */
a { color: var(--clr-slate); text-decoration: none; transition: color .2s ease-in-out; }
a:hover { color: var(--clr-terracotta); text-decoration: underline; }

/* Utilities */
.container { width: min(100%, var(--container)); margin-inline: auto; padding-inline: var(--space-5); }
.flex { display: flex; }
.between { justify-content: space-between; }
.center-y { align-items: center; }
.center { text-align: center; }

/* Responsive Grids */
.grid { display: grid; gap: var(--space-5); }
.grid.three { grid-template-columns: 1fr; } /* Mobile default */

@media (min-width: 720px) { 
  .grid.three { grid-template-columns: repeat(3, 1fr); } 
}

/* ============================================= */
/* ===          BUTTONS & CTAs             === */
/* ============================================= */

.btn { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: .5rem; 
  cursor: pointer; 
  white-space: nowrap; 
  border-radius: var(--radius-sm); 
  border: 1px solid transparent; 
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; 
  font-weight: 700; 
  text-decoration: none;
}

.btn-primary { padding: .75rem 1.75rem; font-size: 1rem; background-color: var(--clr-gold); color: var(--clr-forest); box-shadow: var(--shadow-1); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); text-decoration: none; }

.btn-outline { padding: .6rem 1.2rem; font-size: .95rem; background: transparent; color: var(--clr-forest); border-color: var(--clr-forest); }
.btn-outline:hover { background: rgba(56,91,63,.08); text-decoration: none; }

.btn-ghost { padding: .6rem 1.2rem; font-size: .95rem; background: transparent; color: var(--clr-forest); }
.btn-ghost:hover { background: rgba(56,91,63,.08); text-decoration: none; }

.btn-small { padding: .5rem 1rem; font-size: .9rem; }
.btn-large { padding: .9rem 2rem; font-size: 1.05rem; }

/* Sticky mobile CTA bar */
.mobile-cta { 
  position: fixed; 
  left: 0; right: 0; bottom: 0; 
  display: grid; 
  grid-template-columns: 1.2fr .9fr .9fr; 
  gap: 6px; 
  padding: 8px env(safe-area-inset-right) calc(8px + env(safe-area-inset-bottom)) env(safe-area-inset-left); 
  background: rgba(248,248,246,.95); 
  border-top: 1px solid var(--clr-gray); 
  backdrop-filter: blur(10px); 
  z-index: 999; 
}
.mobile-cta .btn { width: 100%; }
@media (min-width: 960px) { .mobile-cta { display: none; } body { padding-bottom: 0; } }

/* ============================================= */
/* ===             HEADER & NAV              === */
/* ============================================= */

.site-header {
  position: sticky; 
  top: 0; 
  z-index: 1000;
  background: var(--clr-white);
  border-bottom: 1px solid var(--clr-gray);
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.header-row { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 12px 0; 
  min-height: 70px; 
}

/* Logo Setup */
.logo { 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  font-weight: 800; 
  color: var(--clr-forest); 
  text-decoration: none; 
  white-space: nowrap; 
}

/* Center Navigation (Desktop) */
.header-nav ul {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-nav a {
  color: var(--clr-forest);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}
.header-nav a:hover {
  color: var(--clr-gold);
}

/* Right Actions (Phone & Button) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--clr-forest);
  text-decoration: none;
}
.header-phone:hover {
  color: var(--clr-gold);
}
.btn-quote {
  padding: 0.6rem 1.5rem;
  border-radius: 4px; /* Slightly sharper corners like the image */
}

/* Hide mobile elements on desktop */
.mobile-only { display: none; }
.mobile-nav-dropdown { display: none; }

/* ============================================= */
/* ===           MOBILE HEADER VIEW          === */
/* ============================================= */
@media (max-width: 1024px) {
  .desktop-only { display: none; }
  .mobile-only { display: inline-flex; }
  
  /* Shrink gap to fit Logo -> Number -> Quote -> Menu */
  .header-actions { gap: 8px; }
  
  /* Shrink Logo text, or hide it to save space */
  .logo .desktop-text { display: none; } 
  
  /* Shrink phone number and quote button to fit screen */
  .phone-text { font-size: 0.85rem; font-weight: 700; }
  .btn-quote { padding: 0.4rem 0.6rem; font-size: 0.8rem; }
  
  /* Hamburger button */
  .nav-toggle {
    width: 36px; height: 36px; 
    padding: 0; 
    border: none;
    background: transparent; 
    color: var(--clr-forest); 
    font-size: 24px; 
    cursor: pointer;
  }

  /* Mobile Dropdown Styling */
  .mobile-nav-dropdown {
    display: none; /* Toggled via JS */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--clr-white);
    border-top: 1px solid var(--clr-gray);
    box-shadow: var(--shadow-2);
  }
  .mobile-nav-dropdown.open { display: block; }
  .mobile-nav-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  .mobile-nav-dropdown a {
    display: block;
    padding: 16px 20px;
    font-weight: 700;
    color: var(--clr-forest);
    text-decoration: none;
    border-bottom: 1px solid var(--clr-gray);
  }
}
.mobile-nav-dropdown {
  display: block; /* Always block, but hidden via scale/opacity */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--clr-white);
  border-top: 1px solid var(--clr-gray);
  box-shadow: var(--shadow-2);
  
  /* The Animation Magic */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px); /* Starts slightly above */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.mobile-nav-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* Slides down into place */
  pointer-events: auto;
}

/* The old site's mobile dropdown read as ALL CAPS, but only because the markup
   was literally typed that way: there was no text-transform on it, unlike
   .header-nav a. The labels now come from oq_biz('nav.primary') in Title Case,
   shared with the desktop bar, so without this the phone menu quietly changed
   case while the desktop bar did not. Styling the case here rather than
   shouting in the config keeps one nav list feeding both. */
.mobile-nav-dropdown a {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================= */
/* ===             CENTERED HERO             === */
/* ============================================= */

.hero {
  position: relative;
  min-height: 85vh; /* A bit taller to give the image breathing room */
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../images/hero-bg.jpg'); /* Your generated image goes here */
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 80px 0;
  text-align: center; /* Centers everything inside */
}

/* The darkening layer over the photo */
.hero-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(15, 33, 22, 0.65); /* A dark tint matching your forest green */
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.hero-text-wrapper {
  max-width: 800px; /* Wider to accommodate the centered headline */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Badge */
.badge-outline {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--clr-gold);
  border-radius: 50px;
  color: var(--clr-gold);
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  margin-bottom: 24px;
}

/* Headline */
.hero h1 {
  color: #fff;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.1;
  margin-bottom: 24px;
}

.text-highlight { color: var(--clr-gold); }

/* Subtext */
.hero p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.15rem;
  max-width: 650px;
  margin-bottom: 32px;
}

/* Buttons */
.hero-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap; /* Allows buttons to stack safely on tiny phones */
}

.btn-outline-white {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  padding: 0.9rem 2rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-outline-white:hover {
  background: #fff;
  color: var(--clr-forest);
}

/* Trusted Cities Text */
.hero-trust {
  margin-top: 48px;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1px;
}
/* Mobile Adjustments */
@media (max-width: 768px) {
  .hero-content { justify-content: center; }
  .hero-text-wrapper { text-align: center; }
  .hero-btns { justify-content: center; flex-direction: column; }
  .hero p { margin-left: auto; margin-right: auto; }
  .hero-overlay {
    background: rgba(15, 33, 22, 0.7); /* Solid darker overlay for mobile readability */
  }
}

/* ============================================= */
/* ===         CARDS & HIGHLIGHTS            === */
/* ============================================= */

/* 1. The Canvas Contrast: A subtle tinted background */
.services-snapshot { 
  padding: var(--space-9) 0; 
  background: linear-gradient(to bottom, #ffffff, #f4f7f5); /* Soft fade into light sage */
}

.section-head { margin-bottom: var(--space-6); }

/* Standard Card Styling */
.card { 
  border: 1px solid var(--clr-gray); 
  border-radius: var(--radius-md); 
  overflow: hidden; 
  background: #ffffff; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.04); /* Softer, wider shadow */
  position: relative; 
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.card-media {
  position: relative;
  width: 100%;
}
.card-media img { 
  aspect-ratio: 16 / 10; 
  object-fit: cover; 
  width: 100%; 
  display: block;
}

.card-body { 
  padding: 24px; 
  flex-grow: 1; 
}

/* 2. The Eyebrow Tags */
.card-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--clr-forest);
  background: var(--clr-sage);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.tag-gold { background: rgba(229, 180, 91, 0.2); color: #9c7328; } /* Tinted gold */
.tag-slate { background: rgba(105, 134, 154, 0.15); color: var(--clr-slate); } /* Tinted slate */

/* 3. The Accent Line under the Title */
.card h3 { 
  color: var(--clr-forest);
  font-size: 1.35rem;
  margin-bottom: 16px;
  position: relative;
  padding-bottom: 12px; /* Space for the line */
}
.card h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 35px;
  height: 3px;
  background: var(--clr-gold);
  border-radius: 2px;
}

/* Text color adjustment for better depth */
.card p {
  color: #526358; /* A richer, slightly green-tinted grey */
  font-size: 1rem;
  line-height: 1.6;
}

/* --- THE COLOR CHANGING HIGHLIGHT CARD --- */
.highlight-card {
  border: 2px solid var(--clr-gold);
  box-shadow: 0 4px 20px rgba(229, 180, 91, 0.15); 
  transform: translateY(-4px); 
}
.highlight-card:hover {
  box-shadow: 0 8px 25px rgba(229, 180, 91, 0.3);
  transform: translateY(-8px);
}

.badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: var(--clr-gold);
  color: var(--clr-forest);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow-1);
  z-index: 2;
}
/* ============================================= */
/* ===         CINEMATIC AUTO-SLIDER         === */
/* ============================================= */

.gallery {
  padding: var(--space-9) 0;
  background: var(--clr-white);
}

.cinematic-slider {
  position: relative;
  width: 100%;
  max-width: 900px; /* Keeps the images looking crisp, not stretched */
  margin: 0 auto;
  aspect-ratio: 16 / 9; /* Perfect cinematic rectangle */
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  border: 1px solid var(--clr-gray);
  background: #000;
}

/* Slide Setup */
.slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  transition: opacity 0.8s ease-in-out; /* Smooth fade effect */
  z-index: 1;
}

.slide.active {
  opacity: 1;
  z-index: 2; /* Brings the active slide to the front */
}

.slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Clean, dark caption bar at the bottom */
.slide figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(15, 33, 22, 0.85); /* Forest green overlay */
  color: #fff;
  padding: 14px 20px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

/* Clickable Arrows */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 50%;
  font-size: 28px;
  color: var(--clr-forest);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-1);
}

.slider-btn:hover {
  background: var(--clr-gold);
  color: #fff;
}

.slider-btn.prev { left: 16px; }
.slider-btn.next { right: 16px; }
/* ============================================= */
/* ===             GOOGLE REVIEWS            === */
/* ============================================= */


.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.review-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  position: relative;
}

/* Colored circle with initial */
.reviewer-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
}

.reviewer-info {
  display: flex;
  flex-direction: column;
}

.reviewer-info strong {
  color: var(--clr-text);
  font-size: 1.05rem;
  line-height: 1.2;
}

.stars {
  color: #fbbc04; /* Official Google Review Gold */
  font-size: 1.1rem;
  letter-spacing: 2px;
  margin-top: 2px;
}

/* Little 'G' badge in the top corner */
.google-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #4285F4; /* Google Blue */
  font-family: 'Georgia', serif; /* Gives the G a recognizable shape */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.review-text {
  color: #4b5563;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.6;
  flex-grow: 1; /* Pushes the location text to the bottom */
}

.review-location {
  display: block;
  margin-top: 16px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--clr-slate);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* ============================================= */
/* ===         3D REVIEWS CAROUSEL           === */
/* ============================================= */

.reviews { 
  padding: var(--space-9) 0; 
  background: #f8faf9;
  overflow: hidden; /* Prevents side-cards from causing horizontal scroll */
}

/* Perspective wrapper for 3D effect */
.reviews-perspective {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 40px auto;
  perspective: 1200px; /* Depth of the 3D space */
  height: 400px; /* Fixed height to keep layout stable during rotation */
}

.reviews-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* The Cards */
.review-card {
  position: absolute;
  width: min(90vw, 450px);
  background: #ffffff;
  border: 1px solid var(--clr-gray);
  border-radius: var(--radius-md);
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth rotation */
  pointer-events: none; /* Only the middle one should be clickable */
  opacity: 0;
  visibility: hidden;
}

/* ACTIVE (Middle) */
.review-card.active {
  transform: translate3d(0, 0, 100px);
  z-index: 10;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  filter: blur(0);
  box-shadow: 0 20px 50px rgba(15, 33, 22, 0.1);
}

/* PREV & NEXT (Sides) */
.review-card.prev {
  transform: translate3d(-50%, 0, -150px) rotateY(25deg);
  z-index: 5;
  opacity: 0.6;
  visibility: visible;
  filter: blur(2px);
}

.review-card.next {
  transform: translate3d(50%, 0, -150px) rotateY(-25deg);
  z-index: 5;
  opacity: 0.6;
  visibility: visible;
  filter: blur(2px);
}

/* Hide others completely */
.review-card.hidden {
  transform: translate3d(0, 0, -400px);
  opacity: 0;
}

/* Stars and Badge styling (Keep your current ones) */
.stars { color: #fbbc04; font-size: 1.1rem; letter-spacing: 2px; }
.google-badge { position: absolute; top: 15px; right: 15px; font-weight: 800; color: #4285F4; }
.reviewer-avatar { border-radius: 50%; object-fit: cover; margin-right: 12px; }

/* Arrows (Centered relative to the perspective box) */
.reviews-perspective .slider-btn {
  top: 50%;
  z-index: 20;
}

/* ============================================= */
/* ===           QUOTE SECTION UI            === */
/* ============================================= */

.quote-section {
  padding: 100px 0;
  background: var(--clr-forest); /* Uses your brand green */
  color: #fff;
}

.quote-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}

.quote-content h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  color: #fff;
  margin: 20px 0;
}

.trust-checkmarks {
  list-style: none;
  padding: 0;
  margin-top: 30px;
}

.trust-checkmarks li {
  margin-bottom: 16px;
  font-size: 1.1rem;
  padding-left: 30px;
  position: relative;
}

.trust-checkmarks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--clr-gold);
  font-weight: 900;
}

/* The Card */
.quote-card {
  background: #fff;
  padding: 40px;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  color: var(--clr-text);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--clr-forest);
}

.form-group input, 
.form-group select, 
.form-group textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  background: #fdfdfd;
}

.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
  border-color: var(--clr-gold);
  outline: none;
  background: #fff;
}

.btn-full {
  width: 100%;
  margin-top: 10px;
  padding: 18px;
  font-size: 1.1rem;
}

/* Mobile Tweak */
@media (max-width: 900px) {
  .quote-wrapper { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .trust-checkmarks li { text-align: left; }
  .form-row { grid-template-columns: 1fr; }
  .quote-card { padding: 25px; }
}
/* ============================================= */
/* ===              SITE FOOTER              === */
/* ============================================= */

.site-footer {
  background: #0d1a12; /* Darker version of your forest green */
  color: rgba(255, 255, 255, 0.8);
  padding: 80px 0 30px;
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 60px;
}

/* Brand Column */
.footer-logo {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  margin-bottom: 20px;
}

.footer-logo span { color: var(--clr-gold); }

.brand-col p { line-height: 1.6; max-width: 300px; }

/* Column Headers */
.footer-col h4 {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 25px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Links List */
.footer-links, .footer-contact {
  list-style: none;
  padding: 0;
}

.footer-links li { margin-bottom: 12px; }

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--clr-gold); }

.footer-contact li { margin-bottom: 15px; }
.footer-contact strong { color: #fff; }

/* Bottom Bar */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  margin-left: 20px;
}

.footer-legal a:hover { color: #fff; }

/* Social Icons Placeholder */
.footer-socials { display: flex; gap: 15px; margin-top: 25px; }
.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.7rem;
}
.footer-socials {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: #fff;
  transition: all 0.3s ease;
}

.footer-socials a:hover {
  background: var(--clr-gold);
  color: var(--clr-forest);
  transform: translateY(-3px);
  text-decoration: none;
}
.footer-contact li a {
  display: inline-flex; /* Forces icon and text onto one line */
  align-items: center;  /* Centers them vertically */
  gap: 12px;           /* Adds space between icon and email */
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  white-space: nowrap; /* Prevents the text from dropping down */
  transition: color 0.2s ease;
}

.footer-contact li a:hover {
  color: var(--clr-gold);
}

/* Ensure the SVG itself doesn't try to take up a whole row */
.footer-contact svg {
  flex-shrink: 0;
  display: inline-block;
  margin: 0; /* Clears any stray margins */
}
/* Mobile Layout */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .brand-col p { margin: 0 auto 20px; }
  .footer-socials { justify-content: center; }
  .footer-bottom { flex-direction: column; gap: 15px; text-align: center; }
  .footer-legal a { margin: 0 10px; }
}
/* ============================================= */
/* ===           PORTFOLIO STYLES            === */
/* ============================================= */

.portfolio-hero {
  padding: 80px 0 40px;
  background: var(--clr-white);
  text-align: center;
}


.filter-btns {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 10px 24px;
  border: 1px solid var(--clr-gray);
  background: #fff;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 700;
  color: var(--clr-forest);
  transition: all 0.2s ease;
}

.filter-btn.active, .filter-btn:hover {
  background: var(--clr-gold);
  border-color: var(--clr-gold);
}


.portfolio-item {
  transition: all 0.4s ease;
}

.item-inner {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.item-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 26, 18, 0.9), transparent);
  opacity: 0;
  display: flex;
  align-items: flex-end;
  padding: 30px;
  transition: opacity 0.3s ease;
}

.item-inner:hover img { transform: scale(1.1); }
.item-inner:hover .item-overlay { opacity: 1; }

.item-text h3 { color: #fff; margin-bottom: 5px; }
.item-text span { color: var(--clr-gold); font-weight: 700; font-size: 0.9rem; }

.portfolio-cta { padding: 100px 0; background: var(--clr-gray); }

/* Hidden state for filtering */
.portfolio-item.hide {
  display: none;
}



.portfolio-hero h1 {
  color: #fff;
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-top: 15px;
}

.portfolio-hero .lead {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.2rem;
}
/* ============================================= */
/* ===           PORTFOLIO STYLES            === */
/* ============================================= */

/* 1. Combined & Cleaned Hero */
.portfolio-hero {
  position: relative;
  min-height: 50vh; /* Reduced from 60vh to keep content tighter */
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../images/portfolio-hero.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #fff;
  text-align: center;
  overflow: hidden;
  padding: 60px 0; /* Consistent padding top and bottom */
}

.portfolio-hero .hero-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(13, 26, 18, 0.7);
  z-index: 1;
}

.portfolio-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

/* 2. Fixed Filter Bar Spacing */
.portfolio-filters {
  padding: 60px 0 30px; /* Added 60px top padding to create a clean gap from the hero */
  background: var(--clr-white);
}

/* 3. Portfolio Grid Section (Added this class) */
.portfolio-grid-section {
  padding: 30px 0 100px; /* Balances the gap between filters and images */
  background: var(--clr-white);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
}
/* ============================================= */
/* ===      PREMIUM PORTFOLIO CARD UI        === */
/* ============================================= */

.item-inner {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #000; /* Keeps it dark during load */
  
  /* The "Frame" Effect */
  border: 1px solid rgba(229, 180, 91, 0.2); /* Faint gold border */
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 1. The Always-Visible Location Badge */
.project-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 5;
  background: rgba(13, 26, 18, 0.6); /* Dark forest glass effect */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 2. The Initial Image State (Slightly de-saturated) */
.item-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9) contrast(1.05); /* Makes the lights pop more initially */
  transition: all 0.7s ease;
}

/* 3. The Hover Upgrade */
.item-inner:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(15, 33, 22, 0.15);
  border-color: var(--clr-gold); /* Gold border glows on hover */
}

.item-inner:hover img {
  transform: scale(1.08);
  filter: brightness(0.7) blur(2px); /* Dims and blurs to make text readable */
}

.item-inner:hover .project-badge {
  opacity: 0; /* Hides the small badge when the big text appears */
}

/* 4. The Text Overlay */
.item-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center; /* Centered instead of bottom-aligned */
  justify-content: center;
  text-align: center;
  padding: 30px;
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 4;
}

.item-inner:hover .item-overlay {
  opacity: 1;
}

.item-text h3 {
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 8px;
  transform: translateY(10px);
  transition: transform 0.4s ease;
}

.item-text span {
  color: var(--clr-gold);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
  display: block;
  transform: translateY(15px);
  transition: transform 0.5s ease;
}

.item-inner:hover .item-text h3,
.item-inner:hover .item-text span {
  transform: translateY(0); /* Text "rises" into view */
}
/* ============================================= */
/* ===           PREMIUM CTA SECTION         === */
/* ============================================= */

.portfolio-cta {
  padding: 100px 0;
  background: linear-gradient(to right, #ffffff 50%, var(--clr-gray) 50%);
  overflow: hidden;
}

.cta-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.cta-content h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin: 20px 0;
}

.cta-features {
  margin: 30px 0 40px;
  display: grid;
  gap: 20px;
}

.cta-feature {
  display: flex;
  gap: 15px;
}

.feature-icon {
  width: 24px;
  height: 24px;
  background: var(--clr-gold);
  color: var(--clr-forest);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.cta-feature strong {
  display: block;
  font-size: 1.1rem;
  color: var(--clr-forest);
}

.cta-feature .small {
  margin: 0;
  color: #666;
}

/* Image Side */
.cta-image-wrapper {
  position: relative;
}

.cta-image-wrapper img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  transform: rotate(2deg); /* Adds a "scrapbook" high-end feel */
  border: 8px solid #fff;
}

.cta-stat {
  position: absolute;
  bottom: -20px;
  left: -20px;
  background: var(--clr-forest);
  color: #fff;
  padding: 20px;
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  border: 2px solid var(--clr-gold);
}

.cta-stat strong {
  display: block;
  font-size: 1.8rem;
  color: var(--clr-gold);
}

.cta-stat span {
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1px;
}

/* Mobile Tweak */
@media (max-width: 960px) {
  .portfolio-cta { background: #fff; padding: 60px 0; }
  .cta-split { grid-template-columns: 1fr; gap: 60px; text-align: center; }
  .cta-feature { text-align: left; }
  .cta-image-wrapper img { transform: rotate(0); }
  .cta-stat { left: 50%; transform: translateX(-50%); }
}
/* ============================================= */
/* ===           PROCESS PAGE UI             === */
/* ============================================= */
/* ============================================= */
/* ===         FIXED PROCESS HERO            === */
/* ============================================= */

.process-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../images/process-hero.jpg');
  background-size: cover;
  background-position: center;
  color: #ffffff; /* Forces default text to white */
  text-align: center;
  padding: 80px 0;
}

/* Darker, more consistent overlay */
.process-hero .hero-overlay {
  position: absolute;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  background: rgba(13, 26, 18, 0.75); /* Deep forest tint */
  z-index: 1;
}

.process-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

/* Force the Headline to White */
.process-hero h1 {
  color: #ffffff !important; 
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-top: 15px;
  line-height: 1.1;
}

/* Force the Subtext to be visible */
.process-hero .lead {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1.25rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Timeline Steps */



.step-item.reverse { flex-direction: row-reverse; }

.step-number {
  font-size: 6rem;
  font-weight: 900;
  color: var(--clr-sage);
  opacity: 0.5;
  line-height: 1;
}

.step-text { flex: 1; }
.step-text h3 { font-size: 2rem; margin-bottom: 15px; }

/* ============================================= */
/* ===       ENHANCED PROCESS TIMELINE       === */
/* ============================================= */

.process-steps {
  padding: 100px 0;
  background-color: var(--clr-white);
  position: relative;
  overflow: hidden;
}

/* 1. The Connecting Path (The "Guide Line") */
.process-steps::before {
  content: '';
  position: absolute;
  top: 150px;
  bottom: 150px;
  left: 50%;
  width: 2px;
  border-left: 2px dashed var(--clr-sage); /* Soft green dashed line */
  transform: translateX(-50%);
  z-index: 0;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-bottom: 120px;
  position: relative;
  z-index: 1; /* Sits above the dashed line */
}

/* 2. Adding a Subtle "Glow" to the Icons */
.step-icon-box {
  width: 100px;
  height: 100px;
  background: var(--clr-forest);
  color: var(--clr-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 10px rgba(210, 226, 216, 0.4); /* Sage-colored outer ring */
  transition: transform 0.3s ease;
}

.step-item:hover .step-icon-box {
  transform: scale(1.1);
  box-shadow: 0 0 0 15px rgba(229, 180, 91, 0.2); /* Glow turns gold on hover */
}

/* 3. Floating Background Decoration (Optional) */
.process-steps::after {
  content: '❄'; /* Subtle snowflake watermark */
  position: absolute;
  font-size: 20rem;
  top: 10%;
  right: -5%;
  color: var(--clr-sage);
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

/* ============================================= */
/* ===         PREMIUM FAQ SECTION           === */
/* ============================================= */

.process-faq {
  padding: 60px 0 100px; /* Reduced top padding from 100px to 60px */
  background: var(--clr-white);
  position: relative;
}

/* This terminates the dashed line from the section above cleanly */
.process-faq::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 40px;
  border-left: 2px dashed var(--clr-sage);
  transform: translateX(-50%);
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 50px;
}

/* --- Modernized FAQ Section --- */
.process-faq {
  padding: 80px 0 100px;
  background: #f4f7f5; /* Light sage tint to break up the white */
  position: relative;
  border-top: 1px solid var(--clr-gray);
}

.faq-card {
  background: #ffffff;
  padding: 40px;
  border-radius: var(--radius-lg); /* More rounded corners */
  border: 1px solid rgba(56, 91, 63, 0.05); /* Faint forest green border */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
}

/* The "Premium" Glow on Hover */
.faq-card:hover {
  transform: translateY(-8px);
  border-color: var(--clr-gold);
  box-shadow: 0 20px 40px rgba(15, 33, 22, 0.1);
}

/* Adding a decorative accent to the corner.

   content was two literal question-mark BYTES, not a character — confirmed
   with od -c, on the old live site as well as here, so something lost a
   character in an encoding conversion long before this rebuild. The comment
   below has always said "Q watermark", so a Q is what it gets. At 5% opacity
   the difference is close to invisible either way; it is fixed because a
   declaration that contradicts its own comment is a trap for whoever reads it
   next. */
.faq-card::after {
  content: 'Q';
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 5rem;
  font-weight: 900;
  color: var(--clr-sage);
  opacity: 0.05; /* Barely visible "Q" watermark */
  pointer-events: none;
}

.faq-card h4 {
  color: var(--clr-forest);
  font-size: 1.2rem;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Custom Gold Bullet */
.faq-card h4::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--clr-gold);
  border-radius: 50%;
  flex-shrink: 0;
}

.faq-card p {
  color: #526358;
  font-size: 1rem;
  line-height: 1.7;
}

/* Mobile Tweak */
@media (max-width: 800px) {
  .process-faq { padding: 40px 0 80px; }
  .faq-grid { grid-template-columns: 1fr; }
}
/* Mobile Adjustments */
@media (max-width: 800px) {
  .step-item, .step-item.reverse { flex-direction: column; text-align: center; gap: 30px; }
  .step-number { font-size: 4rem; }
  .faq-grid { grid-template-columns: 1fr; }
}
/* --- Tighten the Timeline Spacing --- */
.process-steps {
  padding: 80px 0 40px; /* Reduced top/bottom padding */
  background-color: var(--clr-white);
  position: relative;
  overflow: hidden;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-bottom: 80px; /* Reduced from 120px */
  position: relative;
  z-index: 1;
}

/* Kills the extra space after Step 04 */
.step-item:last-child {
  margin-bottom: 0;
}

/* Adjust the dashed line to stop earlier */
.process-steps::before {
  content: '';
  position: absolute;
  top: 150px;
  bottom: 0; /* Changed from 150px to 0 to meet the next section */
  left: 50%;
  width: 2px;
  border-left: 2px dashed var(--clr-sage);
  transform: translateX(-50%);
  z-index: 0;
}
/* ============================================= */
/* ===           ABOUT PAGE STYLES           === */
/* ============================================= */

.about-hero {
  padding: 100px 0 60px;
  background: var(--clr-forest);
  color: #fff;
  text-align: center;
}

.about-hero h1 { color: #fff; font-size: 3rem; }

.about-bio { padding: 100px 0; background: #fff; }

.bio-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}

.bio-image { position: relative; }

.bio-image img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

.bio-experience {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--clr-gold);
  color: var(--clr-forest);
  padding: 20px 30px;
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: var(--shadow-2);
}

.bio-experience strong { display: block; font-size: 1.2rem; text-transform: uppercase; }
.bio-experience span { font-size: 0.8rem; font-weight: 700; opacity: 0.8; }

.bio-text h2 { font-size: 2.5rem; margin: 20px 0; }

.values-list {
  margin-top: 40px;
  display: grid;
  gap: 25px;
}

.value-item strong {
  display: block;
  font-size: 1.1rem;
  color: var(--clr-forest);
  margin-bottom: 5px;
}

/* Stats Section */
.about-stats {
  padding: 80px 0;
  background: var(--clr-gray);
  border-top: 1px solid #ddd;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  text-align: center;
}

.stat-num {
  display: block;
  font-size: 3rem;
  font-weight: 900;
  color: var(--clr-forest);
  line-height: 1;
}

.stat-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--clr-gold);
}

/* Mobile Tweak */
@media (max-width: 900px) {
  .bio-grid { grid-template-columns: 1fr; gap: 60px; text-align: center; }
  .stats-grid { grid-template-columns: 1fr; gap: 40px; }
  .bio-experience { right: 50%; transform: translateX(50%); }
}
/* ============================================= */
/* ===           THANK YOU PAGE UI           === */
/* ============================================= */

.thank-you-wrapper {
  padding: 120px 0;
  min-height: 70vh;
  display: flex;
  align-items: center;
  background: var(--clr-white);
}

.success-card {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  padding: 60px 40px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  border-top: 5px solid var(--clr-gold);
}

.success-icon {
  color: var(--clr-gold);
  margin-bottom: 30px;
}

.next-steps-box {
  background: var(--clr-gray);
  padding: 30px;
  border-radius: var(--radius-md);
  text-align: left;
  margin: 40px 0;
}

.next-steps-box h3 {
  font-size: 1.1rem;
  margin-bottom: 20px;
  color: var(--clr-forest);
}

.next-steps-box ul {
  list-style: none;
  padding: 0;
}

.next-steps-box li {
  margin-bottom: 12px;
  font-size: 0.95rem;
  position: relative;
  padding-left: 25px;
}

.next-steps-box li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--clr-gold);
  font-weight: 900;
}

.thank-you-btns {
  display: flex;
  gap: 15px;
  justify-content: center;
}

@media (max-width: 600px) {
  .thank-you-btns { flex-direction: column; }
}
/* ============================================= */
/* ===           CONTACT PAGE UI             === */
/* ============================================= */

.contact-hero {
  position: relative;
  padding: 120px 0 80px;
  background-image: url('../images/contact-hero.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
  color: #fff;
}

.contact-hero .hero-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(13, 26, 18, 0.8);
  z-index: 1;
}

.contact-hero-content { position: relative; z-index: 2; }
.contact-hero h1 { color: #fff; font-size: 3.5rem; }

/* Main Grid Layout */
.contact-section {
  padding: 100px 0;
  background: linear-gradient(to bottom, var(--clr-gray) 0%, #ffffff 100%);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px;
  align-items: flex-start;
}

/* Sidebar Card */
.contact-card {
  background: var(--clr-forest);
  color: #fff;
  padding: 50px 40px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 35px;
}

.icon-circle {
  width: 50px;
  height: 50px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-gold);
}

.contact-item h4 { color: rgba(255,255,255,0.6); margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }
.contact-link { color: #fff; font-size: 1.25rem; font-weight: 800; text-decoration: none; }
.contact-link:hover { color: var(--clr-gold); }

.contact-divider { border: 0; border-top: 1px solid rgba(255,255,255,0.1); margin: 40px 0; }

.service-area h4 { color: var(--clr-gold); margin-bottom: 10px; }
.service-area p { font-size: 0.95rem; opacity: 0.8; line-height: 1.6; }

.area-badge {
  display: inline-block;
  margin-top: 20px;
  padding: 8px 16px;
  background: var(--clr-gold);
  color: var(--clr-forest);
  font-weight: 800;
  font-size: 0.75rem;
  border-radius: 50px;
  text-transform: uppercase;
}

/* Form Styling */
.contact-form-wrapper {
  background: #fff;
  padding: 50px;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0,0,0,0.05);
  border: 1px solid var(--clr-gray);
}

.form-header { margin-bottom: 40px; }
.form-header h3 { font-size: 2rem; margin-bottom: 10px; }
.form-header a { color: var(--clr-gold); font-weight: 700; text-decoration: underline; }

.main-contact-form .form-group { margin-bottom: 25px; }
.main-contact-form label { display: block; font-weight: 800; color: var(--clr-forest); font-size: 0.85rem; text-transform: uppercase; margin-bottom: 10px; }
.main-contact-form input, 
.main-contact-form textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid var(--clr-gray);
  border-radius: var(--radius-sm);
  background: #fdfdfd;
  font-size: 1rem;
}

.main-contact-form input:focus, 
.main-contact-form textarea:focus {
  border-color: var(--clr-gold);
  outline: none;
  background: #fff;
}

/* Mobile Tweak */
@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-hero h1 { font-size: 2.5rem; }
  .contact-form-wrapper { padding: 30px; }
}
@media (max-width: 480px) {
  /* 1. Hide the actual phone digits, keep only the icon */
  .header-phone .phone-text {
    display: none;
  }
  
  /* 2. Give the phone icon some padding so it's a good "tap" target */
  .header-phone {
    padding: 8px;
    background: rgba(56, 91, 63, 0.05);
    border-radius: 50%;
  }

  /* 3. Shrink the Quote Button slightly */
  .btn-quote {
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
    letter-spacing: 0;
  }

  /* 4. Ensure the gap between items is tight but clean */
  .header-actions {
    gap: 10px;
  }

  /* 5. Scale the logo down so it doesn't push items off screen */
  .logo img {
    width: 28px;
    height: 28px;
  }
}
.portfolio-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This makes it fill the box without stretching */
  display: block;
}

/* Ensure the item-inner container stays a consistent size */
.item-inner {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1; /* Keeps everything perfectly square */
}
/* Mobile Fix for Shimmer & Shine Contact Page */
@media (max-width: 600px) {
    /* Prevents the long email from pushing the card off-screen */
    .contact-link {
        font-size: 1.05rem !important; /* Shrunk slightly for better fit */
        word-wrap: break-word;
        word-break: break-all; /* Forces the long domain to wrap to a 2nd line */
        display: inline-block;
        max-width: 100%;
        line-height: 1.3;
    }

    /* Keeps the icon circle from getting squashed when the text wraps */
    .icon-circle {
        min-width: 50px; 
        height: 50px;
        flex-shrink: 0; /* Important: stops the circle from turning into an oval */
    }

    /* Gives the text next to the icon a bit more breathing room */
    .contact-item {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 25px;
    }
}
/* Ensure the new conditional dropdown looks good on mobile */
#color-group-contact select,
#color-group-home select {
    font-size: 16px; /* Prevents iPhone from auto-zooming when tapping */
    padding: 12px;
}

/* ============================================= */
/* ===     PERMANENT LIGHTS PAGE (.pl-)      === */
/* ============================================= */

/* --- Hero --- */
.pl-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-image: url('../images/permanent-roofline-lighting-urbandale-ia-track-system.jpg');
  overflow: hidden;
}
.pl-hero .hero-overlay {
  background: linear-gradient(180deg, rgba(15,33,22,.55) 0%, rgba(15,33,22,.78) 100%);
}
.pl-hero-content { position: relative; z-index: 2; padding: var(--space-10) var(--space-5); max-width: 820px; }
.pl-hero h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.08; margin-bottom: var(--space-5); }
.pl-hero .lead { color: rgba(255,255,255,.92); font-weight: 500; max-width: 640px; margin-inline: auto; }

/* --- Intro / shared explainer --- */
.pl-section { padding: var(--space-10) 0; }
.pl-section.alt { background: linear-gradient(to bottom, #ffffff, #f4f7f5); }
.pl-section-head { text-align: center; max-width: 720px; margin: 0 auto var(--space-8); }
.pl-section-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.pl-section-head p { color: var(--clr-text); opacity: .85; margin-bottom: 0; }

/* --- The big Track vs Puck switch --- */
.pl-switch {
  display: inline-flex;
  background: var(--soft-bg);
  border: 1px solid var(--soft-brd);
  border-radius: 50px;
  padding: 6px;
  gap: 6px;
  margin: 0 auto var(--space-8);
}
.pl-switch-wrap { text-align: center; }
.pl-switch-btn {
  border: none;
  background: transparent;
  color: var(--clr-forest);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .5px;
  padding: .7rem 2rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all .25s ease;
}
.pl-switch-btn .pl-switch-sub { display: block; font-size: .72rem; font-weight: 600; opacity: .65; letter-spacing: .3px; }
.pl-switch-btn.active {
  background: var(--clr-forest);
  color: #fff;
  box-shadow: var(--shadow-2);
}
.pl-switch-btn.active .pl-switch-sub { opacity: .8; }

/* --- Panels --- */
.pl-panel { display: none; animation: plFade .4s ease; }
.pl-panel.active { display: block; }
@keyframes plFade { from { opacity: 0; transform: translateY(12px);} to { opacity: 1; transform: none; } }

/* Panel intro: image + copy */
.pl-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-9);
}
.pl-overview-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  aspect-ratio: 4 / 3;
}
.pl-overview-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-overview h3 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: var(--space-4); }
.pl-pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-5); }
.pl-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .85rem; font-weight: 700;
  padding: 7px 14px; border-radius: 50px;
}
.pl-pill.good { background: var(--clr-sage); color: var(--clr-forest); }
.pl-pill.note { background: rgba(229,180,91,.18); color: #9c7328; }

/* --- Product comparison cards (the two brands per category) --- */
.pl-vs-label { text-align: center; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--clr-slate); font-size: .85rem; margin-bottom: var(--space-6); }
.pl-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
  position: relative;
}
.pl-products::before {
  content: "VS";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--clr-gold);
  color: var(--clr-forest);
  font-weight: 900;
  font-size: .9rem;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  box-shadow: var(--shadow-2);
  z-index: 3;
  border: 3px solid #fff;
}
.pl-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--clr-gray);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pl-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.pl-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.pl-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pl-card:hover .pl-card-media img { transform: scale(1.05); }
.pl-card-media::after {
  content: "Visit site ↗";
  position: absolute;
  bottom: 12px; right: 12px;
  background: rgba(15,33,22,.82);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 50px;
  opacity: 0;
  transform: translateY(6px);
  transition: all .25s ease;
}
.pl-card:hover .pl-card-media::after { opacity: 1; transform: none; }
.pl-card-body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.pl-card-body h4 { font-size: 1.4rem; margin-bottom: 4px; }
.pl-card-tag { font-size: .82rem; font-weight: 700; color: var(--clr-slate); margin-bottom: var(--space-4); }
.pl-feat { list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.pl-feat li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: .95rem; line-height: 1.45; }
.pl-feat li::before {
  content: "";
  position: absolute; left: 0; top: 3px;
  width: 16px; height: 16px;
  background: var(--clr-gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pl-card .btn { margin-top: auto; align-self: flex-start; }

/* --- Big comparison table: Track vs Puck --- */
.pl-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); border: 1px solid var(--clr-gray); }
.pl-table { width: 100%; border-collapse: collapse; background: #fff; min-width: 560px; }
.pl-table th, .pl-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--clr-gray); vertical-align: top; }
.pl-table thead th { background: var(--clr-forest); color: #fff; font-size: 1rem; }
.pl-table thead th:first-child { background: #2c4631; }
.pl-table tbody th { font-weight: 700; color: var(--clr-forest); background: #f4f7f5; width: 26%; }
.pl-table td { font-size: .95rem; }
.pl-table .col-track { background: rgba(56,91,63,.04); }
.pl-table tbody tr:last-child th, .pl-table tbody tr:last-child td { border-bottom: none; }
.pl-table .winner { font-weight: 700; color: var(--clr-forest); }

/* --- CTA --- */
.pl-cta {
  text-align: center;
  background: var(--clr-forest);
  color: #fff;
  padding: var(--space-10) var(--space-5);
  border-radius: var(--radius-lg);
}
.pl-cta h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.pl-cta p { color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto var(--space-6); }
.pl-cta .btn-primary { font-size: 1.1rem; padding: .9rem 2.2rem; }

/* --- Responsive --- */
@media (max-width: 820px) {
  .pl-overview { grid-template-columns: 1fr; gap: var(--space-6); }
  .pl-products { grid-template-columns: 1fr; gap: var(--space-7); }
  .pl-products::before { top: auto; bottom: -8px; left: 50%; }
  .pl-switch-btn { padding: .7rem 1.3rem; font-size: .95rem; }
}
/* =====================================================================
   OMNIAQ LAYER
   =====================================================================
   Everything above this line is the Shimmer & Shine design system as it
   was written for the old site. Nothing above has been changed except
   five background-image url()s, which now point at assets/images/ where
   this pack keeps its optimised photos.

   Everything below is new, and it exists for one reason: three blocks on
   the page are rendered by core, and core cannot be edited by a business
   pack. The lead form (includes/start-form.php), the SMS consent box
   (includes/sms-consent.php) and the three Google review blocks
   (includes/review-blocks.php) emit their own class names. Those classes
   were styled in core's stylesheet, which this pack no longer loads, so
   they are re-cut here in the design system's own tokens.

   Nothing below invents a colour. Every value is --clr-*, --space-*,
   --radius-* or --shadow-* from the palette at the top of this file.
   ===================================================================== */


/* -- 1. Grid and section scaffolding ----------------------------------
   .grid.three shipped with the old site; .grid.two did not, and the
   problem and FAQ sections need it. .section-* are core's names, kept so
   the review wall lines up with the sections around it. */

.grid.two { grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid.two { grid-template-columns: repeat(2, 1fr); } }

.section          { padding: var(--space-9) 0; }
.section.bg-light { background: linear-gradient(to bottom, #ffffff, #f4f7f5); }
.section.bg-soft  { background: #f8faf9; }

/* The dark band. One on the homepage, and it is the same forest the
   quote section uses so the page has two anchors of the same weight. */
.band-forest {
  background: var(--clr-forest);
  color: #fff;
  padding: var(--space-10) 0;
}
.band-forest h2, .band-forest h3 { color: #fff; }
.band-forest p { color: rgba(255,255,255,.85); }

/* Section headings. .section-head is the old site's, .section-header is
   the one core's review wall prints. Same treatment, so the seam between
   a pack section and a core section is invisible. */
.section-head, .section-header { margin-bottom: var(--space-7); }
.section-head.center, .section-header.text-center, .text-center { text-align: center; }

/* The eyebrow over a section heading. Forest, not gold.

   It was gold, which is 1.79:1 against the section background it always sits
   on — grey text, effectively, and it appears six to eight times a page on
   nineteen pages. Gold is the right accent on the hero photo and on the
   forest bands, where it has something dark behind it; on #f8f8f6 it has
   nothing. This class never renders on a dark background anywhere in the
   pack, checked page by page, so there is no case left to keep gold for.

   Forest is 7.1:1 and already the colour of the heading below it. What
   separates the two is size, weight and letter-spacing, which is how an
   eyebrow is normally distinguished anyway. */
.subheading {
  display: inline-block;
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--clr-forest);
  margin-bottom: var(--space-2);
}

.section-head h2, .section-header h2 { margin-bottom: var(--space-3); }

.section-desc, .section-head .muted {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  color: #526358;
  font-size: 1.05rem;
}

.grid-3, .grid-2 { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}
.mt-30 { margin-top: var(--space-7); }
.mt-40 { margin-top: var(--space-8); }


/* -- 2. Homepage parts the old site had no equivalent for -------------
   The old homepage was hero, three service cards, a slider, reviews and
   a form. This one argues a case before it asks, so it needs a numbered
   step, a framed icon and a callout box. All three are built from the
   existing tokens rather than from new colours. */

/* Gold numeral. The same gold-circle idea as .feature-icon, sized for a
   two-digit step rather than a tick. */
.card-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--clr-gold);
  color: var(--clr-forest);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: .5px;
  margin-bottom: var(--space-4);
}

/* Framed line icon, for a card that leads with a drawing. */
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--clr-sage);
  color: var(--clr-forest);
  margin-bottom: var(--space-4);
}

.solution-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(229, 180, 91, .15);
  color: var(--clr-gold);
  margin-bottom: var(--space-5);
}

/* On the forest band a card is a column of text, not a panel. */
.band-forest .card { background: transparent; border: none; box-shadow: none; text-align: center; align-items: center; }
.band-forest .card:hover { transform: none; box-shadow: none; }
.band-forest .card-body { padding: 0; }
.band-forest .card h3::after { left: 50%; transform: translateX(-50%); }

/* The satellite-estimate callout. Soft-box tokens, gold rule on the left. */
.offer-callout {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  background: var(--soft-bg);
  border: 1px solid var(--soft-brd);
  border-left: 4px solid var(--clr-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.offer-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--clr-forest);
  color: var(--clr-gold);
}
.offer-body > p { color: #526358; }
.offer-body > p:last-child { margin-bottom: 0; }
@media (max-width: 700px) { .offer-callout { flex-direction: column; padding: var(--space-6); } }

/* The standards strip. .trust-checkmarks is the old site's gold-tick
   list; it was written for the forest quote panel and works unchanged on
   a soft box, so only the box itself is new. */
.standards-box {
  background: var(--soft-bg);
  border: 1px solid var(--soft-brd);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.standards-box h4 { margin-bottom: var(--space-5); font-size: 1.15rem; }
.standards-box .trust-checkmarks { margin-top: 0; display: grid; gap: var(--space-2); }
.standards-box .trust-checkmarks li { font-size: 1rem; margin-bottom: 0; }
@media (min-width: 860px) {
  .standards-box .trust-checkmarks { grid-template-columns: 1fr 1fr; column-gap: var(--space-8); }
}

/* .faq-card was written against an h4. This page's questions are h3,
   which is the correct level under the section's h2, so the rule is
   widened rather than the heading demoted. */
.faq-card h3 {
  color: var(--clr-forest);
  font-size: 1.2rem;
  margin-bottom: 18px;
  padding-bottom: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.faq-card h3::after { display: none; }
.faq-card h3::before {
  content: "";
  width: 8px; height: 8px;
  margin-top: .55em;
  background: var(--clr-gold);
  border-radius: 50%;
  flex-shrink: 0;
}
.faq-card p:last-child { margin-bottom: 0; }


/* -- 3. Google reviews (core/includes/review-blocks.php) --------------
   Three blocks on three different grounds: the trust strip sits on the
   dark hero, the wall on a light section, the aside on the forest quote
   panel. Each is coloured for the ground it lands on. */

/* 3a. The strip in the hero. */
.rv-trustbar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--space-6);
  padding: 8px 16px;
  border-radius: 50px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  color: #fff;
  text-decoration: none;
  font-size: .95rem;
}
.rv-trustbar:hover { background: rgba(255,255,255,.16); color: #fff; text-decoration: none; }

.rv-stars { display: inline-flex; gap: 2px; }
.rv-stars svg { width: 16px; height: 16px; }
.rv-stars svg.on { fill: var(--clr-gold); }
.rv-stars svg.off { fill: rgba(120,120,120,.30); }
.rv-stars.sm svg { width: 13px; height: 13px; }
.rv-dot { margin: 0 6px; opacity: .5; }

/* 3b. The wall. Built to match .card so it is the same object as every
   other card on the page, with a gold rule across the top. */
.rv-grid { align-items: stretch; }

.evidence-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--clr-gray);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
  overflow: hidden;
  text-align: left;
  transition: transform .3s ease, box-shadow .3s ease;
}
.evidence-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.evidence-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--clr-gold);
}
.rv-slot {
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--clr-forest);
  background: var(--clr-sage);
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 4px;
  margin: var(--space-2) 0 var(--space-4);
}
.rv-text {
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  border: 0;
  color: #4b5563;
  font-style: italic;
  font-size: .98rem;
  line-height: 1.65;
  flex-grow: 1;
}
.rv-foot { display: flex; align-items: center; gap: 12px; border: 0; }
.rv-avatar {
  position: relative;
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--clr-forest);
  color: var(--clr-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  overflow: hidden;
}
.rv-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-who { display: flex; flex-direction: column; line-height: 1.3; }
.rv-name { font-weight: 800; color: var(--clr-text); }
.rv-place { font-size: .8rem; color: var(--clr-slate); text-transform: uppercase; letter-spacing: .5px; }
.rv-source {
  display: inline-block;
  margin-top: var(--space-5);
  font-size: .8rem;
  font-weight: 700;
  color: var(--clr-slate);
}
.rv-attrib { margin-top: var(--space-7); font-size: .85rem; color: #6b7280; }

/* 3c. The aside, on the forest quote panel. */
.rv-aside {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,.15);
}
.rv-aside-title {
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--clr-gold);
  margin-bottom: var(--space-4);
}
.rv-mini { margin-bottom: var(--space-5); }
.rv-mini .rv-stars svg.off { fill: rgba(255,255,255,.25); }
.rv-mini-text {
  margin: 6px 0;
  font-size: .92rem;
  font-style: italic;
  line-height: 1.6;
  color: rgba(255,255,255,.85);
}
.rv-mini-who { margin: 0; font-size: .82rem; font-weight: 700; color: #fff; }
.rv-mini-meta { display: block; font-weight: 400; color: rgba(255,255,255,.6); }
.rv-aside-link { display: inline-block; font-size: .85rem; font-weight: 700; color: var(--clr-gold); }
.rv-aside-link:hover { color: #fff; text-decoration: underline; }


/* -- 4. The shared lead form (core/includes/start-form.php) -----------
   This is the CRM-wired form and it stays exactly as core renders it.
   Only the paint is the pack's. It sits inside .quote-card, which already
   supplies the white panel and the shadow, so .start-card adds rhythm
   and nothing else. */

.start-card > h2 { font-size: 1.6rem; margin-bottom: var(--space-2); }
.start-lede { font-size: .95rem; color: #526358; margin-bottom: var(--space-6); }

.sc-error {
  background: rgba(199,84,84,.08);
  border-left: 3px solid var(--clr-terracotta);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: .9rem;
  color: #8f2f2f;
}

.sc-row { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 560px) { .sc-row { grid-template-columns: 1fr 1fr; } }

.sc-field { margin-bottom: var(--space-5); }
.sc-field label,
.sc-more legend {
  display: block;
  font-weight: 700;
  font-size: .85rem;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--clr-forest);
}
/* select joined this list on 2026-08-12 with the "how did you hear about us"
   field. Left out, it would have rendered as the browser's default control —
   a different height, a different border and a different font sitting directly
   under three fields that all match. */
.sc-field input,
.sc-field select,
.sc-field textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  background: #fdfdfd;
}
/* The native arrow disappears once appearance is reset, so it is drawn back on
   as a background chevron. Inline SVG in a data URI: no extra request, and no
   file for a future deploy to lose. */
.sc-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23385b3f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.sc-field input:focus,
.sc-field select:focus,
.sc-field textarea:focus { border-color: var(--clr-gold); outline: none; background-color: #fff; }
.sc-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: #8a938c; }

.sc-more { margin: var(--space-4) 0 var(--space-5); }
.sc-more summary {
  cursor: pointer;
  font-weight: 700;
  font-size: .9rem;
  color: var(--clr-forest);
  padding: 10px 0;
  list-style: none;
}
.sc-more summary::-webkit-details-marker { display: none; }
.sc-more summary::before { content: "+ "; color: var(--clr-gold); font-weight: 900; }
.sc-more[open] summary::before { content: "\2212  "; }
.sc-more fieldset { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.sc-concerns { display: grid; gap: 8px; }
.sc-concerns label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  font-size: .95rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--clr-text);
  background: var(--soft-bg);
  border: 1px solid var(--soft-brd);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  cursor: pointer;
}
.sc-concerns label:hover { border-color: var(--clr-gold); }

/* The SMS opt-in. The wording is carrier-registered, so it is styled to
   be read, never shrunk out of the way. */
.sms-optin-compact {
  background: var(--soft-bg);
  border: 1px solid var(--soft-brd);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: var(--space-5);
}
.sms-optin-compact label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .82rem;
  line-height: 1.5;
  color: #526358;
}
.sms-optin-compact input[type="checkbox"] {
  margin-top: 3px;
  width: 17px; height: 17px;
  flex-shrink: 0;
  accent-color: var(--clr-forest);
}
.sms-optin-compact a { color: var(--clr-forest); text-decoration: underline; }
.sms-optin-note { margin: 8px 0 0 27px; font-size: .75rem; font-weight: 700; color: var(--clr-slate); }

.next-avail { margin-bottom: var(--space-5); }
.next-avail-label {
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--clr-slate);
  margin-bottom: 8px;
}
.next-avail-times { display: flex; flex-wrap: wrap; gap: 8px; }
.na-chip {
  background: var(--clr-sage);
  color: var(--clr-forest);
  font-size: .8rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 50px;
}
.na-more { font-size: .8rem; color: var(--clr-slate); align-self: center; }

/* Honeypot. Off-screen, never display:none, because a bot reads the
   stylesheet too. */
.form-hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

.sc-actions { margin-top: var(--space-5); }
.btn-book, .btn-callback {
  display: block;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-book {
  padding: 16px;
  font-size: 1.05rem;
  background: var(--clr-gold);
  color: var(--clr-forest);
  border: 1px solid transparent;
  box-shadow: var(--shadow-1);
}
.btn-book:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.sc-or { text-align: center; font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: #8a938c; margin: 10px 0; }
.btn-callback {
  padding: 12px;
  font-size: .95rem;
  background: transparent;
  color: var(--clr-forest);
  border: 1px solid var(--clr-forest);
}
.btn-callback:hover { background: rgba(56,91,63,.08); }
.sc-note { margin: var(--space-5) 0 0; font-size: .8rem; line-height: 1.5; color: #8a938c; }


/* -- 5. Footer additions -----------------------------------------------
   The old footer had four hand-written columns. This one renders whatever
   business/identity.php lists, and one of those columns is eleven service
   areas, which as a stacked list is taller than the rest of the footer put
   together. It wraps into chips instead. */

.footer-areas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-areas li { margin: 0; }
.footer-areas a,
.footer-areas li {
  display: inline-block;
  font-size: .82rem;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.06);
  border-radius: 50px;
  padding: 4px 11px;
  text-decoration: none;
  transition: color .2s, background .2s;
}
.footer-areas li:has(> a) { background: none; padding: 0; }
.footer-areas a:hover { color: var(--clr-forest); background: var(--clr-gold); text-decoration: none; }

.brand-col .footer-contact { margin: var(--space-6) 0 0; }
.footer-cta { margin-top: var(--space-5); }
.footer-slogan { display: block; margin-top: 4px; color: rgba(255,255,255,.45); font-style: italic; }
.footer-legal a:first-child { margin-left: 0; }
@media (max-width: 600px) { .footer-legal a { margin: 0 10px; } }

/* -- 6. Cited source tags ---------------------------------------------
   The little outlined pill that sits under a statistic and links out to
   the source it was checked against. It is here rather than remapped to
   an existing class because the tag itself is fixed: every one of these
   links was fetched and confirmed, so the href, the text and the class
   name on it are all frozen. This re-cuts the pill in the pack's tokens.
   Generic on purpose, so any page carrying a citation gets it. */

.source-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--clr-slate);
  background: transparent;
  border: 1px solid var(--clr-gray);
  border-radius: 50px;
  padding: 4px 10px;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.source-tag:hover {
  color: var(--clr-forest);
  border-color: var(--clr-gold);
  background: rgba(229, 180, 91, .08);
  text-decoration: none;
}


/* -- 6b. oq_photo() wrappers (homepage) -------------------------------
   Lettered rather than numbered: this block was section 6 until the source
   pills above took that number, and sections 7 and 8 below were already
   spoken for by the time they did. Renumbering those would have broken the
   cross-references inside them.

   Every photo on the site is a <picture> now, so it can serve a WebP with
   a JPEG fallback. A <picture> is inline by default, which breaks the two
   places the design system sizes an image by its box: the 16:10 card crop
   and the 16:9 slider frame. Make the wrapper transparent to layout. */

.card-media picture,
.slide picture { display: block; width: 100%; height: 100%; }
.slide picture img { width: 100%; height: 100%; object-fit: cover; }


/* -- 7. The six re-skinned inner pages --------------------------------
   about.php, contact.php, permanent-lights.php, portfolio.php,
   process.php and thank-you.php came across from the old site with their
   own markup, so almost nothing new is needed. These are the two places
   the old CSS assumed something that is no longer true.

   7a. HEADING LEVELS. The old pages jumped straight from <h1> to <h4>,
   and the portfolio's tile titles were <h3> with no <h2> anywhere above
   them. The levels are corrected in the markup, so the rules that were
   written against the old tag are widened to the new one rather than the
   headings being demoted back. Same paint, correct outline. */

.item-text h2 {
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 8px;
  transform: translateY(10px);
  transition: transform .4s ease;
}
.item-inner:hover .item-text h2 { transform: translateY(0); }

.step-text h2 { font-size: 2rem; margin-bottom: 15px; }

.next-steps-box h2 { font-size: 1.1rem; margin-bottom: 20px; color: var(--clr-forest); }

.contact-item h2 {
  color: rgba(255,255,255,0.6);
  margin: 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.service-area h2 { color: var(--clr-gold); margin-bottom: 10px; font-size: 1rem; }

/* 7b. oq_photo() wrappers, the same job section 6 does for the homepage.
   Every photo is a <picture> now, and a <picture> is inline by default,
   which collapses the four places these pages size an image by its box:
   the 4:3 portfolio frame, the 4:3 permanent-lights panels and cards, and
   the two free-standing photos. */

.item-inner picture,
.pl-overview-media picture,
.pl-card-media picture { display: block; width: 100%; height: 100%; }

.bio-image picture,
.cta-image-wrapper picture { display: block; }


/* -- 8. City landing pages --------------------------------------------
   The eleven christmas-light-installation-<city>.php pages. Two kinds of
   thing live here and nothing else.

   First, class names core prints that this pack must re-cut, same reason
   as section 3 and section 4 above: oq_photo_grid() and
   oq_photo_caption() in core/includes/photos.php emit .photo-grid,
   .photo-grid-item and .photo-caption, and core cannot be edited by a
   business pack.

   Second, three shapes the old design system was never asked for. Its
   only CTAs are .quote-section and .pl-cta, both full-height blocks, and
   a city page carries three or four mid-page CTAs; repeating either of
   those would swamp the evidence between them. Its only narrow measure
   is .section-desc, which is a paragraph rule, not a column. And its
   .evidence-card carries a review, not a statistic.

   The source pill itself is NOT here. It is generic, it is shared with
   the other pages that cite anything, and it is cut once in section 6.

   Nothing below invents a colour or a spacing value. Every one is
   --clr-*, --space-*, --radius-* or --shadow-* from the palette at the
   top of this file. */


/* 8a. The source pills that are not links. Section 6 cuts the pill
   generically, hover included. On these pages a few of them are <span>
   rather than <a>, because the page they would cite is gone, and a
   hover state on something that cannot be clicked is a broken promise. */
span.source-tag:hover {
  color: var(--clr-slate);
  border-color: var(--clr-gray);
  background: transparent;
}

/* 8b. Where the source pills sit. A row of them under a table or a
   section needs to breathe when it wraps; inside an evidence card the
   pill is a block-level flex child and would otherwise stretch. */
.center > .source-tag { margin: 0 4px 8px; }

/* 8c. Evidence cards. .evidence-card and .evidence-accent are already up
   in section 3, where the review wall uses them. The statistic and its
   caption are the city pages' own. .evidence-label grows so the source
   pill sits on the baseline of the card whatever the caption length. */
.evidence-stat {
  font-size: clamp(2.2rem, 5vw, 2.8rem);
  font-weight: 900;
  color: var(--clr-forest);
  line-height: 1;
  margin-bottom: var(--space-3);
}
.evidence-label {
  flex-grow: 1;
  color: #526358;
  font-size: .9rem;
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.evidence-card .source-tag { align-self: flex-start; }

/* 8d. The slim CTA band between sections. Same forest as .band-forest and
   .quote-section, so the page reads as one system, but a strip rather
   than a block. */
.cta-strip {
  background: var(--clr-forest);
  padding: var(--space-6) 0;
}
.cta-strip .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  text-align: center;
}
.cta-strip-text {
  margin: 0;
  color: #fff;
  font-weight: 700;
  line-height: 1.5;
}
.cta-strip .btn { flex-shrink: 0; }

/* 8e. Narrow measures. A column of argument, and the column the booking
   form sits in on the closing band. */
.city-prose { max-width: 760px; margin-inline: auto; }
.city-book  { max-width: 620px; margin-inline: auto; }
.city-book-call {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: .95rem;
}
.city-book-call a { color: var(--clr-gold); font-weight: 800; }
.city-book-call a:hover { color: #fff; }

/* 8f. The photo blocks core prints. */
.photo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
@media (min-width: 720px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }

.photo-grid-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.photo-grid-item picture { display: block; }
.photo-grid-item img {
  width: 100%;
  /* height:auto is load-bearing. Every photo carries real width and height
     attributes so the page does not jump while images load, and a specified
     height beats aspect-ratio. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.photo-grid-item:hover img { transform: scale(1.05); }

.photo-caption {
  margin: var(--space-2) 0 0;
  font-size: .78rem;
  font-style: italic;
  text-align: center;
  color: #6b7280;
}

/* The single framed photo, in a two-column row beside its copy. */
.work-photo {
  width: 100%;
  height: auto; /* see the note on .photo-grid-item img */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

/* 8g. Rhythm. .mt-30 and .mt-40 are already in section 1; the city pages
   also use the step below them. The last paragraph in a padded box does
   not need its trailing margin, which is what the inline
   style="margin-bottom: 0" on the old pages was doing by hand. */
.mt-20 { margin-top: var(--space-5); }

.card-body > p:last-child,
.city-prose > p:last-child,
.trust-checkmarks li:last-child { margin-bottom: 0; }

/* The closing band is centred, and the booking form inside it is not: a
   centred <label> over a full-width input reads as a mistake. Scoped to
   .city-book so the homepage's own .quote-card is untouched. */
.city-book .quote-card { text-align: left; }

/* 8g-ii. A white card inside a dark band, and the text that vanished in it.
   Reported 2026-08-11: on all eleven city pages the booking form's heading
   ("Get your Waukee estimate") and the line under it could not be read.

   Cause: .band-forest paints its descendants white —

       .band-forest h2, .band-forest h3 { color: #fff; }   (0,1,1)
       .band-forest p                   { color: ...,.85 } (0,1,1)

   which is correct for text sitting directly on the forest green, and wrong
   for anything inside .quote-card, whose own background is #fff. A descendant
   selector beats an inherited value outright, so .quote-card { color:
   var(--clr-text) } never had a chance: it sets the card's own colour, and
   inheritance only reaches a child that nothing else has claimed.

   The first two rules below take the card's contents back at (0,2,1), which
   the band cannot outrank. They are deliberately blunt — every heading and
   every paragraph — so that a <p> added to this form next year lands on
   readable dark text by default rather than disappearing. The rules after
   them restore the handful of elements that carry a colour of their own, at
   (0,3,0) so they win in turn. next-avail-label and sc-error are in that list
   even though neither is visible today: the first needs live calendar slots
   and the second only prints on a validation failure, so both were invisible
   in exactly the way that gets found by a customer rather than by us. */
.band-forest .quote-card h1,
.band-forest .quote-card h2,
.band-forest .quote-card h3        { color: var(--clr-text); }
.band-forest .quote-card p         { color: var(--clr-text); }

.band-forest .quote-card .start-lede       { color: #526358; }
.band-forest .quote-card .sc-note          { color: #8a938c; }
.band-forest .quote-card .sc-error         { color: #8f2f2f; }
.band-forest .quote-card .next-avail-label { color: var(--clr-slate); }
.band-forest .quote-card .sms-optin-note   { color: var(--clr-slate); }

/* The skip link.

   Positioned off-screen rather than display:none, because a hidden element is
   not focusable and a skip link nobody can focus is not a skip link. It comes
   back on :focus-visible only, so a mouse click on a nearby element does not
   flash it. No new colours: forest panel, white text, the same radius and
   shadow as everything else.

   z-index has to clear .site-header, which is sticky. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--clr-forest);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
  box-shadow: var(--shadow-2);
}
.skip-link:focus,
.skip-link:focus-visible { left: 0; }

/* The landmark itself takes no styling — it replaced a bare <main> on nine
   pages and had none there either. It only needs to not break :target
   scrolling under the sticky header. */
#main { scroll-margin-top: 90px; }

/* The booking page's error line. .sc-error already carries the terracotta
   rule and the soft red panel from the start form; this only gives it room to
   breathe at the top of a page rather than inside a card. */
.booking-error { margin: var(--space-6) 0 0; }

/* 8h. A corner badge on a card that carries no photo.
   Added for services.php, which is a text-only page: its "Most Popular"
   ribbon is .badge, the component the homepage already uses, but every
   existing .badge sits inside .card-media and is absolutely positioned over
   the image. A card that is all text has nothing under the ribbon, so the
   heading would run beneath it on a narrow column. The body starts below it
   instead. Scoped to a .badge that is a direct child of .card, so no card
   with media is touched. No new colour and no new spacing value. */
.card > .badge + .card-body { padding-top: var(--space-9); }

/* 8i. The public booking funnel.
   Added for the six public pages that used to ship from core: book-call.php,
   book-visit.php, booking-confirm.php, booking-confirmed.php,
   privacy-policy.php and terms-of-service.php. Five of those needed nothing
   new. book-call.php is the exception, and the reason is in its JavaScript.

   That script BUILDS the date strip and the time grid at runtime. It calls
   document.createElement and sets className to 'date-card' and 'slot-btn',
   fills a date card with spans classed dc-day, dc-num, dc-month and dc-slots,
   and toggles .active on all three. Those names are fixed by the script, not
   by the markup, so they cannot be remapped onto anything: a class the script
   writes has to be a class this stylesheet answers, or the picker renders as a
   row of unstyled buttons. The appointment-type cards and the step headers are
   in the same family and are cut with them so the picker reads as one control.

   Nothing below invents a colour or a spacing value. Every one is --clr-*,
   --space-*, --radius-*, --shadow-* or --soft-* from the palette at the top of
   this file. */

/* 8i-1. A page header band with an <h1> in it.
   .band-forest whitens h2 and h3 up in section 1 because every use of it until
   now was a closing section under an h2. These six pages open on it, so the h1
   was forest green on forest green. */
.band-forest h1 { color: #fff; }

/* 8i-2. The step machine. Each step is shown and hidden by the script through
   its own style.display, so this only owns the rhythm between them. */
.step-section { margin-bottom: var(--space-8); }

.step-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--clr-forest);
  margin-bottom: var(--space-5);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--clr-gold);
  color: var(--clr-forest);
  font-size: .9rem;
  font-weight: 900;
}

/* 8i-3. The appointment-type cards. A <button>, so every inherited button
   default has to be undone before it can look like a card. .active is set by
   the script, never by the markup. */
.type-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5);
  text-align: left;
  font-family: inherit;
  background: #fff;
  border: 1px solid var(--clr-gray);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.type-card:hover  { border-color: var(--clr-gold); }
.type-card.active { border-color: var(--clr-gold); background: var(--soft-bg); box-shadow: var(--shadow-2); }

.type-emoji { flex-shrink: 0; font-size: 1.7rem; line-height: 1.1; }
.type-text  { flex: 1; }
.type-title { display: block; font-weight: 800; font-size: 1.02rem; color: var(--clr-forest); margin-bottom: var(--space-1); }
.type-sub   { display: block; font-size: .88rem; line-height: 1.45; color: #526358; }

.type-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 2px solid var(--soft-brd);
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 900;
  color: var(--clr-forest);
}
.type-card.active .type-check { background: var(--clr-gold); border-color: var(--clr-gold); }
.type-card.active .type-check::after { content: '\2713'; }

/* 8i-4. The date strip. Horizontal scroll rather than a wrapped grid, because
   a week of dates on a phone is one swipe and four rows is not. */
.date-scroll {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.date-scroll::-webkit-scrollbar { display: none; }

.date-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex: 0 0 auto;
  width: 72px;
  padding: 14px 6px 10px;
  text-align: center;
  font-family: inherit;
  background: #fff;
  border: 1px solid var(--clr-gray);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.date-card:hover  { border-color: var(--clr-gold); }
.date-card.active { background: var(--clr-forest); border-color: var(--clr-forest); }

.dc-day   { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--clr-slate); }
.dc-num   { font-size: 1.5rem; font-weight: 900; line-height: 1.1; color: var(--clr-forest); }
.dc-month { font-size: .65rem; font-weight: 600; color: var(--clr-slate); }
.dc-slots {
  margin-top: 5px;
  padding: 2px 6px;
  border-radius: 50px;
  font-size: .58rem;
  font-weight: 800;
  color: var(--clr-forest);
  background: var(--clr-sage);
}
.date-card.active .dc-day,
.date-card.active .dc-month { color: rgba(255,255,255,.75); }
.date-card.active .dc-num   { color: #fff; }
.date-card.active .dc-slots { background: var(--clr-gold); color: var(--clr-forest); }

/* 8i-5. The time slots. */
.slot-label {
  margin-bottom: var(--space-3);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--clr-gold);
}
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (min-width: 380px) { .slot-grid { grid-template-columns: repeat(4, 1fr); } }

.slot-btn {
  padding: 13px 6px;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  color: var(--clr-forest);
  background: #fff;
  border: 1px solid var(--clr-gray);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.slot-btn:hover  { border-color: var(--clr-gold); }
.slot-btn.active { background: var(--clr-gold); border-color: var(--clr-gold); }

/* 8i-6. The confirm step. The summary bar is written by the script and sits on
   top of the card, so the two are one object with one rounded outline. The
   fields inside it are .sc-field, the lead form's own component from section 4,
   and the button is .btn-book from the same place. */
.confirm-summary {
  padding: 14px 18px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--clr-forest);
  color: #fff;
  font-weight: 700;
}
.confirm-card {
  padding: var(--space-6);
  border: 1px solid var(--clr-gray);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-1);
}

.who-box {
  margin-bottom: var(--space-5);
  padding: 14px 16px;
  background: var(--soft-bg);
  border: 1px solid var(--soft-brd);
  border-radius: var(--radius-sm);
}
.who-name  { font-weight: 800; font-size: 1.05rem; color: var(--clr-forest); }
.who-phone { margin-top: 3px; font-size: .85rem; color: var(--clr-slate); }

.addr-note { margin: 6px 0 0; font-size: .78rem; line-height: 1.4; color: var(--clr-slate); }

/* 8i-7. The "what this appointment actually is" panel is .standards-box, and
   that box splits its tick list into two columns on a wide viewport. Right for
   the four-word standards it was written for, wrong here: this list is full
   sentences inside the 620px .city-book column, and the media query asks the
   viewport, not the box. */
.city-book .standards-box .trust-checkmarks { grid-template-columns: 1fr; }


/* -- 9. The interior page hero ----------------------------------------
   .hero, up in the CENTERED HERO section near the top of this file, is
   the homepage's hero and nothing else. It stands 85vh tall and it has
   hero-bg.jpg written into the rule, so the photograph is not something
   a page chooses. It is a property of the class.

   Nineteen inner pages had been put on that class. Every city page,
   every objection page, pricing and services all opened on a near
   full-screen reprint of the same homepage photograph, which is the
   reason they read as copies of the homepage rather than as pages of
   their own.

   The six pages in section 7 never did that. Each of them has a header
   cut to its own job: .about-hero, .process-hero, .pl-hero,
   .contact-hero and .portfolio-hero. .about-hero is the one of those
   that needs no picture of its own, so it is the model for this, and
   .page-hero is now the single header every interior page opens on.

   The four public pages that used to open on .band-forest are on it too,
   so the site has one interior header and not two that nearly match.
   That leaves 8i-1 (.band-forest h1) with no page of its own. It is kept
   where it is because it costs nothing and the next band that opens on
   an h1 would need it again.

   Nothing below invents a colour or a spacing value. Every one is
   --clr-*, --space-*, --radius-* or --shadow-* from the palette at the
   top of this file. */

/* 9a. The band. --space-10 over --space-9 is the closest the palette
   comes to .about-hero's 100px over 60px, and the heavier top is kept
   because it is what makes a header read as a header rather than as the
   first section of the page. No min-height and no background-image: the
   height is whatever the words in it need, which is the whole point. */
.page-hero {
  padding: var(--space-10) 0 var(--space-9);
  background: var(--clr-forest);
  color: #fff;
  text-align: center;
}

/* 9b. The headline. h1 is painted --clr-forest by the TYPOGRAPHY section,
   which on this background is forest on forest and reads as nothing at
   all. 8i-1 exists because of exactly that trap, so the same correction
   is made here rather than relied on from elsewhere. The size is
   .about-hero's 3rem, allowed to come down on a narrow screen the way
   the other heroes do. */
.page-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: var(--space-4);
}

/* 9c. The badge. .badge-outline is already gold on transparent and needs
   no repainting on forest. What it needs is its own rhythm: its 24px is
   tuned against the homepage's 4.5rem headline, and under a 3rem one the
   same gap reads as a gap rather than as an eyebrow. */
.page-hero .badge-outline { margin-bottom: var(--space-5); }

/* 9d. The lede. On the homepage the measure is held by
   .hero-text-wrapper, which this header has no equivalent of, so the cap
   goes on the paragraph or the line runs the full 1140px container and
   stops reading as a lede. 640px is .section-desc's measure, which is
   what the pages that already had a header band used.

   The colour is set on the element and not on a class because the three
   things that land here carry three different ones: a bare <p> on the
   pages from section 8, .section-desc on the booking and legal pages,
   and .lead on anything that follows the pattern in section 7. Two of
   those paint themselves forest green.

   .small is exempted from the size because it is the legal pages' date
   line, which is deliberately quieter than the lede above it. */
.page-hero p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255,255,255,.85);
}
.page-hero p:not(.small) { font-size: 1.15rem; }

/* ==========================================================================
   10. TWO HEROES WHOSE LEDE WAS INVISIBLE
   --------------------------------------------------------------------------
   .lead is painted var(--clr-forest) by the TYPOGRAPHY section. Three of the
   five page heroes already override it to white: .portfolio-hero, .process-hero
   and .pl-hero. Two never did.

   .about-hero has a solid var(--clr-forest) background, so its lede was forest
   on forest. "Building a brighter Des Moines metro, one home at a time" was on
   the page and could not be read.

   .contact-hero sits over a dark photo, so its lede was roughly 1.3:1.

   Found 2026-08-11 while giving the interior pages their own hero. Both are
   pre-existing and both are on pages the owner likes and wants left alone, so
   this is a colour fix only: no copy, no markup, no layout.
   ========================================================================== */

.about-hero .lead,
.contact-hero .lead {
  color: rgba(255, 255, 255, .92);
}