/* ============================================================================
   NLD responsive fixes — tablet range (700-1100px) + shared-component repairs.
   Generated from a 9-page design audit; every rule was adversarially verified
   against desktop (>1100px) and mobile (<700px) regressions before shipping.
   Loaded AFTER custom.css. Do not edit custom.css for these; edit here.
   ============================================================================ */

/* --- fix-02 [critical] pages: hub-windows,projects,all-services
   hero (wst-flex-box__bg padding-top:50% aspect-box, shared hero pattern) --- */
@media (max-width: 975px) {
  /* Hub pages (page-windows/siding/roofing via partials/cro-hero-picture.php) and page-LP:
     make the in-flow <picture> hero fill the padding-top:50% box, like the absolutely
     positioned .attachment-post-thumbnail variant already does. */
  .wst-flex-box__bg picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* The hub <img> has no class and only gets img{width:100%} from normalize.css;
     force it to cover the box regardless of the featured image's aspect ratio. */
  .wst-flex-box__bg picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width: 768px) and (max-width: 975px) {
  /* In-flow .wst-flex-box__bg-img pages only: drop the dead padding slab.
     :not(.single-gallery-hero) excludes the ~17 project/single-gallery templates whose
     absolutely positioned .attachment-post-thumbnail heroes already cover the box. */
  .our-work-main-page:not(.single-gallery-hero) .wst-flex-box__bg {
    padding-top: 0;
  }
  .our-work-main-page:not(.single-gallery-hero) .wst-flex-box__bg-img {
    min-height: 42vw;
  }
  /* Kept as its OWN rule (not grouped) so browsers without :has() drop only this rule.
     The :has() guard protects page-contact.php, whose small-h-hero uses an absolute
     .attachment-post-thumbnail and would collapse to 0 height without padding-top. */
  .small-h-hero .wst-flex-box__bg:has(.wst-flex-box__bg-img) {
    padding-top: 0;
  }
  .small-h-hero .wst-flex-box__bg-img {
    min-height: 318px;
  }
}

/* --- fix-03 [critical] pages: blog-single,hub-windows
   cro-sticky-bar (.nld-desk-cta scroll-triggered CTA, partials/cro-sticky-bar.php) --- */
@media (min-width: 768px) and (max-width: 1200px) {
  /* .mobile header owns top:0 with z-index 100000 at <=1200px (inclusive — custom.css:9959 and
     home-page-mobile-custom.css:13982); dock the CTA to the bottom instead.
     !important required because the partial's inline <style> is printed in the body,
     after this stylesheet, and would win at equal specificity. */
  .nld-desk-cta {
    top: auto !important;
    bottom: 0 !important;
    transform: translateY(110%) !important;
    box-shadow: 0 -4px 18px rgba(19, 44, 82, 0.14) !important;
  }
  body.nld-scrolled .nld-desk-cta {
    transform: translateY(0) !important;
  }
}
@media (min-width: 768px) and (max-width: 919px) {
  .nld-desk-cta__offer {
    display: none;
  }
  .nld-desk-cta__brand {
    white-space: nowrap;
  }
}

/* --- fix-04 [critical] pages: all-services
   all-services-section service-row titles (.all-services-section-half__title, 8 rows) --- */
@media only screen and (min-width: 936px) and (max-width: 1099px) {
  .all-services-section-half__title {
    width: auto;
    max-width: 100%;
    font-size: 50px;
    line-height: 1.15;
  }
}
@media only screen and (min-width: 751px) and (max-width: 935px) {
  .all-services-section-half__title {
    font-size: 50px;
    line-height: 1.15;
  }
}

/* --- fix-05 [major] pages: blog-single,blog-archive,contact,projects,about,all-services
   footer (.footer-box-left / .footer-box-right — site-wide shared component) --- */
@media only screen and (min-width: 1046px) and (max-width: 1161px) {
  /* extend the existing <=1045px proportional footer through the wrap gap,
     including scrollbar-offset viewports up to 1161px */
  .footer-box-left {
    width: 40%;
    padding-right: 40px;
  }
  .footer-box-right {
    width: 54%;
  }
}

/* --- fix-06 [major] pages: home,hub-windows,blog-single
   blog-cards (.post-container / .post-item — homepage latest posts + hub/single related articles) --- */
@media (min-width: 768px) and (max-width: 1175px) {
  .blog-section .post-container,
  .home .post-container {
    display: grid;
    grid-template-columns: repeat(2, 286.5px);
    justify-content: center;
    gap: 0 60px; /* row spacing comes from the existing .post-item { margin-bottom: 40px } (<=1200px rule); a 40px row-gap would double it to 80px */
  }
  .blog-section .post-container .post-item,
  .home .post-container .post-item {
    width: 286.5px;
  }
}

/* --- fix-07 [major] pages: home,geo-lp
   section-our__work-home project cards (fixed 388px items, shared dark band) --- */
@media (min-width: 768px) and (max-width: 1099px) {
  .section-our__work-home-bottom-box {
    justify-content: center;
    column-gap: 20px;
    row-gap: 24px;
  }
  .section-our__work-home-bottom-box--item {
    width: calc(50% - 10px);
    max-width: 388px;
    padding: 0;
  }
}

/* --- fix-08 [major] pages: projects,about
   testimonial slider (.testimonial-slider-description — shared testimonial section) --- */
@media only screen and (min-width: 751px) and (max-width: 935px) {
  .testimonial-slider-description {
    width: 100%;
    margin-top: 20px;
  }
}

/* --- fix-09 [major] pages: blog-single,blog-archive
   blog sidebar promo box (.sidebar-blog-page__custom / .sidebar-discount-container / .sidebar-decoration) --- */
@media (min-width: 976px) and (max-width: 1199px) {
  /* keep the absolute decoration inside the promo box (100% = padding-box; 40px = its 20px L/R padding) */
  .sidebar-decoration {
    max-width: calc(100% - 40px);
    height: auto;
  }
  .sidebar-discount-container-title {
    font-size: 34px;
    line-height: 36px;
  }
  .sidebar-discount-container-Small--text {
    font-size: 15px;
    line-height: 17px;
  }
}

/* --- fix-10 [major] pages: contact,all-services
   hero title (.small-h-hero .wst-flex-box__title — shared interior-page hero) --- */
@media (min-width: 976px) and (max-width: 1099px) {
  .small-h-hero .wst-flex-box__title {
    font-size: 54px;
    line-height: 1.2;
  }
  .small-h-hero .wst-flex-box__text--container {
    padding-left: 40px;
  }
}

/* --- fix-11 [major] pages: home
   hero (.home-main-section — triggers, columns, stacked layout) --- */
/* fix-11: homepage hero (front-page.php). custom.css only loads for desktop UAs
   (!wp_is_mobile() branch in functions.php), so these rules never reach real
   phones/tablets - they fix resized desktop windows, the only place the bug shows. */

@media (min-width: 751px) and (max-width: 1162px) {
  /* Tooltips are display:none at <=1162px (custom.css:10427) and hover-only anyway;
     hide the dead hotspot icons too. custom.css hides them only at <=750px, so the
     range starts at 751px, not 768px, to avoid a 751-767px gap. Homepage-only classes. */
  .trigger-1,
  .trigger-2,
  .trigger-3,
  .trigger-4,
  .trigger-5,
  .trigger-6,
  .trigger-7,
  .trigger-8 {
    display: none;
  }
}

@media (min-width: 936px) and (max-width: 1162px) {
  /* Fixed-width text panel, photo takes the remainder. Extended from 1099 to 1162 so
     the panel doesn't jump ~28px at 1100px; at 1163px the base 45% resolves to ~476px,
     so the handoff is seamless.
     :not(.landing-page-hero) is required: page-black-friday.php, pager-siding-landing.php
     and page-windows-landing.php share these child classes. Without it, the unopposed
     flex-basis would defeat .black-friday-hero .home-main-section__text-box{width:100%}
     at 936-975px (flex-basis beats width in flex layout) and break that hero. */
  .home-main-section:not(.landing-page-hero) .home-main-section__text-box {
    width: 478px;
    flex: 0 0 478px;
  }
  .home-main-section:not(.landing-page-hero) .home-main-section__img-container {
    width: auto;
    flex: 1 1 auto;
  }
}

@media (min-width: 751px) and (max-width: 935px) {
  /* Stacked hero: shorten the photo band (base is 650px). Scoped so the landing/
     black-friday heroes keep their own .landing-page-hero min-heights (582px/445px). */
  .home-main-section:not(.landing-page-hero) .home-main-section__img {
    min-height: 420px;
  }
  /* Same treatment the <=750px block already applies: the torn-paper decoration
     asset cannot stretch full-width. Homepage-only class (front-page.php). */
  .home-main-section__text-container {
    background-image: none;
  }
}

/* --- fix-12 [major] pages: hub-windows
   wsr-section-tab (tab-content headings + tab icon, page-windows.php) --- */
/* root cause spans up to the 1200px desktop breakpoint, so use 936-1199 (768-935 already gets 43px and is fine) */
@media (min-width: 936px) and (max-width: 1199px) {
  .wsr-section-tab .wsr-section-tab-right__title {
    font-size: 40px;
    line-height: 1.3;
    padding-left: 70px;
  }
  .wsr-section-tab .wsr-section-tab-right__tab-img {
    bottom: -40px;
    left: -20px;
  }
  .wsr-section-tab .wsr-section-tab-right__tab-img img {
    height: 110px;
  }
}

/* --- fix-13 [major] pages: geo-lp
   wsr-slider__section content/form columns (.page-template-page-LP .flex-box-half) --- */
@media (min-width: 768px) and (max-width: 1099px) {
  .page-template-page-LP .wsr-slider__section .flex-box .flex-box-half:last-child {
    margin-bottom: 50px;
  }
}
@media (min-width: 936px) and (max-width: 975px) {
  .page-template-page-LP .wsr-slider__section .flex-box-half {
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 975px) {
  .page-template-page-LP .wsr-slider__section .flex-box .flex-box-half:last-child {
    order: -1;
  }
  .page-template-page-LP .additional-template-page--slider .wsr-slider__section-box {
    position: static;
  }
}

/* --- fix-14 [major] pages: geo-lp
   video-section (.video-title fixed height) --- */
@media (min-width: 769px) and (max-width: 1099px) {
  .video-title {
    height: auto;
    min-height: 78px; /* keeps the two video frames top-aligned */
  }
}

/* --- fix-15 [major] pages: geo-lp
   hero (.page-template-page-LP .wst-flex-box__text--container fixed height:318px) --- */
@media (max-width: 1200px) {
  .page-template-page-LP .wst-flex-box__text--container {
    height: auto;
  }
}

/* --- fix-16 [major] pages: blog-single
   hero (.single .wst-flex-box__text--container — single-post hero) --- */
@media (min-width: 768px) and (max-width: 1199px) {
  body.single-post .wst-flex-box__text--container {
    width: auto;
    max-width: 450px;
    height: auto;
    padding-top: 74px;
    padding-bottom: 30px;
  }
  body.single-post .wst-flex-box__title {
    font-size: 32px;
    line-height: 1.3;
  }
}

/* --- fix-17 [major] pages: blog-archive
   blog-archive sidebar widgets (.sidebar-blog-page__custom below posts) --- */
@media (min-width: 700px) and (max-width: 975px) {
  /* spread the three widget groups across the full width below the posts */
  .sidebar-blog-page__custom {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .caregories-style__custom,
  .archive-style__custom {
    margin-bottom: 40px;
  }
  .blog-post-sticky-25 {
    width: 300px;
  }
  /* arrows are absolute-anchored to the sidebar box; make them inline so they follow each link */
  .sidebar-blog-page__custom li a::after {
    position: static;
    margin-left: 10px;
  }
}

/* --- fix-18 [major] pages: contact
   map-section (contact office rows: Kent / Auburn / Spokane) --- */
@media (min-width: 936px) and (max-width: 1099px) {
  .contact-section-informaion-and-form .responsive-map-container-box,
  .contact-section-informaion-and-form .map-section-text {
    width: 100%;
  }
  .contact-section-informaion-and-form .map-section-text {
    margin-left: 0;
  }
  .contact-section-informaion-and-form .reverse-map-p {
    margin-right: 0;
  }
  .contact-section-informaion-and-form .flex-box-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
  .contact-section-informaion-and-form .responsive-map-container,
  .contact-section-informaion-and-form .map-2 {
    height: 400px;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 20px;
  }
  .contact-section-informaion-and-form .map-2 {
    margin-bottom: 40px;
  }
}

/* --- fix-19 [major] pages: contact
   form-box (.contact-section-form CF7 card) --- */
@media (min-width: 768px) and (max-width: 1200px) {
  .flex-box-cotact-page .contact-section-form {
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- fix-20 [major] pages: projects
   projects grid (.main-our__work-page--section--box / --item) --- */
/* append AFTER the existing max-935 block so the width override wins the cascade */
@media (min-width: 768px) and (max-width: 1099px) {
    .main-our__work-page--section--box {
        justify-content: space-between;
    }
    .main-our__work-page--section--box--item {
        width: 48.5%;
        margin-bottom: 40px;
    }
    .main-our__work-page--section--box--item-img {
        height: 400px;
    }
}

/* --- fix-21 [major] pages: projects
   promo section (.energy-efficient-vinyl-windows__section-box offer headlines) --- */
/* audit range starts at 700px and the max-935 wrap is the root cause, hence 700 not 768 */
@media (min-width: 700px) and (max-width: 935px) {
    .energy-efficient-vinyl-windows__section-box {
        flex-direction: column;
        align-items: flex-start;
    }
    .energy-efficient-vinyl-windows__section-btn {
        margin-top: 20px;
    }
}

/* --- fix-22 [major] pages: about
   about hero-to-description overlap (.about-us-section__description-img-container / .about-us-dec-left) --- */
@media (min-width: 936px) and (max-width: 975px) {
  .about-us-section__description-img-container {
    margin-top: 0;
  }
  .about-us-dec-left {
    display: none;
  }
}

/* --- fix-23 [major] pages: about
   about team list (.about-us__team_item photos and bios) --- */
@media (min-width: 936px) and (max-width: 1099px) {
  .about-us__team_item-img {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    margin-right: 20px;
  }
  .about-us__team_item-description {
    flex: 1;
    min-width: 0;
  }
  .about-us-page-right {
    padding-left: 30px;
  }
}
@media (min-width: 751px) and (max-width: 935px) {
  .about-us__team_item-description {
    flex: 1;
    min-width: 0;
  }
  .about-us__team_item-description .section-text {
    max-width: none;
  }
}

/* --- fix-24 [minor] pages: home,hub-windows,blog-archive,contact,about,all-services
   we-trust / footer-slider logo count per view (owl-carousel JS config, shared) --- */
/* PRIMARY FIX IS JS, not CSS: in assets/js/main.js (~lines 79-92) change the
   $('.we-trust-section-slider--box').owlCarousel responsive map to:
   responsive: { 100:{items:1}, 568:{items:2}, 768:{items:3}, 1000:{items:4}, 1170:{items:4} }
   Owl re-reads the map on resize; no CSS change needed once applied.
   Optional cosmetic mitigation until the JS ships (REMOVE this block when the JS map change ships): */
@media (min-width: 768px) and (max-width: 1169px) {
  .we-trust-section-slider {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- fix-25 [minor] pages: contact
   we-trust / footer-slider owl-dots touch targets (shared) --- */
@media (min-width: 768px) and (max-width: 1363px) {
  .we-trust-section .owl-dots .owl-dot {
    width: 28px;
    height: 28px;
    margin: 0 9px;
  }
  .we-trust-section .owl-dots .owl-dot.active {
    width: 28px;
    height: 28px;
  }
}

/* --- fix-26 [minor] pages: home
   section-our__work-home top spacing (.home .section-our__work-home) --- */
@media (min-width: 751px) and (max-width: 1099px) {
  .home .section-our__work-home {
    margin-top: 68px;
  }
}

/* --- fix-27 [minor] pages: hub-windows
   lp-reviews-grid (social-proof section, partials/cro-social-proof.php) --- */
@media (min-width: 700px) and (max-width: 1045px) {
  .lp-reviews-section .lp-reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .lp-reviews-section .lp-review-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* --- fix-28 [minor] pages: hub-windows
   wis__section (Window Installation banner title) --- */
@media (min-width: 976px) and (max-width: 1099px) {
  .wis__section .wis__section-title {
    font-size: 56px;
    line-height: 1.15;
  }
}

/* --- fix-29 [minor] pages: geo-lp
   LP section display titles (.section-white-title / .section-blue-title) --- */
@media (min-width: 936px) and (max-width: 1099px) {
  .page-template-page-LP .section-white-title,
  .page-template-page-LP .section-blue-title {
    font-size: 52px;
    line-height: 1.2;
  }
}

/* --- fix-30 [minor] pages: geo-lp
   lp-final-trust-section star decoration (inline <style> in page-LP.php) --- */
@media (min-width: 768px) and (max-width: 1099px) {
  .lp-final-trust-content .sub_title_white img {
    display: none;
  }
}

/* --- fix-31 [minor] pages: geo-lp
   landing-bottom-footer (.wrapper-main .flex-box edge padding) --- */
@media (max-width: 1300px) {
  .landing-bottom-footer .flex-box {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* --- fix-32 [minor] pages: blog-single
   sidebar sticky promo (.blog-post-sticky-25 top offset) --- */
@media (min-width: 976px) and (max-width: 1200px) {
  .single .blog-post-sticky-25 {
    top: 80px; /* clears the ~60px fixed .mobile header, which is position:fixed at <=1200px */
  }
}

/* --- fix-33 [minor] pages: blog-single
   subscribe form section (.subscribe-to-our-mailing__lista-title) --- */
@media (min-width: 751px) and (max-width: 1099px) {
  .subscribe-to-our-mailing__lista-title {
    font-size: 36px;
    line-height: 1.25;
  }
}

/* --- fix-34 [minor] pages: blog-archive
   wsr-section hero search-form (blog archive/search) --- */
@media (min-width: 700px) and (max-width: 750px) {
  /* restore the archive search on small-tablet widths */
  .blog .search-form,
  .search .search-form {
    display: block;
  }
}

/* ============================================================================
   NLD conversion header (2026-07-08, user-approved)
   1) Expose the real desktop nav from 1024px up — previously everything at or
      below 1200px (all tablets + small laptops) got the hamburger-only fixed
      mobile header, and click maps showed the hamburger as the hottest element
      on every page. Compact type in the 1024-1200 band so 15 items fit.
   2) Paid-visitor LP mode: the inline classifier in header.php adds
      html.nld-paid when the landing URL carries gclid/gbraid/wbraid/msclkid.
      Ads visitors keep logo + phone + CTAs but lose the wander-off nav.
      Cache-safe (client-side): WP Rocket serves one cached HTML regardless of
      click-ID query strings, so this cannot be done in PHP.
   ============================================================================ */
@media only screen and (min-width: 1024px) and (max-width: 1200px) {
  .mobile { display: none; }
  .header { display: block; }
  .header-nav .main-menu-1 { font-size: 13px; }
  .header-nav .main-menu-1 li { margin-right: 12px; }
  .header-phone-btn { font-size: 13px; padding: 10px 12px; }
}

html.nld-paid .header-nav .main-menu-1 { display: none; }
html.nld-paid .topnav .icon { display: none; }
html.nld-paid .topnav #myLinks { display: none; }
html.nld-paid .logo-img { pointer-events: none; }

/* --- Our Work project cards: equal height (2026-07-08) ---
   Title box was min-height:82px (2 lines); a 3-line project title grew that card
   and pushed its image out of alignment with the others. Reserve 3 lines for every
   title (clamp longer ones) so all cards + images line up. */
.section-our__work-home-bottom-box--item-text {
  min-height: 109px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* --- a11y (2026-07-08) --- */
/* Hamburger is now a <button>; the theme's positioning targets `.topnav a.icon`, which no
   longer matches, so the burger fell out of its upper-right box. Restore the original look:
   pin it to the top-right of the mobile top nav, blue box, white bars. */
.topnav button.icon { position: absolute; right: 0; top: 0; padding: 19px 18px; background: #0186f8; border: 0; -webkit-appearance: none; appearance: none; cursor: pointer; color: #fff; font: inherit; line-height: 0; }
.topnav button.icon .fa { font-size: 20px; line-height: 1; color: #fff; }
/* Green text-links failed contrast on white (#77be20 ~2.3:1). Darken to pass AA + underline
   so links aren't distinguished by colour alone. Buttons (green bg + white text) are fine. */
.nld-service-card__link { color: #3f6e0f; }
.nld-service-card:hover .nld-service-card__link { text-decoration: underline; }

/* ===== CRO: quote form inside the hero, above the fold (New Light Digital, 2026-07) =====
   Was in the section BELOW the hero with a fixed margin-top:-342px overlap that could not
   adapt to varying hero heights (hub ~440px vs geo ~673px), so it landed below the fold on
   large displays. Now a flex child of the hero right column (.nld-hero__media): above the
   fold on every page regardless of hero height; stacks under the H1 on mobile. */
.nld-hero .lp-hero-trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:20px 0 0;padding:0}
.nld-hero .lp-hero-trust li{color:#fff;font:600 15px/1.2 Poppins,sans-serif;display:flex;align-items:center;gap:6px;opacity:.96}
.nld-hero .lp-hero-trust .lp-stars{color:#ffb400;letter-spacing:1px}
.nld-hero .nld-hero-form__title{color:#132c52;font:600 25px/1.2 Poppins,sans-serif;text-align:center;margin:0 0 2px}
.nld-hero-form .lp-form-urgency{margin:10px 0 4px}
/* center the Cloudflare Turnstile widget inside the form card */
.nld-hero-form .turnstile-wrapper{display:flex;justify-content:center}
/* NOTE: the "two arrows on submit" bug is fixed server-side (functions.php strips the redundant
   "→" from the CF7 button label so only the theme's single SVG arrow remains) — universal across
   every form/page, not just .nld-hero-form. See nld_strip_submit_arrow(). */
/* Lighten the hero-photo overlay so the image reads clearly behind/around the form.
   The theme's default .wst-flex-box__bg:before is a 0.8-opacity top gradient that
   washed the photo out to near-solid navy in the new form-in-hero layout. */
.nld-hero .wst-flex-box__bg.nld-hero__media:before{background:linear-gradient(90deg, rgba(19,44,82,.12) 0%, rgba(19,44,82,.28) 65%, rgba(19,44,82,.40) 100%)}

@media (min-width:1024px){
  /* box-sizing + min-width:0 on BOTH columns is what keeps this fluid across 1024–1920 with
     no horizontal overflow: without min-width:0 a flex item refuses to shrink below its
     content (the 430px form), pushing the layout wider than the viewport at ~1024–1300. */
  .nld-hero .wst-flex-box{align-items:stretch;flex-wrap:nowrap}
  /* vertically center the H1 + trust + decoration so the title isn't top-heavy in the tall hero */
  .nld-hero .wst-flex-box__text{width:44%;min-width:0;box-sizing:border-box;padding:90px 0 60px;align-items:center}
  .nld-hero .wst-flex-box__text--container{padding-top:0;padding-bottom:0;margin-right:24px}
  /* center the form within the right-hand column (both axes); padding scales with width so it
     never crowds the form on a narrow desktop. top padding clears the compact header. */
  .nld-hero .nld-hero__media{width:56%;min-width:0;box-sizing:border-box;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:clamp(72px,6vw,96px) clamp(20px,3vw,44px) 56px}
  .nld-hero .nld-hero__media > picture,
  .nld-hero .nld-hero__media > .attachment-post-thumbnail{position:absolute;inset:0;width:100%;height:100%;z-index:0}
  /* fill the column with the image whether it renders as a bare <img> (no webp source)
     or the <img> inside a <picture> (webp source present) — force cover in both cases */
  .nld-hero .nld-hero__media > picture img,
  .nld-hero .nld-hero__media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
  /* fluid form width: never wider than the column, caps at 430 on big screens */
  .nld-hero .nld-hero-form{position:relative;z-index:3;width:min(430px,100%);margin:0;background:#fff;padding:22px 24px;box-shadow:0 24px 60px rgba(0,26,66,.30)}
  .wsr-slider__section-box{margin-top:0}
}

@media (max-width:1023px){
  /* mobile + tablet: hero photo hidden (form is the priority on the small screen where
     ~82% of paid traffic lands); form renders full-width directly under the H1 + trust. */
  .nld-hero .wst-flex-box__bg.nld-hero__media{width:100%;padding:0;min-height:0;overflow:visible;display:block}
  .nld-hero .nld-hero__media > picture,
  .nld-hero .nld-hero__media > img{display:none}
  .nld-hero .wst-flex-box__bg.nld-hero__media:before{display:none}
  .nld-hero .nld-hero-form{position:relative;z-index:3;width:100%;margin:0;background:#fff;padding:22px 18px;box-shadow:0 8px 24px rgba(0,26,66,.12)}
  .nld-hero .nld-hero-form__title{font-size:22px}
  .nld-hero .wst-flex-box__text--container{padding-bottom:24px}
}

/* all-services hero: value-prop subhead + CTA (no quote form on this template) */
.nld-hero-sub{color:#e7edf6;font:400 18px/1.5 'aeroportregular',sans-serif;max-width:460px;margin:18px 0 0}
.nld-hero-cta{margin-top:22px}
.wsr-section.small-h-hero.nld-hero{min-height:0}
@media (max-width:1023px){.nld-hero-sub{font-size:16px;max-width:none}}

/* ============================================================================
   all-services page beautification (New Light Digital, 2026-07-09)
   Was: 77px OFF-BRAND ORANGE (#ff6229) titles with a fixed width:800px overflow,
   crooked negative-margin alternating rows, no section framing, dead CTAs with a
   green-on-green (invisible) arrow. Now: navy titles + accent bar, framed section
   with an intro heading, vertically-aligned rows, hover CTAs, white arrow. Sharp corners. */
.all-services-section{padding:84px 0 44px}
.all-services-intro{max-width:780px;margin:0 auto 56px;text-align:center}
.all-services-eyebrow{display:inline-block;font:600 14px/1 Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#77be20;margin-bottom:14px}
.all-services-heading{font-family:'aeroportregular',sans-serif;font-weight:700;font-size:40px;line-height:1.12;color:#132c52;margin:0}
.all-services-section .flex-box{align-items:center}
.all-services-section-half__title{font-size:34px !important;line-height:1.14 !important;color:#132c52 !important;width:auto !important;max-width:100% !important;margin:0 0 20px !important;padding-bottom:16px;position:relative}
.all-services-section-half__title:after{content:"";position:absolute;left:0;bottom:0;width:56px;height:4px;background:#77be20}
.all-services-section-middel .all-services-section-half__title{margin-left:0 !important;text-align:left !important}
.all-services-section .section-text{max-width:52ch;color:#475468;font-size:17px;line-height:1.7}
.all-services-section__btn a{transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.all-services-section__btn a:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(119,190,32,.35)}
.all-services-section__btn a img{filter:brightness(0) invert(1)}
@media (max-width:900px){
  .all-services-heading{font-size:30px}
  .all-services-section-half__title{font-size:27px !important;margin-bottom:16px !important}
  .all-services-intro{margin-bottom:36px}
}

/* ============================================================================
   Mobile/tablet service+geo hero compaction (New Light Digital, 2026-07-09)
   The H1 was 50px on a stray 77px line-height forced to 4 lines (~308px of headline);
   CF7 fields were 60px tall. Shrink all of it so the hero fits a phone screen. */
@media (max-width:1023px){
  /* hero H1 size now comes from the shared --fs-h1 tier (see the type scale below) */
  .nld-hero .wst-flex-box__text--container{padding-top:40px}
  .nld-hero .nld-hero-form{padding:16px 14px}
  .nld-hero .nld-hero-form__title{font-size:19px;margin-bottom:6px}
  .nld-hero .lp-form-urgency{padding:6px 10px;margin:8px 0 4px}
  .nld-hero .nld-hero-form .wpcf7 .f-group .wpcf7-form-control-wrap input,
  .nld-hero .nld-hero-form .wpcf7 .f-group .wpcf7-form-control-wrap select,
  .nld-hero .nld-hero-form .wpcf7 .f-group .wpcf7-form-control-wrap textarea{height:48px;padding:12px 16px}
  .nld-hero .nld-hero-form .wpcf7 .f-group{margin-bottom:8px}
}

/* CF7 floating-label FIX: the floating labels are position:absolute and anchor to their
   .f-group — which desktop custom.css makes position:relative, but the MOBILE stylesheet
   (home-page-mobile-custom.css) omits that rule. Result on phones: every label escaped to
   the top of the form (the "Your message" label showed above the First Name field). Restore
   the anchor so each label sits on its own field's border. Harmless on desktop (already set). */
.wpcf7 .f-group{position:relative}

/* Homepage "View Our Gallery" / "Read More About Us" buttons (.btn-white-section) had no
   bottom margin, so on mobile they butted right up against the next section. Add breathing room. */
@media (max-width:1023px){
  .btn-white-section{margin-bottom:34px}
}

/* Footer city/service SEO links: styled only in custom.css, which does NOT load on mobile, so
   on phones they rendered as default run-on blue underlined links (looked like a spam dump).
   Give them a clean, readable vertical list on mobile. */
@media (max-width:767px){
  .landing-footer-links{display:flex;flex-direction:column;gap:11px;margin:8px 0 30px}
  .landing-footer-links a{display:block;color:#132c52;font:400 13px/1.45 'aeroportregular',sans-serif;text-decoration:none;margin:0}
  .landing-footer-links a:hover{color:#77be20}
}

/* ============================================================================
   Mobile stacked service cards (partials/mobile-service-stack.php) + smaller
   homepage promo title (New Light Digital, 2026-07-09). Rendered only on mobile UA
   (wp_is_mobile gate in the templates), so no desktop guard needed. Sharp corners. */
/* The card stack is always in the homepage HTML now (no wp_is_mobile PHP gate); visibility is
   purely viewport-based so it can't vanish behind a UA-mismatched cache. Hidden on desktop,
   shown at <=1024. padding-top clears the fixed ~74px mobile header so the first card isn't
   hidden behind it (logo 20px + phone row); 90px guarantees clearance with margin to spare. */
.svc-stack{display:none}
@media (max-width:1024px){
  .svc-stack{display:block;padding:90px 15px 6px}
}
.svc-card{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:12px;background:#fff;border-left:5px solid #77be20;box-shadow:0 6px 16px rgba(19,44,82,.10);text-decoration:none;min-height:74px}
.svc-card__media{flex:0 0 48px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0043a9 0%,#003068 100%)}
.svc-card__media img,.svc-card__media svg{width:28px;height:28px;display:block}
.svc-card__title{flex:1;color:#132c52;font:600 20px/1.15 Poppins,sans-serif}
.svc-card__arrow{flex:0 0 auto;color:#77be20;font-size:24px;font-weight:700;line-height:1}
/* homepage promo hero: sizes now come from the type scale (--fs-display); keep the mobile layout. */
@media (max-width:1023px){
  .home-main-section .home-hero__subtitle{font-size:15px !important;line-height:1.3 !important}
  .home-main-section{min-height:0 !important}
  .home-main-section__text-container{margin-top:26px !important}
}

/* ============================================================================
   Round-2 fixes (New Light Digital, 2026-07-09) */

/* (1) Desktop hero decoration graphic — MATCH THE HOMEPAGE.
   The homepage fills a TALL box with the window-grid motif via background-size that shows the
   whole grid. The service-hero H1 wrapper is short/wide (~500x240), so cover cropped the grid
   to ~2 cells and `auto 185%` zoomed to ~2 giant squares (the "ruined proportions"). Fix: move
   the decoration to the tall text COLUMN (~760x760) and use `contain`, so the COMPLETE grid
   shows undistorted behind the text, left-anchored — the homepage look. */
@media (min-width:1024px){
  .nld-hero .wst-flex-box__text{
    background-image:url(../images/decorataion-img.png);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:left center;
  }
  .nld-hero .wst-flex-box__text--container{background-image:none !important}
}

/* (2) Compact sticky menu — same active/on-state as the main menu (green underline on current page) */
.nld-desk-cta__menu .current-menu-item,
.nld-desk-cta__menu .current_page_item{position:relative}
.nld-desk-cta__menu .current-menu-item > a,
.nld-desk-cta__menu .current_page_item > a{color:#132c52}
.nld-desk-cta__menu .current-menu-item:after,
.nld-desk-cta__menu .current_page_item:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:3px;background:#89c635}

/* (3) All-services hero image fills to the bottom edge of the header/hero section */
@media (min-width:1024px){
  .all-services-section-page-hidden{display:none}
}
.small-h-hero.nld-hero .wst-flex-box__bg{display:flex;align-items:stretch}
.small-h-hero.nld-hero .wst-flex-box__bg-img{width:100%;height:100%;min-height:100%;flex:1}
/* all-services (form-less) hero: on mobile the theme forces the image column into a 50%
   aspect-ratio box, but there's no form/image to fill it -> an empty blue block + dead white
   space below the hero. Collapse it on phones so the hero is a clean text block. */
@media (max-width:1023px){
  .small-h-hero.nld-hero .wst-flex-box__bg{display:none}
}

/* (4) ===== TYPOGRAPHY SCALE (New Light Digital, 2026-07-09) =====
   Replaces the ~13 ad-hoc heading sizes (32-77px) that were scattered per-section across
   custom.css + home-page-mobile-custom.css with FIVE fluid tiers. Each clamp() spans
   desktop->mobile in one rule, so headings need NO separate mobile stylesheet. !important
   + the specific legacy selectors below make this the single source of truth site-wide;
   to resize a whole tier, edit one variable here. */
:root{
  --fs-display: clamp(2.125rem, 1.05rem + 4.6vw, 4.25rem);   /* 34 -> 68  promo / marketing hero */
  --fs-h1:      clamp(1.875rem, 1.35rem + 2.2vw, 2.75rem);   /* 30 -> 44  page hero title */
  --fs-h2:      clamp(1.5rem, 1.10rem + 1.7vw, 2.25rem);     /* 24 -> 36  section title */
  --fs-h3:      clamp(1.25rem, 1.05rem + 0.85vw, 1.625rem);  /* 20 -> 26  subsection / in-content heading */
  --fs-h4:      clamp(1.125rem, 1.03rem + 0.40vw, 1.25rem);  /* 18 -> 20  minor heading / subtitle */
}
/* display / promo hero */
.hero-title,.home-main-section .hero-title{font-size:var(--fs-display) !important;line-height:1.12 !important}
.hero-title__small,.home-main-section .hero-title__small{font-size:var(--fs-h2) !important}
/* H1 — every page-hero variant unified */
.wst-flex-box__title,
.wst-flex-box__title.window-page,.wst-flex-box__title.siding-page,.wst-flex-box__title.roofing-page,
.page-id-16 .wst-flex-box__title,.nld-hero .wst-flex-box__title,
.small-h-hero .wst-flex-box__title,.single .wst-flex-box__title,.single-post .wst-flex-box__title,
.category-big-heto__title{font-size:var(--fs-h1) !important;line-height:1.14 !important}
/* H2 — section display titles */
.section-blue-title,.section-white-title,.our-services__section--description-item,
.wis__section-title,.wsr-section-tab-right__title,
.contact-page-title,.all-services-heading,.all-services-section-half__title{font-size:var(--fs-h2) !important;line-height:1.16 !important}
/* H3 — subsections + in-content headings */
.we-trust-section--title,.malarkey-small-title,.thank-you-title,.mfp-title,
.main-our__work-page--section--box--item-title,.why-choose-2FL-seciton.section-blue-title,
.additional-template-page--text h2,.additional-template-page--text .wp-block-heading,
.page-template-content h2,.partner-page-text-content h2,.comments-title,
.form-landig-hero-main__text{font-size:var(--fs-h3) !important;line-height:1.28 !important}
/* H4 — minor headings, subtitles, FAQ questions */
.additional-template-page--text h3,.additional-template-page--text h4,
.sub_title_white--text,.sub_title_blue--text,
.faqs_section-services-page .tab-label,.tabs .tab-label{font-size:var(--fs-h4) !important;line-height:1.32 !important}

/* ===== Prefooter promo banner (energy-efficient-vinyl-windows) =====
   The theme hand-tuned this banner to 77px titles and PULLED THE BUTTON UP with
   margin-top:-42px into the leftover whitespace. Once the type scale shrank the titles,
   that negative margin dragged the button OVER the "Siding or Roofing" text. Rebuild the
   banner fluidly: display-tier title (it's a promo, same rank as the homepage hero),
   proportional sub-text, wrap-friendly row, and a normal positive button margin. */
.energy-efficient-vinyl-windows__section-title{font-size:var(--fs-display) !important;line-height:1.08 !important}
.energy-efficient-vinyl-small{font-size:clamp(1.125rem, 0.86rem + 1.15vw, 1.75rem) !important;line-height:1.18 !important;margin-left:clamp(10px,1.5vw,22px) !important}
.energy-efficient-vinyl-windows__section-title-plus{margin:0 clamp(12px,2.4vw,34px) !important}
.energy-efficient-vinyl-windows__section-box{flex-wrap:wrap;row-gap:10px}
.energy-efficient-vinyl-windows__section-btn{margin-top:clamp(22px,2.6vw,36px) !important}
.energy-efficient-vinyl-windows__footer{margin-top:12px}

/* (5) MOBILE service/geo hero: the service-card stack is now HOMEPAGE-ONLY, so on service /
   geo / LP pages nothing precedes the hero — it must clear the fixed ~74px mobile header itself
   (otherwise the H1's first line hides behind the menu bar). 84px clears it with a small gap. */
@media (max-width:1023px){
  .nld-hero .wst-flex-box__text--container{padding-top:84px !important}
}