/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--orange-500);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--orange-600); box-shadow: var(--shadow-md); }

.btn--secondary {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}
.btn--secondary:hover { background: rgba(255,255,255,0.1); }

.btn--outline-navy {
  background: transparent;
  border-color: var(--navy-700);
  color: var(--navy-800);
}
.btn--outline-navy:hover { background: var(--navy-050); }

.btn--block { width: 100%; }
.btn--lg { padding: 1.1rem 1.75rem; font-size: var(--fs-md); }

/* ============ Top bar ============ */
.top-bar {
  background: var(--navy-900);
  color: var(--neutral-100);
  font-size: var(--fs-xs);
  text-align: center;
  padding: var(--space-2) var(--space-4);
  letter-spacing: 0.01em;
}
.top-bar strong { color: var(--white); }

/* ============ Header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--neutral-100);
  height: var(--header-height);
}
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-width: 0;
}

.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--navy-900);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 1;
  min-width: 0;
}.logo__mark-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  flex-shrink: 0;
}
.logo__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .logo { font-size: var(--fs-md); gap: var(--space-3); }
  .logo__mark-img { width: 64px; height: 64px; }
}
.logo__text { line-height: 1.1; min-width: 0; }
.logo__text small { display: none; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-2xs); color: var(--neutral-500); letter-spacing: 0.04em; text-transform: uppercase; }

.main-nav { display: none; }
.main-nav ul { display: flex; gap: var(--space-6); }
.main-nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--neutral-700);
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.main-nav a:hover { color: var(--navy-900); border-color: var(--orange-500); }

.header-actions { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
.header-actions .btn { display: none; white-space: nowrap; }
.header-phone {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--navy-900);
  white-space: nowrap;
  flex-shrink: 0;
}
.header-phone svg { color: var(--orange-500); flex-shrink: 0; }

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  background: var(--white);
}

@media (min-width: 1180px) {
  .main-nav { display: block; }
  .header-phone { display: inline-flex; }
  .nav-toggle { display: none; }
  .header-actions .btn { display: inline-flex; }
  .logo__text small { display: block; }
  .logo { flex-shrink: 0; }
  .logo__text { overflow: visible; text-overflow: clip; white-space: normal; }
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--navy-900);
  color: var(--white);
  padding: var(--space-6) var(--space-5);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-standard);
  display: flex;
  flex-direction: column;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__close { align-self: flex-end; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); border-radius: var(--radius-sm); }
.mobile-nav ul { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.mobile-nav a { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); padding-block: var(--space-3); border-bottom: 1px solid rgba(255,255,255,0.1); }
.mobile-nav__cta { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }

@media (min-width: 1180px) { .mobile-nav { display: none; } }

/* ============ Hero ============ */
.hero {
  position: relative;
  /* Declared twice on purpose: browsers without image-set() support
     simply ignore the second (invalid-to-them) declaration and keep
     using this JPEG-only fallback — so there's no risk of breakage on
     older browsers, only a WebP upgrade on browsers that support it. */
  background:
    linear-gradient(155deg, rgba(14,30,53,0.93) 0%, rgba(20,41,71,0.90) 55%, rgba(29,58,99,0.88) 100%),
    url('/hero-brick-house.jpg') center 30% / cover no-repeat;
  background:
    linear-gradient(155deg, rgba(14,30,53,0.93) 0%, rgba(20,41,71,0.90) 55%, rgba(29,58,99,0.88) 100%),
    image-set(url('/hero-brick-house.webp') type('image/webp'), url('/hero-brick-house.jpg') type('image/jpeg')) center 30% / cover no-repeat;
  color: var(--white);
  overflow: hidden;
  padding-block: var(--space-8);
}
.hero__inner {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(224, 122, 44, 0.15);
  border: 1px solid rgba(224, 122, 44, 0.4);
  color: var(--orange-500);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  margin-bottom: var(--space-5);
}
.hero h1 { color: var(--white); font-size: var(--fs-3xl); }
.hero__sub { color: var(--neutral-100); font-size: var(--fs-md); margin-top: var(--space-4); max-width: 46ch; }
.hero__ctas { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.hero__ctas .btn { width: 100%; }
@media (min-width: 560px) {
  .hero__ctas { flex-direction: row; flex-wrap: wrap; }
  .hero__ctas .btn { width: auto; }
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
  font-size: var(--fs-xs);
  color: var(--neutral-100);
}
.hero__badges span { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__badges svg { color: var(--orange-500); flex-shrink: 0; }

.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.trust-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3);
  text-align: center;
}
.trust-card svg { color: var(--orange-500); margin-bottom: var(--space-2); }
.trust-card strong { display: block; color: var(--white); font-size: var(--fs-sm); font-family: var(--font-display); }
.trust-card span { display: block; color: var(--neutral-200); font-size: var(--fs-2xs); margin-top: var(--space-1); }
@media (min-width: 480px) {
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
}

.hero__form-wrap { position: relative; }
.hero__form-wrap .lead-form-card { box-shadow: var(--shadow-lg); }
.hero__form-wrap .lead-form-card h2 { font-size: var(--fs-lg); }

@media (min-width: 960px) {
  .hero { padding-block: var(--space-10); }
  .hero__inner { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); }
  .hero h1 { font-size: var(--fs-4xl); }
}

/* ============ Page hero (inner pages) ============ */
.page-hero {
  position: relative;
  background: linear-gradient(155deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  color: var(--white);
  padding-block: var(--space-7);
}
.page-hero h1 { color: var(--white); font-size: var(--fs-3xl); }
.page-hero__sub { color: var(--neutral-100); font-size: var(--fs-md); margin-top: var(--space-4); max-width: 60ch; }
.page-hero__ctas { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.page-hero__ctas .btn { width: 100%; }
@media (min-width: 560px) {
  .page-hero__ctas { flex-direction: row; flex-wrap: wrap; }
  .page-hero__ctas .btn { width: auto; }
}
@media (min-width: 960px) {
  .page-hero { padding-block: var(--space-9); }
  .page-hero h1 { font-size: var(--fs-4xl); }
}

/* ============ Breadcrumb ============ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  margin-bottom: var(--space-5);
}
.breadcrumb a { color: var(--neutral-100); opacity: 0.85; }
.breadcrumb a:hover { opacity: 1; text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--white); font-weight: 600; }
.breadcrumb__sep { color: var(--neutral-100); opacity: 0.5; }

/* ============ Trust strip ============ */
/* ============ Brands strip ============ */
.brands-strip { padding-block: var(--space-6); background: var(--white); text-align: center; }
.brands-strip__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-500);
  margin-bottom: var(--space-4);
}
.brands-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
.brands-strip__item {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--neutral-700);
  background: var(--neutral-050);
  border: 1px solid var(--neutral-200);
  border-radius: 999px;
  padding: var(--space-2) var(--space-4);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Auto-scrolling carousel: the track holds the brand list twice back to
   back (see markup) and scrolls exactly one list-width, so the loop point
   is seamless. Pauses on hover/focus for readability and accessibility. */
.brands-carousel {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brands-carousel__track {
  display: flex;
  gap: var(--space-3);
  width: max-content;
  animation: brands-scroll 28s linear infinite;
}
.brands-carousel:hover .brands-carousel__track,
.brands-carousel:focus-within .brands-carousel__track {
  animation-play-state: paused;
}
@keyframes brands-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .brands-carousel__track { animation: none; }
}

.trust-strip { padding-block: var(--space-6); background: var(--neutral-050); border-bottom: 1px solid var(--neutral-100); }
.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.trust-item { display: flex; align-items: flex-start; gap: var(--space-3); }
.trust-item svg { flex-shrink: 0; color: var(--orange-500); margin-top: 2px; }
.trust-item strong { display: block; font-family: var(--font-display); font-size: var(--fs-sm); color: var(--navy-900); }
.trust-item span { font-size: var(--fs-xs); color: var(--neutral-500); }

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

/* ============ Services grid ============ */
.services-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
  background: var(--white);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), border-color var(--dur-base);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--neutral-300); }
.service-card__icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--navy-050);
  color: var(--navy-800);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.service-card h3 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.service-card p { font-size: var(--fs-sm); flex-grow: 1; }
.service-card__link {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--orange-600);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* ============ Emergency / problem section ============ */
.emergency {
  background: var(--navy-900);
  color: var(--white);
}
.emergency__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.emergency__questions { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.emergency__q {
  display: flex; align-items: center; gap: var(--space-3);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.emergency__q svg { color: var(--orange-500); flex-shrink: 0; }
.emergency h2 { color: var(--white); }
.emergency p { color: var(--neutral-100); }
.emergency__cta { margin-top: var(--space-6); }

@media (min-width: 960px) {
  .emergency__grid { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
}

/* ============ Why choose ============ */
.why-grid { display: grid; gap: var(--space-6); }
.why-item { display: flex; gap: var(--space-4); }
.why-item__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--orange-500);
  flex-shrink: 0;
  width: 2.25rem;
}
.why-item h3 { margin-bottom: var(--space-1); }
.why-item p { font-size: var(--fs-sm); }

.offer-badge {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-md);
  color: var(--white);
  background: var(--orange-500);
  flex-shrink: 0;
  white-space: nowrap;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  align-self: flex-start;
}

@media (min-width: 720px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-6); }
}

/* ============ Gallery ============ */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }

.gallery-item {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  background: var(--neutral-100);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item__tag {
  position: absolute;
  top: var(--space-2); left: var(--space-2);
  background: var(--navy-900);
  color: var(--white);
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============ Service areas ============ */
.areas-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.areas-tab {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  border: 1px solid var(--neutral-300);
  color: var(--neutral-700);
}
.areas-tab--primary { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
.areas-tab--muted { color: var(--neutral-500); }

.areas-block { margin-bottom: var(--space-6); }
.areas-block h3 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--neutral-500); margin-bottom: var(--space-3); }
.areas-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-5);
}
@media (min-width: 640px) { .areas-list { grid-template-columns: repeat(3, 1fr); } }
.areas-list li { font-size: var(--fs-sm); color: var(--neutral-700); padding-block: var(--space-1); border-bottom: 1px solid var(--neutral-100); }

.areas-note {
  font-size: var(--fs-xs);
  color: var(--neutral-500);
  background: var(--neutral-050);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-5);
}

/* ============ FAQ ============ */
.faq-list { display: grid; gap: var(--space-3); max-width: 760px; }
.faq-item { border: 1px solid var(--neutral-100); border-radius: var(--radius-md); overflow: hidden; }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--navy-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-icon { flex-shrink: 0; transition: transform var(--dur-base) var(--ease-standard); color: var(--orange-500); }
.faq-item[open] summary .faq-icon { transform: rotate(45deg); }
.faq-item__body { padding: 0 var(--space-5) var(--space-5); font-size: var(--fs-sm); color: var(--neutral-700); }

/* ============ Final CTA ============ */
.final-cta {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: var(--white);
  text-align: center;
}
.final-cta h2 { color: var(--white); font-size: var(--fs-2xl); }
.final-cta p { color: var(--neutral-100); margin-top: var(--space-3); }
.final-cta__ctas {
  display: flex; flex-direction: column; gap: var(--space-3);
  max-width: 380px; margin: var(--space-6) auto 0;
}
@media (min-width: 560px) { .final-cta__ctas { flex-direction: row; justify-content: center; max-width: none; } }

/* ============ Footer ============ */
.site-footer { background: var(--navy-900); color: var(--neutral-300); padding-block: var(--space-8) calc(var(--sticky-bar-height) + var(--space-6)); }
.footer-grid { display: grid; gap: var(--space-7); }
.footer-brand .logo { color: var(--white); }
.footer-brand p { color: var(--neutral-300); font-size: var(--fs-sm); margin-top: var(--space-4); max-width: 40ch; }
.footer-col h4 { color: var(--white); font-family: var(--font-display); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-4); }
.footer-col ul { display: grid; gap: var(--space-2); }
.footer-col a { font-size: var(--fs-sm); color: var(--neutral-300); transition: color var(--dur-fast); }
.footer-col a:hover { color: var(--orange-500); }
.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: space-between;
  font-size: var(--fs-2xs);
  color: var(--neutral-500);
}
.footer-bottom a { color: var(--neutral-500); }
.footer-bottom a:hover { color: var(--white); }

@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* ============ Contact / Request Service ============ */
.contact-section { background: var(--neutral-050); }
.contact-section .lead-form-card { max-width: 640px; margin-inline: auto; }
.contact-section .section-head p a { color: var(--orange-600); font-weight: 700; }

/* ============ Sticky mobile bar ============ */
.sticky-mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: var(--sticky-bar-height);
  box-shadow: 0 -4px 20px rgba(14,30,53,0.15);
}
.sticky-mobile-bar a {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.sticky-mobile-bar__call { background: var(--orange-500); color: var(--white); }
.sticky-mobile-bar__request { background: var(--navy-900); color: var(--white); }

@media (min-width: 1180px) {
  .sticky-mobile-bar { display: none; }
  .site-footer { padding-block: var(--space-8); }
}

/* ============ Lead form ============ */
.lead-form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-7);
}
.lead-form-card h2 { font-size: var(--fs-xl); }
.form-row { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.form-field { display: grid; gap: var(--space-2); }
.form-field label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); color: var(--navy-900); }
.form-field input,
.form-field select,
.form-field textarea {
  border: 1.5px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-size: var(--fs-sm);
  background: var(--white);
  color: var(--neutral-900);
  transition: border-color var(--dur-fast);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--orange-500); }
.form-field textarea { resize: vertical; min-height: 100px; }
.form-error {
  font-size: var(--fs-2xs);
  color: #b3261e;
  min-height: 1em;
}
.form-field--invalid input,
.form-field--invalid select,
.form-field--invalid textarea { border-color: #b3261e; }

.form-status {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  display: none;
}
.form-status.is-success { display: block; background: #eaf6ee; color: var(--success-600); }
.form-status.is-error { display: block; background: #fbeceb; color: #b3261e; }

.form-consent { font-size: var(--fs-2xs); color: var(--neutral-500); margin-top: var(--space-4); }

/* honeypot field — hidden from real users, catches basic bots */
.hp-field { position: absolute; left: -9999px; top: -9999px; }

/* ============ PAGE-HERO SPLIT LAYOUT (opt-in, landing pages only) ============
   Scoped to .page-hero--split so the shared .page-hero used by every other
   page (about, contact, faq, city pages, etc.) is completely unaffected. */
.page-hero--split .container {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.page-hero--split .page-hero__content { flex: 1 1 auto; min-width: 0; }
.page-hero--split .page-hero__image { display: none; flex: 0 0 auto; width: 42%; }
.page-hero--split .page-hero__image picture,
.page-hero--split .page-hero__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
@media (min-width: 960px) {
  .page-hero--split .page-hero__image { display: block; }
}

/* ============ REVIEWS CAROUSEL ============
   Native CSS scroll-snap drives the actual scrolling (and gives touch/
   swipe support on mobile for free, no JS needed for that part) —
   reviews-carousel.js only handles the arrows, dots, and keyboard nav,
   which is why this stays lightweight with no external dependency. */
.reviews-carousel {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.reviews-carousel__track {
  display: flex;
  align-items: stretch; /* equal-height cards across one row */
  gap: var(--space-5);
  flex: 1;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: var(--space-1); /* room for card focus outlines */
}
.reviews-carousel__track::-webkit-scrollbar { display: none; }
.reviews-carousel__track:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
}
.reviews-carousel__slide {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 2 * var(--space-5)) / 3);
  display: flex;
}
.reviews-carousel__slide > .why-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media (max-width: 900px) {
  .reviews-carousel__slide { flex: 0 0 calc((100% - var(--space-5)) / 2); }
}
@media (max-width: 600px) {
  .reviews-carousel__slide { flex: 0 0 100%; }
}

.reviews-carousel__arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--neutral-300);
  background: var(--white);
  color: var(--navy-800);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reviews-carousel__arrow:hover:not(:disabled) { background: var(--neutral-100); }
.reviews-carousel__arrow:disabled { opacity: 0.3; cursor: default; }

.reviews-carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.reviews-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--neutral-300);
  cursor: pointer;
}
.reviews-carousel__dot[aria-current="true"] { background: var(--orange-500); }

/* ============ PPC LANDING PAGE GALLERY (scoped — does not affect
   the shared .gallery-grid/.gallery-item used on /gallery.html and
   elsewhere) ============
   Uses object-fit: contain (not cover) so the full photo composition
   is always visible, never cropped — a fixed aspect-ratio box keeps
   the grid clean and consistent, with a neutral fill behind any
   letterboxing rather than blank white. */
.ppc-gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) { .ppc-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .ppc-gallery-grid { grid-template-columns: repeat(4, 1fr); } }

.ppc-gallery-item {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  background: var(--neutral-100);
  border: none;
  padding: 0;
  margin: 0;
  display: block;
  width: 100%;
  cursor: pointer;
  font: inherit;
}
.ppc-gallery-item picture,
.ppc-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
}
.ppc-gallery-item img { object-fit: contain; }
.ppc-gallery-item:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
}
.ppc-gallery-item .gallery-item__tag {
  position: absolute;
  top: var(--space-2); left: var(--space-2);
  background: var(--navy-900);
  color: var(--white);
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 1;
}

/* ============ PPC LIGHTBOX (shared JS component, only wired up on
   the 4 PPC landing pages) ============ */
.ppc-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 32, 0.92);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ppc-lightbox[hidden] { display: none; }
.ppc-lightbox__content {
  max-width: min(90vw, 1100px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ppc-lightbox__content picture,
.ppc-lightbox__content img {
  display: block;
  max-width: 100%;
  max-height: 75vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.ppc-lightbox__caption {
  color: var(--white);
  margin-top: var(--space-3);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
}
.ppc-lightbox__close,
.ppc-lightbox__prev,
.ppc-lightbox__next {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ppc-lightbox__close:hover,
.ppc-lightbox__prev:hover,
.ppc-lightbox__next:hover { background: rgba(255, 255, 255, 0.2); }
.ppc-lightbox__close {
  top: var(--space-4); right: var(--space-4);
  width: 44px; height: 44px;
  font-size: 1.5rem;
  line-height: 1;
}
.ppc-lightbox__prev,
.ppc-lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  font-size: 1.5rem;
}
.ppc-lightbox__prev { left: var(--space-4); }
.ppc-lightbox__next { right: var(--space-4); }
.ppc-lightbox__prev[hidden],
.ppc-lightbox__next[hidden] { display: none; }
@media (max-width: 640px) {
  .ppc-lightbox__prev { left: var(--space-2); }
  .ppc-lightbox__next { right: var(--space-2); }
}

/* ============ BLOG ARTICLE (Phase 1 — functional styling; full
   visual design is Phase 2) ============ */
.blog-article { padding-block: 0; }
.blog-article__header {
  background: var(--neutral-050);
  padding-block: var(--space-7);
  margin-bottom: var(--space-7);
  border-bottom: 1px solid var(--neutral-100);
}
.blog-article__category {
  color: var(--orange-500);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-xs);
  margin-top: var(--space-4);
}
.blog-article__meta { color: var(--neutral-500); font-size: var(--fs-sm); margin-bottom: var(--space-5); }
.blog-article__featured-image {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}
@media (max-width: 640px) {
  .blog-article__featured-image { max-height: 260px; }
}
.blog-article__content { font-size: var(--fs-md); line-height: 1.7; color: var(--neutral-800); }
.blog-article__content h2 { margin-top: var(--space-7); margin-bottom: var(--space-3); }
.blog-article__content h3 { margin-top: var(--space-6); margin-bottom: var(--space-2); }
.blog-article__content p { margin-bottom: var(--space-4); }
.blog-article__content ul, .blog-article__content ol { margin-bottom: var(--space-4); padding-left: var(--space-6); }
.blog-article__content li { margin-bottom: var(--space-1); }
.blog-article__content a { color: var(--navy-800); text-decoration: underline; }
.blog-article__image { margin-block: var(--space-6); }
.blog-article__image img { width: 100%; height: auto; border-radius: var(--radius-md); }
.blog-article__image figcaption { color: var(--neutral-500); font-size: var(--fs-xs); margin-top: var(--space-2); text-align: center; }
.blog-article__table-wrap { overflow-x: auto; margin-bottom: var(--space-5); }
.blog-article__table-wrap table { width: 100%; border-collapse: collapse; }
.blog-article__table-wrap th, .blog-article__table-wrap td {
  border: 1px solid var(--neutral-100);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--fs-sm);
}
.blog-article__table-wrap th { background: var(--neutral-050); font-weight: 700; }

/* ============ BLOG HUB (/blog.html) ============ */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--neutral-100);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.blog-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.blog-card__image {
  aspect-ratio: 16 / 9;
  background: var(--neutral-100);
  flex-shrink: 0; /* never let the image get squeezed by a tall body */
  min-height: 0; /* flex items default to min-height:auto, which uses the <img>'s own intrinsic size as a floor and silently overrides aspect-ratio for taller/portrait source photos — this override is the actual fix */
  overflow: hidden;
}
.blog-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* crops any portrait/landscape photo to the same box — object-fit only applies to the <img> itself, not the <picture> wrapper around it */
}
.blog-card__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.blog-card__category {
  color: var(--orange-500);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-2xs);
  margin-bottom: var(--space-2);
}
.blog-card__body h2 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.blog-card__excerpt { color: var(--neutral-700); font-size: var(--fs-sm); margin-bottom: var(--space-3); }
.blog-card__meta {
  color: var(--neutral-500);
  font-size: var(--fs-xs);
  margin-bottom: var(--space-3);
  margin-top: auto; /* pushes meta + Read Article to a shared bottom baseline regardless of how much title/category/excerpt sits above it in any given card — the excerpt's own height can no longer be what determines this */
}
.blog-card__link { color: var(--navy-800); font-weight: 700; font-size: var(--fs-sm); }

/* ============ RELATED ARTICLES (within an article page) ============ */
.blog-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) { .blog-related-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-related-card {
  display: block;
  padding: var(--space-4);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
}
.blog-related-card:hover { border-color: var(--neutral-300); }
.blog-related-card h3 { font-size: var(--fs-md); margin-bottom: var(--space-1); color: var(--navy-800); }
.blog-related-card p { font-size: var(--fs-sm); color: var(--neutral-500); }

/* ============ REPAIR PAGE "Recent Repairs" (scoped fix only —
   does not touch the shared .gallery-item rule used by /gallery.html) ============
   .gallery-item img sets height:100%, but that percentage can only
   resolve against a parent with an explicit height. The <picture>
   wrapper has none (base.css only gives it display:block), so the
   percentage collapses to auto and the image falls back to its own
   intrinsic aspect ratio — for a landscape photo, that leaves visible
   empty space below it inside the square .gallery-item box. Giving
   the wrapper an explicit 100% height here (scoped to this section
   only) gives that percentage something real to resolve against. */
.repair-project .gallery-item picture,
.opener-project-card .gallery-item picture {
  width: 100%;
  height: 100%;
}

/* ============ Garage Door Openers page — "Recent Garage Door Opener
   Work" project grid. Scoped to .opener-projects/.opener-project-card
   only — does not touch .gallery-grid, .repair-project, or any other
   page's gallery layout.
   Breakpoint note: 2 project columns start at 960px, not narrower
   tablet widths. Measured directly — at ~640-900px, 2 project columns
   squeezed each Before/After image down to ~140-160px (harder to make
   out real hardware/brand detail); a single, full-width project
   column in that range gives each image ~280-410px instead, which is
   why the breakpoint sits higher than a typical 2-column tablet
   layout would. 960px also matches the breakpoint this site's own
   .services-grid/.gallery-grid already use elsewhere. */
.opener-projects {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 960px) {
  .opener-projects { grid-template-columns: repeat(2, 1fr); }
}
.opener-project-card {
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.opener-project-card h3 { margin-bottom: var(--space-3); }

/* ============ Homepage Service Areas — center the final row (New
   Hampshire, Rhode Island) when the grid renders 4 columns, instead of
   leaving them flush to the left. Scoped to #service-areas specifically
   — .why-grid is also used by two other sections on this page (a trust
   grid and the "Ways to Save" offers grid), and this must not affect
   either of them.
   Breakpoint note: this grid is `grid-template-columns: repeat(auto-fit,
   minmax(220px, 1fr))`, and empirically measured (not assumed) to render
   exactly 4 columns from ~1040px viewport width up through at least
   1600px+ (the container's own 1200px max-width caps it there, so a 5th
   column never occurs at any width). Below ~1024px it drops to 3
   columns, where this fixed 4-column positioning would be wrong — hence
   the 1040px floor here, comfortably inside the confirmed-4-column
   range and still well above the 3-column range. */
@media (min-width: 1040px) {
  #service-areas .why-grid > div:nth-last-child(2) { grid-column: 2; }
  #service-areas .why-grid > div:nth-last-child(1) { grid-column: 3; }
}