/** 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-2940  {
  .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;
    }
    .core-menu.is-collapsed .core-menu-burger  {
      justify-content: unset;
    }
    /* 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;
    }
    /* ===== Stacked layout (tablet / collapsed widths) ===== */ /* Button on top spanning the full width, logo centred below it. */ .content-section-inner  {
      flex-direction: row;
      align-items: stretch;
      gap: 0.85rem;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    &.content-section p  {
      order: 2;
    }
    .core-menu.is-collapsed ~ .header-actions  {
      width: 100%;
      order: 1;
    }
    .header-actions  {
      order: 1;
      margin-left: 0;
      width: 100%;
    }
    .header-actions .btn  {
      flex: 1 1 auto;
      width: 100%;
    }
    /* Keep the burger accessible on tablet, tucked to the far right above the row */ .core-menu.is-collapsed  {
      order: 3;
      align-self: flex-end;
    }
    .site-logo  {
      order: 2;
      align-self: center;
    }
  }
  @media (max-width: 767px)  {
    .site-logo img  {
      width: 214px;
    }
    .header-actions  {
      gap: 0.75rem;
    }
    &.content-section.is-scrolled .site-logo img  {
      width: 188px;
    }
    /* ===== Mobile portrait layout (phones) ===== */ /* Stack the header as a vertical column: CTA on top (full width), logo below,
   centred and enlarged. The burger menu is hidden entirely. */ .content-section-inner  {
      flex-direction: row;
      align-items: stretch;
      gap: 0.85rem;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .core-menu.is-collapsed ~ .header-actions  {
      width: 100%;
      order: 1;
    }
    /* Hide the burger / collapsed nav on portrait phones */ /*.core-menu.is-collapsed { display: none; }*/ /* CTA row first, button spans the full screen width */ .header-actions  {
      order: 1;
      margin-left: 0;
      width: 100%;
    }
    .header-actions .btn  {
      flex: 1 1 auto;
      width: 100%;
    }
    /* Logo second, centred and enlarged */ .site-logo  {
      order: 2;
      align-self: center;
    }
    .site-logo img  {
      width: 300px;
    }
    &.content-section.is-scrolled .site-logo img  {
      width: 300px;
    }
    /* ===== Mobile landscape layout (phones turned sideways) ===== */ /* On landscape phones there's room for a single horizontal row again:
   logo left, then the Request A Quote button, then the burger on the far
   right. Overrides the portrait column stacking above. */ @media (orientation: landscape)  {
      .content-section-inner  {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
      }
      /* Show the collapsed burger again and pin it to the far right */ .core-menu.is-collapsed  {
        display: flex;
        order: 3;
        align-self: center;
      }
      /* CTA sits between the logo and burger */ .header-actions  {
        order: 2;
        width: auto;
        margin-left: auto;
      }
      .header-actions .btn  {
        flex: 0 0 auto;
        width: auto;
      }
      /* Logo first, left-aligned — enlarged for landscape */ .site-logo  {
        order: 1;
        align-self: center;
      }
      .site-logo img  {
        width: 280px;
      }
      &.content-section.is-scrolled .site-logo img  {
        width: 240px;
      }
    }
  }
  @media (max-width: 639px)  {
    .content-section-inner  {
      padding-top: 0.7rem;
      padding-bottom: 0.7rem;
      gap: 0.85rem;
    }
    .site-logo img  {
      width: 270px;
    }
    /* Full-width CTA sits comfortably; keep a readable button size */ .header-actions .btn  {
      padding: 0.85rem 1rem;
      font-size: var(--text-size-reg);
    }
    &.content-section.is-scrolled .content-section-inner  {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
    &.content-section.is-scrolled .site-logo img  {
      width: 270px;
    }
  }
}
.content-section-2941  {
  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: 100%;
    max-width: 300px;
  }
  .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);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .footer-credit  {
    color: var(--color-slate);
  }
  @media (max-width: 1023px)  {
    .footer-grid  {
      grid-template-columns: 1fr 1fr;
      gap: 2.5rem;
    }
    .mt  {
      margin-top:52px;
    }
    /* Align the brand intro paragraph's first line with the Contact heading,
   which is nudged 52px down by .mt. The logo image sits above the paragraph,
   so match the paragraph's top offset to the .mt value. */ .footer-brand p  {
      margin-top: 52px;
    }
  }
  @media (max-width: 639px)  {
    .footer-grid  {
      grid-template-columns: 1fr;
    }
    /* Stack the two legal lines on small phones so neither is cramped */ .footer-legal  {
      flex-direction: column;
      gap: 0.4rem;
      text-align: center;
      align-content: center;
    }
    .footer-legal *  {
      width: 100%;
    }
    .footer-credit  {
      text-align: left;
    }
    /* Put "All rights reserved." on its own line on portrait phones */ .footer-rights  {
      display: block;
    }
    .hidden-mobile  {
      display: none;
    }
  }
}
.content-section-2942  {
  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/office-wet-floor-sign.jpg') center 22% / cover no-repeat;
  &.content-section  {
    color: #FFFFFF;
  }
  .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/office-wet-floor-sign.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)  {
    /* On the narrowest phones the authored <br>s can create three tall lines
   from a long line, so let them reflow. Rendering each <br> as an inline
   space (rather than display:none) keeps a gap between the words that were
   on separate lines — otherwise "cleaning"+"that" and "manager"+"never"
   collapse into "cleaningthat" / "managernever". */ .hero-title br  {
      display: inline;
      font-size: 0;
    }
    .hero-title br::after  {
      content: " ";
      font-size: 1rem;
    }
  }
}
.content-section-2943  {
  .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-2944  {
  .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;
  }
  /* Every item is the same width, giving equal spacing between logos regardless
   of each logo's own aspect ratio. */ .logo-marquee-item  {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 66px;
    width: 200px;
    padding: 0;
  }
  /* The MG logo is wide, so at the shared height it fills its box and the fixed
   200px item width leaves big gaps either side. Give its item a tighter width
   so it sits with even spacing like the rest. */ .logo-marquee-item:has(.logo-wordmark[src*="mg.png"])  {
    width: 130px;
  }
  /* Every wordmark renders at the same fixed optical height; width scales to suit */ .logo-wordmark  {
    width: auto;
    height: 46px;
    max-width: 160px;
    object-fit: contain;
  }
  /* Sacha Drake logo reads small at the shared height — render it at double size */ .logo-wordmark[src*="SACHA_DRAKE_LOGO"]  {
    height: 92px;
    max-width: 320px;
  }
  /* Ray White logo reads small at the shared height — render it at double size */ .logo-wordmark[src*="ray-white-logo"]  {
    height: 92px;
    max-width: 320px;
  }
  @media (prefers-reduced-motion: reduce)  {
    .logo-marquee-track  {
      animation: none;
    }
  }
  @media (max-width: 639px)  {
    .logo-marquee-item  {
      min-height: 54px;
      width: 150px;
    }
    .logo-wordmark  {
      height: 38px;
      max-width: 120px;
    }
    .logo-wordmark[src*="SACHA_DRAKE_LOGO"]  {
      height: 76px;
      max-width: 240px;
    }
    .logo-wordmark[src*="ray-white-logo"]  {
      height: 76px;
      max-width: 240px;
    }
  }
}
.content-section-2945  {
  .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-2946  {
  .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: 767px)  {
    /* ===== Mobile portrait: image above the cards ===== */ /* Keep the eyebrow, heading and lede first, then the image, then the card grid.
   The intro elements are given an explicit early order; the figure sits just
   after them (order 1) so it lands right before the "Consult and treatment
   rooms" card, and the grid follows (order 2). */ .content-section-inner  {
      display: flex;
      flex-direction: column;
    }
    .section-eyebrow  {
      order: 0;
    }
    h2  {
      order: 0;
    }
    .section-lede  {
      order: 0;
    }
    .included-figure  {
      order: 1;
      margin: 2rem 0 0;
    }
    .included-grid  {
      order: 2;
      margin-top: 2rem;
    }
    /* ===== Mobile landscape: same treatment ===== */ /* On landscape phones apply the identical reorder so the image sits above the
   "Consult and treatment rooms" card rather than below the whole grid. The
   flex-column ordering above already targets .content-section-inner, so the
   same rules apply; this block just makes the intent explicit for landscape. */ @media (orientation: landscape)  {
      .content-section-inner  {
        display: flex;
        flex-direction: column;
      }
      .section-eyebrow  {
        order: 0;
      }
      h2  {
        order: 0;
      }
      .section-lede  {
        order: 0;
      }
      .included-figure  {
        order: 1;
        margin: 2rem 0 0;
      }
      .included-grid  {
        order: 2;
        margin-top: 2rem;
      }
    }
  }
  @media (max-width: 639px)  {
    .included-grid  {
      grid-template-columns: 1fr;
    }
    .included-figure img  {
      aspect-ratio: 16 / 9;
    }
  }
}
.content-section-2947  {
  .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-2948  {
  &.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;
    display: flex;
    flex-direction: column;
  }
  /* Reserve room for a two-line heading so every card's body copy starts on the
   same line, regardless of whether its heading wraps to one or two lines. */ .cred-card h3  {
    font-size: var(--text-size-2xl);
    min-height: calc(2 * var(--text-size-2xl) * 1.12);
  }
  .cred-card p  {
    margin-top: 0.8rem;
    font-size: var(--text-size-reg);
    color: rgba(255, 255, 255, 0.76);
  }
  @media (max-width: 767px)  {
    /* On single-column mobile the cards stack, so a reserved two-line heading
   just adds dead space — let headings size to their content there. */ .cred-card h3  {
      min-height: 0;
    }
  }
}
.content-section-2949  {
  .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);
  }
  /* Carousel controls (prev, dots, next) — hidden on desktop/tablet where all
   cards are visible; revealed only on portrait phones (see sm/xs columns). */ .slider-controls  {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 1.5rem;
  }
  .slider-controls .slider-dots  {
    margin-top: 0;
  }
  .slider-prev, .slider-next  {
    width: 2.4rem;
    height: 2.4rem;
    font-size: var(--text-size-2xl);
    line-height: 1;
    background: var(--color-clean-green);
    color: #FFFFFF;
  }
  .slider-prev:hover, .slider-next:hover  {
    background: var(--color-clean-green-dark);
  }
  .slider-dot.active  {
    background: var(--color-clean-green-dark);
  }
  @media (max-width: 1023px)  {
    /* Tablet: 2 of 3 cards show at once, so reveal the arrows/dots to reach the 3rd */ .slider-controls  {
      display: flex;
    }
  }
  @media (max-width: 767px)  {
    /* Portrait phones: one card at a time as a swipeable carousel with controls */ .slider-controls  {
      display: flex;
    }
  }
}
.content-section-2950  {
  .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-2951  {
  &.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);
  }
  /* Phone number link in the copy sits on the green background — keep it white */ .quote-copy a  {
    color: #FFFFFF;
    text-decoration: underline;
  }
  .quote-copy a:hover  {
    color: #FFFFFF;
    text-decoration: underline;
  }
  .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;
    }
    /* One field per row on portrait phones — collapse the half-width pair */ .quote-form .core-form-grid > .core-form-grid-half  {
      grid-column: 1 / -1;
    }
  }
  @media (max-width: 639px)  {
    .quote-form  {
      padding: 1.5rem;
    }
    .quote-copy p  {
      max-width: 100%;
    }
  }
}