/** Site Theme Tokens **/

:root {
    --core-site-font-body: 'Figtree', system-ui, sans-serif;
    --core-site-heading-size-h1: clamp(2.25rem, 4.4vw, var(--text-size-13xl));
    --core-site-heading-size-h2: clamp(1.75rem, 3vw, var(--text-size-9xl));
    --core-site-heading-size-h3: var(--text-size-2xl);
    --core-site-heading-line-height: 1.12;
    --core-site-heading-weight: var(--font-weight-bold);
    --core-site-heading-margin: 0;
    --core-site-color-text: var(--color-text);
    --core-site-color-link: var(--color-clean-green-darker);
    --core-accent: var(--color-brand);
    --core-radius: 4px;
}
body { font-family: var(--core-site-font-body); }
h1 { font-size: var(--core-site-heading-size-h1); }
h2 { font-size: var(--core-site-heading-size-h2); }
h3 { font-size: var(--core-site-heading-size-h3); }
h1, h2, h3, h4, h5, h6 { line-height: var(--core-site-heading-line-height); }
h1, h2, h3, h4, h5, h6 { font-weight: var(--core-site-heading-weight); }
h1, h2, h3, h4, h5, h6 { margin-block: var(--core-site-heading-margin); }
body { color: var(--core-site-color-text); }
a { color: var(--core-site-color-link); }


/** Site Custom Stylesheet (From File) **/ 



 /** Site Custom Styles (From DB) **/ 

/* ===== Site colour palette (primitives + semantic anchors) ===== */ :root  {
  /* Brand green — CTA and accent colour */ --color-clean-green: #2FAE4A;
  --color-clean-green-light: #5CC673;
  --color-clean-green-lighter: #A9E0B6;
  --color-clean-green-lightest: #E9F7ED;
  --color-clean-green-dark: #249039;
  --color-clean-green-darker: #1A6E2C;
  /* Charcoal — body text and the one dark section */ --color-charcoal: #222222;
  --color-charcoal-light: #3C3F3D;
  --color-charcoal-darker: #141514;
  /* Mist — soft neutral for alternating sections */ --color-mist: #F3F6F4;
  --color-mist-light: #FAFBFA;
  --color-mist-dark: #E4E9E5;
  /* Muted grey for supporting copy */ --color-slate: #62696A;
  /* Semantic anchors */ --color-brand: var(--color-clean-green);
  --color-text: var(--color-charcoal);
  --color-bg: #FFFFFF;
}
/* Background utilities — one per palette variant, selectable in the section editor */ .bg-clean-green  {
  background-color: var(--color-clean-green);
}
.bg-clean-green-light  {
  background-color: var(--color-clean-green-light);
}
.bg-clean-green-lighter  {
  background-color: var(--color-clean-green-lighter);
}
.bg-clean-green-lightest  {
  background-color: var(--color-clean-green-lightest);
}
.bg-clean-green-dark  {
  background-color: var(--color-clean-green-dark);
}
.bg-clean-green-darker  {
  background-color: var(--color-clean-green-darker);
}
.bg-charcoal  {
  background-color: var(--color-charcoal);
}
.bg-charcoal-light  {
  background-color: var(--color-charcoal-light);
}
.bg-charcoal-darker  {
  background-color: var(--color-charcoal-darker);
}
.bg-mist  {
  background-color: var(--color-mist);
}
.bg-mist-light  {
  background-color: var(--color-mist-light);
}
.bg-mist-dark  {
  background-color: var(--color-mist-dark);
}
.bg-white  {
  background-color: #FFFFFF;
}
/* Smooth scrolling for in-page anchor links (admin request) */ html  {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce)  {
  html  {
    scroll-behavior: auto;
  }
}
/* ===== Base typography (values with no theme-token knob) ===== */ body  {
  font-size: var(--text-size-lg);
  line-height: 1.6;
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3  {
  letter-spacing: -0.015em;
  text-wrap: balance;
}
p  {
  margin: 0;
  text-wrap: pretty;
}
a  {
  text-decoration: none;
}
a:hover  {
  color: var(--color-clean-green-dark);
  text-decoration: underline;
}
ul  {
  margin: 0;
  padding: 0;
  list-style: none;
}
img  {
  display: block;
  max-width: 100%;
  height: auto;
}
:focus-visible  {
  outline: 3px solid var(--color-clean-green-dark);
  outline-offset: 3px;
}
/* ===== Shared components (used across multiple sections) ===== */ .section-eyebrow  {
  font-size: var(--text-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-clean-green-darker);
  margin-bottom: 0.9rem;
}
.section-lede  {
  font-size: var(--text-size-xl);
  color: var(--color-slate);
  max-width: 60ch;
  margin-top: 1.1rem;
}
.btn  {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--text-size-reg);
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-primary  {
  background-color: var(--color-clean-green);
  color: #FFFFFF;
}
.btn-primary:hover  {
  background-color: var(--color-clean-green-dark);
  color: #FFFFFF;
  text-decoration: none;
}
.btn-lg  {
  font-size: var(--text-size-lg);
  padding: 1.15rem 2.1rem;
}
/* Continuous logo marquee (Client Logo Strip) — see section cs:2869.
   Defined here because @keyframes are silently dropped in section columns. */ @keyframes logo-marquee-scroll  {
  from  {
    transform: translate3d(0, 0, 0);
  }
  to  {
    transform: translate3d(-50%, 0, 0);
  }
}


 /** Content Section Styles **/ 

.content-section-2865  {
  .content-section-inner  {
    max-width: calc(100% * 0.95);
  }
  &.content-section  {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--color-mist-dark);
  }
  .content-section-inner  {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    transition: padding-top 0.2s ease, padding-bottom 0.2s ease;
  }
  .site-logo  {
    flex: 0 0 auto;
  }
  .site-logo img  {
    width: 340px;
    transition: width 0.2s ease;
  }
  /* Desktop: nav pushed right of the logo, like the source */ .core-menu:not(.is-collapsed)  {
    margin-left: auto;
  }
  .core-menu-link  {
    font-weight: var(--font-weight-semibold);
  }
  .header-actions  {
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }
  .header-phone  {
    font-weight: var(--font-weight-bold);
    font-size: var(--text-size-reg);
    color: var(--color-charcoal);
    white-space: nowrap;
  }
  .header-phone:hover  {
    color: var(--color-clean-green-dark);
    text-decoration: none;
  }
  /* Collapsed: hamburger to the far right edge, CTA on its inner side */ .core-menu.is-collapsed  {
    order: 3;
  }
  .core-menu.is-collapsed ~ .header-actions  {
    order: 2;
    margin-left: auto;
  }
  /* Shrunk state once the page is scrolled a little */ &.content-section.is-scrolled .content-section-inner  {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }
  &.content-section.is-scrolled .site-logo img  {
    width: 272px;
  }
  &.content-section.is-scrolled  {
    box-shadow: 0 2px 12px rgba(20, 21, 20, 0.08);
  }
  @media (max-width: 1279px)  {
    .content-section-inner  {
      gap: 1.25rem;
    }
    .core-menu  {
      --core-menu-gap: 1.25rem;
    }
    /* Below the 1370px collapse point the burger sits far right, CTA on its
   inner side — hide the standalone phone link to save room. */ .core-menu.is-collapsed ~ .header-actions .header-phone  {
      display: none;
    }
  }
  @media (max-width: 1023px)  {
    .site-logo img  {
      width: 272px;
    }
    .header-phone  {
      display: none;
    }
    /* Nav collapses at 1370px — ensure header row still fits cleanly here */ .content-section-inner  {
      gap: 1rem;
    }
    /* Shrunk logo already small here — nudge a touch smaller when scrolled */ &.content-section.is-scrolled .site-logo img  {
      width: 232px;
    }
  }
  @media (max-width: 767px)  {
    .site-logo img  {
      width: 214px;
    }
    .header-actions  {
      gap: 0.75rem;
    }
    &.content-section.is-scrolled .site-logo img  {
      width: 188px;
    }
  }
  @media (max-width: 639px)  {
    .content-section-inner  {
      padding-top: 0.7rem;
      padding-bottom: 0.7rem;
      gap: 0.75rem;
    }
    .site-logo img  {
      width: 172px;
    }
    /* Keep the CTA compact next to the burger on small phones */ .header-actions .btn  {
      padding: 0.7rem 1rem;
      font-size: var(--text-size-xs);
    }
    &.content-section.is-scrolled .content-section-inner  {
      padding-top: 0.45rem;
      padding-bottom: 0.45rem;
    }
    &.content-section.is-scrolled .site-logo img  {
      width: 150px;
    }
  }
}
.content-section-2866  {
  padding-top: 4rem;
  padding-bottom: 2rem;
  &.content-section  {
    border-top: 1px solid var(--color-mist-dark);
  }
  .footer-grid  {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 3rem;
  }
  .footer-brand img  {
    width: 224px;
  }
  .footer-brand p  {
    margin-top: 1.2rem;
    font-size: var(--text-size-sm);
    color: var(--color-slate);
    max-width: 34ch;
  }
  .footer-col h2  {
    font-size: var(--text-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-charcoal);
  }
  .footer-col ul  {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.1rem;
    font-size: var(--text-size-sm);
    color: var(--color-slate);
  }
  .footer-col a  {
    color: var(--color-slate);
  }
  .footer-col a:hover  {
    color: var(--color-clean-green-dark);
  }
  /* Spam-protected email reveal button, styled to match the footer links */ .core-eml-reveal  {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--color-slate);
    cursor: pointer;
    text-align: left;
  }
  .core-eml-reveal:hover  {
    color: var(--color-clean-green-dark);
    text-decoration: underline;
  }
  .footer-legal  {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-mist-dark);
    font-size: var(--text-size-xs);
    color: var(--color-slate);
  }
  @media (max-width: 1023px)  {
    .footer-grid  {
      grid-template-columns: 1fr 1fr;
      gap: 2.5rem;
    }
  }
  @media (max-width: 639px)  {
    .footer-grid  {
      grid-template-columns: 1fr;
    }
  }
}
.content-section-2867  {
  background: linear-gradient(100deg, rgba(20, 21, 20, 0.9) 0%, rgba(20, 21, 20, 0.78) 42%, rgba(20, 21, 20, 0.35) 100%), url('/site-assets/images/ward-clean-trolley.jpg') center 45% / cover no-repeat;
  &.content-section  {
    color: #FFFFFF;
  }
  .content-section-inner  {
    min-height: 619px;
  }
  .content-section-inner > *  {
    max-width: 46rem;
  }
  .content-section-inner > .hero-title  {
    max-width: 100%;
  }
  .hero-eyebrow  {
    font-size: var(--text-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-clean-green-light);
    margin-bottom: 1.4rem;
  }
  .hero-title  {
    color: #FFFFFF;
    /* Exactly three authored lines — give each one room so it never
       re-wraps, and stop the balancer moving words between them. */ text-wrap: nowrap;
    max-width: none;
    width: max-content;
    max-width: 100%;
    font-size: clamp(1.55rem, 3.6vw, 3.4rem);
  }
  .hero-lede  {
    font-size: var(--text-size-xl);
    color: rgba(255, 255, 255, 0.88);
    max-width: 40rem;
    margin-top: 1.5rem;
  }
  .hero-actions  {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
  }
  .hero-note  {
    font-size: var(--text-size-sm);
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.8);
    max-width: 22rem;
  }
  @media (max-width: 1023px)  {
    /* Below desktop, let the title wrap naturally so it can never push the
   page wider than the viewport (the authored <br>s still give line breaks). */ .hero-title  {
      text-wrap: balance;
      width: auto;
      max-width: 100%;
      font-size: clamp(1.4rem, 4.4vw, 2.6rem);
    }
  }
  @media (max-width: 767px)  {
    &.content-section  {
      background: linear-gradient(180deg, rgba(20, 21, 20, 0.86) 0%, rgba(20, 21, 20, 0.72) 100%), url('/site-assets/images/ward-clean-trolley.jpg') center / cover no-repeat;
    }
    .hero-title  {
      font-size: clamp(1.25rem, 5.6vw, 2rem);
    }
    .hero-lede  {
      font-size: var(--text-size-lg);
    }
    /* Full-width, centred CTA and note on phones */ .hero-actions  {
      flex-direction: column;
      align-items: stretch;
      gap: 1rem;
    }
    .hero-actions .btn  {
      width: 100%;
    }
    .hero-note  {
      max-width: 100%;
      text-align: center;
    }
  }
  @media (max-width: 639px)  {
    /* Guard against the authored <br>s creating three tall lines from a long
   line on the narrowest phones — allow them to reflow if needed. */ .hero-title br  {
      display: none;
    }
  }
}
.content-section-2868  {
  .trust-list  {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 2rem;
  }
  .trust-list li  {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-left: 1.1rem;
    border-left: 3px solid var(--color-clean-green);
  }
  .trust-list strong  {
    font-size: var(--text-size-xl);
    font-weight: var(--font-weight-bold);
  }
  .trust-list span  {
    font-size: var(--text-size-xs);
    color: var(--color-slate);
  }
  @media (max-width: 767px)  {
    .trust-list  {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}
.content-section-2869  {
  .logo-strip-label  {
    font-size: var(--text-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-slate);
    text-align: center;
  }
  /* Continuous marquee. The viewport clips; the track holds two identical sets
   of logos side by side and slides left by 50% — the moment set 2 reaches the
   start position it's pixel-identical to set 1, so the loop is seamless. */ .logo-marquee  {
    margin-top: 1.75rem;
    overflow: hidden;
    /* Soft fade at both edges so logos slide in/out rather than pop */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .logo-marquee-track  {
    display: flex;
    align-items: center;
    width: max-content;
    animation: logo-marquee-scroll 45s linear infinite;
    will-change: transform;
  }
  /* Pause on hover (and on keyboard focus within the strip) */ .logo-marquee:hover .logo-marquee-track, .logo-marquee:focus-within .logo-marquee-track  {
    animation-play-state: paused;
  }
  .logo-marquee-item  {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 66px;
    padding: 0 2.25rem;
  }
  /* Wordmarks read at a consistent optical height */ .logo-wordmark  {
    width: auto;
    height: auto;
    max-height: 60px;
    max-width: 200px;
  }
  .logo-mark  {
    width: auto;
    height: 60px;
  }
  @media (prefers-reduced-motion: reduce)  {
    .logo-marquee-track  {
      animation: none;
    }
  }
  @media (max-width: 639px)  {
    .logo-marquee-item  {
      min-height: 54px;
      padding: 0 1.5rem;
    }
    .logo-wordmark  {
      max-height: 48px;
      max-width: 150px;
    }
    .logo-mark  {
      height: 48px;
    }
  }
}
.content-section-2870  {
  .problem-grid  {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 4rem;
    align-items: start;
  }
  .problem-list  {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin-top: 2.5rem;
  }
  .problem-list li  {
    padding-top: 1.4rem;
    border-top: 1px solid var(--color-mist-dark);
  }
  .problem-list h3  {
    font-size: var(--text-size-2xl);
  }
  .problem-list p  {
    margin-top: 0.5rem;
    color: var(--color-slate);
    font-size: var(--text-size-reg);
    max-width: 46ch;
  }
  .problem-copy > .btn  {
    margin-top: 2.25rem;
  }
  .problem-figure  {
    margin: 0;
  }
  .problem-figure img  {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 6px;
  }
  @media (max-width: 1023px)  {
    .problem-grid  {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
    .problem-figure img  {
      aspect-ratio: 16 / 9;
    }
  }
  @media (max-width: 767px)  {
    /* CTA full width on phones */ .problem-copy > .btn  {
      display: flex;
      width: 100%;
    }
  }
}
.content-section-2871  {
  .included-grid  {
    gap: 1.75rem;
    margin-top: 3rem;
  }
  .included-card  {
    background-color: #FFFFFF;
    border-top: 4px solid var(--color-clean-green);
    padding: 1.9rem 1.75rem;
    border-radius: 6px;
  }
  .included-card h3  {
    font-size: var(--text-size-2xl);
  }
  .included-card ul  {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.2rem;
  }
  .included-card li  {
    position: relative;
    padding-left: 1.7rem;
    font-size: var(--text-size-reg);
    color: var(--color-slate);
  }
  .included-card li::before  {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 0.6rem;
    height: 0.35rem;
    border-left: 2px solid var(--color-clean-green);
    border-bottom: 2px solid var(--color-clean-green);
    transform: rotate(-45deg);
  }
  .included-figure  {
    margin: 3rem 0 0;
  }
  .included-figure img  {
    width: 100%;
    aspect-ratio: 24 / 7;
    object-fit: cover;
    object-position: center 55%;
    border-radius: 6px;
  }
  @media (max-width: 1023px)  {
    .included-grid  {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 639px)  {
    .included-grid  {
      grid-template-columns: 1fr;
    }
    .included-figure img  {
      aspect-ratio: 16 / 9;
    }
  }
}
.content-section-2872  {
  .why-grid  {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 4rem;
    align-items: start;
  }
  .why-figure  {
    margin: 0;
    position: sticky;
    top: 6.5rem;
  }
  .why-figure img  {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 6px;
  }
  .why-list  {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    margin-top: 2.5rem;
  }
  .why-list li  {
    padding-left: 1.5rem;
    border-left: 3px solid var(--color-clean-green-lighter);
  }
  .why-list h3  {
    font-size: var(--text-size-3xl);
  }
  .why-list p  {
    margin-top: 0.55rem;
    color: var(--color-slate);
    font-size: var(--text-size-reg);
    max-width: 56ch;
  }
  .why-copy .btn  {
    margin-top: 2.75rem;
  }
  @media (max-width: 1023px)  {
    .why-grid  {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
    .why-figure  {
      position: static;
    }
    .why-figure img  {
      aspect-ratio: 16 / 9;
    }
  }
  @media (max-width: 767px)  {
    /* CTA full width on phones */ .why-copy .btn  {
      display: flex;
      width: 100%;
    }
  }
}
.content-section-2873  {
  &.content-section  {
    color: #FFFFFF;
  }
  h2  {
    color: #FFFFFF;
    max-width: 40ch;
  }
  .section-eyebrow  {
    color: var(--color-clean-green-light);
  }
  .core-content-slider  {
    margin-top: 2.75rem;
  }
  .slider-track  {
    gap: 1.5rem;
    padding-bottom: 0.5rem;
  }
  .cred-card  {
    height: 100%;
    padding: 1.9rem 1.75rem;
    background-color: var(--color-charcoal-light);
    border-top: 4px solid var(--color-clean-green);
    border-radius: 6px;
  }
  .cred-card h3  {
    font-size: var(--text-size-2xl);
  }
  .cred-card p  {
    margin-top: 0.8rem;
    font-size: var(--text-size-reg);
    color: rgba(255, 255, 255, 0.76);
  }
}
.content-section-2874  {
  .core-content-slider  {
    margin-top: 2.75rem;
  }
  .slider-track  {
    gap: 1.75rem;
    padding-bottom: 0.5rem;
  }
  .review-card  {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.9rem 1.75rem;
    background-color: var(--color-mist);
    border-top: 4px solid var(--color-clean-green);
    border-radius: 6px;
  }
  .review-stars  {
    font-size: var(--text-size-lg);
    letter-spacing: 0.16em;
    color: var(--color-clean-green-dark);
  }
  .review-card blockquote  {
    margin: 0;
    font-size: var(--text-size-lg);
    line-height: 1.55;
  }
  .review-author  {
    margin-top: auto;
    padding-top: 0.5rem;
    font-weight: var(--font-weight-bold);
    font-size: var(--text-size-reg);
  }
  .review-author span  {
    display: block;
    font-weight: 400;
    font-size: var(--text-size-xs);
    color: var(--color-slate);
  }
}
.content-section-2875  {
  .content-section-inner  {
    max-width: calc(var(--base-content-section-max-width) * 0.75);
  }
  .core-accordion-01  {
    margin-top: 2.5rem;
  }
  .core-accordion-01 > * + *  {
    margin-top: 0;
  }
  .core-accordion-01 details  {
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--color-mist-dark);
    padding: 1.5rem 1.6rem;
  }
  .core-accordion-01 summary  {
    font-weight: var(--font-weight-semibold);
  }
  .core-accordion-01 p  {
    color: var(--color-slate);
    font-size: var(--text-size-reg);
    max-width: 68ch;
  }
}
.content-section-2876  {
  &.content-section  {
    color: #FFFFFF;
  }
  .quote-grid  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }
  h2  {
    color: #FFFFFF;
  }
  .quote-copy p  {
    margin-top: 1.2rem;
    font-size: var(--text-size-xl);
    color: rgba(255, 255, 255, 0.92);
    max-width: 44ch;
  }
  .quote-points  {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 2rem;
    font-weight: var(--font-weight-semibold);
  }
  .quote-points li  {
    position: relative;
    padding-left: 1.75rem;
  }
  .quote-points li::before  {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 0.65rem;
    height: 0.38rem;
    border-left: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    transform: rotate(-45deg);
  }
  .quote-form  {
    background-color: #FFFFFF;
    padding: 2.25rem;
    border-radius: 6px;
    color: var(--color-charcoal);
  }
  .quote-form label  {
    font-size: var(--text-size-sm);
    font-weight: var(--font-weight-semibold);
  }
  .quote-form input, .quote-form textarea  {
    border: 1px solid var(--color-mist-dark);
    border-radius: 4px;
    padding: 0.7rem 0.85rem;
    font-size: var(--text-size-reg);
  }
  .quote-form textarea  {
    min-height: 96px;
  }
  .quote-form button  {
    background-color: var(--color-clean-green);
    color: #FFFFFF;
    font-weight: var(--font-weight-bold);
    font-size: var(--text-size-lg);
    padding: 1rem 1.9rem;
    border: 0;
    border-radius: 4px;
  }
  .quote-form button:hover  {
    background-color: var(--color-clean-green-dark);
  }
  /* Post-submit success / fail messages (toggled by Basin's render mode) */ .form-msg  {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background-color: #FFFFFF;
    border-radius: 6px;
    color: var(--color-charcoal);
  }
  .form-msg-icon  {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 1.25rem;
    position: relative;
    background: var(--color-clean-green);
  }
  .form-msg-success .form-msg-icon::after  {
    content: "";
    position: absolute;
    left: 27px;
    top: 16px;
    width: 17px;
    height: 32px;
    border: solid #FFFFFF;
    border-width: 0 5px 5px 0;
    transform: rotate(45deg);
  }
  .form-msg-title  {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    margin: 0 0 0.5rem;
  }
  .form-msg-text  {
    font-size: 1.1rem;
    margin: 0;
  }
  .form-msg-fail  {
    border: 2px solid #c0392b;
    padding: 1.5rem;
  }
  .form-msg-fail .form-msg-title  {
    color: #c0392b;
    font-size: 1.25rem;
  }
  .form-msg-fail .form-msg-text  {
    font-size: var(--text-size-reg);
  }
  @media (max-width: 1023px)  {
    .quote-grid  {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
  }
  @media (max-width: 767px)  {
    /* Full-width submit and centred action row on phones */ .quote-form button  {
      width: 100%;
    }
    .core-form-actions  {
      flex-direction: column;
      align-items: stretch;
      text-align: center;
    }
  }
  @media (max-width: 639px)  {
    .quote-form  {
      padding: 1.5rem;
    }
    .quote-copy p  {
      max-width: 100%;
    }
  }
}