/* ==========================================================================
   3 Piglets Cleaning — Homepage stylesheet
   Palette sampled from 3pigletscleaning.com.au (brand primary #42205C)
   ========================================================================== */

:root {
  --purple-900: #2E1640;
  --purple-800: #3B1856;
  --purple-700: #42205C;
  --purple-600: #6B5180;
  --purple-500: #7A638D;
  --purple-400: #A090AD;
  --purple-200: #D6C9E0;
  --purple-100: #F7EEFF;
  --purple-050: #F4EDFF;

  --white: #FFFFFF;
  --ink: #282C35;
  --ink-muted: #6E727B;

  --color-brand: var(--purple-700);
  --color-brand-hover: var(--purple-800);
  --color-brand-active: var(--purple-900);
  --color-bg: var(--white);
  --color-bg-subtle: var(--purple-050);
  --color-bg-highlight: var(--purple-100);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-muted);
  --color-text-on-brand: var(--white);
  --color-heading: var(--purple-700);
  --color-border: #E9E1F0;
  --color-focus-ring: var(--purple-600);

  --container: 1240px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --shadow-btn: 0 6px 18px rgba(66, 32, 92, .22);
  --shadow-cta: 0 14px 30px rgba(66, 32, 92, .26);
  --shadow-card: 0 18px 40px rgba(66, 32, 92, .13);
}

/* ---------- Reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--color-brand); text-decoration: none; }
a:hover { color: var(--purple-600); }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

::selection { background: var(--purple-200); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

.eyebrow {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--purple-600);
}

.section-head { text-align: center; max-width: 640px; margin: 0 auto; }
.section-head h2 {
  margin-top: 14px;
  font-size: 46px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--color-heading);
}
.section-head p {
  margin-top: 18px;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 700;
  padding: 17px 30px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn svg { flex: 0 0 auto; }

.btn--primary {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  box-shadow: var(--shadow-cta);
}
.btn--primary:hover { background: var(--color-brand-hover); color: var(--color-text-on-brand); }
.btn--primary:active { background: var(--color-brand-active); }

.btn--outline {
  background: var(--white);
  color: var(--color-brand);
  border: 1.5px solid var(--purple-200);
}
.btn--outline:hover { border-color: var(--color-brand); color: var(--color-brand); }

.btn--light {
  background: var(--white);
  color: var(--color-brand);
  padding: 16px 28px;
  font-size: 15.5px;
}
.btn--light:hover { background: var(--color-bg-highlight); color: var(--color-brand); }

.btn--ghost-on-brand {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(214, 201, 224, .5);
  padding: 16px 28px;
  font-size: 15.5px;
}
.btn--ghost-on-brand:hover { border-color: var(--white); color: var(--white); }

.btn--sm {
  padding: 12px 22px;
  font-size: 14.5px;
  box-shadow: var(--shadow-btn);
}

/* ---------- Utility bar ---------- */

.utility-bar {
  background: var(--purple-900);
  color: var(--purple-200);
  font-size: 13px;
  letter-spacing: .02em;
}
.utility-bar .container {
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.utility-bar__left { display: flex; align-items: center; gap: 10px; }
.utility-bar__right { display: flex; align-items: center; gap: 22px; }
.utility-bar__email { color: var(--purple-100); font-weight: 600; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container {
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand__mark {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--color-bg-subtle);
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-size: 19px;
  font-weight: 800;
  color: var(--color-brand);
  letter-spacing: -.01em;
}
.brand__sub {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--purple-500);
  letter-spacing: .34em;
  margin-top: 4px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
}
.main-nav a {
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: background .15s ease, color .15s ease;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  background: var(--color-bg-highlight);
  color: var(--color-brand);
}

.header-actions { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.header-phone {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-brand);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--purple-200);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--color-brand);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background: var(--color-bg-subtle);
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0 0 0 38%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    var(--color-bg-subtle) 0%,
    var(--color-bg-subtle) 40%,
    rgba(244, 237, 255, .92) 50%,
    rgba(244, 237, 255, 0) 68%);
}
.hero__rule {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(var(--purple-700), var(--purple-500));
}
.hero .container { position: relative; padding-top: 96px; padding-bottom: 96px; width: 100%; }
.hero__inner { max-width: 600px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--purple-200);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-brand);
}
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple-600); }

.hero h1 {
  margin-top: 26px;
  font-size: 66px;
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
}
.hero h1 span { color: var(--color-brand); }
.hero__lede {
  margin-top: 24px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 470px;
  text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.social-proof { display: flex; align-items: center; gap: 14px; margin-top: 40px; }
.avatar-stack { display: flex; }
.avatar-stack img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--color-bg-subtle);
  background: var(--purple-200);
}
.avatar-stack img + img { margin-left: -12px; }
.social-proof__text { font-size: 14px; line-height: 1.45; color: var(--color-text); }
.social-proof__text span { color: var(--color-text-muted); }

/* ---------- Trust bar ---------- */

.trust-bar { background: var(--white); border-bottom: 1px solid var(--color-border); }
.trust-bar .container {
  padding-top: 34px;
  padding-bottom: 34px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.trust { display: flex; gap: 14px; align-items: flex-start; }
.icon-tile {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--color-bg-highlight);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust h4 { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.trust p { margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--color-text-muted); }

/* ---------- Services ---------- */

.services { padding: 104px 0; background: var(--white); }
.service-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.service-card {
  padding: 30px 26px 26px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.service-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
  border-color: var(--purple-200);
}
.service-card__icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-card h3 { margin-top: 20px; font-size: 18px; font-weight: 700; color: var(--ink); }
.service-card p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--color-text-muted); }

.link-arrow {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-brand);
  transition: gap .18s ease, color .18s ease;
}
.link-arrow:hover { gap: 12px; color: var(--purple-600); }

/* ---------- Why us / stats ---------- */

.why {
  background: var(--color-brand);
  color: var(--white);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}
.why__blob {
  position: absolute;
  right: -140px;
  top: -140px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: #4E2A6B;
}
.why .container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.5fr;
  gap: 64px;
  align-items: center;
}
.why .eyebrow { color: var(--purple-400); }
.why h2 {
  margin-top: 14px;
  font-size: 40px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--white);
}
.why p {
  margin-top: 18px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--purple-200);
  text-wrap: pretty;
}

.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat {
  padding: 0 22px;
  border-left: 1px solid rgba(214, 201, 224, .28);
  text-align: center;
}
.stat:last-child { border-right: 1px solid rgba(214, 201, 224, .28); }
.stat__value { font-size: 42px; font-weight: 800; letter-spacing: -.03em; color: var(--white); }
.stat__label { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--purple-200); }

/* ---------- How it works ---------- */

.how { background: var(--white); padding: 100px 0; }
.how .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.how__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 180px 220px;
  gap: 16px;
}
.how__gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; background: var(--color-bg-subtle); }
.how__gallery img:first-child { grid-column: 1 / span 2; }
.how h2 {
  margin-top: 14px;
  font-size: 42px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--color-heading);
}
.steps { margin-top: 34px; display: flex; flex-direction: column; gap: 26px; }
.step { display: flex; gap: 20px; align-items: flex-start; }
.step__num {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-brand);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
}
.step h3 { font-size: 19px; font-weight: 700; color: var(--ink); }
.step p { margin-top: 7px; font-size: 15.5px; line-height: 1.6; color: var(--color-text-muted); }

/* ---------- Testimonials ---------- */

.reviews { background: var(--color-bg-subtle); padding: 100px 0; }
.reviews .section-head h2 { font-size: 44px; }
.review-grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.review {
  padding: 28px 26px;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.review__stars { color: var(--color-brand); font-size: 16px; letter-spacing: 2px; }
.review blockquote { font-size: 15.5px; line-height: 1.65; color: var(--ink); }
.review figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.review figcaption img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--purple-200);
}
.review__who { font-size: 14px; line-height: 1.4; }
.review__who strong { font-weight: 700; color: var(--ink); }
.review__who span { color: var(--color-text-muted); }

/* ---------- Contact / CTA ---------- */

.contact { background: var(--white); padding: 96px 0; }
.contact__panel {
  max-width: var(--container);
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
.contact__cta { background: var(--color-brand); padding: 56px 52px; color: var(--white); }
.contact__cta h2 {
  font-size: 40px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--white);
}
.contact__cta p {
  margin-top: 16px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--purple-200);
  max-width: 400px;
  text-wrap: pretty;
}
.contact__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.contact__details {
  padding: 56px 52px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.detail { display: flex; gap: 16px; align-items: flex-start; }
.detail .icon-tile { background: var(--color-bg-subtle); }
.detail__label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--purple-600);
}
.detail__value { margin-top: 6px; font-size: 16.5px; font-weight: 700; color: var(--ink); }
.detail__value--big { font-size: 21px; font-weight: 800; color: var(--color-brand); }
.detail__note { margin-top: 4px; font-size: 14px; color: var(--color-text-muted); }

/* ---------- Footer ---------- */

.site-footer { background: var(--purple-900); color: var(--purple-200); padding: 44px 0; }
.site-footer .container {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.site-footer .brand__name { color: var(--white); font-size: 17px; }
.site-footer .brand__sub { color: var(--purple-400); font-size: 9px; }
.site-footer .brand__mark { width: 40px; height: 40px; border-radius: 9px; }
.copyright { font-size: 13.5px; color: var(--purple-400); }
.footer-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 13.5px;
  font-weight: 600;
}
.footer-links a { color: var(--purple-200); }
.footer-links a:hover { color: var(--white); }
.social {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(214, 201, 224, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple-200);
}
.social:hover { border-color: var(--white); color: var(--white); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1160px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-actions { margin-left: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .stat:last-child { border-right: none; }
  .service-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
  .container { padding-left: 24px; padding-right: 24px; }
  .utility-bar { display: none; }
  .hero { min-height: 0; }
  .hero__media { position: relative; inset: auto; height: 320px; }
  .hero { display: block; }
  .hero__scrim, .hero__rule { display: none; }
  .hero .container { padding-top: 56px; padding-bottom: 56px; }
  .hero h1 { font-size: 46px; }
  .hero__inner { max-width: none; }
  .trust-bar .container { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .why .container { grid-template-columns: 1fr; gap: 40px; }
  .how .container { grid-template-columns: 1fr; gap: 44px; }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .contact__panel { grid-template-columns: 1fr; }
  .section-head h2, .reviews .section-head h2 { font-size: 34px; }
  .how h2, .why h2, .contact__cta h2 { font-size: 32px; }
}

@media (max-width: 620px) {
  .trust-bar .container,
  .service-grid,
  .review-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 38px; }
  .contact__cta, .contact__details { padding: 36px 26px; }
  .footer-links { margin-left: 0; }
  .header-phone span { display: none; }
}

/* ==========================================================================
   Site-wide extensions — full-site build
   ========================================================================== */


/* ==========================================================================
   Image sizing — REQUIRED alongside the real width/height attributes
   ==========================================================================
   Every <img> carries its true intrinsic width and height so the browser can
   reserve the right box (good for CLS). But the HTML `height` attribute is
   also a presentational hint: where CSS sets only `width`, that hint applies
   as a fixed pixel height and stretches the picture vertically.

   `height: auto` here lets the width/height pair act purely as an aspect
   ratio. This is an element selector, so every class rule that genuinely
   needs a fixed height (.card__media img, .svc__media img, .ba__shot img,
   .hero__media img, .how__gallery img, .author-box img and the avatars) still
   wins on specificity. */
img { height: auto; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--color-brand); color: var(--white);
  padding: 12px 20px; border-radius: 0 0 var(--radius-md) 0; font-weight: 700;
}
.skip-link:focus { left: 0; color: var(--white); }

/* ---------- Mobile navigation ---------- */
.nav-toggle[aria-expanded="true"] { background: var(--color-bg-highlight); }
.mobile-nav {
  position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw);
  z-index: 120; background: var(--white);
  border-left: 1px solid var(--color-border);
  box-shadow: -20px 0 60px rgba(46, 22, 64, .18);
  overflow-y: auto; padding: 22px 22px 40px;
  transform: translateX(100%); transition: transform .26s ease;
}
.mobile-nav.is-open { transform: translateX(0); }
body.nav-open { overflow: hidden; }
.nav-scrim {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(46, 22, 64, .45); opacity: 0; transition: opacity .26s ease;
}
.nav-scrim.is-open { opacity: 1; }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mobile-nav__close {
  background: none; border: 1px solid var(--purple-200); color: var(--color-brand);
  border-radius: var(--radius-sm); padding: 8px 11px; cursor: pointer; line-height: 0;
}
.mobile-nav a { display: block; padding: 12px 12px; border-radius: var(--radius-sm); font-weight: 600; color: var(--color-text); }
.mobile-nav a:hover, .mobile-nav a[aria-current="page"] { background: var(--color-bg-highlight); color: var(--color-brand); }
.mobile-nav__group > span {
  display: block; padding: 16px 12px 6px; font-size: 12px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--purple-600);
}
.mobile-nav__group a { padding-left: 24px; font-weight: 500; font-size: 15px; }
.mobile-nav__cta { margin-top: 20px; display: grid; gap: 10px; }
.mobile-nav__cta .btn { justify-content: center; }

/* ---------- Dropdown (desktop) ---------- */
.has-sub { position: relative; }
.has-sub > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border: none; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--color-text);
  border-radius: var(--radius-sm);
}
.has-sub > button:hover, .has-sub[data-open="true"] > button { background: var(--color-bg-highlight); color: var(--color-brand); }
.has-sub > button svg { transition: transform .18s ease; }
.has-sub[data-open="true"] > button svg { transform: rotate(180deg); }
.sub-menu {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 292px;
  background: var(--white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 8px; display: none; z-index: 60;
}
.has-sub[data-open="true"] .sub-menu { display: block; }
.sub-menu a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 600; color: var(--color-text); }
.sub-menu a:hover { background: var(--color-bg-highlight); color: var(--color-brand); }

/* ---------- Breadcrumbs ---------- */
.breadcrumb { background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); }
.breadcrumb .container { padding-top: 14px; padding-bottom: 14px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: flex; align-items: center; gap: 8px; color: var(--color-text-muted); }
.breadcrumb li + li::before { content: "/"; color: var(--purple-400); }
.breadcrumb a { color: var(--purple-600); font-weight: 600; }
.breadcrumb a:hover { color: var(--color-brand); }
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: 600; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: var(--color-brand); color: var(--white); padding: 72px 0 78px; position: relative; overflow: hidden; }
.page-hero::after {
  content: ""; position: absolute; right: -160px; top: -180px;
  width: 460px; height: 460px; border-radius: 50%; background: #4E2A6B; z-index: 0;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .eyebrow { color: var(--purple-400); }
.page-hero h1 {
  margin-top: 14px; font-size: 50px; line-height: 1.08; font-weight: 800;
  letter-spacing: -.03em; color: var(--white); max-width: 900px; text-wrap: balance;
}
.page-hero__lede { margin-top: 20px; font-size: 18.5px; line-height: 1.62; color: var(--purple-200); max-width: 720px; text-wrap: pretty; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.page-hero__facts { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 36px; }
.page-hero__fact { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--purple-200); }
.page-hero__fact strong { color: var(--white); font-weight: 700; }

/* ---------- Prose / article body ---------- */
.prose { font-size: 17px; line-height: 1.72; color: var(--color-text); }
.prose > * + * { margin-top: 22px; }
.prose h2 {
  margin-top: 52px; font-size: 31px; line-height: 1.2; font-weight: 800;
  letter-spacing: -.02em; color: var(--color-heading); scroll-margin-top: 92px;
}
.prose h3 { margin-top: 36px; font-size: 21px; font-weight: 700; color: var(--ink); scroll-margin-top: 92px; }
.prose h4 { margin-top: 28px; font-size: 17.5px; font-weight: 700; color: var(--ink); }
.prose p { text-wrap: pretty; }
.prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: var(--purple-200); }
.prose a:hover { text-decoration-color: var(--color-brand); }
.prose ul, .prose ol { padding-left: 24px; list-style: revert; }
.prose ul li, .prose ol li { margin-top: 10px; padding-left: 4px; }
.prose ul li::marker { color: var(--color-brand); }
.prose ol li::marker { color: var(--color-brand); font-weight: 700; }
.prose strong { font-weight: 700; color: var(--ink); }
.prose img { border-radius: 14px; margin-top: 28px; }
.prose figure { margin-top: 32px; }
.prose figcaption { margin-top: 10px; font-size: 14px; color: var(--color-text-muted); text-align: center; }
.prose blockquote {
  margin-top: 30px; padding: 22px 26px; border-left: 4px solid var(--color-brand);
  background: var(--color-bg-subtle); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 17.5px; line-height: 1.65; color: var(--ink);
}
.prose hr { margin-top: 44px; border: none; border-top: 1px solid var(--color-border); }

/* ---------- Tables ---------- */
.table-wrap { margin-top: 30px; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.table-wrap table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
.table-wrap caption {
  caption-side: top; text-align: left; padding: 16px 20px 14px;
  font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--purple-600); background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
}
.table-wrap th, .table-wrap td { padding: 14px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.table-wrap thead th { background: var(--color-bg-highlight); color: var(--color-brand); font-weight: 700; font-size: 14px; }
.table-wrap tbody tr:last-child td, .table-wrap tbody tr:last-child th { border-bottom: none; }
.table-wrap tbody tr:nth-child(even) { background: #FBF8FE; }
.table-wrap tbody th { font-weight: 700; color: var(--ink); }
.table-wrap td small { display: block; margin-top: 4px; font-size: 13px; color: var(--color-text-muted); }
.tick { color: #2F7D4F; font-weight: 700; }
.cross { color: #B23B4A; font-weight: 700; }

/* ---------- FAQ accordion ---------- */
.faq-list { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; }
.faq-item[open] { border-color: var(--purple-200); box-shadow: var(--shadow-card); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; position: relative;
  font-size: 17px; font-weight: 700; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 24px; top: 50%; width: 11px; height: 11px;
  margin-top: -6px; border-right: 2.4px solid var(--color-brand); border-bottom: 2.4px solid var(--color-brand);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item summary:hover { background: var(--color-bg-subtle); }
.faq-item__body { padding: 0 24px 22px; font-size: 16px; line-height: 1.7; color: var(--color-text-muted); }
.faq-item__body > * + * { margin-top: 14px; }
.faq-item__body a { font-weight: 600; }

/* ---------- Callouts ---------- */
.callout {
  margin-top: 30px; padding: 24px 26px; border-radius: var(--radius-lg);
  background: var(--color-bg-subtle); border: 1px solid var(--color-border);
  display: flex; gap: 18px; align-items: flex-start;
}
.callout__icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--white); display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); }
.callout h3 { font-size: 17px; font-weight: 700; color: var(--ink); }
.callout p { margin-top: 8px; font-size: 15.5px; line-height: 1.65; color: var(--color-text-muted); }
.callout--brand { background: var(--color-bg-highlight); border-color: var(--purple-200); }

/* ---------- Key-fact strip ---------- */
.keyfacts { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.keyfact { padding: 20px 22px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--white); }
.keyfact__value { font-size: 27px; font-weight: 800; letter-spacing: -.02em; color: var(--color-brand); }
.keyfact__label { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--color-text-muted); }

/* ---------- Two-column layout with sidebar ---------- */
.layout { padding: 66px 0 88px; background: var(--white); }
.layout .container { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 56px; align-items: start; }
.layout--wide .container { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.sidebar { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 22px; }
.side-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; background: var(--white); }
.side-card--brand { background: var(--color-brand); border-color: var(--color-brand); color: var(--white); }
.side-card--brand h3 { color: var(--white); }
.side-card--brand p { color: var(--purple-200); }
.side-card h3 { font-size: 17px; font-weight: 800; color: var(--ink); }
.side-card p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--color-text-muted); }
.side-card .btn { margin-top: 18px; width: 100%; justify-content: center; }
.side-links { margin-top: 14px; display: flex; flex-direction: column; }
.side-links a { padding: 9px 0; font-size: 14.5px; font-weight: 600; border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.side-links a:last-child { border-bottom: none; }
.side-links a:hover { color: var(--color-brand); }
.side-phone { display: block; margin-top: 14px; font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: var(--white); }
.side-phone:hover { color: var(--white); }

/* ---------- Table of contents ---------- */
.toc { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px 24px; background: var(--color-bg-subtle); }
.toc__title { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--purple-600); }
.toc ol { margin-top: 12px; padding-left: 20px; list-style: decimal; font-size: 14.5px; }
.toc li { margin-top: 8px; }
.toc a { color: var(--color-text); font-weight: 600; }
.toc a:hover { color: var(--color-brand); }

/* ---------- Suburb / link grids ---------- */
.chip-grid { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border-radius: 999px; border: 1px solid var(--purple-200); background: var(--white);
  font-size: 14px; font-weight: 600; color: var(--color-brand);
}
.chip:hover { background: var(--color-bg-highlight); color: var(--color-brand); border-color: var(--color-brand); }

.card-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--white); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); border-color: var(--purple-200); }
.card__media { aspect-ratio: 16 / 10; background: var(--color-bg-subtle); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.card__tag { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--purple-600); }
.card__body h3 { margin-top: 10px; font-size: 18.5px; line-height: 1.35; font-weight: 700; color: var(--ink); }
.card__body h3 a { color: inherit; }
.card__body h3 a:hover { color: var(--color-brand); }
.card__body p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--color-text-muted); }
.card__meta { margin-top: auto; padding-top: 16px; font-size: 13px; color: var(--color-text-muted); }

/* ---------- Steps (numbered process) ---------- */
.process { margin-top: 36px; display: grid; gap: 20px; }
.process__item { display: flex; gap: 20px; padding: 22px 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--white); }
.process__num { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: var(--color-brand); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.process__item h3 { font-size: 17.5px; font-weight: 700; color: var(--ink); }
.process__item p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--color-text-muted); }

/* ---------- Checklist ---------- */
.checklist { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; list-style: none; padding: 0; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; line-height: 1.55; color: var(--color-text); margin-top: 0; padding-left: 0; }
.checklist svg { flex: 0 0 auto; margin-top: 3px; }

/* ---------- Contact form ---------- */
.form-card { border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 34px; background: var(--white); box-shadow: var(--shadow-card); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; }
.field label { font-size: 14px; font-weight: 700; color: var(--ink); }
.field label span { color: #B23B4A; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15.5px; padding: 13px 15px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--white); color: var(--ink); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(107, 81, 128, .16);
}
.field textarea { min-height: 130px; resize: vertical; }
.field__hint { font-size: 13px; color: var(--color-text-muted); }
.form-card .btn { margin-top: 24px; width: 100%; justify-content: center; }
.form-note { margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--color-text-muted); text-align: center; }
.form-status { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-md); font-size: 14.5px; line-height: 1.55; }
.form-status--ok { background: #EAF6EF; color: #1F5B39; border: 1px solid #BFE0CC; }
.form-status--err { background: #FCEDEF; color: #8E2A38; border: 1px solid #F0CBD1; }

/* ---------- Pagination ---------- */
.pagination { margin-top: 52px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pagination a, .pagination span {
  min-width: 42px; height: 42px; padding: 0 14px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); display: inline-flex; align-items: center; justify-content: center;
  font-size: 14.5px; font-weight: 700; color: var(--color-text);
}
.pagination a:hover { border-color: var(--color-brand); color: var(--color-brand); }
.pagination [aria-current="page"] { background: var(--color-brand); border-color: var(--color-brand); color: var(--white); }

/* ---------- Post meta ---------- */
.post-head { max-width: 900px; }
.post-head h1 { margin-top: 16px; font-size: 46px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: var(--white); text-wrap: balance; }
.post-meta { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 14px; color: var(--purple-200); }
.post-meta__item { display: flex; align-items: center; gap: 8px; }
.post-figure { margin: 0 0 40px; }
.post-figure img { width: 100%; border-radius: var(--radius-xl); }

/* ---------- Author box ---------- */
.author-box { margin-top: 56px; padding: 26px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-subtle); display: flex; gap: 20px; align-items: flex-start; }
.author-box img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--purple-200); }
.author-box h3 { font-size: 16.5px; font-weight: 800; color: var(--ink); }
.author-box p { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: var(--color-text-muted); }

/* ---------- Inline SVG figure ---------- */
.svg-figure { margin: 34px 0 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 26px 24px 20px; background: var(--white); }
.svg-figure__title { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--purple-600); }
.svg-figure svg { display: block; width: 100%; height: auto; margin-top: 18px; }
.svg-figure figcaption { margin-top: 14px; font-size: 13.5px; line-height: 1.55; color: var(--color-text-muted); }

/* ---------- Related ---------- */
.related { background: var(--color-bg-subtle); padding: 82px 0; border-top: 1px solid var(--color-border); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--color-brand); color: var(--white); padding: 72px 0; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; left: -140px; bottom: -190px; width: 420px; height: 420px; border-radius: 50%; background: #4E2A6B; }
.cta-band .container { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; }
.cta-band h2 { font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; color: var(--white); max-width: 620px; text-wrap: balance; }
.cta-band p { margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--purple-200); max-width: 560px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Section helpers ---------- */
.section { padding: 88px 0; }
.section--subtle { background: var(--color-bg-subtle); }
.section--tight { padding: 60px 0; }
.section-head--left { text-align: left; margin: 0; max-width: 720px; }

/* ---------- Responsive additions ---------- */
@media (max-width: 1160px) {
  .layout .container { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .sidebar > * { flex: 1 1 300px; }
  .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .page-hero { padding: 54px 0 60px; }
  .page-hero h1 { font-size: 36px; }
  .post-head h1 { font-size: 33px; }
  .card-grid, .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose h2 { font-size: 26px; margin-top: 42px; }
  .checklist { grid-template-columns: minmax(0, 1fr); }
  .cta-band h2 { font-size: 28px; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .card-grid, .card-grid--2, .card-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .page-hero h1 { font-size: 30px; }
  .post-head h1 { font-size: 27px; }
  .prose { font-size: 16.5px; }
  .prose h2 { font-size: 23px; }
  .form-card { padding: 24px 20px; }
  .callout { flex-direction: column; gap: 14px; }
  .layout { padding: 44px 0 62px; }
  .section { padding: 60px 0; }
  .keyfacts { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .utility-bar, .site-header, .mobile-nav, .nav-scrim, .cta-band, .site-footer, .sidebar, .skip-link { display: none !important; }
  .layout .container { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Fixes and additions — round 2
   ========================================================================== */

/* ---------- Sidebar brand card contrast -------------------------------
   .side-card h3/p were declared AFTER .side-card--brand h3/p with equal
   specificity, so the dark text won on the dark purple card and the copy
   was unreadable. Raised specificity so the brand card wins. */
.side-card.side-card--brand h3,
.side-card.side-card--brand h4 { color: var(--white); }
.side-card.side-card--brand p { color: #E8DEF2; }
.side-card.side-card--brand .side-links a { color: #E8DEF2; border-bottom-color: rgba(214,201,224,.25); }
.side-card.side-card--brand .side-links a:hover { color: var(--white); }

/* ---------- Dropdown: keep the hover path continuous -------------------
   The gap between the button and the panel was enough for mouseleave to
   fire while the pointer travelled to the menu, so it snapped shut. A
   transparent bridge spans the gap and keeps the hover state alive. */
.has-sub::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 16px;
  display: none;
}
.has-sub:hover::after,
.has-sub[data-open="true"]::after { display: block; }
.sub-menu { top: calc(100% + 12px); padding: 10px; }
.sub-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -14px;
  height: 14px;
}
.has-sub:hover .sub-menu { display: block; }

/* ---------- Service cards with imagery ---------- */
.svc-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.svc {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--white); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.svc:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); border-color: var(--purple-200); }
.svc__media { aspect-ratio: 4 / 3; background: var(--color-bg-subtle); position: relative; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; }
.svc__icon {
  position: absolute; left: 18px; bottom: -22px;
  width: 46px; height: 46px; border-radius: 12px; background: var(--white);
  border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(66,32,92,.16);
}
.svc__body { padding: 34px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.svc__body h3 { font-size: 18.5px; font-weight: 700; color: var(--ink); }
.svc__body p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--color-text-muted); }
.svc__body .link-arrow { margin-top: auto; padding-top: 16px; }

/* ---------- Before / after comparison ---------- */
.ba-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ba {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--white); overflow: hidden;
}
.ba__pair { display: grid; grid-template-columns: 1fr 1fr; }
.ba__shot { position: relative; aspect-ratio: 4 / 3; background: var(--color-bg-subtle); }
.ba__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba__shot + .ba__shot { border-left: 2px solid var(--white); }
.ba__tag {
  position: absolute; left: 10px; top: 10px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.ba__tag--before { background: rgba(40,44,53,.82); color: #fff; }
.ba__tag--after { background: var(--color-brand); color: #fff; }
.ba__label { padding: 16px 20px 18px; }
.ba__label h4 { font-size: 16px; font-weight: 700; color: var(--ink); }
.ba__label p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--color-text-muted); }

/* ---------- Stat band ---------- */
.statband { background: var(--color-bg-subtle); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.statband .container { padding-top: 44px; padding-bottom: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; text-align: center; }
.statband__value { font-size: 44px; font-weight: 800; letter-spacing: -.03em; color: var(--color-brand); line-height: 1; }
.statband__label { margin-top: 10px; font-size: 14.5px; font-weight: 600; color: var(--color-text-muted); }

/* ---------- Split feature (text + image) ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.split--flip { grid-template-columns: 1fr 1.05fr; }
.split__media img { width: 100%; border-radius: var(--radius-xl); display: block; }
.split h2 { margin-top: 14px; font-size: 38px; line-height: 1.14; font-weight: 800; letter-spacing: -.025em; color: var(--color-heading); }
.split p { margin-top: 18px; font-size: 16.5px; line-height: 1.7; color: var(--color-text-muted); text-wrap: pretty; }
.split .checklist { grid-template-columns: minmax(0, 1fr); }

/* ---------- Why-choose feature row ---------- */
.feature-row { margin-top: 46px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.feature {
  padding: 28px 26px; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); background: var(--white);
}
.feature__icon {
  width: 48px; height: 48px; border-radius: 12px; background: var(--color-bg-highlight);
  display: flex; align-items: center; justify-content: center;
}
.feature h3 { margin-top: 18px; font-size: 17.5px; font-weight: 700; color: var(--ink); }
.feature p { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--color-text-muted); }

/* ---------- Story cards ---------- */
.story-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

/* ---------- Policy cards ---------- */
.policy-grid { margin-top: 38px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.policy {
  padding: 26px 26px 28px; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); background: var(--white);
}
.policy__tag { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--purple-600); }
.policy h3 { margin-top: 10px; font-size: 18px; font-weight: 700; color: var(--ink); }
.policy p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--color-text-muted); }
.fineprint {
  margin-top: 30px; padding: 20px 24px; border-radius: var(--radius-md);
  background: var(--color-bg-subtle); border: 1px solid var(--color-border);
  font-size: 13.5px; line-height: 1.65; color: var(--color-text-muted);
}

/* ---------- Location page imagery ---------- */
.loc-figure { margin: 0 0 34px; }
.loc-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  object-position: center 35%; border-radius: var(--radius-xl); display: block; }
.loc-figure figcaption { margin-top: 12px; font-size: 13.5px; color: var(--color-text-muted); }
.prose .inline-figure { margin: 34px 0 0; }
.prose .inline-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  object-position: center 35%; border-radius: var(--radius-lg); margin: 0; display: block; }
.prose .inline-figure figcaption { margin-top: 10px; font-size: 13.5px; color: var(--color-text-muted); text-align: left; }

/* ---------- External form callout ---------- */
.formcard {
  border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  padding: 40px 38px; background: var(--color-bg-subtle); text-align: center;
}
.formcard h2 { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; color: var(--color-heading); margin-top: 0; }
.formcard p { margin-top: 14px; font-size: 16.5px; line-height: 1.65; color: var(--color-text-muted); max-width: 560px; margin-left: auto; margin-right: auto; }
.formcard .btn { margin-top: 26px; }
.formcard__alt { margin-top: 18px; font-size: 14.5px; color: var(--color-text-muted); }

@media (max-width: 1160px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ba-grid, .story-grid, .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .split, .split--flip { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .split h2 { font-size: 30px; }
  .statband .container { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .statband__value { font-size: 32px; }
  .policy-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .svc-grid, .ba-grid, .story-grid, .feature-row { grid-template-columns: minmax(0, 1fr); }
  .statband .container { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .formcard { padding: 28px 22px; }
  .formcard h2 { font-size: 24px; }
}

/* ==========================================================================
   Round 3 — migrated post components, and a tighter typographic scale
   ========================================================================== */

/* ---------- Typography: headings were running large --------------------
   The article scale was set for a wide desktop hero and read as oversized
   in body copy. Brought down roughly one step throughout. */
.prose { font-size: 16.5px; line-height: 1.72; }
.prose > * + * { margin-top: 20px; }
.prose h2 { margin-top: 44px; font-size: 25px; line-height: 1.25; letter-spacing: -.015em; }
.prose h3 { margin-top: 30px; font-size: 19px; }
.prose h4 { margin-top: 24px; font-size: 16.5px; }
.prose blockquote { font-size: 16.5px; }
.prose img { margin-top: 24px; }

.page-hero h1 { font-size: 42px; }
.page-hero__lede { font-size: 17.5px; }
.post-head h1 { font-size: 36px; line-height: 1.15; }

.section-head h2, .reviews .section-head h2 { font-size: 36px; }
.section-head p { font-size: 17px; }
.split h2 { font-size: 32px; }
.how h2, .why h2, .contact__cta h2, .cta-band h2 { font-size: 31px; }
.formcard h2 { font-size: 26px; }

.table-wrap table { font-size: 14.5px; }
.table-wrap caption { font-size: 12.5px; }
.faq-item summary { font-size: 16px; }
.faq-item__body { font-size: 15.5px; }
.related .section-head h2 { font-size: 27px; }

@media (max-width: 980px) {
  .page-hero h1 { font-size: 32px; }
  .post-head h1 { font-size: 28px; }
  .section-head h2, .reviews .section-head h2 { font-size: 28px; }
  .prose h2 { font-size: 22px; margin-top: 36px; }
  .prose h3 { font-size: 18px; }
  .split h2 { font-size: 26px; }
  .how h2, .why h2, .cta-band h2 { font-size: 25px; }
}
@media (max-width: 620px) {
  .prose { font-size: 16px; }
  .prose h2 { font-size: 20.5px; }
  .prose h3 { font-size: 17.5px; }
  .page-hero h1 { font-size: 27px; }
  .post-head h1 { font-size: 24px; }
  .section-head h2, .reviews .section-head h2 { font-size: 24px; }
}

/* ==========================================================================
   Components from the five posts authored as full HTML documents.
   Namespaced `wp-` so they never collide with the site's own .callout,
   .checklist, .faq-item or .author-box.
   ========================================================================== */

/* ---------- TL;DR summary ---------- */
.prose .wp-tldr {
  margin-top: 28px;
  padding: 20px 24px;
  background: var(--color-bg-highlight);
  border: 1px solid var(--purple-200);
  border-left: 4px solid var(--color-brand);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.prose .wp-tldr > strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-brand);
}
.prose .wp-tldr ul { margin-top: 12px; padding-left: 20px; }
.prose .wp-tldr li { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--ink); }

/* ---------- Callouts ---------- */
.prose .wp-callout {
  margin-top: 26px;
  padding: 18px 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--purple-500);
  background: var(--color-bg-subtle);
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--color-text-muted);
}
.prose .wp-callout strong { display: block; margin-bottom: 6px; color: var(--ink); }
.prose .wp-callout--info { border-left-color: var(--color-brand); background: var(--color-bg-highlight); }
.prose .wp-callout--success { border-left-color: #2F7D4F; background: #F1F8F3; }
.prose .wp-callout--success strong { color: #1F5B39; }
.prose .wp-callout--warning { border-left-color: #B7791F; background: #FDF8EE; }
.prose .wp-callout--warning strong { color: #8A5A11; }
.prose .wp-callout--danger { border-left-color: #B23B4A; background: #FCF2F3; }
.prose .wp-callout--danger strong { color: #8E2A38; }

/* ---------- Step badge in headings ---------- */
.prose .wp-step {
  display: inline-block;
  margin-right: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--white);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---------- Inline SVG chart ---------- */
.prose .wp-chart {
  margin-top: 30px;
  padding: 22px 22px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow-x: auto;
}
.prose .wp-chart__title {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--purple-600);
  margin-bottom: 14px;
}
.prose .wp-chart svg { display: block; width: 100%; height: auto; min-width: 520px; }
.prose .wp-chart__note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ---------- Tick checklist ---------- */
.prose ul.wp-checklist { margin-top: 22px; padding-left: 0; list-style: none; }
.prose ul.wp-checklist li {
  position: relative;
  margin-top: 10px;
  padding-left: 30px;
  font-size: 15.5px;
  line-height: 1.6;
}
.prose ul.wp-checklist li::marker { content: none; }
.prose ul.wp-checklist li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 12px;
  height: 7px;
  border-left: 2.4px solid #2F7D4F;
  border-bottom: 2.4px solid #2F7D4F;
  transform: rotate(-45deg);
}

/* ---------- CTA box ---------- */
.prose .wp-cta {
  margin-top: 34px;
  padding: 30px 30px 32px;
  border-radius: var(--radius-xl);
  background: var(--color-brand);
  color: var(--white);
}
.prose .wp-cta h3 { margin-top: 0; font-size: 21px; font-weight: 800; color: var(--white); }
.prose .wp-cta p { margin-top: 12px; font-size: 15.5px; line-height: 1.65; color: #E8DEF2; }
.prose .wp-cta .btn { margin-top: 20px; background: var(--white); color: var(--color-brand); text-decoration: none; }
.prose .wp-cta .btn:hover { background: var(--color-bg-highlight); color: var(--color-brand); }

/* ---------- FAQ (div-based, from the original posts) ---------- */
.prose .wp-faq {
  margin-top: 14px;
  padding: 18px 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.prose .wp-faq__q { font-size: 16.5px; font-weight: 700; color: var(--ink); }
.prose .wp-faq__a { margin-top: 8px; font-size: 15.5px; line-height: 1.7; color: var(--color-text-muted); }

/* ---------- Related-article link ---------- */
.prose .wp-related {
  margin-top: 28px;
  padding: 18px 22px;
  border: 1px solid var(--purple-200);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.prose .wp-related__icon { font-size: 22px; line-height: 1.2; flex: 0 0 auto; }
.prose .wp-related__body { flex: 1 1 auto; min-width: 0; }
.prose .wp-related strong {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--purple-600);
}
.prose .wp-related a { display: inline-block; margin-top: 6px; font-size: 16px; font-weight: 700; }
.prose .wp-related p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--color-text-muted); }

/* ---------- Hero image inside migrated posts ---------- */
.prose img.wp-hero-img { width: 100%; border-radius: var(--radius-xl); }

@media (max-width: 620px) {
  .prose .wp-cta { padding: 24px 20px 26px; }
  .prose .wp-related { flex-direction: column; gap: 10px; }
  .prose .wp-step { display: block; margin: 0 0 8px; width: fit-content; }
}

/* ---------- Post CTA: one button, phone as a text link ---------- */
.cta-band__actions { flex-direction: column; align-items: flex-start; gap: 12px; }
.cta-band__phone { margin: 0; font-size: 15px; color: var(--purple-200); }
.cta-band__phone a { color: var(--white); font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); }
.cta-band__phone a:hover { color: var(--white); text-decoration-color: var(--white); }
@media (max-width: 620px) {
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { width: 100%; justify-content: center; }
}

/* ---------- Trustindex widget slot ----------
   The widget brings its own stylesheet from cdn.trustindex.io; this only
   reserves space so the section does not collapse before it loads. */
.ti-slot { margin-top: 44px; min-height: 280px; }
.ti-slot:empty::after {
  content: "Reviews are loading‚6";
  display: block; padding: 40px 0; text-align: center;
  font-size: 14.5px; color: var(--color-text-muted);
}

/* ---------- Service card image as a link ---------- */
a.svc__media { display: block; text-decoration: none; }
a.svc__media img { transition: transform .35s ease; }
.svc:hover a.svc__media img { transform: scale(1.04); }
.svc__media { overflow: hidden; }
a.svc__media:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }

/* ==========================================================================
   Floating call / quote bar
   ==========================================================================
   Markup mirrors the live site's Float Menu plugin (.floating-menu / .fm-bar /
   .fm-item / .fm-link / .fm-icon / .fm-label) so existing GTM triggers keyed
   on those selectors keep working. Styling is the new brand palette rather
   than the plugin's blue and violet.

   Sits below the mobile nav (120) and its scrim (110) so the drawer covers it. */
.floating-menu {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
}
.fm-bar { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.fm-item { margin: 0; }
.fm-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--white);
  box-shadow: -4px 6px 18px rgba(46, 22, 64, .22);
  transition: background .18s ease;
}
.fm-icon { display: flex; flex: 0 0 auto; }
.fm-item--call .fm-link { background: var(--color-brand); }
.fm-item--call .fm-link:hover { background: var(--color-brand-hover); color: var(--white); }
.fm-item--quote .fm-link { background: #B8892F; }
.fm-item--quote .fm-link:hover { background: #A2761F; color: var(--white); }
.fm-link:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; }

/* Labels stay tucked away until hover so the bar does not sit over content. */
.fm-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .22s ease, opacity .18s ease;
}
.fm-link:hover .fm-label,
.fm-link:focus-visible .fm-label { max-width: 170px; opacity: 1; }

/* Phones: two round buttons bottom-right, clear of the reading column.
   The plugin switched to its mobile layout at 480px; 780px suits this build,
   which is where the header CTA also drops out. */
@media (max-width: 780px) {
  .floating-menu { top: auto; bottom: 18px; right: 16px; transform: none; }
  .fm-bar { flex-direction: row; gap: 12px; }
  .fm-link {
    width: 54px;
    height: 54px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(46, 22, 64, .3);
  }
  .fm-label { display: none; }
}

/* The header CTA needs ~630px of header before container padding, so below
   980px it wrapped and broke. The floating bar covers the same job there. */
@media (max-width: 980px) {
  .header-actions .btn { display: none; }
}

@media print { .floating-menu { display: none !important; } }

/* ==========================================================================
   Footer accreditation badges
   ==========================================================================
   The NDIS badge purple (#601860) is only 1.38:1 against the footer
   background (#2E1640), so on the dark footer it would disappear. A light
   panel keeps both marks legible and reads as deliberate.

   Displayed at the artwork's true 165x90. The live site stretched it to
   238x90, which turned the circles into ovals. */
.footer-badges {
  flex: 0 0 auto;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 9px 14px;
  line-height: 0;
}
.footer-badges img { width: 165px; height: auto; }

@media (max-width: 620px) {
  .footer-badges { padding: 8px 12px; }
  .footer-badges img { width: 148px; }
}

/* ==========================================================================
   Mobile hero — text over the image, not below it
   ==========================================================================
   The earlier mobile rules turned the hero into a 320px photo followed by the
   copy, so landing on the site gave you a picture and nothing else: the
   headline, the value proposition and both CTAs were all below the fold.

   Below 980px the hero now behaves like the desktop one — full-bleed image
   with the copy on top — but with the scrim running the full width and turned
   up enough to carry white text over a busy photograph.

   Contrast: the scrim bottoms out around rgba(38,18,54,.86) behind the body
   copy, which puts white text well past 7:1 even over the lightest part of
   this image. */
@media (max-width: 980px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: 0;
    background: var(--purple-900);
  }

  /* image back to a full-bleed layer behind the copy */
  .hero__media { position: absolute; inset: 0; height: auto; }
  .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* keep faces in frame when the crop goes tall */
    object-position: 60% 28%;
  }

  .hero__scrim {
    display: block;
    background: linear-gradient(
      to bottom,
      rgba(30, 14, 44, .58) 0%,
      rgba(30, 14, 44, .78) 42%,
      rgba(30, 14, 44, .88) 100%
    );
  }
  .hero__rule { display: block; width: 4px; }

  .hero .container {
    position: relative;
    z-index: 1;
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .hero__inner { max-width: 620px; }

  /* copy inverts onto the image */
  .hero h1 { color: var(--white); font-size: 40px; }
  .hero h1 span { color: #D9C6EA; }
  .hero__lede { color: rgba(255, 255, 255, .88); max-width: none; }

  .pill {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .34);
    color: var(--white);
    backdrop-filter: blur(4px);
  }
  .pill__dot { background: #D9C6EA; }

  .social-proof__text { color: rgba(255, 255, 255, .9); }
  .social-proof__text strong { color: var(--white); }
  .social-proof__text span { color: rgba(255, 255, 255, .78); }
  .avatar-stack img { box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }

  /* buttons need to read against the scrim rather than against a pale panel */
  .hero__actions .btn--primary {
    background: var(--white);
    color: var(--color-brand);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
  }
  .hero__actions .btn--primary:hover { background: var(--color-bg-highlight); color: var(--color-brand); }
  .hero__actions .btn--outline {
    background: transparent;
    color: var(--white);
    border-color: rgba(255, 255, 255, .55);
  }
  .hero__actions .btn--outline:hover { border-color: var(--white); color: var(--white); }
}

@media (max-width: 620px) {
  .hero .container { padding-top: 52px; padding-bottom: 52px; }
  .hero h1 { font-size: 33px; }
  .hero__lede { font-size: 17px; }
  .hero__actions { gap: 10px; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* Focal points for cropped figures — generated by _build/focal_points.py.
   object-fit: cover with the default 50% was cutting heads off; each rule
   below keeps the detected subject inside the visible band. */
.loc-figure img[src$="about_img1.webp"], .inline-figure img[src$="about_img1.webp"] { object-position: center 59%; }
.loc-figure img[src$="about_img2.webp"], .inline-figure img[src$="about_img2.webp"] { object-position: center 6%; }
.loc-figure img[src$="about_img3.webp"], .inline-figure img[src$="about_img3.webp"] { object-position: center 59%; }
.loc-figure img[src$="aged_img1.webp"], .inline-figure img[src$="aged_img1.webp"] { object-position: center 64%; }
.loc-figure img[src$="aged_img3.webp"], .inline-figure img[src$="aged_img3.webp"] { object-position: center 31%; }
.loc-figure img[src$="aged_img4.webp"], .inline-figure img[src$="aged_img4.webp"] { object-position: center 8%; }
.loc-figure img[src$="aged_img5.webp"], .inline-figure img[src$="aged_img5.webp"] { object-position: center 26%; }
.loc-figure img[src$="bathroom_img2.webp"], .inline-figure img[src$="bathroom_img2.webp"] { object-position: center 0%; }
.loc-figure img[src$="bathroom_img3.webp"], .inline-figure img[src$="bathroom_img3.webp"] { object-position: center 100%; }
.loc-figure img[src$="bathroom_img4.webp"], .inline-figure img[src$="bathroom_img4.webp"] { object-position: center 22%; }
.loc-figure img[src$="gallery_img1.webp"], .inline-figure img[src$="gallery_img1.webp"] { object-position: center 19%; }
.loc-figure img[src$="gallery_img2.webp"], .inline-figure img[src$="gallery_img2.webp"] { object-position: center 0%; }
.loc-figure img[src$="gallery_img3.webp"], .inline-figure img[src$="gallery_img3.webp"] { object-position: center 0%; }
.loc-figure img[src$="gallery_img4.webp"], .inline-figure img[src$="gallery_img4.webp"] { object-position: center 0%; }
.loc-figure img[src$="home_img.webp"], .inline-figure img[src$="home_img.webp"] { object-position: center 0%; }
.loc-figure img[src$="home_img2.webp"], .inline-figure img[src$="home_img2.webp"] { object-position: center 23%; }
.loc-figure img[src$="house_cleaning_img1.webp"], .inline-figure img[src$="house_cleaning_img1.webp"] { object-position: center 55%; }
.loc-figure img[src$="house_cleaning_img2.webp"], .inline-figure img[src$="house_cleaning_img2.webp"] { object-position: center 0%; }
.loc-figure img[src$="house_cleaning_img3.webp"], .inline-figure img[src$="house_cleaning_img3.webp"] { object-position: center 0%; }
.loc-figure img[src$="how-do-aged-care-cleaners-person.webp"], .inline-figure img[src$="how-do-aged-care-cleaners-person.webp"] { object-position: center 0%; }
.loc-figure img[src$="ndis_img1-1.webp"], .inline-figure img[src$="ndis_img1-1.webp"] { object-position: center 26%; }
.loc-figure img[src$="ndis_img1.webp"], .inline-figure img[src$="ndis_img1.webp"] { object-position: center 20%; }
.loc-figure img[src$="ndis_img2-1.webp"], .inline-figure img[src$="ndis_img2-1.webp"] { object-position: center 25%; }
.loc-figure img[src$="ndis_img2.webp"], .inline-figure img[src$="ndis_img2.webp"] { object-position: center 0%; }
.loc-figure img[src$="ndis_img3.webp"], .inline-figure img[src$="ndis_img3.webp"] { object-position: center 37%; }
.loc-figure img[src$="ndis_img4.webp"], .inline-figure img[src$="ndis_img4.webp"] { object-position: center 39%; }
.loc-figure img[src$="ndis_img5.webp"], .inline-figure img[src$="ndis_img5.webp"] { object-position: center 21%; }
.loc-figure img[src$="presale_img1.webp"], .inline-figure img[src$="presale_img1.webp"] { object-position: center 50%; }
.loc-figure img[src$="presale_img2.webp"], .inline-figure img[src$="presale_img2.webp"] { object-position: center 16%; }
.loc-figure img[src$="regular_img-1.webp"], .inline-figure img[src$="regular_img-1.webp"] { object-position: center 19%; }
.loc-figure img[src$="regular_img1.webp"], .inline-figure img[src$="regular_img1.webp"] { object-position: center 12%; }
.loc-figure img[src$="regular_img2.webp"], .inline-figure img[src$="regular_img2.webp"] { object-position: center 78%; }
.loc-figure img[src$="regular_img3.webp"], .inline-figure img[src$="regular_img3.webp"] { object-position: center 0%; }
.loc-figure img[src$="residential_img.webp"], .inline-figure img[src$="residential_img.webp"] { object-position: center 12%; }
.loc-figure img[src$="shower_img.webp"], .inline-figure img[src$="shower_img.webp"] { object-position: center 5%; }
.loc-figure img[src$="shower_img2.webp"], .inline-figure img[src$="shower_img2.webp"] { object-position: center 34%; }
.loc-figure img[src$="sort_img1.webp"], .inline-figure img[src$="sort_img1.webp"] { object-position: center 26%; }
.loc-figure img[src$="sort_img2.webp"], .inline-figure img[src$="sort_img2.webp"] { object-position: center 0%; }
.loc-figure img[src$="spring_cleaning_img1.webp"], .inline-figure img[src$="spring_cleaning_img1.webp"] { object-position: center 0%; }
.loc-figure img[src$="spring_cleaning_img2.webp"], .inline-figure img[src$="spring_cleaning_img2.webp"] { object-position: center 67%; }
.loc-figure img[src$="spring_cleaning_img3.webp"], .inline-figure img[src$="spring_cleaning_img3.webp"] { object-position: center 61%; }
.loc-figure img[src$="spring_img.webp"], .inline-figure img[src$="spring_img.webp"] { object-position: center 9%; }
.loc-figure img[src$="spring_img2.webp"], .inline-figure img[src$="spring_img2.webp"] { object-position: center 12%; }
.loc-figure img[src$="spring_img3.webp"], .inline-figure img[src$="spring_img3.webp"] { object-position: center 100%; }
.loc-figure img[src$="steam_img.webp"], .inline-figure img[src$="steam_img.webp"] { object-position: center 0%; }
.loc-figure img[src$="steam_img2.webp"], .inline-figure img[src$="steam_img2.webp"] { object-position: center 0%; }
.loc-figure img[src$="vacate_img1.webp"], .inline-figure img[src$="vacate_img1.webp"] { object-position: center 0%; }
.loc-figure img[src$="vacate_img2-1.webp"], .inline-figure img[src$="vacate_img2-1.webp"] { object-position: center 26%; }
.loc-figure img[src$="window_cleaning_img1.webp"], .inline-figure img[src$="window_cleaning_img1.webp"] { object-position: center 0%; }
.loc-figure img[src$="window_cleaning_img2.webp"], .inline-figure img[src$="window_cleaning_img2.webp"] { object-position: center 0%; }
.loc-figure img[src$="window_cleaning_img3.webp"], .inline-figure img[src$="window_cleaning_img3.webp"] { object-position: center 25%; }
.loc-figure img[src$="window_img.webp"], .inline-figure img[src$="window_img.webp"] { object-position: center 0%; }
.loc-figure img[src$="window_img2.webp"], .inline-figure img[src$="window_img2.webp"] { object-position: center 13%; }
.loc-figure img[src$="window_img4.webp"], .inline-figure img[src$="window_img4.webp"] { object-position: center 29%; }


/* ==========================================================================
   Screen-reader-only text
   ==========================================================================
   Extends a short visible label such as "Learn More" into a full description
   for assistive technology and search engines, without changing the visible
   design. Uses the standard clip technique so the text stays in the
   accessibility tree, unlike display:none or visibility:hidden. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}