/* Woods Property Service — shared design system CSS
   Lifted verbatim from final.html's <style> block + inline style-hover/style-focus
   attributes (converted to real :hover/:focus rules since Elementor widgets can't
   carry a custom style-hover attribute interpreter). */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/outfit-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/outfit-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/outfit-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/outfit-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/outfit-800.woff2') format('woff2');
}

/* Several sections use full-bleed absolutely-positioned backgrounds and
   edge-to-edge grids that can round up a fraction of a pixel past 100vw at
   tablet/mobile widths, forcing an unwanted horizontal scrollbar on the
   whole page — the percentage-based footer columns in particular. Safe to
   hide here — the sticky header is JS-driven position:fixed (see
   initStickyHeader below), not CSS position:sticky, which is the only
   thing overflow-x:hidden on an ancestor would break. */
@media (max-width: 1199px) {
  html, body { overflow-x: hidden; }
}
html { scroll-behavior: smooth; }
::selection { background: #A0C427; color: #000000; }

/* ============ Theme isolation ============
   Per-section widgets lose the source page's single outer wrapper, so text
   would otherwise inherit the active theme's font/color. Scope a reset to
   our own widgets only — never leaks out to the rest of the site. */
[class*="elementor-widget-woods_property_"] > .elementor-widget-container {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  color: #000000;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}
[class*="elementor-widget-woods_property_"] .elementor-widget-container * {
  box-sizing: border-box;
}
[class*="elementor-widget-woods_property_"] .elementor-widget-container :is(h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol) {
  margin: 0;
}
/* Titles always render in Outfit at a slightly heavier weight than body
   text, regardless of any theme's own heading font rules (inherited
   font-family loses to ANY matching theme rule, so reassert explicitly). */
[class*="elementor-widget-woods_property_"] .elementor-widget-container :is(h1,h2,h3,h4,h5,h6) {
  font-family: 'Outfit', sans-serif !important;
}
[class*="elementor-widget-woods_property_"] .elementor-widget-container a {
  text-decoration: none;
  color: #789C18;
}
[class*="elementor-widget-woods_property_"] .elementor-widget-container a:hover {
  color: #A0C427;
}
/* Phone links aren't meant to read as an interactive hover state — no hand
   cursor, no color change on hover (their hover-triggering classes are
   simply omitted in the markup, so this only needs to reset the cursor). */
[class*="elementor-widget-woods_property_"] .elementor-widget-container a[href^="tel:"] {
  cursor: default;
}
[class*="elementor-widget-woods_property_"] .elementor-widget-container button,
[class*="elementor-widget-woods_property_"] .elementor-widget-container input,
[class*="elementor-widget-woods_property_"] .elementor-widget-container textarea {
  font-family: inherit;
}
[class*="elementor-widget-woods_property_"] .elementor-widget-container input::placeholder,
[class*="elementor-widget-woods_property_"] .elementor-widget-container textarea::placeholder {
  color: #9AA08F;
}
/* WYSIWYG editor content may contain multiple blocks (p/ul/ol) even though the
   isolation reset above zeroes their margin for the pixel-exact single-paragraph
   case — restore natural spacing only when more than one block is present. */
[class*="elementor-widget-woods_property_"] .elementor-widget-container .wps-rich :is(p,ul,ol) + :is(p,ul,ol) {
  margin-top: .9em;
}
[class*="elementor-widget-woods_property_"] .elementor-widget-container .wps-rich ul,
[class*="elementor-widget-woods_property_"] .elementor-widget-container .wps-rich ol {
  padding-left: 1.3em;
}

/* Many themes ship img{height:auto!important;max-width:100%!important}, which
   overrides even inline styles and collapses every object-fit:cover image or
   fixed-height logo. Re-assert the exact sizing patterns the markup uses. */
[class*="elementor-widget-woods_property_"] .elementor-widget-container img[style*="height:100%"] { height: 100% !important; }
[class*="elementor-widget-woods_property_"] .elementor-widget-container img[style*="object-fit:cover"] { object-fit: cover !important; }
[class*="elementor-widget-woods_property_"] .elementor-widget-container img[style*="height:52px"] { height: 52px !important; }
[class*="elementor-widget-woods_property_"] .elementor-widget-container img[style*="height:56px"] { height: 56px !important; }

/* Hero "Featured on" badge — the fixed 56px height above fights the
   container's max-width:100% on narrow screens and distorts the image
   (width shrinks, height stays pinned). Drop the forced height below
   767 so it scales naturally instead; needs to out-specificity the rule
   above (same selector shape plus the badge's own class). */
@media (max-width: 767px) {
  [class*="elementor-widget-woods_property_"] .elementor-widget-container img.wps-hero-badge-img[style*="height:56px"] {
    height: auto !important;
  }
}

/* Headings — drop hard line breaks below 767 so every heading flows as
   one line (still wraps naturally by width, just no longer a forced
   split). .wps-hero-title-break is the hero's own two <br>s;
   .wps-heading-break covers every other heading with a hardcoded break
   (Contact, Trust Bar). */
@media (max-width: 767px) {
  .wps-hero-title-break, .wps-heading-break { display: none; }
}

/* FAQ left photo — reassert the right-side corner radius the wrapper
   already sets, in case a theme resets radius on the <img> itself. */
.wps-faq-photo, .wps-faq-photo-img {
  border-top-right-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
}

/* ============ Interactive components (lifted style-hover / style-focus) ============ */

/* Solid green pill button — header CTA, review "Write a Review", WPForms submit */
.wps-btn-solid:hover { background: #A0C427 !important; color: #000000 !important; }
/* Solid green pill button with lift — hero/section CTAs */
.wps-btn-solid-lift:hover { background: #A0C427 !important; color: #000000 !important; transform: translateY(-2px); }
/* White ghost button — About "Learn More" */
.wps-btn-ghost-white:hover { background: #A0C427 !important; }

/* Header nav links + header phone link */
.wps-nav-link:hover { color: #789C18 !important; }

/* Simple lime-on-hover text links — footer columns, final CTA contact links */
.wps-link-lime:hover { color: #A0C427 !important; }
/* Footer social icon circles */
.wps-icon-circle-lime:hover { border-color: #A0C427 !important; color: #A0C427 !important; }

/* Service cards */
.wps-service-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(20,30,5,0.10); }
/* Service card description — a WYSIWYG field, so may render as a plain
   paragraph or a <ul>/<ol> list depending on what the editor typed. */
.wps-service-card .wps-rich ul,
.wps-service-card .wps-rich ol {
  margin: 0; padding-left: 1.15em; display: flex; flex-direction: column; gap: 8px;
}
.wps-service-card .wps-rich li { padding-left: 4px; }
.wps-service-card .wps-rich li::marker { color: #789C18; font-weight: 700; font-size: 20px; }
/* Service-area chips */
.wps-area-chip:hover { border-color: #A0C427 !important; transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.45); }
/* Reviews carousel prev/next arrows */
.wps-carousel-arrow:hover { background: #789C18 !important; }

/* Contact form fields */
.wps-input:focus { border-color: #A0C427 !important; box-shadow: 0 0 0 3px rgba(160,196,39,0.20); outline: none; }

/* ============ Sticky header ============
   JS-driven (see initStickyHeader), not CSS position:sticky — sticky silently
   breaks if ANY ancestor between the header and the viewport has overflow
   set to anything but visible (common when a theme sets overflow-x:hidden
   on a wrapper to kill horizontal scroll, which per spec also flips that
   ancestor's overflow-y to 'auto', making IT the sticky containing block
   instead of the viewport). position:fixed sidesteps that entirely. */
.wps-header-spacer { display: none; }
.wps-header.is-pinned {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999000 !important;
}

/* ============ Header burger menu (below 1199) ============
   .wps-header-panel wraps only the nav so it can become a single
   absolutely-positioned dropdown without changing the header's own box
   height — the JS-driven sticky header above measures that height, so an
   in-flow expansion would desync its spacer on toggle. The phone/CTA block
   (.wps-header-actions) sits outside the panel — it stays visible in the
   header row at every width instead of collapsing into the dropdown. */
.wps-burger { display: none; }
.wps-header-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px clamp(18px, 2.5vw, 40px);
  margin-left: auto;
}
@media (max-width: 1199px) {
  .wps-burger { display: flex; order: 2; margin-left: 0 !important; }
  .wps-header-panel {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    background: #FFFFFF;
    border-bottom: 1px solid #EEF0E8;
    box-shadow: 0 20px 44px rgba(0,0,0,0.12);
    padding: 20px clamp(18px, 4vw, 40px) 28px;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
  }
  .wps-header.is-menu-open .wps-header-panel { display: flex; }
  .wps-header-nav { flex-direction: column !important; align-items: flex-start !important; width: 100%; }
  /* One row: logo, phone+CTA, burger — order controls the visual sequence
     since .wps-header-actions sits after .wps-header-panel/.wps-burger in
     the markup but needs to render between the logo and the burger. The
     burger's own inline margin-left:auto is reset above so this margin
     (on actions instead) pushes the whole phone/CTA/burger trio right as
     one group, rather than just the burger snapping to the edge alone. */
  .wps-header-actions {
    order: 1;
    margin-left: auto;
    gap: 14px !important;
  }
  .wps-header-divider, .wps-header-actions-divider { display: none; }
  .wps-header-actions a[href^="tel:"] span { font-size: 16px !important; }
  .wps-header-actions .wps-btn-solid { padding: 10px 20px !important; font-size: 14px !important; }
  .wps-burger-bar-top, .wps-burger-bar-bot { transition: transform .2s ease, opacity .2s ease; transform-origin: center; }
  .wps-burger-bar-mid { transition: opacity .15s ease; }
  .wps-header.is-menu-open .wps-burger-bar-top { transform: translateY(6px) rotate(45deg); }
  .wps-header.is-menu-open .wps-burger-bar-mid { opacity: 0; }
  .wps-header.is-menu-open .wps-burger-bar-bot { transform: translateY(-6px) rotate(-45deg); }
}

/* ============ Header nav dropdown (Services / Locations) ============
   Desktop: hover flyout, positioned relative to the item so it doesn't
   shift the row. Below 1199 the whole nav is already the stacked burger
   panel, so the dropdown just becomes an inline, always-open sub-list
   under its parent — no toggle needed since the panel itself scrolls. */
.wps-nav-item { position: relative; }
.wps-nav-caret { flex: none; transition: transform .15s ease; }
.wps-nav-dropdown {
  position: absolute; top: 100%; left: 0; margin-top: 14px; z-index: 50;
  display: flex; flex-direction: column; gap: 2px; min-width: 220px;
  background: #FFFFFF; border: 1px solid #EEF0E8; border-radius: 12px;
  box-shadow: 0 20px 44px rgba(0,0,0,0.12); padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.wps-nav-item:hover .wps-nav-dropdown,
.wps-nav-item:focus-within .wps-nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.wps-nav-item:hover .wps-nav-caret,
.wps-nav-item:focus-within .wps-nav-caret { transform: rotate(180deg); }
.wps-nav-dropdown-link {
  display: block; padding: 10px 14px; border-radius: 8px; white-space: nowrap;
  font-size: 15px; font-weight: 500; color: #000000; text-decoration: none;
  transition: background .15s, color .15s;
}
.wps-nav-dropdown-link:hover { background: #F5F7EF; color: #789C18; }
@media (max-width: 1199px) {
  .wps-nav-item { width: 100%; }
  .wps-nav-dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; min-width: 0; margin: 4px 0 0 16px; padding: 0;
  }
  .wps-nav-caret { display: none; }
}
/* Below 767, there isn't room for logo + phone + CTA + burger on one line —
   the logo takes the full first row on its own (centered), and phone/CTA/
   burger (in that order, per the `order` values above) wrap together onto
   row two. Phone text and the CTA button shrink further than the 1199
   tier since the burger now shares that same row too. */
@media (max-width: 767px) {
  .wps-header-logo { flex-basis: 100%; justify-content: center; }
  .wps-header-actions { gap: 10px !important; }
  .wps-header-actions a[href^="tel:"] span { font-size: 13px !important; }
  .wps-header-actions .wps-btn-solid { padding: 8px 14px !important; font-size: 12px !important; }
}

/* ============ Reviews slider ============ */
.wps-reviews-track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wps-reviews-track::-webkit-scrollbar { display: none; }
.wps-review-slide {
  flex: 0 0 calc(33.333% - 19px);
  min-width: 280px;
  scroll-snap-align: start;
}
@media (max-width: 1199px) {
  .wps-review-slide { flex-basis: calc(50% - 14px); }
}
@media (max-width: 640px) {
  .wps-review-slide { flex-basis: 100%; }
}
.wps-carousel-arrow:disabled { opacity: .35 !important; cursor: default !important; }
.wps-carousel-arrow:disabled:hover { background: #000000 !important; }
/* "Read more" on truncated live reviews — links out to the review on Google. */
.wps-review-more {
  margin-left: 7px;
  color: #789C18;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid rgba(120, 156, 24, .38);
  transition: color .18s, border-color .18s;
}
.wps-review-more:hover,
.wps-review-more:focus-visible { color: #5F7D12; border-bottom-color: #5F7D12; }

/* Bulletproofing: many themes ship a global `button{...}` reset (padding,
   background, border-radius, appearance) that otherwise beats these controls'
   inline styles on specificity. Force the visual box back with !important —
   deliberately NOT touching position/top/left/right/transform/z-index, which
   stay governed by each button's own inline styles. */
.wps-carousel-arrow,
.wps-lightbox-close, .wps-lightbox-prev, .wps-lightbox-next {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  line-height: 1 !important;
  font: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.wps-carousel-arrow svg,
.wps-lightbox-close svg, .wps-lightbox-prev svg, .wps-lightbox-next svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex: none !important;
  fill: none !important;
}
.wps-carousel-arrow svg { stroke: #FFFFFF !important; }
.wps-lightbox-close svg, .wps-lightbox-prev svg, .wps-lightbox-next svg { stroke: currentColor !important; }
.wps-carousel-arrow {
  width: 42px !important;
  height: 42px !important;
  border: none !important;
  border-radius: 999px !important;
  background: #000000 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25) !important;
}

/* ============ Gallery — clickable items + lightbox ============ */
.wps-gallery-item {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  text-align: left !important;
  font: inherit !important;
}
.wps-gallery-item .wps-gallery-hover {
  position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .2s ease;
}
.wps-gallery-item:hover .wps-gallery-hover { background: rgba(0,0,0,0.18); }
.wps-gallery-item:focus-visible { outline: 3px solid #A0C427; outline-offset: -3px; }
.wps-gallery-item:hover .wps-gallery-overlay-text,
.wps-gallery-item:focus-visible .wps-gallery-overlay-text { opacity: 1 !important; }

.wps-lightbox {
  position: fixed; inset: 0; z-index: 999999; background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
.wps-lightbox.is-open { opacity: 1; visibility: visible; }
.wps-lightbox img {
  max-width: 90vw; max-height: 86vh; object-fit: contain; border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.wps-lightbox-close, .wps-lightbox-prev, .wps-lightbox-next {
  position: absolute;
  width: 48px !important; height: 48px !important; border-radius: 999px !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.25) !important; color: #FFFFFF !important;
  transition: background .18s, border-color .18s;
}
.wps-lightbox-close:hover, .wps-lightbox-prev:hover, .wps-lightbox-next:hover { background: #789C18; border-color: #789C18; }
.wps-lightbox-close { top: 24px; right: 24px; }
.wps-lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.wps-lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .wps-lightbox-close, .wps-lightbox-prev, .wps-lightbox-next { width: 40px; height: 40px; }
  .wps-lightbox-close { top: 14px; right: 14px; }
  .wps-lightbox-prev { left: 14px; }
  .wps-lightbox-next { right: 14px; }
}

/* ============ "Get a Free Quote" popup — every CTA site-wide links here ============ */
.wps-quote-overlay {
  position: fixed; inset: 0; z-index: 999999; background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
/* !important on opacity/visibility so this reliably overrides the same
   properties' plain-inline baseline the widget now sets directly on the
   element (see class-quote-popup-widget.php for why). */
.wps-quote-overlay.is-open { opacity: 1 !important; visibility: visible !important; }
.wps-quote-card {
  position: relative; width: 100%; max-width: 620px; max-height: 90vh; overflow-y: auto;
  background: #121212; border: 1px solid rgba(255,255,255,0.12); border-radius: 20px;
  padding: clamp(24px, 3vw, 40px); box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  transform: translateY(12px); transition: transform .25s ease;
}
.wps-quote-overlay.is-open .wps-quote-card { transform: translateY(0); }
.wps-quote-close {
  position: absolute; top: 18px; right: 18px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: #FFFFFF;
  cursor: pointer; padding: 0; transition: background .18s, border-color .18s;
}
.wps-quote-close:hover { background: #789C18; border-color: #789C18; }
.wps-quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.wps-quote-span2 { grid-column: 1 / -1; }
.wps-quote-grid textarea { resize: none; }
/* Custom dropdown arrow on the static-placeholder select — same treatment
   as the real WPForms select below, kept separate since this one isn't
   inside .wpforms-container. */
.wps-quote-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;
}
.wps-quote-select::-ms-expand { display: none; }
.wps-quote-select option { color: #000000; }
@media (max-width: 640px) {
  .wps-quote-grid { grid-template-columns: 1fr; }
}

/* ============ WPForms — scoped to match the source's form card ============
   Covers both WPForms markup modes (classic and "modern markup"). The modern
   mode is driven by CSS custom properties, so we set those AND the explicit
   rules — whichever the site runs, the card renders identically to the source. */

/* Modern-markup design tokens. */
:is(.wps-contact-card, .wps-quote-card) .wpforms-container {
  --wpforms-field-background-color: rgba(255,255,255,0.06);
  --wpforms-field-border-color: rgba(255,255,255,0.14);
  --wpforms-field-text-color: #FFFFFF;
  --wpforms-field-border-radius: 10px;
  --wpforms-field-border-style: solid;
  --wpforms-field-border-size: 1px;
  --wpforms-label-color: rgba(255,255,255,0.65);
  --wpforms-label-sublabel-color: rgba(255,255,255,0.45);
  --wpforms-label-error-color: #ff8a8a;
  --wpforms-button-background-color: #789C18;
  --wpforms-button-text-color: #FFFFFF;
  --wpforms-button-border-radius: 999px;
  --wpforms-field-size-medium-font-size: 15px;
  margin: 0 !important;
}
/* Title/description come from the page design, not the form. */
:is(.wps-contact-card, .wps-quote-card) .wpforms-head-container { display: none !important; }

/* The form itself is the grid; the field container dissolves so the submit
   button (a sibling of the fields) participates as a grid child. */
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px;
}
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-field-container { display: contents; }
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-field {
  padding: 0 !important; margin: 0 !important; min-width: 0;
}
/* Full-width rows. */
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-field-textarea,
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-field-layout,
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-field-html,
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-field-content,
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-field-checkbox,
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-field-radio,
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-field-select.wpforms-field-select-style-classic,
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-recaptcha-container,
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-error-container,
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-submit-container { grid-column: 1 / -1; }

/* Labels — the auto "*" is pulled flush so it reads "Name*" as in the design. */
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-field-label {
  display: block; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.65);
  margin: 0 0 8px; line-height: 1.3;
}
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-required-label {
  color: rgba(255,255,255,0.65); margin-left: -4px; font-weight: 600;
}
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-field-sublabel {
  font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.45); margin-top: 6px;
}
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-field-description {
  font-size: 13px; color: rgba(255,255,255,0.45); margin-top: 8px;
}

/* Inputs — WPForms' own size classes (small/medium/large) are overridden to full width. */
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form input[type="text"],
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form input[type="email"],
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form input[type="tel"],
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form input[type="url"],
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form input[type="number"],
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form input[type="password"],
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form select,
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form textarea {
  width: 100% !important; max-width: 100% !important; box-sizing: border-box;
  background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 10px !important; padding: 14px 16px !important; font-size: 15px !important; font-weight: 500;
  color: #FFFFFF !important; outline: none; box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form input:focus,
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form select:focus,
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form textarea:focus {
  border-color: #A0C427 !important; box-shadow: 0 0 0 3px rgba(160,196,39,0.20); outline: none;
}
/* Custom dropdown arrow — replaces the browser default so it matches the
   dark field styling; extra right padding keeps text clear of the icon. */
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;
}
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form select::-ms-expand { display: none; }
/* The options list is rendered by the OS/browser on a light popup regardless
   of the field's own dark styling, so the option text needs a dark color to
   stay legible. */
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form select option {
  color: #000000 !important;
}
/* Placeholder text hidden outright — the field labels already say what
   each field is, and this covers an already-imported live form whose own
   per-field placeholder values predate the template's placeholders being
   cleared (that JSON only affects future imports, not the saved form). */
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form ::placeholder { color: transparent !important; opacity: 0 !important; }
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form textarea {
  resize: none; height: 102px; min-height: 102px;
}
/* Name field in First/Last format keeps its own two-up row. */
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: 100%;
}
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-field-row .wpforms-field-row-block {
  width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important;
}

/* Submit. */
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-submit-container { padding: 0 !important; }
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form button[type="submit"],
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-submit {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #789C18 !important; color: #FFFFFF !important; font-weight: 600; font-size: 16.5px; line-height: 1;
  padding: 18px 32px !important; border-radius: 999px !important; border: none !important; cursor: pointer;
  margin-top: 4px; transition: background .18s, color .18s;
}
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form button[type="submit"]:hover,
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-submit:hover {
  background: #A0C427 !important; color: #000000 !important;
}
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-submit-spinner { margin-left: 10px; }

/* Validation + confirmation. */
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form label.wpforms-error,
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form em.wpforms-error {
  color: #ff8a8a !important; font-size: 13px; font-weight: 500; margin-top: 6px; display: block;
}
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form input.wpforms-error,
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form textarea.wpforms-error {
  border-color: #ff8a8a !important;
}
:is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-error-container {
  color: #ff8a8a !important; background: rgba(255,138,138,0.08); border: 1px solid rgba(255,138,138,0.35);
  border-radius: 10px; padding: 12px 16px; font-size: 14px;
}
:is(.wps-contact-card, .wps-quote-card) .wpforms-confirmation-container-full,
:is(.wps-contact-card, .wps-quote-card) div[submit-success] > .wpforms-confirmation-container-full {
  background: rgba(160,196,39,0.10) !important; border: 1px solid rgba(160,196,39,0.35) !important;
  border-radius: 12px; color: rgba(255,255,255,0.85) !important; padding: 18px 20px; margin: 28px 0 0 !important;
}
:is(.wps-contact-card, .wps-quote-card) .wpforms-confirmation-container-full p { margin: 0; color: inherit; }

@media (max-width: 640px) {
  :is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form,
  :is(.wps-contact-card, .wps-quote-card) .wpforms-container .wpforms-form .wpforms-field-row { grid-template-columns: 1fr; }
}

/* Laptop screens (1366 and below) are often short on vertical room — tighten
   the popup's card padding and every field's own padding/height so the whole
   form fits without scrolling. Placed after the WPForms rules above (and
   matching their selector specificity) so this wins the source-order tie —
   !important is needed to beat both the static placeholder's inline padding
   and the WPForms rules' own !important. */
@media (max-width: 1366px) {
  .wps-quote-card { padding: 20px !important; }
  .wps-quote-grid { gap: 12px; margin-top: 16px; }
  .wps-quote-grid label,
  :is(.wps-quote-card) .wpforms-container .wpforms-form .wpforms-field-label {
    margin-bottom: 5px !important;
  }
  .wps-quote-grid input, .wps-quote-grid textarea,
  :is(.wps-quote-card) .wpforms-container .wpforms-form input[type],
  :is(.wps-quote-card) .wpforms-container .wpforms-form textarea {
    padding: 10px 14px !important;
  }
  /* Longhand on purpose — a shorthand `padding` here would also reset the
     custom arrow's padding-right (44px) set elsewhere, pushing text under it. */
  .wps-quote-grid select,
  :is(.wps-quote-card) .wpforms-container .wpforms-form select {
    padding-top: 10px !important; padding-bottom: 10px !important; padding-left: 14px !important;
  }
  .wps-quote-grid textarea,
  :is(.wps-quote-card) .wpforms-container .wpforms-form textarea {
    height: 70px !important; min-height: 70px !important;
  }
  .wps-quote-grid button[type="button"],
  :is(.wps-quote-card) .wpforms-container .wpforms-form button[type="submit"],
  :is(.wps-quote-card) .wpforms-container .wpforms-form .wpforms-submit {
    padding: 13px 28px !important;
  }
}

/* Mobile — the whole popup (7 stacked fields once the grid collapses to one
   column) is taller than most phone viewports at the 1366 sizing above, so
   it scrolls internally. Shrink every dimension further here so the full
   form fits without that scroll. Placed after the 1366 block above (same
   selectors/specificity) so this wins the source-order tie. The heading's
   own font-size/margin and the field labels are inline, so overriding needs
   !important; select option font-size is scoped to .wps-quote-card only —
   the inline Contact form's own select (.wps-contact-card) is untouched. */
@media (max-width: 767px) {
  .wps-quote-overlay { padding: 12px; }
  .wps-quote-card { padding: 15px !important; }
  .wps-quote-heading { font-size: 12px !important; white-space: nowrap; margin-right: 30px !important; }
  .wps-quote-close { width: 30px !important; height: 30px !important; top: 12px !important; right: 12px !important; }
  .wps-quote-grid { gap: 14px !important; margin-top: 10px !important; }
  .wps-quote-grid label,
  :is(.wps-quote-card) .wpforms-container .wpforms-form .wpforms-field-label {
    font-size: 13px !important; margin-bottom: 3px !important;
  }
  .wps-quote-grid input, .wps-quote-grid textarea,
  :is(.wps-quote-card) .wpforms-container .wpforms-form input[type],
  :is(.wps-quote-card) .wpforms-container .wpforms-form textarea {
    padding: 8px 12px !important; font-size: 12px !important;
  }
  /* Longhand on purpose — a shorthand `padding` here would also reset the
     custom arrow's padding-right (44px) set elsewhere, pushing text under it. */
  .wps-quote-grid select,
  :is(.wps-quote-card) .wpforms-container .wpforms-form select {
    padding-top: 8px !important; padding-bottom: 8px !important; padding-left: 12px !important;
    font-size: 13px !important;
  }
  .wps-quote-select option,
  :is(.wps-quote-card) .wpforms-container .wpforms-form select option {
    font-size: 12px;
  }
  .wps-quote-grid textarea,
  :is(.wps-quote-card) .wpforms-container .wpforms-form textarea {
    height: 52px !important; min-height: 52px !important;
  }
  .wps-quote-grid button[type="button"],
  :is(.wps-quote-card) .wpforms-container .wpforms-form button[type="submit"],
  :is(.wps-quote-card) .wpforms-container .wpforms-form .wpforms-submit {
    padding: 10px 22px !important; font-size: 14px !important;
  }
}

@media (max-width: 767px) {
  :is(.wps-contact-card,.wps-quote-card) .wpforms-container .wpforms-form input[type=email], :is(.wps-contact-card,.wps-quote-card) .wpforms-container .wpforms-form input[type=number], :is(.wps-contact-card,.wps-quote-card) .wpforms-container .wpforms-form input[type=password], :is(.wps-contact-card,.wps-quote-card) .wpforms-container .wpforms-form input[type=tel], :is(.wps-contact-card,.wps-quote-card) .wpforms-container .wpforms-form input[type=text], :is(.wps-contact-card,.wps-quote-card) .wpforms-container .wpforms-form input[type=url], :is(.wps-contact-card,.wps-quote-card) .wpforms-container .wpforms-form select, :is(.wps-contact-card,.wps-quote-card) .wpforms-container .wpforms-form textarea {

    font-size: 12px !important;

}
}

/* ============ Responsive layout overrides ============ */

/* Hero at laptop widths (1366 and below, above the 1199 tier's own reflow
   below) — the desktop clamp()s and the title-line spans' hardcoded 76px/
   70px leave the CTA buttons below the fold on a 1366x768 laptop screen.
   Tighten the section padding, the hardcoded title-line size, and the gap
   between each block so the whole hero, through the buttons, fits in view.
   Placed before the 1199 block below so that block's own (narrower) title-
   line override still wins at <=1199, same source-order convention as the
   rest of this section (wider breakpoints first, narrower ones after). */
@media (max-width: 1366px) {
  .wps-hero { padding: 70px 0 100px !important; }
  .wps-hero-title-line { font-size: 52px !important; line-height: 56px !important; }
  .wps-hero-title { margin-top: 14px !important; }
  .wps-hero-subtitle { margin-top: 12px !important; }
  .wps-hero-image-box { margin-top: 12px !important; padding: 10px 20px !important; }
  .wps-hero-buttons-box { margin-top: 16px !important; }
  .wps-hero-buttons-box a { font-size: 14px !important; padding: 13px 26px !important; }
  .wps-hero-reviews-box { margin-top: 16px !important; }
}

/* Hero H1 — the two line spans carry a hardcoded 76px/70px that overrides
   the heading's own clamp() at any width. Below 1199 defer back to the
   heading's clamp so the title actually shrinks with the viewport, then
   step down to fixed sizes below 1023 and 767. */
@media (max-width: 1199px) {
  .wps-hero-title-line { font-size: inherit !important; line-height: inherit !important; }
}
@media (max-width: 1023px) {
  .wps-hero-title-line { font-size: 48px !important; }
}
@media (max-width: 767px) {
  .wps-hero-title-line { font-size: 35px !important; line-height: 1.2 !important; }
  .wps-hero-title { margin-top: 0 !important; }
}

/* Hero subtitle — fixed 700px reading width above tablet; below 1199 it
   steps down to 25px, below 1023 to 22px, below 767 to 20px and fills the
   available column instead of clipping to the fixed 700px width. Margin-top
   tightens at each tier too (10px, then 5px) as the title above it shrinks.
   The image/buttons/reviews stacks below the subtitle get the same 1199
   margin-top squeeze. */
@media (max-width: 1199px) {
  .wps-hero-subtitle { font-size: 25px !important; margin-top: 10px !important; }
  .wps-hero-image-box { margin-top: 10px !important; }
  .wps-hero-buttons-box { margin-top: 15px !important; }
  .wps-hero-reviews-box { margin-top: 15px !important; }
}
@media (max-width: 1023px) {
  .wps-hero-subtitle { font-size: 22px !important; margin-top: 5px !important; }
}
@media (max-width: 767px) {
  .wps-hero-subtitle { font-size: 16px !important; max-width: 100% !important; margin-top: 2px !important; }
}

/* Hero section below 767 — the fixed 90-240px clamp() padding above leaves
   very little of the section for the actual photo to show through once the
   text stack is this compact, so it drops to a flat 50px. The overlay's
   90deg left-to-right gradient (built for text-on-left/photo-on-right on a
   wide desktop hero) also leaves almost the whole narrow mobile width dark,
   so it's replaced with a top-to-bottom fade that clears the top of the
   photo and only darkens toward the bottom where the text sits. The slide
   dots are dropped (no room, and swipe/autoplay don't need a page indicator
   at this width). Buttons and the spacing around each hero block tighten
   to match the smaller title/subtitle above them. */
@media (max-width: 767px) {
  .wps-hero { padding: 50px 0 !important; }
  .wps-hero-overlay {
    background: linear-gradient(0deg, rgba(0,0,0,0.58) 20%, rgba(0,0,0,0.24) 80%, rgba(0,0,0,0) 100%) !important;
  }
  .wps-hero-dot { display: none !important; }
  .wps-hero-image-box {
    margin-top: 8px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    line-height: 1;
  }
  .wps-hero-buttons-box { margin-top: 10px !important; flex-wrap: nowrap !important; gap: 7px !important; }
  /* Also resets padding — the 1366px tier above sets it via this same
     selector, which out-specifies the generic sitewide .wps-btn-solid-lift
     etc. mobile rule elsewhere, so it must be reclaimed here explicitly. */
  .wps-hero-buttons-box a { font-size: 11px !important; padding: 12px 22px !important; }
  .wps-hero-reviews-box { margin-top: 10px !important; }
}

/* All pill buttons site-wide (solid, solid-lift, ghost-white, and the
   transparent phone-number CTAs) shrink below 767 — desktop sizes run
   14.5-19px padding and 15-17px font, which is oversized once the button
   row wraps onto a narrow phone width. The header's own CTA is excluded
   (.wps-header-actions .wps-btn-solid is more specific and already has
   its own, even smaller, mobile size from the header layout rules above). */
@media (max-width: 767px) {
  .wps-btn-solid,
  .wps-btn-solid-lift,
  .wps-btn-ghost-white,
  .wps-btn-phone {
    padding: 12px 22px !important;
    font-size: 14px !important;
  }
}

/* All h2 headings within our own widgets — reduced site-wide below 767.
   .entry-content h2 is included in case the active theme wraps Elementor
   canvas content in that class, so this still wins over a theme rule of
   the same shape. */
@media (max-width: 767px) {
  [class*="elementor-widget-woods_property_"] .elementor-widget-container h2,
  [class*="elementor-widget-woods_property_"] .elementor-widget-container.entry-content h2 {
    font-size: 25px !important;
  }
}

/* Services card grid — auto-fit with a 300px minmax naturally drops to 3
   columns between ~1200-1500px container widths (a 300px item can't fit
   4-per-row in that range once the 28px gaps are subtracted), even though
   both narrower and wider viewports show 3 and 4 respectively. Force 4 at
   >=1200 so common laptop widths (1366, 1440) don't lose a column. */
@media (min-width: 1200px) {
  .wps-services-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Services, About and Experience eyebrows tighten below 767, and the
   Services title block (eyebrow+heading wrap) drops its 60px margin-bottom
   to 30px so the card grid sits closer beneath it. */
@media (max-width: 767px) {
  #services { padding: 10px 0 40px !important; }
  .wps-services-title-wrap { margin-bottom: 30px !important; }
  .wps-services-eyebrow { margin-bottom: 5px !important; }
  .wps-about-eyebrow { margin-bottom: 5px !important; }
  .wps-experience-eyebrow { margin-bottom: 5px !important; }
  .wps-experience-row { margin-top: 30px !important; }
  #why-us { padding-top: 30px !important; padding-bottom: 30px !important; }
  .wps-whyus-eyebrow { margin-bottom: 10px !important; }
  .wps-whyus-points { margin-top: 30px !important; }
  .wps-process-steps { gap: 10px !important; }
  #reviews { padding-top: 30px !important; padding-bottom: 30px !important; }
  #faqs { padding-top: 30px !important; padding-bottom: 30px !important; }
  .wps-faqs-eyebrow { margin-bottom: 10px !important; }
}

/* Simple Three-Step Process — drop the vertical divider between the title
   and paragraph below 1199 (they wrap onto separate lines there anyway). */
@media (max-width: 1199px) {
  .wps-process-title-divider { display: none; }
}
/* Title/paragraph row — tighten the gap below 767 now that it's just the
   two of them stacked (divider already hidden above). */
@media (max-width: 767px) {
  .wps-process-title-group { gap: 8px !important; }
}

/* Contact section ("Get Started") — tighten the eyebrow/paragraph/CTA
   spacing below 1199. */
@media (max-width: 1199px) {
  .wps-contact-eyebrow { margin-bottom: 10px !important; }
  .wps-contact-paragraph { margin-top: 10px !important; }
  .wps-contact-cta-box { margin-top: 20px !important; }
}

/* Trust bar ("Why Homeowners Choose...") — the card only overlaps the
   hero at 1200px and above; below that it sits in normal flow and drops
   its border. Points go 2-per-row below 1023, full-width below 767. */

/* The card is pulled out of flow entirely and positioned absolute against
   its wrap (already position:relative), then #services gets matching
   top margin to make room for it — since an absolutely-positioned card
   reserves no space of its own, the services section would otherwise
   start immediately after the (now empty) trust bar wrap and collide
   with the floating card. Both are scoped to >=1200px only. */
@media (min-width: 1200px) {
  .wps-trust-bar-card {
    position: absolute;
    top: -80px;
    left: 0;
    right: 0;
  }
  #services {
    margin-top: 130px;
  }
}
/* Above 1600px the card's overlap reads shallower relative to the section,
   so #services needs less top margin to clear it than the 1200px tier. */
@media (min-width: 1600px) {
  #services {
    margin-top: 100px;
  }
}
@media (max-width: 1199px) {
  .wps-trust-bar-card { border: none !important; }
  .wps-trust-bar-wrap { padding-top: 50px !important; }
}
/* The points row's border-left reads as the divider on the right side of
   the heading — drop it once the row wraps under the heading. */
@media (max-width: 1119px) {
  .wps-trust-points-row { border-left: none !important; }
}
@media (max-width: 1023px) {
  .wps-trust-point { flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px); }
}
@media (max-width: 767px) {
  .wps-trust-bar-wrap { padding-top: 25px !important; }
  .wps-trust-point { flex: 0 0 100%; max-width: 100%; }
}

/* Experience stats ("Over 10 Years of Experience.") — stay on one line
   down to 1023 (items just shrink instead of wrapping to a new row),
   then stack full-width below 767 with the dividers hidden. */
@media (max-width: 1023px) {
  .wps-experience-row { flex-wrap: nowrap; }
  .wps-exp-stat { flex: 1 1 auto; min-width: 0; }
  .wps-exp-stat span:first-child { font-size: 15px !important; }
  .wps-exp-stat span:last-child { font-size: 13px !important; }
}
@media (max-width: 767px) {
  .wps-experience-row { flex-direction: column; flex-wrap: wrap; }
  .wps-exp-stat { flex: 1 1 100%; width: 100%; padding-top: 15px !important; padding-bottom: 15px !important; }
  .wps-exp-divider { display: none; }
}

/* Footer — grid swaps to flex so the brand/logo column can take its own
   full-width row (laid out as a left-aligned horizontal row itself) while
   the 4 link columns share the row beneath it — font size and gaps
   tighten so headings/links don't wrap at that narrower width. Extends up
   to 1199 (not just 1023) so the brand-100%/columns-20% split below
   actually takes effect across the whole tablet range — flex-basis has no
   effect while the container is still display:grid, which it is above
   this breakpoint. */
@media (max-width: 1199px) {
  .wps-footer-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px clamp(14px, 2vw, 28px) !important;
  }
  .wps-footer-col-brand {
    flex: 1 1 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
    gap: 24px;
  }
  .wps-footer-col-brand > * { margin-top: 0 !important; }
  .wps-footer-grid > div:not(.wps-footer-col-brand) {
    flex: 0 1 25%;
    max-width: 25%;
  }
  .wps-footer-col h4 { font-size: 11px !important; margin-bottom: 14px !important; }
  .wps-footer-col a, .wps-footer-col span { font-size: 13px !important; }
  .wps-footer-col > div { gap: 9px !important; }
}
/* Below 1199, brand takes its own full-width row (with a bit of breathing
   room before the link columns) and the 4 link columns share the row
   beneath it — 20% each by default, except Quick Link (narrower content)
   at 15% and Contact (widest content — phone/email/hours) at 25%.
   Overrides the plain 25% set on the block above. Below 767 the separate
   mobile rule further down overrides every column (brand included) back
   to 100% to stack them instead. */
@media (max-width: 1199px) {
  .wps-footer-col-brand { flex: 0 1 100% !important; max-width: 100% !important; margin-bottom: 20px; }
  .wps-footer-col { flex: 0 1 20% !important; max-width: 20% !important; }
  .wps-footer-grid > .wps-footer-col:nth-last-child(2) { flex: 0 1 15% !important; max-width: 15% !important; }
  .wps-footer-grid > .wps-footer-col:last-child { flex: 0 1 25% !important; max-width: 25% !important; }
}
/* Contact gets a touch more max-width below 1023 specifically. */
@media (max-width: 1023px) {
  .wps-footer-grid > .wps-footer-col:last-child { flex: 0 1 25% !important; max-width: 30% !important; }
}

/* Service Areas grid — 6 columns desktop, 3 down to 767, 1 (stacked) below. */
@media (max-width: 1199px) {
  .wps-areas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
  .wps-areas-grid { grid-template-columns: 1fr !important; margin-top: 30px !important; }
  .wps-areas-cta-box { margin-top: 30px !important; }
}

/* Gallery grid — drop the desktop masonry column/row spans below 767 so
   items simply auto-flow into an even 2-column layout. */
@media (max-width: 767px) {
  #gallery { padding-top: 30px !important; padding-bottom: 30px !important; }
  .wps-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 160px !important; }
  .wps-gallery-grid .wps-gallery-item-cell { grid-column: auto !important; grid-row: auto !important; }
  .wps-gallery-title-wrap { margin-bottom: 30px !important; }
}

/* Simple Three-Step Process — below 767 drop the card max-width cap and the
   paragraph's fixed px width so both go full-width instead. */
@media (max-width: 767px) {
  .wps-process-step { max-width: 100% !important; width: 100% !important; flex-basis: 100% !important; }
  .wps-process-paragraph { width: 100% !important; }
}

/* Why Homeowners Choose Woods Property Service (Trust Points Bar widget) —
   the points row shifts from center-aligned to top/left-aligned below 767. */
@media (max-width: 767px) {
  .wps-trust-points-row {
    align-items: start !important;
    justify-content: start !important;
    padding-left: 10px !important;
  }
}

/* Footer — below 767 every column (including the brand row) stacks full
   width in a single column, refining the 1023px 25%-column layout above. */
@media (max-width: 767px) {
  .wps-footer-grid {
    flex-direction: column !important;
  }
  .wps-footer-grid > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
  .wps-footer-grid > .wps-footer-col:last-child,
  .wps-footer-grid > .wps-footer-col:nth-last-child(2) {
    flex: 0 1 100% !important;
    max-width: 100% !important;
  }
  .wps-footer-col-brand {
    justify-content: flex-start !important;
  }
}

/* ============ Thank You page (screen-fit layout) ============
   Header stays its natural height at top, footer its natural height at
   bottom, and the hero (.wps-thankyou-hero) fills exactly what's left —
   sized by JS (initThankYouHero) measuring the real header/footer height
   against the viewport, since Elementor's own wrapper markup can't be
   relied on to pass a flex column through to these three sections.
   :has() scopes this reset to only pages that actually use the Thank You
   header, so it never touches the main site's layout. */
html:has(.wps-thankyou-header),
body:has(.wps-thankyou-header) {
  height: 100%;
  margin: 0;
  background: #000000;
}
.wps-thankyou-hero {
  min-height: 320px;
}

@media (prefers-reduced-motion: reduce) {
  [class*="elementor-widget-woods_property_"] .elementor-widget-container * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .wps-btn-solid-lift:hover,
  .wps-area-chip:hover,
  .wps-service-card:hover {
    transform: none !important;
  }
  .wps-lightbox, .wps-reviews-track { scroll-behavior: auto; transition-duration: 0.01ms !important; }
}

/* ============ Editor-only "stage selection" hint ============
   .wps-header-nav and .wps-footer-col are plain markup inside one
   monolithic widget, not separate Elementor elements, so they can't hook
   into Elementor's own hover/click outline or the Navigator tree the way
   a real section/column/widget does. This gives the same at-a-glance
   affordance purely inside the editor's preview canvas — scoped to
   body.elementor-editor-active, which Elementor adds only in the preview
   iframe, so nothing renders on the live site. */
body.elementor-editor-active .wps-header-nav,
body.elementor-editor-active .wps-footer-col {
  position: relative;
  outline: 2px dashed transparent;
  outline-offset: 4px;
  transition: outline-color .15s ease;
}
body.elementor-editor-active .wps-header-nav:hover,
body.elementor-editor-active .wps-footer-col:hover {
  outline-color: rgba(63,136,247,0.65);
}
body.elementor-editor-active .wps-header-nav.wps-stage-selected,
body.elementor-editor-active .wps-footer-col.wps-stage-selected {
  outline: 2px solid #3F88F7;
}
body.elementor-editor-active .wps-header-nav::before,
body.elementor-editor-active .wps-footer-col::before {
  content: attr(data-stage-label);
  position: absolute; top: -22px; left: -2px; z-index: 9999;
  background: #3F88F7; color: #FFFFFF; font-family: Arial, sans-serif;
  font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap;
  padding: 4px 8px; border-radius: 4px 4px 4px 0;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
body.elementor-editor-active .wps-header-nav:hover::before,
body.elementor-editor-active .wps-header-nav.wps-stage-selected::before,
body.elementor-editor-active .wps-footer-col:hover::before,
body.elementor-editor-active .wps-footer-col.wps-stage-selected::before {
  opacity: 1;
}

/* Header/footer menu links matching the current page on load. */
.active {
  color: #789c18 !important;
}
.wps-nav-dropdown .active {
  color: #789c18 !important;
  background: #F5F7EF !important;
}