/* =====================================================================
 * WL clean section layouts.
 * The Squarespace fluid-engine per-section grid CSS was not ported (it's 49k
 * of inline rules tied to generated IDs). Instead we lay the sections out with
 * clean, maintainable CSS keyed off the wl- block hooks the templates emit.
 * Enqueued LAST so it wins over the static stylesheets.
 * ===================================================================== */

/* ---- Generic container + neutralise the broken fluid grid ---- */
.fluid-engine { display: block; }
.page-section .content-wrapper { width: 100%; }
/* Full-bleed like the live site: every section spans the viewport and insets its
   content by 4vw on each side — the SAME 4vw the header uses — so the whole site
   shares one content width and the section content aligns under the header logo. */
.wl-container,
.page-section:has(.wl-hero-text) .fluid-engine,
.page-section:has(.wl-news-posts) .fluid-engine,
.page-section:has(.wl-why-heading) .fluid-engine,
.page-section:has(.wl-pintro-text) .fluid-engine,
.page-section:has(.accordion-item) .fluid-engine {
  max-width: none;
  margin-inline: 0;
  padding-inline: 4vw;
  box-sizing: border-box;
}

/* The Squarespace fluid-IMAGE component collapses to 0×0 without its grid cell.
   Force any image inside our hero/why blocks back to normal document flow. */
.wl-hero-image .fluid-image-component-root,
.wl-hero-image .fluid-image-animation-wrapper,
.wl-hero-image .fluid-image-container,
.wl-hero-image .sqs-image-content,
.wl-why-feature .fluid-image-component-root,
.wl-why-feature .fluid-image-animation-wrapper,
.wl-why-feature .fluid-image-container,
.wl-why-feature .sqs-image-content {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  display: block !important;
}
.wl-hero-image img,
.wl-why-feature img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- 0. HERO ---------- */
.page-section:has(.wl-hero-text) .fluid-engine {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: stretch;   /* let the hero image fill the row height (big/tall) */
  padding-top: 130px;     /* clear the absolute header */
  padding-bottom: 64px;
}
.wl-hero-text  { order: 1; min-width: 0; align-self: center; }
.wl-hero-image { order: 2; min-width: 0; display: flex; }
/* typography (size/colour/weight) comes from the static stylesheet — match live */
.wl-hero-text h1 { margin: 0 0 .35em; }
.wl-hero-body { margin: 0 0 1.2em; }
.wl-hero-text h3 { margin: .3em 0; }
.wl-hero-text h3 a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* big tall hero image (cover-crop) like the live site */
.wl-hero-image .sqs-block,
.wl-hero-image .sqs-block-content,
.wl-hero-image .fluid-image-component-root,
.wl-hero-image .fluid-image-animation-wrapper,
.wl-hero-image .fluid-image-container,
.wl-hero-image .sqs-image-content { height: 100% !important; width: 100% !important; }
.wl-hero-image img {
  width: 100% !important; height: 100% !important;
  min-height: 560px; object-fit: cover !important;
  border-radius: 3px; display: block;
}
@media (max-width: 820px) {
  .page-section:has(.wl-hero-text) .fluid-engine { grid-template-columns: 1fr; gap: 28px; padding-top: 110px; align-items: stretch; }
  .wl-hero-image { order: 1; } .wl-hero-text { order: 2; }
  .wl-hero-image img { min-height: 320px; }
}

/* ---------- 1. LATEST NEWS (card grid) ---------- */
.page-section:has(.wl-news-posts) .fluid-engine { padding-block: 7vw; }
/* heading + subtitle sit in a narrow left column (like live), so the title
   wraps instead of stretching the full width; the card grid stays full width. */
.wl-news-heading { max-width: 584px; }
.wl-news-heading h1 { margin: 0 0 .2em; }
/* small "Featured" label above the cards */
.wl-news-posts .summary-block-header { margin: 0 0 14px; }
.wl-news-posts .summary-header-text { font-size: 14px; font-weight: 400; color: #fff; }
.wl-news-posts .summary-item-list,
.wl-news-posts .sqs-gallery {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  width: 100% !important;
}
.wl-news-posts .summary-item {
  position: static !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  left: auto !important; top: auto !important;
}
.wl-news-posts .summary-thumbnail-outer-container { margin-bottom: 12px; }
.wl-news-posts .summary-thumbnail-container { display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: 3px; }
.wl-news-posts .summary-thumbnail,
.wl-news-posts .summary-thumbnail img { width: 100% !important; height: 100% !important; object-fit: cover !important; opacity: 1 !important; }
.wl-news-posts .summary-content { text-align: center; }   /* centred title + date, like live */
.wl-news-posts .summary-title { margin: 0; text-align: center; }
.wl-news-posts .summary-title, .wl-news-posts .summary-title a { font-size: 20px; }  /* match live */
/* date sits BELOW the title (Squarespace hides the carousel metadata, so force the
   whole below-title chain visible). */
.wl-news-posts .summary-metadata-container--below-title,
.wl-news-posts .summary-metadata-container--below-title .summary-metadata,
.wl-news-posts .summary-metadata-container--below-title .summary-metadata-item--date { display: block !important; }
.wl-news-posts .summary-metadata-container--below-title { margin-top: 8px; }
.wl-news-posts .summary-metadata-item--date { font-size: 13px; color: #fff; opacity: 1; }
@media (max-width: 980px){ .wl-news-posts .summary-item-list, .wl-news-posts .sqs-gallery { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .wl-news-posts .summary-item-list, .wl-news-posts .sqs-gallery { grid-template-columns: 1fr; } }

/* Latest News lime band: scalloped wave top + bottom like the live site. White
   overlays carve the lime edge into a wave; white matches the (white) sections
   above and below. Scoped to .wl-news-grid so the white blog archive is untouched. */
.page-section:has(.wl-news-grid) { position: relative; }
.page-section:has(.wl-news-grid) .section-border { z-index: 0; }
.page-section:has(.wl-news-grid) .content-wrapper { position: relative; z-index: 2; }
.page-section:has(.wl-news-grid)::before,
.page-section:has(.wl-news-grid)::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6vw; z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,60 Q90,40 180,60 T360,60 T540,60 T720,60 T900,60 T1080,60 T1260,60 T1440,60 L1440,0 L0,0 Z'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}
.page-section:has(.wl-news-grid)::before { top: -1px; }
.page-section:has(.wl-news-grid)::after  { bottom: -1px; transform: scaleY(-1); }

/* ---------- 3. WHY CHOOSE (icon grid) ---------- */
/* centred content (NOT full-bleed): live constrains this grid to ~1310px and
   centres it, so override the section's 4vw full-bleed here. */
.page-section:has(.wl-why-heading) .fluid-engine {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;            /* don't stretch cells -> no big internal gap */
  gap: 48px;
  padding-block: 60px;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 24px;
}
.wl-why-heading { grid-column: 1 / -1; text-align: center; margin-bottom: 8px; }
.wl-why-heading h1 { margin: 0; }
.wl-why-feature {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
  max-width: 380px; margin-inline: auto;   /* narrow centred column text, like live */
}
/* collapse Squarespace block spacing so icon + text pack tightly */
.wl-why-feature .sqs-block,
.wl-why-feature .sqs-block-content { margin: 0 !important; padding: 0 !important; }
/* the image block stretches full width, so centre the icon itself (text-align
   can't move a block-level <img>). */
.wl-why-feature .sqs-block-image,
.wl-why-feature .sqs-image-content { text-align: center; }
.wl-why-feature img { width: 56px !important; height: 56px !important; margin: 0 auto !important; display: block !important; }
.wl-why-feature p { margin: 0; line-height: 1.5; }
@media (max-width: 820px){ .page-section:has(.wl-why-heading) .fluid-engine { grid-template-columns: 1fr; gap: 30px; text-align:center; } }

/* ---------- 2. PARTNERS INTRO ---------- */
.page-section:has(.wl-pintro-text) .fluid-engine { padding-block: 64px; }
/* heading sits in a narrow left column (like live) so it wraps, not full width */
.wl-pintro-text { max-width: 716px; }
.wl-pintro-text h2, .wl-pintro-text h1 { margin: 0 0 .4em; }     /* size/colour from static */
.wl-pintro-text a { text-decoration: underline; }
/* green "Line" section divider: a 15px lime bar across the section's bottom edge */
.page-section:has(.wl-pintro-text) { border-bottom: 15px solid #9fbb1e; }

/* ---------- 4 & 5. ACCORDIONS (partners + clients) ---------- */
.accordion-item { border-top: 1px solid currentColor; }
.accordion-item:last-child { border-bottom: 1px solid currentColor; }
.accordion-item__click-target,
.accordion-item__title-wrapper {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 20px 4px; cursor: pointer; gap: 16px;
  background: none; border: 0; font: inherit; color: inherit; text-align: left;
}
.accordion-item__title { margin: 0; }
/* match live accordion title sizing per section (our custom markup doesn't inherit
   the Squarespace block settings): partners (white bg) = grey 20px, clients
   (magenta) = white 24px */
[data-section-theme="black"] .accordion-item__title { font-size: 20px; color: rgb(63,63,63); }
[data-section-theme="dark"]  .accordion-item__title { font-size: 24px; color: #fff; }
.accordion-item__icon { flex: 0 0 auto; transition: transform .25s; }
.accordion-item--active .accordion-item__icon { transform: rotate(45deg); }
.accordion-item__dropdown { display: none; padding: 0 4px 20px; }
.accordion-item--active .accordion-item__dropdown { display: block; }
.page-section:has(.accordion-item) .fluid-engine { padding-block: 48px; }

/* ---------- 4. OUR PARTNERS (heading + logo strip + accordion) ----------
   Centred content like live (NOT full-bleed): heading top-left, logo strip
   top-right, accordion full width below. */
.page-section:has(.wl-partners-grid) .fluid-engine {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 40px;
  max-width: 1226px;
  margin-inline: auto;
  padding-inline: 24px;
}
.wl-partners-heading { grid-column: 1; grid-row: 1; }
.wl-partners-logos   { grid-column: 2; grid-row: 1; justify-self: end; max-width: 650px; }
.wl-partners-accordion { grid-column: 1 / -1; grid-row: 2; }
/* the logo strip reuses Squarespace fluid-image wrappers — neutralise them so the
   single combined logo image flows normally instead of collapsing. */
.wl-partners-logos .sqs-block,
.wl-partners-logos .sqs-block-content,
.wl-partners-logos .fluid-image-component-root,
.wl-partners-logos .fluid-image-animation-wrapper,
.wl-partners-logos .fluid-image-container,
.wl-partners-logos .sqs-image-content {
  position: static !important; inset: auto !important;
  width: auto !important; height: auto !important;
  padding: 0 !important; margin: 0 !important; overflow: visible !important; display: block !important;
}
.wl-partners-logos img { position: static !important; display: block; max-width: 100% !important; height: auto !important; }
@media (max-width: 820px){
  .page-section:has(.wl-partners-grid) .fluid-engine { grid-template-columns: 1fr; }
  .wl-partners-logos { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 16px; }
  .wl-partners-accordion { grid-row: auto; }
}

/* ---------- 5. WHAT OUR CLIENTS SAY (magenta, TWO-column accordion) ----------
   Content left-aligned at 4vw, two independent accordion columns (~518px each)
   like live, plus a grey wave divider into the grey footer at the bottom. */
.wl-testimonials-heading { max-width: 1311px; }
.wl-testimonials-cols {
  display: grid;
  grid-template-columns: minmax(0, 518px) minmax(0, 518px);
  justify-content: space-between;
  max-width: 1311px;
  column-gap: 40px;
}
.wl-testimonials-cols .accordion-items-container { align-self: start; }
/* live rhythm: ~62px above the heading, ~121px below the last item (6vw section
   padding) so the magenta breathes before the grey wave divider into the footer */
.page-section:has(.wl-testimonials-grid) .fluid-engine { padding-top: 3.6vw; padding-bottom: 7vw; }
@media (max-width: 900px){ .wl-testimonials-cols { grid-template-columns: 1fr; row-gap: 0; } }
/* grey wave divider at the section bottom (magenta -> grey footer, rgb 96,96,96) */
.page-section:has(.wl-testimonials-grid) { position: relative; }
.page-section:has(.wl-testimonials-grid) .section-border { z-index: 0; }
.page-section:has(.wl-testimonials-grid) .content-wrapper { position: relative; z-index: 2; }
.page-section:has(.wl-testimonials-grid)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 6vw; z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23606060' d='M0,60 Q90,40 180,60 T360,60 T540,60 T720,60 T900,60 T1080,60 T1260,60 T1440,60 L1440,0 L0,0 Z'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
  transform: scaleY(-1);
}

/* ---------- BLOG ARCHIVE (Latest News page) ----------
   Clean white section + the working news card grid (reuses .wl-news-posts). */
.wl-archive-section { padding: 130px 4vw 72px; }
.wl-archive-inner { max-width: none; margin: 0; }
.wl-archive-title { margin: 0 0 32px; color: rgb(45, 45, 44); }
.wl-archive-accent { color: rgb(159, 187, 30); }
.wl-archive-section .wl-news-posts .summary-item-list { grid-template-columns: repeat(5, 1fr); }
/* White section, so override the dark-carousel white text. Live cards: dark
   left-aligned title, lime "Read more →", no date shown. */
.wl-archive-section .wl-news-posts .summary-content,
.wl-archive-section .wl-news-posts .summary-title { text-align: left; }
.wl-archive-section .wl-news-posts .summary-title,
.wl-archive-section .wl-news-posts .summary-title a,
.wl-archive-section .wl-news-posts .summary-title-link { color: rgb(45, 45, 44); }
.wl-archive-section .wl-news-posts .summary-metadata-item--date { display: none !important; }
.wl-archive-section .wl-news-posts .summary-read-more-link {
  display: inline-block; margin-top: 8px;
  color: rgb(159, 187, 30); font-size: 14px; text-decoration: none;
}
.wl-archive-section .the-posts-pagination, .wl-archive-section .pagination { margin-top: 40px; }
@media (max-width: 980px){ .wl-archive-section .wl-news-posts .summary-item-list { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .wl-archive-section .wl-news-posts .summary-item-list { grid-template-columns: 1fr; } }

/* The site body background is dark grey (shows through transparent sections).
   Our custom full-page sections must paint white like the live site. */
.wl-contact-section, .wl-archive-section, .wl-single-section, .wl-partners-page-section { background: #fff; }

/* ---------- PARTNERS & SOFTWARE PAGE ----------
   Single left-biased accordion (~1190px) in a centred ~1456px container, like
   live (accordion left ~136, width ~1190). Dark 24px titles on white. */
.wl-partners-page-section {
  display: block;                 /* override the static .page-section flex */
  padding: 242px 4vw 120px;       /* clear the 177px absolute header + gap like live */
}
.wl-partners-page-inner { max-width: 1456px; margin: 0 auto; }
.wl-partners-page-heading { color: rgb(159, 187, 30); margin: 0 0 .5em; }
.wl-partners-page-intro { max-width: 1190px; margin: 0 0 28px; }
.wl-partners-page-intro p { color: #070707; font-size: 18px; line-height: 1.7; margin: 0 0 1em; }
.wl-partners-page-accordion { max-width: 1190px; }
.wl-partners-page-section .accordion-item__title { font-size: 24px; color: rgb(41, 41, 41); }
.wl-partners-page-section .accordion-item__description { color: #3f3f3f; }
.wl-partners-page-section .accordion-item__description a { text-decoration: underline; }
/* live draws every divider in lime (1px) */
.wl-partners-page-section .accordion-divider {
  background: rgb(159, 187, 30); border-top-color: rgb(159, 187, 30);
}
/* the + icon rotates into an × when its item is open, like live */
.wl-partners-page-section .accordion-icon-container .plus { transition: transform .2s ease; }
.wl-partners-page-section .accordion-item--active .accordion-icon-container .plus { transform: rotate(45deg); }

/* ---------- DOWNLOAD / FREE RESOURCES PAGE ----------
   White intro heading + lime lead-capture form + white download-button section. */
.wl-dl-intro-section, .wl-dl-cta-section { background: #fff; display: block; }
.wl-dl-form-section { background: rgb(159, 187, 30); display: block; }

/* 1. "Free Resources." heading */
.wl-dl-intro-section { padding: 250px 4vw 56px; }
.wl-dl-intro-inner { max-width: 1456px; margin: 0 auto; }
.wl-dl-title { text-align: center; color: rgb(159, 187, 30); margin: 0; }
.wl-dl-underline { position: relative; display: inline-block; }
.wl-dl-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 5px; background: rgb(159, 187, 30); border-radius: 3px;
}

/* 2. lime lead-capture form */
.wl-dl-form-section { padding: 64px 4vw 80px; }
.wl-dl-form-inner { max-width: 1190px; margin: 0 auto; }
.wl-dl-form-heading { text-align: center; color: #fff; margin: 0 0 36px; line-height: 1.15; }
.wl-dl-form-section .wl-dl-form { max-width: 1190px; margin: 0 auto; }
.wl-dl-form .wl-label, .wl-dl-form .wl-group-label { color: #fff; }
.wl-dl-form .wl-req { color: rgba(255, 255, 255, .75); }
.wl-dl-form-section .wl-dl-submit { background: #fff; color: rgb(159, 187, 30); }
.wl-dl-form-section .wl-dl-submit:hover { background: #f0f0f0; }
.wl-dl-form .wl-form-status--ok { color: #fff; }
.wl-dl-form .wl-form-status--error { color: #fff3f0; }

/* 3. "Download Free Resources" button */
.wl-dl-cta-section { padding: 80px 4vw 120px; }
.wl-dl-cta-inner { max-width: 1456px; margin: 0 auto; text-align: center; }
.wl-dl-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 389px; min-height: 90px; padding: 20px 40px;
  background: rgb(159, 187, 30); color: #fff; text-decoration: none;
  border-radius: 5px; font-size: 14px; font-weight: 600; text-align: center;
  transition: background .15s;
}
.wl-dl-button:hover { background: #8ba619; }
@media (max-width: 900px) {
  .wl-dl-intro-section { padding: 150px 6vw 40px; }
  .wl-dl-form-section { padding: 48px 6vw 56px; }
  .wl-dl-cta-section { padding: 56px 6vw 72px; }
  .wl-dl-button { min-width: 0; width: 100%; box-sizing: border-box; }
}

/* ---------- SERVICE / SUB PAGES (Starting Up, Growing, Bookkeeping, …) ----------
   White page: lime heading, intro prose, numbered accordion, closing section. */
.wl-service-section { display: block; background: #fff; padding: 250px 4vw 110px; }
.wl-service-inner { max-width: 1323px; }
.wl-service-heading { color: rgb(159, 187, 30); margin: 0 0 .55em; }
.wl-service-intro { margin: 0 0 36px; }
.wl-service-intro p { color: #070707; font-size: 18px; line-height: 1.7; margin: 0 0 1em; }
.wl-service-intro strong { color: #070707; }
.wl-service-accordion .accordion-item__title { font-size: 24px; color: rgb(88, 88, 88); }
.wl-service-accordion .accordion-item__description p { color: #3f3f3f; font-size: 16px; line-height: 1.7; margin: 0 0 1em; }
/* live uses faint grey 1px dividers on these pages (not lime). The base
   .accordion-item rule draws a currentColor (lime) border here — drop it so only
   the grey divider shows. */
.wl-service-section .accordion-divider { background: rgb(228, 228, 228); border-top-color: rgb(228, 228, 228); }
.wl-service-section .accordion-item { border-top: 0; border-bottom: 0; }
/* intro / outro sub-headings use the lime accent like live */
.wl-service-intro h2, .wl-service-intro h3, .wl-service-outro h2, .wl-service-outro h3 { color: rgb(159, 187, 30); margin: 1em 0 .4em; }
.wl-service-outro { margin-top: 44px; }
.wl-service-outro h2 { color: rgb(159, 187, 30); margin: 0 0 .5em; }
.wl-service-outro p { color: #070707; font-size: 18px; line-height: 1.7; margin: 0 0 1em; }
.wl-service-section .accordion-icon-container .plus { transition: transform .2s ease; }
.wl-service-section .accordion-item--active .accordion-icon-container .plus { transform: rotate(45deg); }
@media (max-width: 900px) {
  .wl-service-section { padding: 150px 6vw 64px; }
}

/* ---------- GENERIC PAGE (page.php) ----------
   Plain editor pages with no dedicated template. Empty pages (e.g. /about/)
   render no section at all — this only applies once a page has content. */
.wl-page-section { display: block; background: #fff; padding: 250px 4vw 110px; }
.wl-page-inner { max-width: 1190px; margin: 0 auto; }
.wl-page-inner h1, .wl-page-inner h2 { color: rgb(159, 187, 30); margin: 0 0 .5em; }
.wl-page-inner p { color: #070707; font-size: 18px; line-height: 1.7; margin: 0 0 1em; }
@media (max-width: 900px) {
  .wl-page-section { padding: 150px 6vw 64px; }
}
@media (max-width: 900px) {
  .wl-partners-page-section { padding: 150px 6vw 64px; }
  .wl-partners-page-accordion { max-width: none; }
}

/* ---------- CONTACT PAGE ----------
   Two columns like live: heading + form (left, ~656px) / details + map (right,
   ~456px), centred in a ~1256px container. The right column drops down so the
   email/tel line up with the form, not the tall heading. */
.wl-contact-section {
  display: block;                 /* override the static .page-section flex so the grid fills width */
  padding: 250px 4vw 96px;        /* clear the 177px absolute header + ~108px gap like live */
}
.wl-contact-grid {
  width: 100%; max-width: 1256px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 656fr) minmax(0, 456fr);
  column-gap: 144px;
  align-items: start;
}
.wl-contact-heading h1 { margin: 0 0 26px; }
.wl-contact-right { padding-top: 96px; }
.wl-contact-line { color: #585858; margin: 0 0 .3em; font-weight: 400; }
.wl-contact-map { margin-top: 18px; }
.wl-contact-map iframe { display: block; width: 100%; height: 416px; border: 0; }

/* form */
.wl-contact-form { margin: 0; max-width: 656px; }
.wl-field-group { margin: 0 0 16px; }
.wl-group-label { display: block; font-size: 13px; color: #3f3f3f; margin: 0 0 6px; }
.wl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wl-field { display: block; margin: 0 0 16px; }
.wl-field-row .wl-field { margin: 0; }
.wl-label { display: block; font-size: 13px; color: #3f3f3f; margin: 0 0 6px; }
.wl-req { color: #9a9a9a; }
.wl-contact-form input[type="text"],
.wl-contact-form input[type="email"],
.wl-contact-form textarea {
  width: 100%; box-sizing: border-box;
  height: 40px; padding: 10px;
  border: 1px solid #a9a9a9; border-radius: 0;
  background: #fafafa; color: #3f3f3f;
  font-size: 14px; font-family: inherit; line-height: 1.3;
}
.wl-contact-form textarea { height: 100px; min-height: 100px; resize: vertical; }
.wl-contact-form input:focus, .wl-contact-form textarea:focus { outline: 2px solid #9fbb1e; outline-offset: -1px; }
.wl-field--error input, .wl-field--error textarea { border-color: #c0392b; }
.wl-field-error { display: block; color: #c0392b; font-size: 12px; margin-top: 4px; }
.wl-form-submit {
  display: inline-block; margin-top: 6px;
  background: #9fbb1e; color: #000; border: 0; border-radius: 5px;
  padding: 11px 20px; font-size: 13px; font-weight: 600; line-height: 1;
  cursor: pointer; transition: background .15s;
}
.wl-form-submit:hover { background: #8ba619; }
.wl-form-submit:disabled { opacity: .6; cursor: default; }
.wl-form-status { margin: 0 0 14px; font-size: 14px; }
.wl-form-status:empty { display: none; }
.wl-form-status--ok { color: #2e7d32; }
.wl-form-status--error { color: #c0392b; }
.wl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) {
  .wl-contact-section { padding: 140px 6vw 64px; }
  .wl-contact-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .wl-contact-right { padding-top: 0; }
}

/* ---------- BLOG SINGLE POST ---------- */
.wl-single-section { padding: 130px 24px 80px; }
.wl-single-inner { max-width: 820px; margin: 0 auto; }
.wl-single-title { margin: 0 0 .2em; }
.wl-single-date { color: #888; margin: 0 0 1.6em; }
.wl-single-thumb { margin: 0 0 2em; }
.wl-single-thumb img { width: 100%; height: auto; border-radius: 4px; display: block; }
.wl-single-body { color: #3f3f3f; font-size: 18px; line-height: 1.75; }
.wl-single-body p { margin: 0 0 1.2em; font-size: 18px; color: #3f3f3f; }
.wl-single-body h2, .wl-single-body h3, .wl-single-body h4 { margin: 1.6em 0 .5em; line-height: 1.2; }
.wl-single-body ul, .wl-single-body ol { margin: 0 0 1.2em 1.4em; }
.wl-single-body li { margin: 0 0 .5em; }
.wl-single-body img { max-width: 100%; height: auto; border-radius: 4px; }
.wl-single-body a { text-decoration: underline; }

/* ---------- HEADER nav (desktop spacing; hide mobile dupes) ---------- */
.header-nav-list { display: flex; gap: 26px; align-items: center; list-style: none; margin: 0; padding: 0; }
.header-nav-list > li { list-style: none; position: relative; }
.header-nav-list li { list-style: none; }
.header-nav-list a { text-decoration: none; }
/* top-level nav text size matches live (~16px, not the 12px Squarespace base) */
.header-display-desktop .header-nav-list > li > a,
.header-display-mobile .header-nav-list > li > a { font-size: 16px; }
/* "Book a meeting" is a solid lime button like live (the theme class renders it
   transparent/inverse; live fills it lime with white text) */
.header-actions-action--cta a.btn {
  background: rgb(159, 187, 30) !important; color: #fff !important;
  border: 0 !important; border-radius: 5px;
}
.header-actions-action--cta a.btn:hover { background: #8ba619 !important; }
/* sub-menu dropdown (Services / Problems We Solve / About Us) — appears on hover,
   matching the live site's clean white dropdown. Parent folders link to "#". */
.header-nav-list .menu-item-has-children > a[href="#"],
.header-nav-list .menu-item-has-children > a[href$="/#"] { cursor: default; }
.header-nav-list .sub-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  display: none; min-width: 220px;
  list-style: none; margin: 0; padding: 10px 0;
  background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); border-radius: 4px;
  z-index: 1000;
}
.header-nav-list .menu-item-has-children:hover > .sub-menu,
.header-nav-list .menu-item-has-children:focus-within > .sub-menu { display: block; }
.header-nav-list .sub-menu li { display: block; }
.header-nav-list .sub-menu a { display: block; padding: 9px 22px; white-space: nowrap; color: #2c2c2c; font-size: 16px; }
.header-nav-list .sub-menu a:hover { background: #f4f4f4; color: #000; }
/* keep the dropdown reachable across the small gap under the parent */
.header-nav-list .menu-item-has-children > a { padding-bottom: 6px; }
/* mobile overlay: show sub-items as an indented list when the menu is open */
.header-menu-nav-items .sub-menu { list-style: none; margin: 4px 0 8px; padding: 0 0 0 18px; }
@media (min-width: 768px) {
  .header-display-mobile, .header-burger, .header-menu { display: none !important; }
}
@media (max-width: 767px) {
  .header-display-desktop { display: none !important; }
}
/* overlay menu only when opened by offline.js */
.header-menu { display: none; }
.header--menu-open .header-menu { display: block; }

/* ---------- FOOTER (clean 3-column: Latest News | About Us | Follow Us) ---------- */
#footer-sections .section-background { background: rgb(96, 96, 96); }   /* grey, like live */
#footer-sections .content-wrapper { padding: 0; }
.wl-footer {
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 1fr) auto;
  column-gap: 80px;
  max-width: 1381px;
  padding: 64px 4vw;
  box-sizing: border-box;
  color: #fff;
  align-items: start;
}
.wl-footer-heading { color: #fff; margin: 0 0 20px; }
.wl-footer-col p { margin: 0 0 8px; color: #fff; }
.wl-footer-col a { color: #fff; }
.wl-footer-about a { text-decoration: underline; text-underline-offset: 3px; }
.wl-footer-social .sqs-svg-icon--list { display: flex; flex-wrap: wrap; gap: 16px; max-width: 116px; }
.wl-footer-social .sqs-svg-icon--wrapper { width: 32px; height: 32px; display: inline-block; }
.wl-footer-social .sqs-svg-icon--wrapper > div { width: 100%; height: 100%; }
.wl-footer-social .sqs-svg-icon--social { width: 100%; height: 100%; display: block; fill: #fff; }
.wl-footer-social .sqs-use--mask { display: none; }   /* show only the icon glyph */
.wl-footer-social .sqs-use--icon { fill: #fff; }
@media (max-width: 900px){ .wl-footer { grid-template-columns: 1fr; row-gap: 32px; } }

/* footer latest-news items — white on the grey footer (match live) */
.wl-foot-news-item { margin: 0 0 14px; display: block; }
.wl-foot-news-item a { display: block; font-weight: 600; line-height: 1.3; color: #fff; }
.wl-foot-news-item .wl-foot-date { display: block; opacity: .75; font-size: .82rem; margin-top: 2px; color: #fff; }

/* ---------- MOBILE MENU OVERLAY (burger) ----------
   offline.js toggles body.header--menu-open; this lays the overlay out:
   full-screen lime panel, centred white nav (incl. sub-menu items), CTA button.
   Fixes the migrated Squarespace overlay (its nav was hidden behind the bg
   layer and the container collapsed to 0 height). */
.header--menu-open { overflow: hidden; }
.header--menu-open .header-menu {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  overflow-y: auto !important;
  z-index: 9999 !important;
}
.header--menu-open .header-menu-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: rgb(159, 187, 30);
}
.header--menu-open .header-menu-nav {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 96px 28px 48px;
  box-sizing: border-box;
}
.header--menu-open .header-menu-nav-list,
.header--menu-open .header-menu-nav-folder,
.header--menu-open .header-menu-nav-folder-content,
.header--menu-open .header-menu-nav-wrapper { width: 100%; }
.header--menu-open .header-menu-nav-items {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.header--menu-open .header-menu-nav-items > li { margin: 0 0 20px; }
.header--menu-open .header-menu-nav-items > li > a,
.header--menu-open .header-menu-nav-item > a {
  display: inline-block;
  color: #fff !important;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
/* sub-menu items (Services / Problems We Solve / About Us children) shown inline */
.header--menu-open .header-menu-nav-items .sub-menu {
  display: block !important;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.header--menu-open .header-menu-nav-items .sub-menu > li { margin: 8px 0; }
.header--menu-open .header-menu-nav-items .sub-menu > li > a {
  display: inline-block;
  color: #fff !important;
  font-size: 17px;
  font-weight: 400;
  opacity: .92;
  text-decoration: none;
}
.header--menu-open .header-menu-cta {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 28px;
}
.header--menu-open .header-menu-cta a.btn {
  display: inline-block;
  background: #fff !important;
  color: rgb(159, 187, 30) !important;
  border: 0 !important;
  border-radius: 5px;
  padding: 13px 30px;
  font-weight: 600;
}
/* keep the burger tappable above the overlay */
.header--menu-open .header-burger { position: relative; z-index: 10000; }