/* === ABM Interiors: ultra-narrow responsive spacing (250px–desktop) === */

html,
body {
  overflow-x: clip;
  max-width: 100%;
}

.site-preview-root {
  --abm-gutter: clamp(12px, 4.8vw, 64px);
  --abm-section-y: clamp(32px, 8vw, 80px);
  --abm-gap: clamp(12px, 3vw, 24px);
  max-width: 100%;
  box-sizing: border-box;
}

.site-preview-root,
.site-preview-root *,
.site-preview-root *::before,
.site-preview-root *::after {
  box-sizing: border-box;
}

.site-preview-root .wf-assembled-hero-shell,
.site-preview-root .site-section-wf,
.site-preview-root .site-section-wf .wf-section-body {
  min-width: 0;
  max-width: 100%;
}

.site-preview-root .site-section-wf img,
.site-preview-root .site-section-wf video,
.site-preview-root .site-section-wf svg {
  max-width: 100%;
  height: auto;
}

/* --- Shell: nav + home hero --- */

/* Nav logo: keep fixed height (global img rules must not apply here) */
.wf-hero__logo-img {
  display: block;
  width: auto;
  height: 52px;
  max-width: min(200px, 42vw);
  object-fit: contain;
}

@media (max-width: 768px) {
  .wf-hero__logo-img {
    height: 44px;
    max-width: min(170px, 50vw);
  }
}

@media (max-width: 360px) {
  .wf-hero__logo-img {
    height: 40px;
    max-width: min(160px, 58vw);
  }
}

/* Full-viewport hero only on home (has hero body); inner pages are nav-only */
.wf-hero:has(.wf-hero__body) {
  min-height: 100vh;
  min-height: 100dvh;
}

.wf-hero:has(.wf-hero__body) .wf-hero__body {
  flex: 1 1 0;
  min-height: 0;
}

.wf-hero__nav {
  flex-shrink: 0;
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: min(52px, var(--abm-gutter));
  padding-right: min(52px, var(--abm-gutter));
}

@media (max-width: 600px) {
  .wf-hero:has(.wf-hero__body) .wf-hero__bg-image {
    background-size: cover;
    background-position: center top;
  }
}

@media (max-width: 600px) {
  .wf-hero__content {
    padding-top: clamp(32px, 8vw, 48px);
    padding-bottom: clamp(32px, 8vw, 48px);
    padding-left: var(--abm-gutter);
    padding-right: var(--abm-gutter);
  }

  .wf-hero__phone {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .wf-hero__cta {
    max-width: 100%;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}

@media (max-width: 360px) {
  .wf-hero__heading {
    font-size: clamp(28px, 10vw, 44px);
  }

  .wf-hero__cta {
    padding: 16px 20px;
    letter-spacing: 1px;
    font-size: clamp(14px, 3.5vw, 17px);
  }
}

@media (max-width: 280px) {
  .wf-hero__content {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

/* --- Coordinated CTAs / buttons --- */

.site-preview-root [data-wf-section]:not([data-wf-section="hero"]) button,
.site-preview-root [data-wf-section]:not([data-wf-section="hero"]) .button,
.site-preview-root [data-wf-section]:not([data-wf-section="hero"]) a[class*="btn"],
.site-preview-root [data-wf-section]:not([data-wf-section="hero"]) a[class*="cta"],
.site-preview-root .section-cta__link,
.site-preview-root .wf-hero__cta {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .site-preview-root [data-wf-section]:not([data-wf-section="hero"]) button,
  .site-preview-root [data-wf-section]:not([data-wf-section="hero"]) .button,
  .site-preview-root [data-wf-section]:not([data-wf-section="hero"]) a[class*="btn"],
  .site-preview-root [data-wf-section]:not([data-wf-section="hero"]) a[class*="cta"],
  .site-preview-root .section-cta__link,
  .cta-section-v3 .btn-call,
  .cta-section-v3 .btn-email,
  .callus-section .callus-btn {
    width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .cta-section-v3 .action-buttons {
    flex-direction: column;
  }
}

/* --- Home page: *-section-v1 padding ladder --- */

@media (max-width: 768px) {
  .about-section-v1,
  .services-section-v1,
  .gallery-section-v1,
  .cta-section-v3 {
    padding-top: 56px;
    padding-bottom: 56px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .about-section-v1 .about-stats {
    flex-direction: column;
    gap: 20px;
  }

  .gallery-section-v1 .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .about-section-v1,
  .services-section-v1,
  .gallery-section-v1,
  .cta-section-v3 {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .cta-section-v3 .cta-banner {
    padding: 28px 20px;
  }

  .services-section-v1 .service-step {
    gap: 16px;
  }

  .services-section-v1 .step-marker {
    width: 45px;
    height: 45px;
    font-size: 0.9rem;
  }
}

@media (max-width: 360px) {
  .about-section-v1,
  .services-section-v1,
  .gallery-section-v1,
  .cta-section-v3 {
    padding-top: 36px;
    padding-bottom: 36px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .cta-section-v3 .cta-banner {
    padding: 24px 16px;
  }

  .about-section-v1 h2,
  .services-section-v1 h2,
  .gallery-section-v1 h2,
  .cta-section-v3 h2 {
    font-size: clamp(1.35rem, 6vw, 2rem);
  }
}

@media (max-width: 280px) {
  .about-section-v1,
  .services-section-v1,
  .gallery-section-v1,
  .cta-section-v3 {
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .cta-section-v3 .cta-banner {
    padding: 20px 12px;
  }
}

/* --- Footer (all pages) --- */

.footer-section-v1 .footer-credit {
  margin: 12px 0 0;
  font-family: "Barlow", sans-serif;
  font-size: 0.8rem;
}

.footer-section-v1 .footer-credit a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-section-v1 .footer-credit a:hover {
  color: #1aada3;
}

@media (max-width: 768px) {
  .footer-section-v1 {
    padding: 56px 24px 32px;
  }

  .footer-section-v1 .footer-grid {
    gap: 32px;
  }
}

@media (max-width: 480px) {
  .footer-section-v1 {
    padding: 40px 16px 28px;
  }

  .footer-section-v1 .footer-grid {
    gap: 24px;
  }

  .footer-section-v1 .contact-info a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 360px) {
  .footer-section-v1 {
    padding: 36px 14px 24px;
  }

  .footer-section-v1 .footer-grid {
    gap: 20px;
  }
}

@media (max-width: 280px) {
  .footer-section-v1 {
    padding: 32px 12px 20px;
  }
}

/* --- Inner pages: main sections --- */

@media (max-width: 360px) {
  .services-section,
  .portfolio-section,
  .process-section,
  .callus-section {
    padding-top: 36px;
    padding-bottom: 36px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .services-section .service-feature,
  .process-section .process-card,
  .callus-section .callus-strip,
  .callus-section .detail-box {
    padding: 20px 16px;
  }

  .callus-section .callus-btn {
    padding-left: 16px;
    padding-right: 16px;
    font-size: clamp(0.75rem, 3.2vw, 0.9rem);
  }

}

@media (max-width: 280px) {
  .services-section,
  .portfolio-section,
  .process-section,
  .callus-section {
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .services-section .service-feature,
  .process-section .process-card,
  .callus-section .callus-strip,
  .callus-section .detail-box {
    padding: 16px 12px;
  }

  .callus-section .callus-strip {
    padding: 24px 14px;
  }

  .callus-section .callus-btn {
    padding: 14px 12px;
  }
}