/* ============================================
   ERA 303 Services — styles.css
   ============================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Jost:wght@300;400;500;600;700&display=swap');

/* --- CSS Variables --- */
:root {
  /* ERA 303 — bright, clean, cleaning-focused palette.
     Coral is the accent for conversion/emphasis moments: primary CTA
     buttons, the phone link, active nav state, overlines/dividers,
     price emphasis, the "big job" card. Teal carries the structural,
     more frequent elements (icons, secondary "schedule" buttons,
     the estimate card border) so coral stays an accent, not the
     dominant color. Navy is reserved for dark panels (top bar,
     footer, inner page banners) — most of the site stays light. */
  --navy:        #12343B;
  --olive:       #2FAF8F;   /* Teal — primary actions */
  --olive-dk:    #259C7E;
  --mint:        #EAF7F3;   /* Light Mint — soft surfaces, icon chips */
  --salmon:      #F28C5B;   /* Coral — sparing accents */
  --salmon-dk:   #DD7440;
  --offwhite:    #F8FAF9;   /* Off-white page background */
  --dark:        #1E2930;   /* Dark text — headings */
  --white:       #ffffff;
  --charcoal:    #45585C;   /* body copy */
  --charcoal-lt: #6C7C80;   /* muted/secondary text */
  --charcoal-dk: #12343B;   /* Navy — dark panels/footer/banners */
  --shadow-sm:   0 2px 8px rgba(18,52,59,.07);
  --shadow-md:   0 8px 26px rgba(18,52,59,.12);
  --shadow-lg:   0 14px 42px rgba(18,52,59,.16);
  --radius:      10px;
  --radius-lg:   18px;
  --transition:  .3s ease;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', system-ui, sans-serif;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--offwhite);
  color: var(--dark);
  line-height: 1.65;
  font-size: 16px;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--font-body); border: none; }

/* --- Typography --- */
h1, h2, h3, h4 { font-family: var(--font-body); line-height: 1.2; color: var(--dark); }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.6rem); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: 1.1rem; font-weight: 600; letter-spacing: 0; }
p  { font-size: 1rem; color: var(--charcoal); }

/* ============================================
   TOP BAR
   ============================================ */
.top-bar {
  background: var(--charcoal-dk);
  color: #ccc;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .02em;
  padding: 7px 0;
}
.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.top-bar a {
  color: var(--salmon);
  font-weight: 600;
  transition: color var(--transition);
}
.top-bar a:hover { color: var(--mint); }

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
  background: var(--white);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow var(--transition);
}
.navbar.scrolled { box-shadow: var(--shadow-md); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  gap: 16px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.nav-logo img {
  height: 54px;
  width: 54px;
  object-fit: contain;
  border-radius: 50%;
}
.nav-logo-text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--dark);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.nav-logo-text span { color: var(--salmon); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 6px;
  color: var(--charcoal);
  transition: background var(--transition), color var(--transition);
}
.nav-links a:hover { background: var(--offwhite); color: var(--dark); }
.nav-links a.active { color: var(--salmon); font-weight: 600; }
.nav-cta {
  background: var(--salmon);
  color: var(--white) !important;
  padding: 9px 20px !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
  transition: background var(--transition), transform var(--transition) !important;
}
.nav-cta:hover { background: #259C7E !important; transform: translateY(-1px); }

/* Services dropdown (desktop) */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 6px;
  color: var(--charcoal);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus-visible { background: var(--offwhite); color: var(--dark); }
.nav-dropdown-trigger.active { color: var(--salmon); font-weight: 600; }
.nav-caret { width: 11px; height: 11px; flex-shrink: 0; transition: transform var(--transition); }
.nav-dropdown.open .nav-caret,
.mobile-nav-dropdown.open .nav-caret { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 230px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid #ece9e3;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 1001;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dark);
  transition: background var(--transition), color var(--transition);
}
.nav-dropdown-menu a:hover { background: var(--mint); color: var(--olive-dk); }
.nav-dropdown-menu a svg { width: 18px; height: 18px; color: var(--olive); flex-shrink: 0; }

/* Services accordion (mobile) */
.mobile-nav-dropdown-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  font-family: inherit;
  padding: 11px 24px;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--charcoal);
  cursor: pointer;
  transition: background var(--transition);
}
.mobile-nav-dropdown-trigger:hover { background: var(--offwhite); }
.mobile-nav-dropdown-trigger.active { color: var(--salmon); font-weight: 600; }
.mobile-nav-dropdown-menu {
  display: none;
  flex-direction: column;
  background: var(--mint);
  padding: 4px 24px 8px 40px;
}
.mobile-nav-dropdown.open .mobile-nav-dropdown-menu { display: flex; }
.mobile-nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  font-size: .86rem;
  font-weight: 600;
  color: var(--dark);
}
.mobile-nav-dropdown-menu a svg { width: 18px; height: 18px; color: var(--olive); flex-shrink: 0; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  padding: 6px;
  border-radius: 6px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--white);
  border-top: 1px solid #eee;
  padding: 12px 0 16px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  padding: 11px 24px;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--charcoal);
  transition: background var(--transition);
}
.mobile-nav a:hover { background: var(--offwhite); }
.mobile-nav a.active { color: var(--salmon); font-weight: 600; }
.mobile-nav .nav-cta {
  margin: 8px 24px 0;
  text-align: center;
  padding: 11px 20px !important;
  border-radius: var(--radius) !important;
  background: var(--salmon) !important;
  color: var(--white) !important;
}

/* ============================================
   CONTAINER
   ============================================ */
.container {
  width: 90%;
  max-width: 1180px;
  margin: 0 auto;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Coral is the primary CTA color — Calculate, Send Request, Get a Free
   Quote, hero buttons — restored for energy/conversion emphasis. */
.btn-primary { background: var(--salmon); color: var(--white); }
.btn-primary:hover { background: var(--salmon-dk); }
.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,.7);
}
.btn-outline:hover { background: rgba(255,255,255,.12); border-color: var(--white); }
.btn-dark { background: var(--dark); color: var(--white); }
.btn-dark:hover { background: var(--charcoal-dk); }
/* Teal secondary — Ready to Schedule / Book My Free Visit — keeps coral
   from becoming the only color on a page that already has a coral
   primary button nearby. */
.btn-olive { background: var(--olive); color: var(--dark); }
.btn-olive:hover { background: var(--olive-dk); color: var(--white); }
.btn-outline-dark {
  background: transparent;
  color: var(--dark);
  border: 2px solid #d8d3c9;
}
.btn-outline-dark:hover { background: var(--offwhite); border-color: var(--dark); }

/* ============================================
   HERO (HOME)
   ============================================ */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.72) saturate(0.8) contrast(1.05);
  pointer-events: none;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(10,10,10,.72) 0%,
    rgba(20,20,20,.55) 50%,
    rgba(10,10,10,.25) 80%,
    rgba(5,5,5,.08)   100%
  );
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding: 80px 0;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--mint);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 30px;
  margin-bottom: 20px;
}
.hero-badge svg { width: 15px; height: 15px; flex-shrink: 0; }
.hero h1 { color: var(--white); margin-bottom: 18px; text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.hero-sub {
  font-size: 1.12rem;
  color: rgba(255,255,255,.88);
  margin-bottom: 32px;
  max-width: 540px;
}
.hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-stars {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.8);
  font-size: .88rem;
}
.stars { display: inline-flex; align-items: center; gap: 2px; color: var(--salmon); }
.stars svg { width: 16px; height: 16px; }
.hero-trust-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--mint); }

/* ============================================
   SERVICES MARQUEE
   Infinite left-scrolling strip of services, aqua text on white.
   Track holds the item list twice back-to-back so translateX(-50%)
   loops seamlessly.
   ============================================ */
.services-marquee {
  background: var(--white);
  padding: 20px 0;
  overflow: hidden;
  border-top: 1px solid #ece9e3;
  border-bottom: 1px solid #ece9e3;
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  animation: marquee-scroll 26s linear infinite;
}
.services-marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--olive);
  white-space: nowrap;
}
.marquee-dot { color: var(--olive); opacity: .45; font-size: .9rem; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ============================================
   SECTION COMMON
   ============================================ */
.section { padding: 90px 0; }
.section-alt { background: var(--white); }
.section-header { text-align: center; margin-bottom: 56px; }
.section-header .overline {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--salmon);
  margin-bottom: 10px;
}
.section-header h2 { margin-bottom: 14px; }
.section-header p { color: var(--charcoal-lt); max-width: 560px; margin: 0 auto; }
.divider {
  width: 48px;
  height: 3px;
  background: var(--salmon);
  border-radius: 2px;
  margin: 14px auto 0;
}

/* ============================================
   SERVICES CARDS (HOME PREVIEW)
   ============================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 24px;
}
.service-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px 24px 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid #ece9e3;
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.service-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--mint);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}
.service-icon svg { width: 26px; height: 26px; color: var(--olive); }
.service-card h3 { font-size: 1.15rem; }
.service-card p { font-size: .9rem; flex: 1; }
.service-card .learn-more {
  font-size: .85rem;
  font-weight: 700;
  color: var(--salmon);
  letter-spacing: .03em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--transition);
}
.service-card:hover .learn-more { gap: 8px; }

/* ============================================
   WHY CHOOSE US
   ============================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}
.feature-block {
  text-align: center;
  padding: 36px 24px;
  border-radius: var(--radius-lg);
  background: var(--offwhite);
  border: 1px solid #ece9e3;
  transition: transform var(--transition), box-shadow var(--transition);
}
.feature-block:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.feature-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--salmon);
  color: var(--white);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.feature-block h3 { font-size: 1.1rem; margin-bottom: 8px; }
.feature-block p { font-size: .88rem; }

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}
.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--salmon);
  transition: transform var(--transition), box-shadow var(--transition);
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testimonial-stars { color: var(--salmon); font-size: 1rem; margin-bottom: 12px; }
.testimonial-text {
  font-size: .95rem;
  color: var(--charcoal);
  font-style: italic;
  margin-bottom: 18px;
  line-height: 1.7;
}
.testimonial-author strong { font-size: .9rem; font-weight: 600; color: var(--dark); }
.testimonial-author span { font-size: .82rem; color: var(--charcoal-lt); }

/* ============================================
   CTA BANNER
   ============================================ */
.cta-banner {
  position: relative;
  padding: 90px 0;
  text-align: center;
  overflow: hidden;
  background-image: url('assets/denver-skyline.jpg');
  background-size: cover;
  background-position: center 55%;
  background-attachment: fixed;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(18,52,59, .92) 0%,
    rgba(47,175,143, .82) 55%,
    rgba(18,52,59, .90) 100%
  );
}
.cta-banner .container { position: relative; z-index: 1; }
.cta-banner h2 { color: var(--white); font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 12px; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.cta-banner p { color: rgba(255,255,255,.92); margin-bottom: 28px; font-size: 1.05rem; }
.btn-white { background: var(--white); color: var(--salmon); }
.btn-white:hover { background: var(--mint); }

/* ============================================
   PAGE HERO (inner pages)
   ============================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--charcoal-dk);
  padding: 72px 0 60px;
  text-align: center;
}
.page-hero .container { position: relative; z-index: 1; }

/* Floating decorative icons — flowers, sparkle, leaf, droplet, aroma
   swirl — drifting slowly at low opacity, like a soft watermark, to
   warm up the dark banner without competing with the text. */
.page-hero-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.floral-icon {
  position: absolute;
  color: rgba(234,247,243,.28);
  animation: floral-float ease-in-out infinite;
}
.floral-icon svg { display: block; width: 100%; height: 100%; }
@keyframes floral-float {
  0%   { transform: translate(0,0) rotate(0deg); }
  50%  { transform: translate(0,-16px) rotate(6deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .floral-icon { animation: none; }
}
.page-hero h1 { color: var(--white); margin-bottom: 12px; }
.page-hero p { color: rgba(255,255,255,.72); font-size: 1.05rem; max-width: 520px; margin: 0 auto; }
.page-hero .overline {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--salmon);
  margin-bottom: 10px;
}

/* ============================================
   SERVICES PAGE — Detailed Sections
   ============================================ */
.service-section {
  padding: 72px 0;
  border-bottom: 1px solid #e8e4de;
}
.service-section:last-of-type { border-bottom: none; }
.service-section-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
  align-items: start;
}
.service-number {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 700;
  color: var(--salmon);
  opacity: .2;
  line-height: 1;
  margin-bottom: 10px;
}
.service-icon-lg {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-lg);
  background: var(--offwhite);
  border: 2px solid #ece9e3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.service-side { text-align: center; }
.service-side--photo { text-align: left; }
.service-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.service-body h2 { margin-bottom: 14px; }
.service-body > p { margin-bottom: 22px; line-height: 1.8; }
.service-includes {
  background: var(--offwhite);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.service-includes h4 { margin-bottom: 12px; font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; color: var(--charcoal-lt); }
.service-includes ul { display: flex; flex-direction: column; gap: 7px; }
.service-includes li {
  font-size: .92rem;
  color: var(--charcoal);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.service-includes li::before { content: '→'; color: var(--olive); font-weight: 700; flex-shrink: 0; }

/* ============================================
   ABOUT PAGE
   ============================================ */
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-story-text h2 { margin-bottom: 18px; }
.about-story-text p { margin-bottom: 14px; line-height: 1.8; }
.about-visual {
  background: linear-gradient(135deg, var(--charcoal-dk) 0%, var(--charcoal) 100%);
  border-radius: var(--radius-lg);
  padding: 48px 36px;
  text-align: center;
  color: var(--white);
}
.about-visual .big-number {
  font-family: var(--font-display);
  font-size: 7rem;
  font-weight: 700;
  color: var(--salmon);
  line-height: 1;
  margin-bottom: 8px;
}
.about-visual p { color: rgba(255,255,255,.8); font-size: 1rem; }

.mission-box {
  background: var(--charcoal-dk);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 52px 48px;
  text-align: center;
  max-width: 740px;
  margin: 0 auto;
}
.mission-box .overline { color: var(--salmon); display: block; margin-bottom: 12px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mission-box h2 { color: var(--white); margin-bottom: 18px; }
.mission-box p { color: rgba(255,255,255,.8); font-size: 1.05rem; line-height: 1.8; }

.why-list { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.why-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.why-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--olive);
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.why-item p { font-size: .93rem; color: var(--charcoal); }

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--salmon);
  transition: transform var(--transition), box-shadow var(--transition);
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.value-icon { font-size: 2.2rem; margin-bottom: 14px; }
.value-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.value-card p { font-size: .9rem; color: var(--charcoal-lt); }

/* ============================================
   AREAS PAGE
   ============================================ */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}
.area-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 22px 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid #ece9e3;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  cursor: default;
}
.area-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--olive); }
.area-card .area-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--olive);
  margin: 0 auto 10px;
}
.area-card strong { font-size: .95rem; font-weight: 600; color: var(--dark); }
.area-card span { display: block; font-size: .78rem; color: var(--charcoal-lt); margin-top: 3px; }

.areas-note {
  text-align: center;
  background: var(--offwhite);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  border: 1px dashed #c8c4bc;
  max-width: 560px;
  margin: 0 auto 60px;
}
.areas-note p { margin-bottom: 16px; color: var(--charcoal); }

.map-placeholder {
  background: linear-gradient(135deg, #e2e0da 0%, #d4d1cb 100%);
  border-radius: var(--radius-lg);
  padding: 80px 32px;
  text-align: center;
  border: 2px dashed #b8b4ac;
}
.map-placeholder .map-icon { font-size: 3rem; margin-bottom: 14px; opacity: .5; }
.map-placeholder h3 { color: var(--charcoal); margin-bottom: 8px; }
.map-placeholder p { color: var(--charcoal-lt); font-size: .9rem; }

/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 52px;
  align-items: start;
}
.contact-info-card {
  background: var(--charcoal-dk);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  position: sticky;
  top: 100px;
}
.contact-info-card h3 { color: var(--white); font-size: 1.4rem; margin-bottom: 24px; }
.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}
.contact-detail-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--olive);
  flex-shrink: 0;
}
.contact-detail-icon svg { width: 19px; height: 19px; }
.contact-detail-text strong { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--olive); margin-bottom: 3px; }
.contact-detail-text span { color: rgba(255,255,255,.85); font-size: .93rem; }
/* Phone & email are the two things a visitor most needs to find fast —
   set them apart in coral, bold, and comfortably sized to tap. */
.contact-detail-text a {
  color: var(--salmon);
  font-weight: 700;
  font-size: 1.05rem;
  display: inline-block;
  padding: 2px 0;
}
.contact-detail-text a:hover { color: var(--mint); }

.form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: var(--shadow-md);
}
.form-card h3 { font-size: 1.4rem; margin-bottom: 6px; }
.form-card > p { color: var(--charcoal-lt); margin-bottom: 28px; font-size: .92rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: .83rem;
  font-weight: 600;
  color: var(--dark);
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 15px;
  border: 1.5px solid #ddd8d0;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .93rem;
  color: var(--dark);
  background: var(--offwhite);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(47,175,143,.16);
  background: var(--white);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-submit { width: 100%; padding: 14px; font-size: 1rem; }

.thank-you {
  display: none;
  text-align: center;
  padding: 40px 20px;
}
.thank-you.show { display: block; }
.thank-you-icon { margin-bottom: 14px; color: var(--olive); }
.thank-you-icon svg { width: 46px; height: 46px; }
.thank-you h3 { font-size: 1.5rem; margin-bottom: 10px; color: var(--dark); }
.thank-you p { color: var(--charcoal-lt); }

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--charcoal-dk);
  color: rgba(255,255,255,.75);
  padding: 64px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand { max-width: 280px; }
.footer-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.footer-logo-wrap img {
  height: 48px;
  width: 48px;
  object-fit: contain;
  border-radius: 50%;
  filter: brightness(1.05);
}
.footer-logo-name {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.footer-logo-name span { color: var(--salmon); }
.footer-tagline { font-size: .88rem; line-height: 1.7; }
.footer h4 { color: var(--white); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.footer ul { display: flex; flex-direction: column; gap: 9px; }
.footer ul li a { font-size: .88rem; color: rgba(255,255,255,.65); transition: color var(--transition); }
.footer ul li a:hover { color: var(--salmon); }
.footer-contact li { font-size: .88rem; display: flex; align-items: flex-start; gap: 8px; }
.footer-contact li .fc-icon { color: var(--olive); flex-shrink: 0; margin-top: 1px; }
.footer-contact li .fc-icon svg { width: 16px; height: 16px; display: block; }
.footer-contact li a { color: rgba(255,255,255,.65); }
.footer-contact li a:hover { color: var(--salmon); }

.footer-bottom {
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  color: rgba(255,255,255,.4);
  flex-wrap: wrap;
  gap: 8px;
}
.footer-credit { color: rgba(255,255,255,.4); transition: color var(--transition); }
.footer-credit:hover { color: var(--salmon); }

/* ============================================
   ABOUT — Story Split Editorial
   ============================================ */
.story-split {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 580px;
  display: flex;
  align-items: stretch;
}

/* Photo: right panel, absolutely pinned */
.story-photo-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 56%;
  pointer-events: none;
  background: var(--white); /* blends with section bg so contain whitespace is invisible */
}
.story-photo-panel img {
  width: 100%;
  height: 100%;
  object-fit: contain;        /* show full photo — no cropping */
  object-position: right bottom; /* anchor to right-bottom so tool + person are fully visible */
  display: block;
}
/* Gradient fade: covers only the left edge of the panel */
.story-photo-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--white)              0%,
    var(--white)              8%,
    rgba(255,255,255,.75)    22%,
    rgba(255,255,255,.25)    36%,
    rgba(255,255,255,.04)    48%,
    transparent              58%
  );
}

/* Text column: left half, in-flow */
.story-text-col {
  position: relative;
  z-index: 2;
  width: 50%;
  padding: 90px 0 90px calc((100vw - 1180px) / 2);
  padding-left: max(5%, calc((100vw - 1180px) / 2));
  padding-right: 48px;
}
.story-text-col .overline {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--salmon);
  margin-bottom: 10px;
}
.story-text-col h2 { margin-bottom: 20px; }
.story-text-col p  { margin-bottom: 14px; line-height: 1.85; }

/* Stat badge */
.story-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  padding: 18px 22px;
  background: var(--charcoal-dk);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--salmon);
  max-width: 320px;
}
.story-stat-number {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--salmon);
  line-height: 1;
  flex-shrink: 0;
}
.story-stat-text strong {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 2px;
}
.story-stat-text span { font-size: .8rem; color: rgba(255,255,255,.6); }

/* ============================================
   HOME — HERO CHOICE (Residential vs Commercial)
   ============================================ */
.hero-content--center { max-width: 820px; margin: 0 auto; text-align: center; }
.hero-content--center .hero-sub { margin-left: auto; margin-right: auto; }
.hero-content--center .hero-stars { justify-content: center; margin-top: 8px; }

/* Entrance animation — plays once on page load, each element from a
   different direction so the hero feels alive the moment it appears. */
@keyframes hero-drop      { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-slide-l   { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }
@keyframes hero-rise      { from { opacity: 0; transform: translateY(24px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes card-slide-l   { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes card-slide-r   { from { opacity: 0; transform: translateX(60px); }  to { opacity: 1; transform: translateX(0); } }
@keyframes hero-fade-in   { from { opacity: 0; } to { opacity: 1; } }

.hero-badge { animation: hero-drop .7s cubic-bezier(.2,.8,.2,1) .1s both; }
.hero-content--center h1 { animation: hero-slide-l .75s cubic-bezier(.2,.8,.2,1) .28s both; }
.hero-content--center .hero-sub { animation: hero-rise .75s cubic-bezier(.2,.8,.2,1) .45s both; }
.choice-grid .choice-card:nth-child(1) { animation: card-slide-l .8s cubic-bezier(.2,.8,.2,1) .62s both; }
.choice-grid .choice-card:nth-child(2) { animation: card-slide-r .8s cubic-bezier(.2,.8,.2,1) .74s both; }
.hero-content--center .hero-stars { animation: hero-fade-in .8s ease .95s both; }

@media (prefers-reduced-motion: reduce) {
  .hero-badge,
  .hero-content--center h1,
  .hero-content--center .hero-sub,
  .choice-grid .choice-card,
  .hero-content--center .hero-stars { animation: none; }
}

.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 36px 0 28px;
}
.choice-card {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: var(--radius-lg);
  padding: 34px 26px;
  text-align: center;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.choice-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,.16);
  border-color: var(--salmon);
  box-shadow: var(--shadow-lg);
}
.choice-icon { margin-bottom: 14px; color: var(--white); }
.choice-icon svg { width: 38px; height: 38px; }
.choice-card h3 { color: var(--white); margin-bottom: 6px; }
.choice-card p { color: rgba(255,255,255,.78); font-size: .9rem; margin-bottom: 18px; }
.choice-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--salmon);
  transition: gap var(--transition), color var(--transition);
}
.choice-card:hover .choice-cta { gap: 10px; color: var(--mint); }

/* ============================================
   CALCULATOR (Residential & Commercial)
   ============================================ */
.calculator-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: var(--shadow-md);
  border-top: 4px solid var(--olive);
  max-width: 880px;
  margin: 0 auto;
}
.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 8px;
}
/* Open Space is the odd item out (7th field) — center it on its own row
   instead of leaving it stranded on the left. */
.calc-grid .calc-item:last-child {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.calc-grid .calc-item:last-child input[type="number"] {
  max-width: 220px;
}
.calc-item label {
  display: block;
  font-size: .87rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 6px;
}
.calc-item input[type="number"] {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #DCEEE9;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--dark);
  background: var(--offwhite);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.calc-item input[type="number"]:focus {
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(47,175,143,.15);
  background: var(--white);
}
.calc-note {
  display: block;
  font-size: .78rem;
  color: var(--charcoal-lt);
  margin-top: 5px;
}

.calc-actions { text-align: center; margin: 28px 0 4px; }

@keyframes calc-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.calc-result {
  display: none;
  text-align: center;
  margin-top: 28px;
  padding: 28px 22px;
  background: var(--mint);
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--olive);
}
.calc-result.show { display: block; animation: calc-reveal .45s ease both; }
.calc-result-amount {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--salmon-dk);
  line-height: 1;
  margin-bottom: 10px;
}
.calc-result-label {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--olive-dk);
  margin-bottom: 6px;
}
.calc-result-basis {
  font-size: .85rem;
  color: var(--charcoal);
  max-width: 420px;
  margin: 0 auto 10px;
}
.calc-result-note {
  font-size: .8rem;
  line-height: 1.6;
  color: var(--charcoal-lt);
  max-width: 440px;
  margin: 0 auto 20px;
}
.calc-result-prompt {
  font-size: .92rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 12px;
}
.calc-result-prompt[hidden] { display: none; }

/* Commercial calculator — shown inside the (always-visible) estimate card
   when the combined selected square footage tops 20,000 sq ft. */
.calc-largeproject {
  margin: 20px 0;
  padding: 18px 20px;
  background: var(--white);
  border: 1.5px solid var(--salmon);
  border-radius: var(--radius);
  text-align: left;
}
.calc-largeproject[hidden] { display: none; }
.calc-largeproject-eyebrow {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--salmon-dk);
  margin-bottom: 8px;
}
.calc-largeproject p { font-size: .88rem; line-height: 1.6; color: var(--charcoal); margin: 0; }

/* "Bigger job" card — shown instead of a price when the room/staircase
   (or floor/sq ft) count crosses the threshold; a flat sq-ft formula
   isn't trustworthy at that size, so this points to Contact instead
   of guessing a number. */
.calc-bigjob {
  display: none;
  margin-top: 28px;
  padding: 30px 26px;
  background: var(--mint);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--salmon);
  text-align: center;
}
.calc-bigjob.show { display: block; animation: calc-reveal .45s ease both; }
.calc-bigjob h3 { max-width: 480px; margin: 0 auto 12px; }
.calc-bigjob > p { max-width: 460px; margin: 0 auto 22px; font-size: .95rem; line-height: 1.7; }

.calc-lead-form {
  display: none;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e8e4de;
  text-align: left;
}
.calc-lead-form.show { display: block; }
.calc-lead-form h4 { margin-bottom: 16px; text-align: center; }

.calc-thank-you { display: none; text-align: center; padding: 10px 0 4px; }
.calc-thank-you.show { display: block; }
.calc-thank-you .thank-you-icon { margin-bottom: 10px; }
.calc-thank-you .thank-you-icon svg { width: 38px; height: 38px; }
.calc-thank-you p { color: var(--charcoal); }

.calc-error {
  display: none;
  color: #c0392b;
  font-size: .85rem;
  text-align: center;
  margin-top: 12px;
}

/* Cross-link between Residential/Commercial, near the bottom of each page */
.cross-link { padding: 6px 0 40px; text-align: center; }
.cross-link-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--olive-dk);
  transition: gap var(--transition), color var(--transition);
}
.cross-link-text:hover { gap: 10px; color: var(--olive); }
.calc-error.show { display: block; }

/* Commercial — one range picker per floor */
.floors-container { margin-top: 22px; }
.floor-block {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px dashed #DCEEE9;
}
.floor-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.floor-block-label {
  display: block;
  font-size: .92rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 12px;
}
.range-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.range-btn {
  padding: 13px 10px;
  border-radius: var(--radius);
  border: 1.5px solid #DCEEE9;
  background: var(--offwhite);
  color: var(--dark);
  font-size: .88rem;
  font-weight: 600;
  text-align: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.range-btn:hover { border-color: var(--olive); }
.range-btn.active {
  background: var(--olive);
  border-color: var(--olive);
  color: var(--white);
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up.delay-1 { transition-delay: .1s; }
.fade-up.delay-2 { transition-delay: .2s; }
.fade-up.delay-3 { transition-delay: .3s; }
.fade-up.delay-4 { transition-delay: .4s; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .about-story { grid-template-columns: 1fr; }
  .about-visual { max-width: 420px; }
  .values-grid { grid-template-columns: 1fr 1fr 1fr; }
  .service-section-inner { grid-template-columns: 1fr; }
  .service-side { display: flex; align-items: center; gap: 20px; text-align: left; }
  .service-number { font-size: 3.5rem; margin-bottom: 0; opacity: .15; }
}

@media (max-width: 900px) {
  .hamburger { display: flex; }
  .nav-links { display: none; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-info-card { position: static; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .choice-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .calculator-card { padding: 30px 22px; }

  /* Story split — stacked on tablet/mobile */
  .story-split {
    flex-direction: column;
    min-height: unset;
  }
  .story-photo-panel {
    position: relative;
    width: 100%;
    height: 420px;
    right: auto; top: auto; bottom: auto;
  }
  .story-photo-panel img {
    object-fit: contain;
    object-position: center bottom;
  }
  .story-photo-fade {
    background: linear-gradient(
      to bottom,
      transparent 50%,
      rgba(255,255,255,.5) 78%,
      var(--white) 100%
    );
  }
  .story-text-col {
    width: 100%;
    padding: 40px 5% 64px;
  }
  .story-stat { max-width: 100%; }
}

@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .hero-content { padding: 60px 0; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .hero-buttons { gap: 10px; }
  .mission-box { padding: 36px 24px; }
  .form-card { padding: 28px 20px; }
  .top-bar .container { flex-direction: column; gap: 4px; text-align: center; }
}

@media (max-width: 480px) {
  .areas-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
}