/* sections.css: each section owns its styles by section class; semantic tokens only */

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 20; background: var(--color-surface); border-bottom: 1px solid var(--color-divider); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; }
.site-header__logo { flex: none; }
.site-header__logo img { height: 26px; width: auto; }
.site-nav { display: none; }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.site-header__cta { display: none; }

.phone-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  min-width: 44px; min-height: 44px; font-weight: 700; color: var(--color-heading); text-decoration: none;
}
.phone-link:hover { text-decoration: underline; }
@media (max-width: 959px) {
  .site-header .phone-link__text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

.mobile-menu__toggle {
  list-style: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3);
  border: 1.5px solid var(--color-btn2-border); border-radius: var(--radius);
  font-weight: 600; color: var(--color-heading); cursor: pointer;
}
.mobile-menu__toggle::-webkit-details-marker { display: none; }
.mobile-menu__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--color-surface); border-bottom: 1px solid var(--color-divider); box-shadow: var(--shadow);
  padding: var(--space-2) var(--space-4) var(--space-4);
}
.mobile-menu__panel ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu__panel a {
  display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider);
  color: var(--color-heading); font-weight: 600; text-decoration: none;
}

@media (min-width: 960px) {
  .site-header__logo img { height: 32px; }
  .site-nav { display: block; margin-left: var(--space-5); }
  .site-nav ul { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
  .site-nav a { color: var(--color-heading); font-weight: 600; text-decoration: none; }
  .site-nav a:hover { text-decoration: underline; }
  .site-header__cta { display: inline-flex; }
  .mobile-menu { display: none; }
}

/* ---------- 1. Hero ---------- */
.hero { position: relative; isolation: isolate; background: var(--color-surface-deep); color: var(--color-text-inverse); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--color-overlay-strong) 0%, var(--color-overlay-strong) 70%, var(--color-overlay-clear) 100%);
}
.hero__inner { padding-top: var(--space-6); padding-bottom: 40vw; }
.hero__content { max-width: 36rem; }
.hero__eyebrow { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.04em; margin-bottom: var(--space-2); }
.hero__title { color: var(--color-text-inverse); font-size: var(--text-3xl); }
.hero__lede { font-size: var(--text-md); max-width: 32rem; }
.hero__actions { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-5) 0 var(--space-4); }
.hero__phone a { color: var(--color-text-inverse); font-weight: 700; }
.hero :focus-visible { outline-color: var(--color-focus-inverse); }
@media (min-width: 640px) { .hero__actions { flex-direction: row; flex-wrap: wrap; } }
@media (min-width: 960px) {
  .hero { display: flex; align-items: center; min-height: min(78vh, 720px); }
  .hero__media img { object-position: right center; }
  .hero::before {
    background: linear-gradient(90deg, var(--color-overlay-strong) 0%, var(--color-overlay-strong) 42%, var(--color-overlay-clear) 72%);
  }
  .hero__inner { padding-block: var(--space-8); }
}

/* ---------- 2. Trust strip (renders only when trust_facts supplied) ---------- */
.trust-strip { background: var(--color-surface); border-bottom: 1px solid var(--color-divider); padding-block: var(--space-4); }
.trust-strip__list { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.trust-strip__item { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--color-heading); }
@media (min-width: 960px) { .trust-strip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 3. Services ---------- */
.services__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.service-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
}
.service-card__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-placeholder); }
.service-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5); }
.service-card__jobs { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.service-card__link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 0.35em; min-height: 44px;
  font-weight: 700; color: var(--color-heading);
}

/* ---------- 4. Gallery ---------- */
.gallery__note { color: var(--color-text-muted); }
.gallery__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.gallery__grid img, .before-after__item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--color-placeholder);
}
.before-after { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-6); }
.before-after__item { margin: 0; }
.before-after__item figcaption { margin-top: var(--space-2); font-weight: 600; color: var(--color-heading); }
@media (min-width: 960px) { .gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 5. Repairs ---------- */
.repairs__layout { display: grid; gap: var(--space-6); }
.repairs__head { margin-bottom: 0; }
.repairs__head .btn { margin-top: var(--space-3); }
.repairs__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-content: start; }
.repairs__item {
  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius);
  font-weight: 600; color: var(--color-heading);
}
.repairs__icon { width: 32px; height: 32px; }
@media (min-width: 960px) { .repairs__layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; } }

/* ---------- 6. How it works ---------- */
.process__tracks { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .process__tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.process__track { padding: var(--space-5); background: var(--color-bg); border-radius: var(--radius-lg); }
.process__steps { list-style: none; counter-reset: step; margin: var(--space-4) 0 0; padding: 0; }
.process__steps li { counter-increment: step; position: relative; padding-left: 3rem; margin-bottom: var(--space-4); }
.process__steps li:last-child { margin-bottom: 0; }
.process__steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--color-surface-inverse); color: var(--color-on-primary); font-weight: 700;
}
.process__steps strong { display: block; color: var(--color-heading); }

/* ---------- 7. Service area ---------- */
.service-area .section__head { margin-bottom: 0; }
.service-area__list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.service-area__list li { padding: var(--space-1) var(--space-3); border: 1px solid var(--color-divider); border-radius: 999px; background: var(--color-surface); }

/* ---------- 8. Reviews (renders only when reviews supplied) ---------- */
.reviews__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.review-card { padding: var(--space-5); background: var(--color-bg); border-radius: var(--radius-lg); }
.review-card blockquote { margin: 0 0 var(--space-3); }
.review-card__meta { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- 9. FAQ ---------- */
.faq__list { max-width: 48rem; border-top: 1px solid var(--color-divider); }
.faq__item { border-bottom: 1px solid var(--color-divider); }
.faq__item summary {
  position: relative; list-style: none; cursor: pointer;
  padding: var(--space-4) 2.5rem var(--space-4) 0; font-weight: 700; color: var(--color-heading);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; line-height: 1; font-weight: 400;
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__answer { padding-bottom: var(--space-4); }

/* ---------- 10. Request ---------- */
.request__layout { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .request__layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
.request-card { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4); }
@media (min-width: 640px) { .request-card { padding: var(--space-6); } }

.funnel-selector { border: 0; margin: 0 0 var(--space-4); padding: 0; min-width: 0; }
.funnel-selector__legend { padding: 0; margin-bottom: var(--space-2); font-weight: 700; color: var(--color-heading); }
.funnel-selector__options { display: grid; gap: var(--space-2); }
@media (min-width: 480px) { .funnel-selector__options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.funnel-selector__option { position: relative; display: flex; }
.funnel-selector__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.funnel-selector__option span {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.4em; min-height: 52px;
  padding: var(--space-2) var(--space-3); text-align: center; font-weight: 700;
  color: var(--color-heading); background: var(--color-surface);
  border: 2px solid var(--color-btn2-border); border-radius: var(--radius);
}
.funnel-selector__option input:checked + span { background: var(--color-surface-inverse); color: var(--color-on-primary); }
.funnel-selector__option input:checked + span::before { content: "\2713"; }
.funnel-selector__option input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.request__call { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface-inverse); color: var(--color-text-inverse); }
.request__call h3 { color: var(--color-text-inverse); }
.request__call :focus-visible { outline-color: var(--color-focus-inverse); }
.phone-link--lg { color: var(--color-text-inverse); font-size: var(--text-xl); }
.request__image { display: none; }
@media (min-width: 960px) {
  .request__image { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-top: var(--space-5); border-radius: var(--radius-lg); background: var(--color-placeholder); }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--color-surface-inverse); color: var(--color-text-inverse); padding-block: var(--space-7) var(--space-5); }
.site-footer a { color: var(--color-text-inverse); }
.site-footer :focus-visible { outline-color: var(--color-focus-inverse); }
.site-footer__grid { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .site-footer__grid { grid-template-columns: 1.2fr 0.8fr 1.4fr; } }
.site-footer__brand img { height: 32px; width: auto; margin-bottom: var(--space-4); }
.site-footer__phone { font-weight: 700; font-size: var(--text-lg); }
.site-footer__links ul { list-style: none; margin: 0; padding: 0; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__contact { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); }
.site-footer__contact h2 { font-size: var(--text-lg); }
.site-footer__contact a { color: var(--color-link); }
.site-footer__contact :focus-visible { outline-color: var(--color-focus); }
.site-footer__base { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-divider-inverse); font-size: var(--text-sm); }

/* ---------- Mobile bar ---------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface-inverse); box-shadow: var(--shadow-up);
  transition: transform 0.2s, visibility 0.2s;
}
.mobile-bar .btn { flex: 1; }
.mobile-bar__call {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 48px; padding: 0 var(--space-4);
  border: 2px solid var(--color-text-inverse); border-radius: var(--radius);
  color: var(--color-text-inverse); font-weight: 700; text-decoration: none;
}
.mobile-bar :focus-visible { outline-color: var(--color-focus-inverse); }
.mobile-bar.is-hidden { transform: translateY(110%); visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .mobile-bar { transition: none; } }
@media (min-width: 960px) { .mobile-bar { display: none; } }