/*
 * Fence Ace v0.29.0 - Visual QA Pass 1
 * Global typography, spacing, alignment and mobile-density normalization.
 * Loaded after every page stylesheet so these rules form the final visual baseline.
 */

:root {
  --fa-section: 76px;
}

/* --------------------------------------------------------------------------
   Heading fit and line quality
   -------------------------------------------------------------------------- */
body.fenceace-site h1,
body.fenceace-site h2,
body.fenceace-site h3,
body.fenceace-site h4 {
  max-width: 100%;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
}

body.fenceace-site h1 {
  font-size: clamp(2.62rem, 4.15vw, 3.78rem);
  line-height: 1.025;
  letter-spacing: -.034em;
}

body.fenceace-site h2 {
  font-size: clamp(1.94rem, 3.05vw, 2.78rem);
  line-height: 1.075;
  letter-spacing: -.03em;
}

body.fenceace-site h3 {
  font-size: clamp(1.28rem, 1.85vw, 1.55rem);
  line-height: 1.13;
  letter-spacing: -.025em;
}

body.fenceace-site p,
body.fenceace-site li,
body.fenceace-site summary,
body.fenceace-site figcaption {
  text-wrap: pretty;
}

body.fenceace-site .fenceace-eyebrow {
  margin-bottom: 12px !important;
}

body.fenceace-site .fenceace-section-heading {
  max-width: 850px;
  margin-bottom: 32px;
}

body.fenceace-site .fenceace-section-heading--center {
  max-width: 880px;
}

body.fenceace-site .fenceace-section-intro {
  max-width: 760px;
  margin-top: 16px !important;
  font-size: clamp(1.02rem, 1.32vw, 1.14rem);
  line-height: 1.58;
}

/* Keep two-column section compositions visually tighter and more symmetrical. */
body.fenceace-site .fenceace-section > .fenceace-shell > [class$="__grid"] {
  column-gap: clamp(36px, 4vw, 56px);
}

body.fenceace-site .fenceace-section > .fenceace-shell > [class$="__head"] {
  gap: 28px;
}

/* Remove oversized desktop hero whitespace on the earliest large-template pages. */
body.fenceace-site .fenceace-hero {
  padding-top: 58px;
  padding-bottom: 62px;
}

body.fenceace-site .fa-res-hero,
body.fenceace-site .fa-com-hero,
body.fenceace-site .fa-fence-hero {
  padding-top: 54px;
  padding-bottom: 60px;
}

body.fenceace-site.fenceace-contact-page .fenceace-contact-hero {
  padding-top: 62px;
  padding-bottom: 66px;
}

body.fenceace-site .fa-legal-hero {
  padding-top: 54px;
  padding-bottom: 46px;
}

body.fenceace-site.fenceace-contact-page .fenceace-contact-form-section {
  padding-top: 72px;
  padding-bottom: 78px;
}

/* Final CTA bands should feel intentional, not like another full content section. */
body.fenceace-site section[class$="-final"] {
  padding-top: 50px;
  padding-bottom: 50px;
}

/* Repeated split-head patterns had extra bottom padding that created visual dead space. */
body.fenceace-site .fa-vinyl-projects__head > div:last-child,
body.fenceace-site .fa-alu-projects__head > div:last-child,
body.fenceace-site .fa-cl-projects__head > div:last-child,
body.fenceace-site .fa-wood-projects__head > div:last-child,
body.fenceace-site .fa-pool-projects__head > div:last-child,
body.fenceace-site .fa-privacy-projects__head > div:last-child,
body.fenceace-site .fa-gates-projects__head > div:last-child,
body.fenceace-site .fa-repair-projects__head > div:last-child,
body.fenceace-site .fa-ag-proof-section__head > div:last-child,
body.fenceace-site .fa-sports-projects__head > div:last-child,
body.fenceace-site .fa-con-projects__head > div:last-child,
body.fenceace-site .fa-bs-projects__head > div:last-child,
body.fenceace-site .fa-naples-proofsection__head > div:last-child,
body.fenceace-site .fa-pg-proofsection__head > div:last-child,
body.fenceace-site .fa-res-projects__head > div:last-child {
  padding-bottom: 28px !important;
}

/* Footer density and alignment. */
body.fenceace-site .fenceace-footer {
  padding-top: 58px;
}
body.fenceace-site .fenceace-footer__grid {
  gap: 38px;
}
body.fenceace-site .fenceace-footer__bottom {
  margin-top: 38px;
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1050px) {
  :root {
    --fa-section: 64px;
  }

  body.fenceace-site h1 {
    font-size: clamp(2.45rem, 6vw, 3.3rem);
  }

  body.fenceace-site h2 {
    font-size: clamp(1.86rem, 4.6vw, 2.45rem);
  }

  body.fenceace-site .fenceace-section > .fenceace-shell > [class$="__grid"] {
    column-gap: 38px;
    row-gap: 34px;
  }

  body.fenceace-site .fenceace-hero,
  body.fenceace-site .fa-res-hero,
  body.fenceace-site .fa-com-hero,
  body.fenceace-site .fa-fence-hero,
  body.fenceace-site.fenceace-contact-page .fenceace-contact-hero {
    padding-top: 46px;
    padding-bottom: 50px;
  }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  :root {
    --fa-section: 50px;
  }

  body.fenceace-site {
    font-size: 16px;
    line-height: 1.58;
  }

  body.fenceace-site h1 {
    font-size: clamp(2.02rem, 9.2vw, 2.48rem);
    line-height: 1.07;
    letter-spacing: -.028em;
  }

  body.fenceace-site h2 {
    font-size: clamp(1.62rem, 7.1vw, 1.98rem);
    line-height: 1.11;
    letter-spacing: -.024em;
  }

  body.fenceace-site h3 {
    font-size: clamp(1.22rem, 5.3vw, 1.42rem);
    line-height: 1.16;
  }

  body.fenceace-site .fenceace-eyebrow {
    margin-bottom: 10px !important;
    font-size: 11.5px;
    letter-spacing: .1em;
  }

  body.fenceace-site .fenceace-section-heading {
    max-width: 100%;
    margin-bottom: 24px !important;
  }

  body.fenceace-site .fenceace-section-intro {
    margin-top: 13px !important;
    font-size: 1rem;
    line-height: 1.55;
  }

  body.fenceace-site .fenceace-section > .fenceace-shell > [class$="__grid"] {
    row-gap: 28px;
  }

  body.fenceace-site .fenceace-section > .fenceace-shell > [class$="__head"] {
    gap: 18px;
  }

  body.fenceace-site .fenceace-hero,
  body.fenceace-site .fa-res-hero,
  body.fenceace-site .fa-com-hero,
  body.fenceace-site .fa-fence-hero,
  body.fenceace-site.fenceace-contact-page .fenceace-contact-hero,
  body.fenceace-site .fa-legal-hero {
    padding-top: 30px !important;
    padding-bottom: 34px !important;
  }

  body.fenceace-site.fenceace-contact-page .fenceace-contact-form-section {
    padding-top: 50px;
    padding-bottom: 54px;
  }

  /* Let content determine mobile card height rather than desktop minimums. */
  body.fenceace-site .fenceace-section [class$="__grid"] > article,
  body.fenceace-site .fenceace-section [class$="__grid"] > a {
    min-height: 0 !important;
  }

  body.fenceace-site section[class$="-final"] {
    padding-top: 42px;
    padding-bottom: 42px;
  }

  body.fenceace-site .fenceace-footer {
    padding-top: 48px;
  }

  body.fenceace-site .fenceace-footer__grid {
    gap: 28px 22px;
  }

  body.fenceace-site .fenceace-footer__bottom {
    margin-top: 30px;
    padding-top: 20px;
  }

  /* Keep the utility strip compact so content appears sooner on small screens. */
  body.fenceace-site .fenceace-utility__inner {
    min-height: 30px;
  }
}

@media (max-width: 480px) {
  :root {
    --fa-section: 44px;
  }

  body.fenceace-site h1 {
    font-size: clamp(1.95rem, 9.6vw, 2.3rem);
  }

  body.fenceace-site h2 {
    font-size: clamp(1.55rem, 7.4vw, 1.86rem);
  }

  body.fenceace-site .fenceace-section > .fenceace-shell > [class$="__grid"] {
    row-gap: 24px;
  }

  body.fenceace-site .fenceace-footer__grid {
    gap: 24px;
  }
}