/* ============================================================
   ADG Main Site — additions on top of shared.css
   --------------------------------------------------------------
   shared.css covers the design system: tokens, typography,
   buttons, hero, form-card, social-proof, empathy, differentiators,
   gallery, how-it-works, testimonials, footer (PPC version),
   sticky-cta, fade-in.

   This file adds the components that only the multi-page main
   site needs:
     1. Site navigation (sticky header with dropdowns + mobile menu)
     2. Site footer (replaces the simple PPC footer)
     3. Breadcrumb trail
     4. Service card grid (Big 3 cards for Home + /services/)
     5. Certifications strip (large logo wall)
     6. Weatherization upsell strip
     7. FAQ accordion (FAQPage schema content)
     8. Location meta block (city pages)
     9. Service-areas link strip
    10. Page hero variants (compact, no form)
    11. Visually hidden skip link

   Tokens (--color-*, --space-*, --font-*) are inherited from
   shared.css so this file just composes them.
   ============================================================ */


/* ============================================================
   1. SITE NAVIGATION
   Sticky top bar. Desktop: logo + dropdown menus + phone CTA.
   Mobile: logo + hamburger that opens a full-screen overlay.
   ============================================================ */

.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--color-dark);
  color: var(--color-white);
  padding: 8px 16px;
  z-index: 9999;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: 8px; }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  /* Subtle shadow that strengthens once the user scrolls */
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.site-nav__container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 72px;
}

.site-nav__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.site-nav__logo img {
  height: 40px;
  width: auto;
  display: block;
}

/* Desktop nav list — hidden on mobile */
.site-nav__list {
  display: none;
  list-style: none;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
}

.site-nav__item {
  position: relative;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-dark);
  padding: 10px 4px;
  text-decoration: none;
  position: relative;
  transition: color 0.15s ease;
}
.site-nav__link:hover { color: var(--color-red); }
.site-nav__link--active { color: var(--color-red); }
.site-nav__link--active::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: 2px;
  background: var(--color-red);
  border-radius: 1px;
}

.site-nav__caret {
  display: inline-block;
  transition: transform 0.2s ease;
}
.site-nav__item--open .site-nav__caret { transform: rotate(180deg); }

/* Dropdown panel */
.site-nav__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  padding: var(--space-xs);
  list-style: none;
  margin: 0;
  display: none;
  z-index: 1001;
}
.site-nav__item--open .site-nav__dropdown,
.site-nav__item:hover .site-nav__dropdown,
.site-nav__item:focus-within .site-nav__dropdown {
  display: block;
}

.site-nav__dropdown-link {
  display: block;
  padding: 10px 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-dark);
  text-decoration: none;
  border-radius: var(--radius);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.site-nav__dropdown-link:hover {
  background: var(--color-light-gray);
  color: var(--color-red);
}
.site-nav__dropdown-link--all {
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
  padding-top: 12px;
  font-size: 0.85rem;
  color: var(--color-medium-gray);
}

/* Phone CTA in nav (desktop) */
.site-nav__phone {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.1s ease;
  flex-shrink: 0;
}
.site-nav__phone:hover { background: var(--color-red-hover); }
.site-nav__phone:active { transform: scale(0.98); }
.site-nav__phone svg { flex-shrink: 0; }

/* Mobile hamburger button */
.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.site-nav__toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-dark);
  position: relative;
  transition: background 0.2s ease;
}
.site-nav__toggle-bar::before,
.site-nav__toggle-bar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--color-dark);
  transition: transform 0.2s ease, top 0.2s ease;
}
.site-nav__toggle-bar::before { top: -7px; }
.site-nav__toggle-bar::after  { top:  7px; }

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar { background: transparent; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar::before { top: 0; transform: rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar::after  { top: 0; transform: rotate(-45deg); }

/* Mobile menu overlay */
.site-nav__menu {
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--color-white);
  padding: var(--space-md);
  overflow-y: auto;
  display: none;
  z-index: 999;
}
.site-nav__menu.is-open { display: block; }

.site-nav__menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-nav__menu-link {
  display: block;
  padding: 14px 4px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-dark);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
}
.site-nav__menu-link:hover { color: var(--color-red); }

.site-nav__menu-sub {
  list-style: none;
  padding: 0 0 8px var(--space-md);
  margin: 0;
}
.site-nav__menu-sub .site-nav__menu-link {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-medium-gray);
  border-bottom: none;
  padding: 8px 4px;
}

.site-nav__menu-cta {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.site-nav__menu-cta .btn,
.site-nav__menu-cta .site-nav__phone {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

/* Desktop breakpoint */
@media (min-width: 1024px) {
  .site-nav__list { display: flex; }
  .site-nav__phone { display: inline-flex; }
  .site-nav__toggle { display: none; }
  .site-nav__menu { display: none !important; }
}


/* ============================================================
   2. SITE FOOTER (replaces PPC footer for the main site)
   4 columns on desktop, stacked on mobile.
   ============================================================ */

.site-footer-main {
  background: var(--color-dark);
  color: rgba(255,255,255,0.85);
  padding: var(--space-xl) 0 var(--space-md);
  font-size: 0.92rem;
}

.site-footer-main__container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.site-footer-main__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .site-footer-main__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: var(--space-md);
  }
}

.site-footer-main__col h4 {
  color: var(--color-white);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.site-footer-main__brand-logo {
  height: 48px;
  width: auto;
  margin-bottom: var(--space-sm);
}
.site-footer-main__tagline {
  color: rgba(255,255,255,0.75);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: var(--space-md);
}
.site-footer-main__nap {
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  font-size: 0.92rem;
  margin: 0;
}
.site-footer-main__nap a {
  color: var(--color-white);
  font-weight: 600;
  text-decoration: none;
}
.site-footer-main__nap a:hover { color: var(--color-red); }

.site-footer-main__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer-main__list li { margin-bottom: 8px; }
.site-footer-main__list a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color 0.15s ease;
  font-size: 0.93rem;
}
.site-footer-main__list a:hover { color: var(--color-red); }

.site-footer-main__hours {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
  font-size: 0.92rem;
  line-height: 1.8;
}
.site-footer-main__hours strong { color: var(--color-white); }

.site-footer-main__certs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.site-footer-main__cert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-white);
}

.site-footer-main__bar {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
}
@media (min-width: 768px) {
  .site-footer-main__bar {
    flex-direction: row;
    justify-content: space-between;
  }
}
.site-footer-main__bar-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer-main__bar-links a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}
.site-footer-main__bar-links a:hover { color: var(--color-white); }


/* ============================================================
   3. BREADCRUMB
   Sits between nav and hero on inner pages.
   ============================================================ */

.breadcrumb {
  background: var(--color-light-gray);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 0;
  font-size: 0.85rem;
}
.breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-medium-gray);
}
.breadcrumb__item a {
  color: var(--color-medium-gray);
  text-decoration: none;
  font-weight: 500;
}
.breadcrumb__item a:hover { color: var(--color-red); }
.breadcrumb__item--current {
  color: var(--color-dark);
  font-weight: 600;
}
.breadcrumb__sep {
  color: var(--color-border);
  font-weight: 700;
}


/* ============================================================
   4. SERVICE CARD GRID (Big 3 — Kitchen / Bathroom / Basement)
   Used on Home and /services/.
   ============================================================ */

.service-grid {
  padding: var(--space-xl) 0;
  background: var(--color-white);
}
.service-grid__header {
  text-align: center;
  margin-bottom: var(--space-lg);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--space-md);
}
.service-grid__eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-xs);
}
.service-grid__heading {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}
.service-grid__sub {
  color: var(--color-medium-gray);
  font-size: 1.05rem;
  line-height: 1.65;
}

.service-grid__cards {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .service-grid__cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .service-grid__heading { font-size: 2.5rem; }
}

.service-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-dark);
  text-decoration: none;
  aspect-ratio: 4 / 5;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}
.service-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.service-card:hover .service-card__img { transform: scale(1.06); }
.service-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,26,46,0.05) 40%, rgba(26,26,46,0.85) 100%);
}
.service-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md);
  color: var(--color-white);
}
.service-card__title {
  color: var(--color-white);
  font-size: 1.5rem;
  margin-bottom: 6px;
}
.service-card__desc {
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 12px;
}
.service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-white);
  letter-spacing: 0.04em;
}
.service-card__cta::after {
  content: '→';
  display: inline-block;
  transition: transform 0.2s ease;
}
.service-card:hover .service-card__cta::after { transform: translateX(4px); }


/* ============================================================
   5. CERTIFICATIONS STRIP (large logo wall)
   Used on /weatherization/ and /about/.
   ============================================================ */

.cert-strip {
  background: var(--color-light-gray);
  padding: var(--space-xl) 0;
}
.cert-strip__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-lg);
  padding: 0 var(--space-md);
}
.cert-strip__heading {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}
.cert-strip__sub {
  color: var(--color-medium-gray);
  font-size: 1rem;
  line-height: 1.6;
}
.cert-strip__grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .cert-strip__grid { grid-template-columns: repeat(3, 1fr); }
  .cert-strip__heading { font-size: 2.4rem; }
}
@media (min-width: 1024px) {
  .cert-strip__grid { grid-template-columns: repeat(6, 1fr); }
}

.cert-tile {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.cert-tile:hover {
  transform: translateY(-3px);
  border-color: var(--color-red);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
.cert-tile__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,0,0,0.08);
  border-radius: 50%;
  color: var(--color-red);
}
.cert-tile__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-dark);
  margin-bottom: 4px;
}
.cert-tile__desc {
  font-size: 0.82rem;
  color: var(--color-medium-gray);
  line-height: 1.4;
  margin: 0;
}


/* ============================================================
   6. WEATHERIZATION UPSELL STRIP
   Bold horizontal band on Home + service pages teasing
   the /weatherization/ page.
   ============================================================ */

.weather-upsell {
  background: linear-gradient(135deg, var(--color-dark) 0%, #2a2a4a 100%);
  color: var(--color-white);
  padding: var(--space-xl) 0;
  position: relative;
  overflow: hidden;
}
.weather-upsell::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(212,0,0,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.weather-upsell__container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: center;
}
@media (min-width: 768px) {
  .weather-upsell__container {
    grid-template-columns: 2fr 1fr;
    gap: var(--space-lg);
  }
}
.weather-upsell__eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: 12px;
}
.weather-upsell__heading {
  color: var(--color-white);
  font-size: 1.8rem;
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}
@media (min-width: 768px) {
  .weather-upsell__heading { font-size: 2.4rem; }
}
.weather-upsell__text {
  color: rgba(255,255,255,0.85);
  font-size: 1.02rem;
  line-height: 1.65;
  margin-bottom: 0;
}
.weather-upsell__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.weather-upsell__certs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-md);
}
.weather-upsell__cert {
  padding: 5px 10px;
  background: rgba(255,255,255,0.1);
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: 0.04em;
}


/* ============================================================
   7. FAQ ACCORDION (FAQPage schema markup)
   Click to expand. Uses native <details> for accessibility.
   ============================================================ */

.faq {
  padding: var(--space-xl) 0;
  background: var(--color-white);
}
.faq__container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}
.faq__heading {
  font-size: 2rem;
  text-align: center;
  margin-bottom: var(--space-sm);
}
.faq__sub {
  text-align: center;
  color: var(--color-medium-gray);
  margin-bottom: var(--space-lg);
}
@media (min-width: 768px) {
  .faq__heading { font-size: 2.4rem; }
}

.faq-item {
  background: var(--color-light-gray);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  overflow: hidden;
  transition: background-color 0.2s ease;
}
.faq-item[open] {
  background: var(--color-white);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  border: 1px solid var(--color-border);
}
.faq-item__q {
  list-style: none;
  cursor: pointer;
  padding: var(--space-md);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { content: ''; }
.faq-item__q::after {
  content: '+';
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-red);
  color: var(--color-white);
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.2s ease;
}
.faq-item[open] .faq-item__q::after {
  content: '−';
  transform: rotate(180deg);
}
.faq-item__a {
  padding: 0 var(--space-md) var(--space-md);
  color: var(--color-medium-gray);
  line-height: 1.7;
  font-size: 0.98rem;
}
.faq-item__a p { margin-bottom: 12px; }
.faq-item__a p:last-child { margin-bottom: 0; }


/* ============================================================
   8. LOCATION META BLOCK (city pages)
   Quick stats line: "Service area: Orland Park, IL · 4.9★ · 30+ yrs"
   ============================================================ */

.loc-meta {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-sm) 0;
}
.loc-meta__list {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  list-style: none;
  font-size: 0.9rem;
}
.loc-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-medium-gray);
}
.loc-meta__item strong {
  color: var(--color-dark);
  font-weight: 700;
}


/* ============================================================
   9. SERVICE AREAS LINK STRIP
   On every service page — links to all 10 city pages.
   ============================================================ */

.service-areas {
  padding: var(--space-xl) 0;
  background: var(--color-light-gray);
}
.service-areas__container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  text-align: center;
}
.service-areas__heading {
  font-size: 1.8rem;
  margin-bottom: var(--space-sm);
}
.service-areas__sub {
  color: var(--color-medium-gray);
  margin-bottom: var(--space-md);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.service-areas__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.service-areas__list a {
  display: inline-block;
  padding: 8px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 50px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-dark);
  text-decoration: none;
  transition: all 0.15s ease;
}
.service-areas__list a:hover {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}


/* ============================================================
   10. PAGE HERO VARIANT (compact, no form)
   For inner pages where the form would be excessive: /about/,
   /gallery/, /reviews/, /locations/ hub.
   ============================================================ */

.hero--compact {
  min-height: 360px;
}
.hero--compact .hero__container {
  flex-direction: column;
  text-align: center;
}
.hero--compact .hero__content {
  text-align: center;
  display: block;
  flex: none;
}
.hero--compact .hero__form-wrapper { display: none; }
.hero--compact .hero__badges,
.hero--compact .hero__phone,
.hero--compact .hero__secondary {
  justify-content: center;
}


/* ============================================================
   11. WHAT'S INCLUDED (scope list on service pillar pages)
   Three-col bullet grid signaling topical authority.
   ============================================================ */

.scope {
  padding: var(--space-xl) 0;
  background: var(--color-white);
}
.scope__container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}
.scope__header {
  text-align: center;
  margin-bottom: var(--space-lg);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.scope__heading { font-size: 2rem; margin-bottom: var(--space-sm); }
.scope__sub { color: var(--color-medium-gray); }
@media (min-width: 768px) {
  .scope__heading { font-size: 2.4rem; }
}

.scope__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .scope__grid { grid-template-columns: repeat(3, 1fr); }
}

.scope__col h3 {
  font-size: 1.15rem;
  margin-bottom: var(--space-sm);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-red);
  display: inline-block;
}
.scope__list {
  list-style: none;
  padding: 0;
}
.scope__list li {
  padding: 8px 0 8px 28px;
  position: relative;
  color: var(--color-medium-gray);
  font-size: 0.95rem;
  line-height: 1.5;
}
.scope__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 18px;
  height: 18px;
  background: var(--color-red);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3e%3cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M4 9l3.5 3.5L14 6'/%3e%3c/svg%3e");
  background-size: 18px 18px;
  background-repeat: no-repeat;
}


/* ============================================================
   12. UTILITY: section spacing for stacked sections
   ============================================================ */

.section { padding: var(--space-xl) 0; }
.section--gray { background: var(--color-light-gray); }
.section--dark { background: var(--color-dark); color: var(--color-white); }
.section__heading--center { text-align: center; }


/* ============================================================
   13. BEFORE/AFTER TRANSFORMATIONS SECTION
   Lifted from PPC kitchen/css/styles.css. The .ba-slider draws
   the two stacked images and the draggable handle; main.js sets
   the --ba-pct custom property to control the reveal.
   Without these rules the home + service pages render a tall
   blank section between the social-proof bar and the empathy
   block, which is exactly what you saw.
   ============================================================ */

.transformations {
  background: var(--color-light-gray);
  color: var(--color-dark);
  padding: var(--space-xl) 0;
  position: relative;
  overflow: hidden;
}
.transformations::before {
  content: '';
  position: absolute;
  top: -240px; right: -240px;
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(212,0,0,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.transformations::after {
  content: '';
  position: absolute;
  bottom: -240px; left: -240px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(26,26,46,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.transformations .container { position: relative; z-index: 1; }

.transformations__header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto var(--space-xl);
}
.transformations__eyebrow {
  display: inline-block;
  color: var(--color-red);
  background: rgba(212,0,0,0.08);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  margin-bottom: var(--space-md);
}
.transformations__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-dark);
  margin-bottom: var(--space-md);
}
.transformations__heading-accent {
  color: var(--color-red);
  display: inline-block;
}
.transformations__sub {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-medium-gray);
  max-width: 680px;
  margin: 0 auto;
}
.transformations__sub strong { color: var(--color-dark); font-weight: 700; }

.transformations__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 720px) {
  .transformations__grid { grid-template-columns: 1fr; gap: var(--space-md); }
}

.ba-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(26,26,46,0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.ba-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(26,26,46,0.14);
  border-color: rgba(212,0,0,0.3);
}
.ba-card__caption { padding: var(--space-md) var(--space-md) var(--space-lg); }
.ba-card__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: 0.5rem;
}
.ba-card__title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-dark);
  margin: 0;
}

.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  user-select: none;
  cursor: ew-resize;
  background: #000;
  touch-action: none;
}
.ba-slider picture { display: contents; }
.ba-slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.ba-slider__img--before {
  clip-path: inset(0 calc(100% - var(--ba-pct, 50%)) 0 0);
  z-index: 2;
  transition: clip-path 0.15s ease-out;
}
.ba-slider.is-dragging .ba-slider__img--before { transition: none; }

.ba-slider__label {
  position: absolute;
  top: 14px;
  padding: 6px 12px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 4px;
  color: var(--color-white);
  pointer-events: none;
  z-index: 3;
}
.ba-slider__label--before { left: 14px; background: rgba(0,0,0,0.78); }
.ba-slider__label--after  { right: 14px; background: var(--color-red); }

.ba-slider__handle {
  position: absolute;
  top: 0;
  left: var(--ba-pct, 50%);
  height: 100%;
  width: 2px;
  transform: translateX(-50%);
  z-index: 4;
  cursor: ew-resize;
  transition: left 0.15s ease-out;
}
.ba-slider.is-dragging .ba-slider__handle { transition: none; }
.ba-slider__handle-line {
  position: absolute;
  inset: 0;
  background: var(--color-white);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}
.ba-slider__handle-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-red);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 0 4px rgba(255,255,255,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ba-slider:hover .ba-slider__handle-knob {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 8px 28px rgba(212,0,0,0.55), 0 0 0 6px rgba(255,255,255,0.2);
}
.ba-slider__handle:focus-visible .ba-slider__handle-knob {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
@keyframes ba-pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 0 4px rgba(255,255,255,0.15); }
  50%      { box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 0 14px rgba(212,0,0,0); }
}
.ba-slider.is-teasing .ba-slider__handle-knob { animation: ba-pulse 0.9s ease-out 2; }

.transformations__footer {
  margin-top: var(--space-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
.transformations__footer-text {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-medium-gray);
}
.transformations__footer-text strong { color: var(--color-dark); font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .ba-slider.is-teasing .ba-slider__handle-knob,
  .ba-card,
  .ba-slider:hover .ba-slider__handle-knob {
    animation: none !important;
    transition: none !important;
  }
}


/* ============================================================
   14. PRICING REAL TALK BLOCK (kitchen pillar)
   ============================================================ */

.pricing-real-talk {
  margin: var(--space-xl) auto 0;
  max-width: 760px;
  padding: var(--space-lg);
  background: var(--color-white);
  border-left: 4px solid var(--color-red);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(26,26,46,0.06);
}
.pricing-real-talk__title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-dark);
  margin: 0 0 0.5rem;
}
.pricing-real-talk__text {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-medium-gray);
  margin: 0;
}
.pricing-real-talk__text strong { color: var(--color-dark); font-weight: 800; }


/* ============================================================
   15. REVIEW SCREENSHOT CARDS
   Used on Home, service pillars, and /reviews/.
   Overrides the shared .testimonials__grid layout so each
   card can size to its native screenshot aspect.
   ============================================================ */

.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: 780px;
  margin: 0 auto;
  align-items: start;
}
@media (min-width: 900px) {
  .reviews-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
  }
}
.review-card {
  background: var(--color-white);
  border-radius: 12px;
  padding: 12px;
  margin: 0;
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 18px rgba(26,26,46,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(26,26,46,0.10);
}
.review-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}


/* ============================================================
   16. LOGO SCROLL ANIMATION (horizontal lockup)
   At rest the header shows the full horizontal lockup
   (red A icon + ALPHA / DEVELOPMENT GROUP wordmark). On scroll
   past 40px the wordmark portion glides to the right and fades
   away while the icon stays locked at the left edge — so it
   reads as "the icon stayed put, the wordmark slid away."

   The icon-only mark is rendered as a separate <span> on top of
   the horizontal logo and fades in just as the horizontal one
   fades out, anchored to the same left position. Everything
   uses the same 0.45s cubic-bezier easing so the whole
   transition reads as one motion.

   Bumped the nav to 88px tall so the horizontal logo at 60px
   has visible breathing room.
   ============================================================ */

.site-nav__container { min-height: 96px; }

.site-nav__logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 70px;
  /* Default width fits the horizontal logo at 70px tall (3.33:1 aspect).
     The SVG itself has some built-in padding around the artwork —
     OK to bleed slightly outside the 96px nav since the artwork
     stays within bounds. */
  width: 250px;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Horizontal full logo — visible at rest */
.site-nav__logo-horizontal {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(0);
  opacity: 1;
  height: 70px;
  transition:
    opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-nav__logo-horizontal img {
  height: 70px;
  width: auto;
  display: block;
}

/* Icon-only mark — hidden at rest, fades in on scroll. Anchored
   to the same left:0 position so it visually replaces the icon
   portion of the horizontal logo with no jump. */
.site-nav__logo-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(0.95);
  opacity: 0;
  height: 52px;
  pointer-events: none;
  transition:
    opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-nav__logo-icon img {
  height: 52px;
  width: auto;
  display: block;
}

/* Scrolled state */
.site-nav.is-scrolled .site-nav__logo {
  width: 56px;
}
.site-nav.is-scrolled .site-nav__logo-horizontal {
  /* Slide right while fading — gives the wordmark a kinetic
     "out the door" exit instead of a static crossfade */
  opacity: 0;
  transform: translateY(-50%) translateX(30px);
}
.site-nav.is-scrolled .site-nav__logo-icon {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
/* Subtle nav lift when scrolled */
.site-nav.is-scrolled {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

/* Mobile — keep the horizontal logo tight at smaller heights so
   it fits next to the hamburger without wrapping. */
@media (max-width: 480px) {
  .site-nav__logo {
    height: 64px;
    width: 200px;
  }
  .site-nav__logo-horizontal,
  .site-nav__logo-horizontal img { height: 56px; }
  .site-nav__logo-icon,
  .site-nav__logo-icon img { height: 44px; }
  .site-nav.is-scrolled .site-nav__logo { width: 44px; }
}

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .site-nav__logo,
  .site-nav__logo-horizontal,
  .site-nav__logo-icon { transition: none !important; }
}


/* ============================================================
   17. SOCIAL PROOF CENTERING
   The shared.css .social-proof__track sets it to flex with no
   justify-content — that left-aligns the items on desktop when
   they don't fill the row. Center them on wide screens.
   ============================================================ */

@media (min-width: 768px) {
  .social-proof__track {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
  }
}


/* ============================================================
   18. HERO GOOGLE RATING BADGE
   Sits alongside the phone CTA in the hero. Anchor-links down
   to the testimonials section.
   ============================================================ */

.hero__cta-row {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
@media (min-width: 768px) {
  .hero__cta-row { justify-content: flex-start; }
}

.hero__google-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 50px;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
}
.hero__google-rating:hover {
  background: rgba(255,255,255,0.18);
  border-color: #fff;
}
.hero__google-rating:active { transform: scale(0.98); }
.hero__google-rating-stars {
  display: inline-flex;
  gap: 1px;
  color: #FFB400;
}
.hero__google-rating-stars svg {
  width: 14px;
  height: 14px;
}
.hero__google-rating-text {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.hero__google-rating-text strong {
  font-weight: 800;
}


/* ============================================================
   19. EXPANDED HOME FORM
   Two-column field grid for desktop, single col mobile. Used
   on the home page hero form (long-form lead capture).
   The conditional referral name field is shown via JS by
   toggling .is-visible.
   ============================================================ */

.lead-form__grid--two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 1024px) {
  .lead-form__grid--two {
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-sm);
  }
  .lead-form__grid--two .form-field--full { grid-column: 1 / -1; }
}

.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 16px;
  color: var(--color-dark);
  background: var(--color-light-gray);
  font-family: inherit;
  min-height: 90px;
  resize: vertical;
}
.form-field textarea:focus {
  border-color: var(--color-red);
  background: var(--color-white);
  outline: none;
}

/* Conditional referral block (hidden until "Referral" picked) */
.form-field--referral {
  display: none;
  background: rgba(212,0,0,0.06);
  border: 1.5px dashed var(--color-red);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.form-field--referral.is-visible { display: block; }
.form-field--referral__hint {
  color: var(--color-red);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.form-field--referral__hint::before {
  content: "$";
  width: 22px;
  height: 22px;
  background: var(--color-red);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
}
.form-field--referral__sub {
  font-size: 0.78rem;
  color: var(--color-medium-gray);
  margin: 6px 0 0;
  line-height: 1.4;
}