/* 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
   is applied inline on .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;
  }
}