/* Local fixes after removing the Squarespace runtime */
:root { --image-component-focal-point: 50% 50%; }

/* Section divider — the angled banner edge.
   Squarespace computed this geometry in JS at runtime. The clip-path polygon
   lives in shared.css (.has-section-divider > .section-border) and reads this
   height. 6vw matches the original <style data-section-divider-style> block. */
.has-section-divider { --divider-height: 6vw; }

/* Form blocks: the button opens the modal, so hide the empty inline wrapper
   Squarespace used to render its form into. */
.sqs-block-form .form-wrapper:empty { display: none; }

/* /contact gets a real inline form instead of the lightbox button.
   Delete these two rules to go back to lightbox-only, as Squarespace had it. */
body.page-contact .sqs-block-form .form-wrapper { display: block; }
body.page-contact .lightbox-handle-wrapper { display: none; }

/* Form response text */
.form-response,
.newsletter-form-response { margin-top: 10px; min-height: 1.2em; }
.form-response.is-success,
.newsletter-form-response.is-success { color: #1a7f37; }
.form-response.is-error,
.newsletter-form-response.is-error { color: #b42318; }
.newsletter-form-response { text-align: center; }

/* Contact page form */
.form-wrapper .field-list .field { margin-bottom: 12px; }
.form-wrapper .field-list .title { display: block; font-weight: 600; margin-bottom: 4px; }
.form-wrapper textarea.field-element { min-height: 140px; resize: vertical; }
.form-wrapper .form-button-wrapper { margin-top: 16px; }

/* ------------------------------------------------------------ quote modal --
   Mirrors the Squarespace lightbox: full-screen dark overlay, centred panel. */
.ww-modal[hidden] { display: none; }
.ww-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 5vh 1.25rem;
  box-sizing: border-box;
}
.ww-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .85);
}
.ww-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  margin: auto;
  padding: 2.5rem 2rem;
  background: var(--siteBackgroundColor, #fff);
  box-sizing: border-box;
  animation: ww-modal-in 200ms ease-out;
}
@keyframes ww-modal-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.ww-modal__close {
  position: absolute;
  top: .5rem;
  right: .75rem;
  padding: .25rem .5rem;
  border: 0;
  background: none;
  color: inherit;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.ww-modal__close:hover { opacity: .6; }
.ww-modal__logo {
  display: block;
  max-width: 260px;
  height: auto;
  margin: 0 auto 1.25rem;
  padding: 1rem;
  background: #000;   /* logo is white-on-transparent */
  box-sizing: border-box;
}
.ww-modal__title { margin: 0 0 .5rem; text-align: center; }
.ww-modal__intro { margin: 0 0 1.5rem; text-align: center; }
.ww-modal .form-wrapper { display: block; }
body.ww-modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .ww-modal { padding: 0; }
  .ww-modal__dialog { max-width: none; min-height: 100%; padding: 3.5rem 1.25rem 2rem; }
}

/* Honeypot — visually gone, still in the DOM for bots to find */
.ww-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------- interior banner title
   Interior pages (services, about, contact) have a shorter first-section
   banner than the homepage, so their vertically-centred title sits higher.
   Nudge it down so it lines up with the homepage banner title.
   Homepage is exempt via body.homepage. */
body:not(.homepage):not(.page-contact) #sections > .page-section:first-of-type .content-wrapper {
  padding-top: 35px !important;   /* beats the inline calc(0vmax/10) padding */
}
@media (min-width: 768px) {
  body:not(.homepage):not(.page-contact) #sections > .page-section:first-of-type .content-wrapper {
    padding-top: 75px !important;
  }
}

/* ------------------------------------------- "Trusted by..." homepage intro
   The heading and its paragraph sit in fluid-engine blocks that already span
   the full content width (grid-area 2/26), so centring the text is all that
   is needed — the blocks themselves are not offset.
   Must be an id selector: assets/css/pages/index.css loads after this file,
   so a .fe-block-* rule here would lose the cascade to the generated ones. */
#block-yui_3_17_2_1_1774584771530_40541 .sqs-html-content,
#block-yui_3_17_2_1_1774584771530_41052 .sqs-html-content {
  text-align: center;
}

/* ------------------------------------------------ gutter-cleaning shed photo
   The desktop alternating slot is about 1.9:1 but the photo is 4:3, so ~30%
   of its height is cropped. Anchor to the bottom so the crop comes off the
   sky and the vehicle livery stays in shot. Mobile slots are near 4:3, where
   this has no effect. */
#block-ww-alt2-gutter-cleaning-img img {
  object-position: 50% 100%;
}

/* ------------------------------------------------- tall before/after photos
   The alternating image slots are landscape (about 1.9:1 desktop, 1.3:1
   mobile) and the image fills the slot with object-fit:cover, so a portrait
   before/after stack gets cropped to a narrow band. Giving the block the
   photo's own aspect ratio makes the grid row grow to fit: cover then has
   nothing to crop and the whole stack is visible.

   The ratio has to match the file. If you swap either photo, update the value
   here AND the width/height attributes on the <img> (they are used for the
   load-time placeholder, and Squarespace left them at a stale 1600x1067).
     pressure-washing        wXEbZLFa.jpeg                1200 x 1350
     commercial-property-care before-after-vertical-stack.jpg 800 x 1200 */
.fe-block-ww-alt1-pressure-washing-img {
  align-self: start;
  height: auto;
  aspect-ratio: 1200 / 1350;
}
.fe-block-ww-alt1-commercial-property-care-img {
  align-self: start;
  height: auto;
  aspect-ratio: 800 / 1200;
}