/* =========================================================
   Future Roofing Co. — Styles
   ========================================================= */

:root {
  --color-black: #0d0d0d;
  --color-charcoal: #161616;
  --color-charcoal-2: #1f1f1f;
  --color-cream: #f6f5f0;
  --color-white: #ffffff;
  --color-gray: #6b6b6b;
  --color-gray-light: #d9d9d4;
  --color-accent: #d4ff3f;
  --color-accent-dark: #a8cc20;

  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'Inter', sans-serif;

  --container-width: 1200px;
  --radius: 10px;
  --header-height: 84px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-charcoal);
  background: var(--color-cream);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 1.05;
}

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-accent {
  background: var(--color-accent);
  color: var(--color-black);
}
.btn-accent:hover { background: var(--color-accent-dark); }

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.btn-lg { padding: 16px 32px; font-size: 1rem; }
.btn-block { width: 100%; }

/* ---------- Topbar ---------- */
.topbar {
  position: relative;
  z-index: 100;
  background: var(--color-accent);
  color: var(--color-black);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 24px;
  font-size: 0.82rem;
}
.topbar-msg { margin: 0; font-weight: 700; }
.topbar-sep { margin: 0 8px; opacity: 0.6; }
.topbar-actions { display: flex; gap: 20px; }
.topbar-link { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.topbar-link:hover { opacity: 0.7; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13, 13, 13, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* The open mobile menu becomes part of this same element (it flows
   inside header-inner via flex-wrap), so its own content ends up
   sampled by this backdrop-filter, causing a blur/ghosting artifact
   over the nav links. Not needed while the panel is open anyway. */
.site-header.nav-open { backdrop-filter: none; }
.header-inner {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* The logo is deliberately taller than the header bar and top-aligned
   (instead of the header's default vertical centering) so it breaks out
   past the bottom edge of the bar into the hero below it, rather than
   staying neatly boxed inside the nav like every other element. */
.site-header .logo {
  position: relative;
  z-index: 1;
}
.header-logo-img {
  /* Fully contained within the bar (not overflowing) on purpose: the
     header is sticky, so anything spilling past its bottom edge would
     ride on top of whatever section is scrolled underneath it, washing
     out against light backgrounds further down the page. */
  height: 70px;
  width: auto;
}
.footer-logo-img {
  width: 220px;
  height: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1;
  justify-content: center;
  white-space: nowrap;
}
.main-nav > a {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-white);
  position: relative;
}
.main-nav > a:hover { color: var(--color-accent); }

/* Dropdown */
.nav-item { position: relative; }
.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-white);
  padding: 0;
}
.dropdown-toggle:hover { color: var(--color-accent); }
.dropdown-toggle .chevron { transition: transform 0.15s ease; }

/* .dropdown-menu is an invisible hit-area that starts flush against the
   toggle button (no gap) so the mouse never leaves a hoverable element on
   its way down to the visible panel — the 18px of visual spacing is done
   with padding-top *inside* this hoverable box, not a positioned gap, so
   hover/pointer-events never drop out mid-travel. */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 50;
}
.dropdown-panel {
  min-width: 240px;
  background: var(--color-charcoal-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
  transform: translateY(-6px);
  transition: transform 0.15s ease;
}
.dropdown-menu a {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-gray-light);
}
.dropdown-menu a:hover {
  background: rgba(212, 255, 63, 0.1);
  color: var(--color-accent);
}
.dropdown-all {
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px !important;
  font-weight: 700 !important;
  color: var(--color-accent) !important;
}

.nav-item:hover .dropdown-menu,
.nav-item.open .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
}
.nav-item:hover .dropdown-panel,
.nav-item.open .dropdown-panel {
  transform: translateY(0);
}
.nav-item.open .dropdown-toggle .chevron { transform: rotate(180deg); }

.header-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: var(--color-white);
  background: var(--color-black);
  /* No overflow:hidden here on purpose: the decorative logo mark is meant
     to bleed up past the top of this section and get tucked behind the
     header via z-index, not get hard-clipped at the section boundary. */
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, #262a1a 0%, var(--color-black) 55%),
              linear-gradient(120deg, #1a1a1a 0%, #0d0d0d 100%);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  padding-top: 60px;
  padding-bottom: 60px;
}
.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.8rem;
  color: var(--color-accent-dark);
  margin-bottom: 18px;
}
.eyebrow--light { color: var(--color-accent); }
.eyebrow-link { text-decoration: underline; text-underline-offset: 3px; }
.hero h1, .page-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  margin-bottom: 22px;
}
.page-hero h1.light { color: var(--color-white); }
.hero h1 .accent { color: var(--color-accent); }
.hero-sub {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--color-gray);
  max-width: 560px;
  margin-bottom: 34px;
}
.hero-sub--light { color: var(--color-gray-light); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.hero .btn-outline { color: var(--color-white); border-color: rgba(255,255,255,0.5); }
.hero .btn-outline:hover { border-color: var(--color-white); }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  padding: 160px 0 70px;
  background: var(--color-cream);
}
.page-hero--dark {
  background: var(--color-black);
  color: var(--color-white);
}
.page-hero .hero-sub { margin-bottom: 0; }

/* ---------- Trust bar ---------- */
/* Individual chips on a dark ground instead of one continuous accent-
   color band, so the lime reads as four deliberate accents rather than
   a single flat block of color. */
.trust-bar {
  background: var(--color-black);
  padding: 46px 0;
}
.trust-bar-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  text-align: center;
}
.trust-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  background: var(--color-accent);
  color: var(--color-black);
  border-radius: 12px;
  padding: 20px 16px;
}
.trust-item strong { font-family: var(--font-display); font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.02em; }
.trust-item span { font-size: 0.82rem; opacity: 0.7; }

/* ---------- Hero testimonial card (homepage, split layout) ---------- */
.hero-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  align-items: center;
  max-width: none;
}
.testimonial-hero-card {
  background: var(--color-charcoal-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 34px;
}
.testimonial-hero-card .quote {
  font-size: 1.1rem;
  color: var(--color-white);
  margin: 14px 0 22px;
}
.testimonial-hero-row { display: flex; align-items: center; gap: 14px; }
.testimonial-hero-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
}
.testimonial-hero-name { font-weight: 700; color: var(--color-white); }
.testimonial-hero-sample {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ---------- How it works (steps strip) ---------- */
.steps-strip {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 16px;
}
.step-item h3 { font-size: 1.05rem; margin-bottom: 8px; }
.step-item p { font-size: 0.9rem; color: var(--color-gray); margin-bottom: 0; }

/* ---------- Full-bleed service feature slabs (homepage) ---------- */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 50px;
}
.feature-slab {
  position: relative;
  min-height: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 38px;
  background:
    linear-gradient(180deg, rgba(13,13,13,0.05) 0%, rgba(13,13,13,0.95) 88%),
    repeating-linear-gradient(128deg, #202020 0px, #202020 34px, #171717 34px, #171717 68px);
  color: var(--color-white);
}
.feature-slab--photo { background-size: cover; background-position: center; }
.feature-slab-photo-note {
  position: absolute;
  bottom: 16px;
  right: 20px;
  font-size: 0.62rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
}
.feature-slab-content { max-width: 560px; }
.feature-slab h3 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: 10px; }
.feature-slab p { color: var(--color-gray-light); margin-bottom: 14px; font-size: 0.98rem; }
.feature-slab .service-link { color: var(--color-accent); }

/* ---------- Covered Process (dark, three phases) ---------- */
.process-section { background: var(--color-charcoal); color: var(--color-white); }
.process-phases {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.process-phase { border-top: 2px solid var(--color-accent); padding-top: 20px; }
.process-phase-num {
  font-family: var(--font-display);
  color: var(--color-accent);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}
.process-phase h3 { font-size: 1.2rem; margin: 10px 0 10px; }
.process-phase p { font-size: 0.9rem; color: var(--color-gray-light); margin-bottom: 0; }
.cleanup-steps {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cleanup-steps li {
  font-size: 0.86rem;
  color: var(--color-gray-light);
  padding-left: 26px;
  position: relative;
}
.cleanup-steps li strong { color: var(--color-white); }
.cleanup-steps li::before {
  content: attr(data-n);
  position: absolute;
  left: 0;
  top: -1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-black);
  font-size: 0.62rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
}

/* ---------- The Future Guarantee ---------- */
.guarantee-section { background: var(--color-cream); }
.guarantee-card {
  margin-top: 40px;
  background: var(--color-white);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius);
  padding: 40px;
  display: flex;
  gap: 30px;
  align-items: flex-start;
}
.guarantee-mark {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.guarantee-card h3 { font-size: 1.4rem; margin-bottom: 10px; }
.guarantee-card p { color: var(--color-gray); font-size: 0.98rem; margin-bottom: 0; }
.guarantee-points {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.guarantee-point {
  background: var(--color-white);
  border: 1px solid rgba(0,0,0,0.07);
  border-top: 3px solid var(--color-accent);
  border-radius: 14px;
  padding: 24px;
}
.guarantee-point h4 { font-size: 1.02rem; margin-bottom: 8px; }
.guarantee-point p { font-size: 0.88rem; color: var(--color-gray); margin-bottom: 0; }

/* ---------- Mobile bottom bar ---------- */
.mobile-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--color-black);
  border-top: 1px solid rgba(255,255,255,0.1);
  align-items: center;
  justify-content: space-around;
  padding: 10px 16px;
}
.mobile-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--color-white);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  width: 78px;
}
.mobile-bar-item svg { width: 20px; height: 20px; }
.mobile-bar-call {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -30px;
  border: 4px solid var(--color-cream);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  flex-shrink: 0;
}

/* ---------- Section shared ---------- */
section { padding: 100px 0; }
.section-eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  margin-bottom: 10px;
}
.section-eyebrow--light { color: var(--color-accent); }
.section-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 20px;
}
.section-title--light { color: var(--color-white); }

/* ---------- Services ---------- */
.services-grid {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.service-card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 32px 26px;
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease, border-color 0.25s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-accent);
  background: var(--color-charcoal);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}


.service-icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: var(--color-black);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.3s ease;
}
.service-card:hover .service-icon {
  background: var(--color-accent);
  color: var(--color-black);
  transform: scale(1.08) rotate(-4deg);
}

.service-card h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
  transition: color 0.25s ease;
}
.service-card:hover h3 { color: var(--color-white); }

.service-card p {
  font-size: 0.92rem;
  color: var(--color-gray);
  margin-bottom: 0;
  transition: color 0.25s ease;
}
.service-card:hover p { color: var(--color-gray-light); }

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  transition: color 0.25s ease;
}
.service-card:hover .service-link { color: var(--color-accent); }
.service-link-arrow { display: inline-block; transition: transform 0.25s ease; }
.service-card:hover .service-link-arrow { transform: translateX(4px); }

.services-grid--compact .service-card p { display: none; }

/* Cards fade/rise into view as they cross into the viewport, staggered
   per-card via --reveal-delay (set inline in the template). Scoped to
   opacity only so it never fights the hover transform above. */
.service-card.reveal {
  opacity: 0;
  transition: opacity 0.6s ease var(--reveal-delay, 0s);
}
.service-card.reveal.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .service-card.reveal { opacity: 1; transition: none; }
}

/* ---------- Why us ---------- */
.why-us {
  background: var(--color-charcoal);
  color: var(--color-white);
}
.why-us-sub {
  max-width: 640px;
  color: var(--color-gray-light);
  font-size: 1.05rem;
}
.why-grid {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.why-tile {
  border-top: 2px solid var(--color-accent);
  padding-top: 20px;
}
.why-number {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-accent);
  letter-spacing: 0.1em;
}
.why-tile h3 {
  font-size: 1.2rem;
  margin: 10px 0;
}
.why-tile p {
  font-size: 0.92rem;
  color: var(--color-gray-light);
  margin-bottom: 0;
}
.why-us--teaser { padding: 80px 0; }
.why-us-teaser-inner .why-us-sub { margin-bottom: 26px; }
.why-us--teaser .btn-outline { color: var(--color-white); border-color: rgba(255,255,255,0.5); }
.why-us--teaser .btn-outline:hover { border-color: var(--color-white); }

/* ---------- Testimonials ---------- */
.testimonials-grid {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid rgba(0,0,0,0.06);
}
.stars {
  color: var(--color-accent-dark);
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.testimonial-card p {
  font-style: italic;
  color: var(--color-charcoal);
}
.testimonial-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-gray);
}

/* ---------- Service area map ---------- */
.service-map-section {
  background: var(--color-black);
  color: var(--color-white);
}
.service-map-card {
  position: relative;
  max-width: 820px;
  margin: 50px auto 0;
  background: var(--color-charcoal-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 30px;
  overflow: hidden;
}
.service-map-logo-mark {
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 300px;
  height: auto;
  opacity: 0.06;
  pointer-events: none;
}
.service-map-svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
}
.service-map-svg .county {
  fill: #2a2a2a;
  stroke: #3a3a3a;
  stroke-width: 0.75;
  transition: fill 0.15s ease;
}
.service-map-svg .county--served {
  fill: var(--color-accent);
  stroke: var(--color-black);
  stroke-width: 1.25;
}
.service-map-svg .county:hover { fill: #3f3f3f; }
.service-map-svg .county--served:hover { fill: var(--color-accent-dark); }
.service-map-svg .state-outline {
  fill: none;
  stroke: rgba(212, 255, 63, 0.55);
  stroke-width: 2.5;
}
.map-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -130%);
  background: var(--color-black);
  color: var(--color-white);
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  transition: opacity 0.1s ease;
}
.map-tooltip.visible { opacity: 1; }
.map-tooltip .tooltip-tag {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.map-tooltip.tooltip--muted .tooltip-tag { color: var(--color-gray-light); }

.service-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: center;
  margin-top: 28px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-gray-light);
}
.legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: middle;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
}
.legend-swatch--served {
  background: var(--color-accent);
  border-color: var(--color-black);
}

/* ---------- Service area ---------- */
.service-area-teaser-inner { max-width: 640px; }
.service-area-copy p { color: var(--color-gray); max-width: 460px; }
.service-area-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 32px;
  border: 1px solid rgba(0,0,0,0.06);
}
.service-area-lists--page { margin: 10px auto 0; max-width: 720px; }
.service-area-lists--single { margin: 0 auto; grid-template-columns: 1fr; max-width: 360px; }
.area-col h3 {
  font-size: 1.1rem;
  margin-bottom: 14px;
  color: var(--color-accent-dark);
}
.area-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 600;
}

/* ---------- Service narrative ---------- */
.service-narrative { padding-top: 20px; padding-bottom: 60px; }
.service-narrative .lede {
  font-size: 1.15rem;
  color: var(--color-gray);
  max-width: 760px;
  margin-bottom: 40px;
}
.service-narrative .section-title {
  font-size: 1.6rem;
  margin-top: 50px;
  margin-bottom: 8px;
}
.service-narrative .check-list { margin-top: 24px; max-width: 700px; }
.service-narrative > .container > p:not(.lede) {
  max-width: 760px;
  color: var(--color-gray);
  font-size: 1.02rem;
}
.narrative-covered {
  font-weight: 700;
  color: var(--color-accent-dark);
  font-size: 1.1rem;
}
.narrative-fineprint {
  max-width: 760px;
  font-size: 0.78rem;
  color: var(--color-gray);
  opacity: 0.8;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.service-narrative--tight { padding-bottom: 20px; }

/* ---------- FAQ ---------- */
.faq-section { background: var(--color-white); padding-top: 0; }
.faq-list {
  margin-top: 40px;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius);
  padding: 18px 24px;
  background: var(--color-cream);
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--color-accent-dark);
  margin-left: 16px;
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p {
  margin: 14px 0 0;
  color: var(--color-gray);
  font-size: 0.95rem;
}

/* ---------- Service detail page ---------- */
.service-detail-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
}
.check-list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.check-list li {
  position: relative;
  padding-left: 32px;
  font-size: 1.02rem;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--color-black);
  border-bottom: 2px solid var(--color-black);
  transform: rotate(-45deg);
}
.service-detail-aside {
  background: var(--color-charcoal);
  color: var(--color-white);
  border-radius: var(--radius);
  padding: 30px;
  align-self: start;
}
.service-detail-aside h3 {
  font-size: 1.15rem;
  margin-bottom: 12px;
}
.service-detail-aside p {
  color: var(--color-gray-light);
  font-size: 0.92rem;
}
.footer-link-more {
  font-weight: 700;
  color: var(--color-accent-dark);
  font-size: 0.9rem;
}

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--color-black);
  color: var(--color-white);
  text-align: center;
}
.cta-banner-inner { max-width: 640px; margin: 0 auto; }
.cta-banner p { color: var(--color-gray-light); margin-bottom: 30px; }
.cta-banner .hero-actions { justify-content: center; }
.cta-banner .btn-outline { color: var(--color-white); border-color: rgba(255,255,255,0.5); }
.cta-banner .btn-outline:hover { border-color: var(--color-white); }

/* ---------- Contact ---------- */
.contact {
  background: var(--color-black);
  color: var(--color-white);
}
.contact--page { padding-top: 160px; }
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px;
}
.contact-details {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--color-accent);
}
.contact-form {
  background: var(--color-charcoal-2);
  border-radius: var(--radius);
  padding: 32px;
  border: 1px solid rgba(255,255,255,0.08);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-field { margin-bottom: 16px; }
.form-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-light);
  margin-bottom: 6px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.form-field textarea { resize: vertical; }
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status {
  margin: 16px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-accent);
  min-height: 1.2em;
}
.form-status--error { color: #ff6b6b; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-black);
  color: var(--color-gray-light);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 70px 24px 50px;
}
.footer-brand p {
  margin-top: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-accent);
}
.footer-col h4 {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--color-white);
  margin-bottom: 16px;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.9rem;
}
.footer-col a:hover { color: var(--color-accent); }
.footer-col .footer-link-more { display: inline-block; margin-top: 12px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 22px 0;
  font-size: 0.82rem;
  color: var(--color-gray);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-bar-inner { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .service-area-lists,
  .service-detail-inner,
  .contact-inner { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .hero-split { grid-template-columns: 1fr; }
  .steps-strip { grid-template-columns: repeat(2, 1fr); }
  .process-phases { grid-template-columns: 1fr; }
  .guarantee-points { grid-template-columns: repeat(2, 1fr); }
  .guarantee-card { flex-direction: column; }
}

@media (max-width: 760px) {
  .topbar-inner { flex-direction: column; gap: 6px; padding: 10px 24px; text-align: center; }
  .topbar-actions { gap: 16px; }

  .main-nav, .header-cta { display: none; }
  .nav-toggle { display: flex; }

  /* Mobile menu flows in normal document flow via flex order, instead of
     absolute positioning — avoids fragile magic-number offsets when
     content height (e.g. an open dropdown) changes. */
  .site-header.nav-open .header-inner {
    height: auto;
    flex-wrap: wrap;
    padding-top: 18px;
    padding-bottom: 18px;
    row-gap: 18px;
  }
  .site-header .logo { order: 1; }
  .site-header .nav-toggle { order: 2; }

  .site-header.nav-open .main-nav {
    order: 3;
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }
  .site-header.nav-open .main-nav > a {
    padding: 12px 0;
    width: 100%;
  }
  .site-header .nav-item { width: 100%; }
  .site-header .dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 12px 0;
  }
  .site-header .dropdown-menu {
    position: static;
    left: auto;
    transform: none;
    padding-top: 0;
    opacity: 1;
    pointer-events: auto;
    display: none;
    width: 100%;
    margin-bottom: 6px;
  }
  .site-header .nav-item.open .dropdown-menu { display: block; }
  .site-header .dropdown-panel {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    transform: none;
  }

  .site-header.nav-open .header-cta {
    order: 4;
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .services-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .page-hero { padding: 130px 0 50px; }
  section { padding: 70px 0; }
  .steps-strip { grid-template-columns: 1fr; }
  .guarantee-points { grid-template-columns: 1fr; }

  .mobile-bar { display: flex; }
  body { padding-bottom: 84px; }
}