/* =====================================================================
   US FENCE PRO - DESIGN SYSTEM LAYER
   Loaded AFTER style.css / usfencepro.css. Everything here is a token or
   an override so it can be removed by deleting one <link> in head.php.

   Palette   : brand red + charcoal ink on warm-neutral paper
   Type      : Roboto (headings / buttons)  +  Open Sans (body)
   Spacing   : 8px base; sections use --usfp-section
   ===================================================================== */

:root {
  --usfp-red:        #bf1414;   /* brand red (unchanged)                    */
  --usfp-red-dark:   #9a0f0f;   /* hover / pressed                          */
  --usfp-red-tint:   #ff8f8f;   /* red for use on dark backgrounds (AA)     */
  --usfp-ink:        #1a1a1a;   /* headings, dark surfaces                  */
  --usfp-charcoal:   #303030;   /* secondary dark surface                   */
  --usfp-text:       #4a4f55;   /* body copy on light (7.9:1 on white)      */
  --usfp-text-soft:  #6b7077;   /* captions (4.8:1 on white)                */
  --usfp-paper:      #f5f6f6;   /* alternate section background             */
  --usfp-line:       #e2e4e6;
  --usfp-white:      #fff;

  --usfp-font-head: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --usfp-font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  --usfp-radius: 4px;
  --usfp-shadow: 0 6px 24px rgba(26, 26, 26, .10);
  --usfp-section: 88px;          /* vertical padding of a section          */
  --usfp-gutter: 24px;
}
@media (max-width: 991px) { :root { --usfp-section: 64px; } }
@media (max-width: 575px) { :root { --usfp-section: 48px; --usfp-gutter: 16px; } }

/* ---------- Base typography ------------------------------------------ */
html { scroll-behavior: smooth; }
body {
  font-family: var(--usfp-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--usfp-text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.wt-tilte, .widget-title, .post-title {
  font-family: var(--usfp-font-head);
  color: var(--usfp-ink);
  font-weight: 700;
  line-height: 1.2;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }
h4 { font-size: 1.2rem; }
p  { color: var(--usfp-text); }
img { max-width: 100%; height: auto; }
a:focus-visible, button:focus-visible, .site-button:focus-visible,
.site-button-secondry:focus-visible {
  outline: 3px solid var(--usfp-red); outline-offset: 2px;
}

/* ---------- Section rhythm ------------------------------------------- */
.page-content .section-full,
.page-content .usfp-section {
  padding-top: var(--usfp-section);
  padding-bottom: var(--usfp-section);
}
.page-content .section-head { margin-bottom: 48px; }
.page-content .section-head p { font-size: 1.05rem; max-width: 760px; margin-left: auto; margin-right: auto; }
.page-content .section-head.text-left p { margin-left: 0; }
.container { padding-left: var(--usfp-gutter); padding-right: var(--usfp-gutter); }
.bg-gray { background-color: var(--usfp-paper); }

/* ---------- Buttons (one system) ------------------------------------- */
.site-button, .site-button-secondry, .site-button-link,
.usfp-btn, .usfp-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 12px 28px;
  font-family: var(--usfp-font-head); font-weight: 700; font-size: 14px;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--usfp-radius);
  line-height: 1.2; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.site-button, .usfp-btn { background: var(--usfp-red); border-color: var(--usfp-red); color: #fff; }
.site-button:hover, .site-button:focus, .usfp-btn:hover, .usfp-btn:focus {
  background: var(--usfp-red-dark); border-color: var(--usfp-red-dark); color: #fff; transform: translateY(-1px);
}
.site-button-secondry { background: var(--usfp-ink); border-color: var(--usfp-ink); color: #fff; }
.site-button-secondry:hover, .site-button-secondry:focus { background: #000; border-color: #000; color: #fff; transform: translateY(-1px); }
.usfp-btn-ghost { background: transparent; border-color: #fff; color: #fff; }
.usfp-btn-ghost:hover, .usfp-btn-ghost:focus { background: #fff; color: var(--usfp-ink); }
.usfp-btn-ghost.on-light { border-color: var(--usfp-ink); color: var(--usfp-ink); }
.usfp-btn-ghost.on-light:hover { background: var(--usfp-ink); color: #fff; }
.usfp-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Header: estimate CTA in nav ------------------------------- */
.site-header .header-nav .nav > li.usfp-nav-cta { display: flex; align-items: center; }
.site-header .header-nav .nav > li.usfp-nav-cta > a {
  background: var(--usfp-red); color: #fff !important; border-radius: var(--usfp-radius);
  padding: 10px 18px; margin-left: 12px; line-height: 1.2;
  font-family: var(--usfp-font-head); font-weight: 700; letter-spacing: .04em;
}
.site-header .header-nav .nav > li.usfp-nav-cta > a:hover { background: var(--usfp-red-dark); }
@media (max-width: 991px) {
  .site-header .header-nav .nav > li.usfp-nav-cta { display: flex; align-items: center; }
.site-header .header-nav .nav > li.usfp-nav-cta > a { display: block; margin: 12px 15px; text-align: center; }
  .site-header .logo-header img { max-width: 190px; height: auto; }
}
.top-bar .e-p-bx li, .top-bar .e-p-bx a { color: #fff; }

/* ---------- Home hero (static; replaces Revolution slider) ------------ */
.usfp-hero {
  position: relative; display: flex; align-items: center;
  min-height: clamp(460px, 68vh, 720px);
  background: #1a1a1a var(--hero-img) center 70% / cover no-repeat;
  color: #fff; isolation: isolate;
}
.usfp-hero::before {              /* legibility scrim: dark left, clear right */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.55) 45%, rgba(10,10,10,.05) 100%);
}
.usfp-hero .container { padding-top: 64px; padding-bottom: 64px; }
.usfp-hero h1 { color: #fff; text-transform: uppercase; max-width: 16ch; margin: 0 0 16px; text-shadow: 0 2px 16px rgba(0,0,0,.35); }
.usfp-hero h1::before { content: ""; display: block; width: 72px; height: 6px; background: var(--usfp-red); margin-bottom: 20px; }
.usfp-hero h1 span { color: #fff; }
.usfp-hero p { color: #f1f1f1; font-size: clamp(1rem, .95rem + .4vw, 1.2rem); max-width: 34rem; margin: 0 0 28px; }
@media (max-width: 767px) {
  .usfp-hero { min-height: 520px; background-position: 68% center; }
  .usfp-hero::before { background: linear-gradient(180deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,.75) 100%); }
  .usfp-hero .usfp-btn-row .site-button, .usfp-hero .usfp-btn-row .usfp-btn-ghost { flex: 1 1 100%; }
}

/* ---------- Value strip (red) : white text for contrast --------------- */
.our-value .icon-content h5, .our-value .icon-content p,
.our-value .text-secondry, .our-value .text-secondry * { color: #fff !important; }
.our-value .icon-cell { color: #fff; }
.our-value-right .pull-right { float: none !important; text-align: right; }
@media (max-width: 991px) { .our-value-right .pull-right { text-align: left; } }
.page-content .section-full.site-bg-primary { padding-top: 40px; padding-bottom: 16px; }

/* ---------- Cards / icon boxes --------------------------------------- */
.wt-icon-box-wraper.bx-style-1 { border-radius: var(--usfp-radius); box-shadow: 0 1px 0 var(--usfp-line); }
.our-value ~ * .wt-icon-box-wraper.center { height: 100%; }

/* ---------- Family band (photo + text, faces stay visible) ------------ */
.usfp-family { background: var(--usfp-ink); color: #fff; }
.usfp-family .row { align-items: center; }
.usfp-family img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%;
  border-radius: var(--usfp-radius); display: block;
}
.usfp-family h2 { color: #fff; text-transform: uppercase; margin-bottom: 12px; }
.usfp-family p  { color: #d9d9d9; font-size: 1.1rem; margin-bottom: 24px; }
.usfp-family .eyebrow { color: var(--usfp-red-tint); font-family: var(--usfp-font-head); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; margin-bottom: 8px; }
@media (max-width: 991px) { .usfp-family .col-lg-6:first-child { margin-bottom: 32px; } }

/* ---------- Gallery / project grid: one aspect ratio, no distortion --- */
.portfolio-wrap .masonry-item { padding: 0; }
.portfolio-wrap .wt-thum-bx { position: relative; overflow: hidden; }
.portfolio-wrap .wt-thum-bx img {
  width: 100%; aspect-ratio: 8 / 5; object-fit: cover; display: block;
}
@media (max-width: 767px) {
  .portfolio-wrap .masonry-item { width: 50%; float: left; }
  .portfolio-wrap .overlay-icon a { transform: scale(.85); }
}

/* generic image frames so mismatched source sizes never stretch */
.usfp-frame { position: relative; overflow: hidden; border-radius: var(--usfp-radius); background: var(--usfp-paper); }
.usfp-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.usfp-frame.r-16x10 { aspect-ratio: 16 / 10; }
.usfp-frame.r-4x3   { aspect-ratio: 4 / 3; }
.wt-media img, .wt-thum-bx img { object-fit: cover; }
.wt-box .wt-media { overflow: hidden; }
.wt-box .wt-media > a > img, .wt-box .wt-media > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.wt-product-gallery img { object-fit: contain; }

/* ---------- Warranty plans ------------------------------------------- */
.pricingtable-price, .pricingtable-price * { color: #fff !important; }
.pricingtable-bx { font-family: var(--usfp-font-head); font-weight: 700; }
.pricingtable-title h3 { color: #fff; font-size: 1.15rem; margin: 0; text-transform: uppercase; }
.pricingtable-wrapper .site-button { margin: 4px 0; }

/* ---------- Inner-page banner + breadcrumb --------------------------- */
.wt-bnr-inr { min-height: 240px; display: flex; align-items: center; background-size: cover; background-position: center; }
.wt-bnr-inr .container { width: 100%; }
.wt-bnr-inr h1 { color: #fff; text-transform: uppercase; margin: 0; }
.wt-bnr-inr .usfp-lede { color: #eee; margin: 8px 0 0; max-width: 40rem; }
@media (max-width: 575px) { .wt-bnr-inr { min-height: 180px; } }
.bg-gray-light { background: var(--usfp-paper); }
.wt-breadcrumb { margin: 0; padding: 0; }

/* ---------- Service pages (shared template) -------------------------- */
.usfp-service .lede { font-size: 1.15rem; color: var(--usfp-text); }
.usfp-checks { list-style: none; margin: 20px 0 28px; padding: 0; }
.usfp-checks li { position: relative; padding: 0 0 12px 32px; }
.usfp-checks li::before {
  content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px; line-height: 22px; text-align: center; font-size: 11px;
  color: #fff; background: var(--usfp-red); border-radius: 50%;
}
.usfp-card {
  background: #fff; border: 1px solid var(--usfp-line); border-radius: var(--usfp-radius);
  padding: 28px; height: 100%; box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.usfp-card { display: flex; flex-direction: column; }
.usfp-card > p { margin-bottom: 16px; }
.usfp-card .usfp-btn-ghost { margin-top: auto; align-self: flex-start; }
.usfp-card h3, .usfp-card h4 { margin: 0 0 8px; font-size: 1.15rem; text-transform: uppercase; }
.usfp-card p { margin: 0; }
.usfp-card > p:last-child { margin-bottom: 0; }
.usfp-card .usfp-vendor-tag { display: inline-block; margin-bottom: 12px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--usfp-red); }
.usfp-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.usfp-grid.one { grid-template-columns: minmax(0, 640px); justify-content: center; }
.usfp-grid.two { grid-template-columns: repeat(2, 1fr); }
.usfp-grid.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .usfp-grid, .usfp-grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .usfp-grid, .usfp-grid.one, .usfp-grid.two, .usfp-grid.four { grid-template-columns: 1fr; gap: 16px; } .usfp-card { padding: 22px; } }
.usfp-photos { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.usfp-photos.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 767px) { .usfp-photos, .usfp-photos.two { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.usfp-photos a { display: block; }
.usfp-vendors-note { border-left: 4px solid var(--usfp-red); background: var(--usfp-paper); padding: 20px 24px; border-radius: 0 var(--usfp-radius) var(--usfp-radius) 0; }
.usfp-vendors-note p { margin: 0; }
.usfp-vendors-note a, .usfp-service p a { color: var(--usfp-red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.usfp-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; grid-template-columns: repeat(4, 1fr); }
.usfp-steps li { counter-increment: step; position: relative; padding-top: 56px; }
.usfp-steps li::before {
  content: counter(step); position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--usfp-ink); color: #fff; font: 700 1.1rem/40px var(--usfp-font-head); text-align: center;
}
.usfp-steps h4 { font-size: 1.05rem; text-transform: uppercase; margin: 0 0 6px; }
.usfp-steps p { margin: 0; }
@media (max-width: 991px) { .usfp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .usfp-steps { grid-template-columns: 1fr; } }
.usfp-cta-band { background: var(--usfp-ink); color: #fff; text-align: center; }
.usfp-cta-band h2 { color: #fff; margin-bottom: 10px; }
.usfp-cta-band p { color: #d9d9d9; margin: 0 auto 28px; max-width: 40rem; }
.usfp-cta-band .usfp-btn-row { justify-content: center; }

/* ---------- Installation overview cards ------------------------------ */
.wt-box.bg-gray { border-radius: var(--usfp-radius); }
.wt-box .wt-title a { color: var(--usfp-ink); }
.wt-box .wt-info .site-button { margin-top: 12px; }

/* ---------- Vendor logos --------------------------------------------- */
.client-logo-carousel .client-logo { display: flex; align-items: center; justify-content: center; height: 110px; }
.client-logo-carousel .client-logo img { max-height: 90px; width: auto; max-width: 100%; object-fit: contain; }
.client-logo-carousel .client-logo a { display: flex; align-items: center; justify-content: center; }

/* ---------- Footer: legible on dark ---------------------------------- */
.footer-dark, .footer-dark p, .footer-dark li, .footer-dark .widget_services li a { color: #d5d5d5; }
.footer-dark .widget-title { color: #fff; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; }
.footer-dark a { color: #fff; }
.footer-dark a:hover { color: var(--usfp-red-tint); }
.footer-dark .wt-icon-box-wraper p, .footer-dark .wt-icon-box-wraper p a { color: #e6e6e6 !important; }
.footer-dark .wt-icon-box-wraper .icon-md { color: #fff; }
.footer-dark .weekday.highlight { color: var(--usfp-red-tint); }
.footer-dark .social-icons a { background: transparent; color: #fff; border: 1px solid #6a6a6a; width: 40px; height: 40px; line-height: 38px; }
.footer-dark .social-icons a:hover { background: var(--usfp-red); border-color: var(--usfp-red); color: #fff; }
.footer-bottom, .footer-bottom a, .footer-bottom .copyrights-text a { color: #cfcfcf !important; }
.footer-bottom a:hover { color: #fff !important; }
.call-to-action-wrap { padding: 8px 0; }
.call-to-action-wrap h4 { color: #fff; }
.call-to-action-wrap p  { color: #fff; }
.call-to-action-wrap .call-to-action-right { display: flex; flex-direction: column; gap: 12px; max-width: 300px; margin-left: auto; }
.call-to-action-wrap .call-to-action-right a { width: 100%; }
.footer-bottom .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 0; }
.footer-bottom .wt-footer-bot-left, .footer-bottom .wt-footer-bot-right { float: none; width: auto; padding-bottom: 20px; }
.footer-bottom .copyrights-nav { float: none !important; margin: 0; padding: 0; }
@media (max-width: 767px) { .call-to-action-wrap .call-to-action-right { max-width: none; margin-left: 0; padding-top: 0; } .call-to-action-wrap .p-r50 { padding-right: 0 !important; } }

/* ---------- Mobile sticky action bar --------------------------------- */
.usfp-mobilebar { display: none; }
@media (max-width: 767px) {
  .usfp-mobilebar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    box-shadow: 0 -4px 16px rgba(0,0,0,.18);
  }
  .usfp-mobilebar a {
    flex: 1; text-align: center; padding: 14px 8px; min-height: 52px;
    font: 700 14px/1.2 var(--usfp-font-head); letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  }
  .usfp-mobilebar .call { background: var(--usfp-ink); color: #fff; }
  .usfp-mobilebar .est  { background: var(--usfp-red); color: #fff; }
  body { padding-bottom: 52px; }
  .scroltop { bottom: 68px !important; }
}

/* ---------- Misc polish ---------------------------------------------- */
::selection { background: var(--usfp-red); color: #fff; }
.wt-separator-outer { margin-bottom: 24px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* placeholder line-drawings (temporary / repair / DIY) stay uncropped on white */
.wt-box .wt-media img.is-drawing { object-fit: contain; background: #fff; padding: 12px; }

/* inner-page banner without a photo: charcoal with a brand-red rule */
.wt-bnr-inr.usfp-banner-plain { background: var(--usfp-ink); border-bottom: 6px solid var(--usfp-red); }
.wt-bnr-inr.usfp-banner-plain .overlay-main { display: none; }

@media (max-width: 575px) { .usfp-btn-row > a { flex: 1 1 100%; } }