/* ============================================================
   PERFECT CLEANTASTIC SERVICES — subpage.css
   Self-contained stylesheet for inner / service pages.
   Continues the homepage design language (tokens, header,
   footer, buttons) and adds subpage-only components.

   INDEX
   01. Design Tokens          12. Reason Cards
   02. Base & Helpers         13. FAQ
   03. Buttons                14. Service Gallery
   04. Top Bar                15. CTA Banner
   05. Header / Navbar        16. Contact & Forms
   06. Mobile Contact Strip   17. Footer
   07. Service Hero           18. Floating UI
   08. Quick Quote            19. Keyframes
   09. Overview               20. About Page
   10. Inclusion Tabs         21. Blog
   11. Counter Band            22. Responsive
   ============================================================ */

/* ---------- 01. DESIGN TOKENS ---------- */
:root {
  --primary:       #007F5F;
  --secondary:     #7ED957;
  --dark-green:    #0C2340;
  --gold:          #016838;
  --gold-soft:     #A8E6CF;
  --white:         #FFFFFF;
  --light-bg:      #F8F9FA;
  --mist:          #EAF6F0;
  --ink:           #0C2340;
  --muted:         #5A6B78;
  --light-bg1:     #0f6d42;

  --grad-green:    linear-gradient(135deg, #007F5F, #7ED957);
  --grad-dark:     linear-gradient(150deg, #0C2340e6, #06131fee);
  --grad-gold:     linear-gradient(135deg, #016838, #7ED957);

  --font-display:  'Outfit', sans-serif;
  --font-body:     'Poppins', sans-serif;

  --radius-lg:     28px;
  --radius-md:     20px;
  --radius-sm:     14px;

  --shadow-soft:   0 18px 45px -18px rgba(8, 78, 133, .22);
  --shadow-card:   0 12px 34px -14px rgba(10, 40, 65, .18);
  --shadow-hover:  0 28px 60px -20px rgba(8, 78, 133, .38);

  --ease-lux:      cubic-bezier(.22, .8, .26, .99);
  --header-h:      86px;
}

/* ---------- 02. BASE & HELPERS ---------- */
* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; }   /* clears the 68px scrolled header */

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  font-size: 1rem;
  line-height: 1.75;

  /* contains decorative overflow: blobs and AOS entry offsets */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}

img { max-width: 100%; }
a { text-decoration: none; transition: color .3s var(--ease-lux); }
::selection { background: var(--primary); color: #fff; }

.section { padding: 100px 0; position: relative; }
.section-tight { padding: 74px 0; }
.bg-light-soft { background: var(--light-bg); }
.bg-mist { background: var(--mist); }
.section > .container { position: relative; z-index: 1; }

/* dark image-backed band (mirrors homepage .bg-light-soft1) */
.bg-deep {
  background-color: var(--light-bg1);
  position: relative; isolation: isolate; overflow: hidden;
}
.bg-deep::before {
  content: ""; position: absolute; inset: -90px 0;
  background-image: url('../images/person-taking-care.jpg');
  background-size: cover; background-position: center;
  transform: translate3d(0, var(--py, 0px), 0);
  opacity: .16; mix-blend-mode: luminosity;
  z-index: 0; pointer-events: none;
}

/* Dotted texture used behind light sections. The ::before is inset:0
   and masked, and stray blobs are contained by body { overflow-x: hidden },
   so this needs no overflow of its own. */
.dot-texture { position: relative; background: #fff; }
.dot-texture::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(76,175,80,.22) 2px, transparent 2px),
    radial-gradient(rgba(76,175,80,.12) 1.4px, transparent 1.4px);
  background-size: 26px 26px, 14px 14px;
  background-position: 0 0, 7px 7px;
  -webkit-mask-image: radial-gradient(70% 70% at 85% 15%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 70% at 85% 15%, #000 0%, transparent 75%);
  pointer-events: none; z-index: 0;
}

/* section heading pattern */
.sec-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 1rem;
}
.sec-eyebrow::before,
.sec-eyebrow.center::after {
  content: ""; width: 34px; height: 2px;
  background: var(--grad-gold); border-radius: 2px;
}
.sec-eyebrow.light { color: #f1f1f1; }
.sec-eyebrow.light::before,
.sec-eyebrow.light.center::after { background: linear-gradient(135deg, #7ED957, #A8E6CF); }

.sec-title {
  font-size: clamp(1.9rem, 3.8vw, 2.85rem);
  font-weight: 800; line-height: 1.15; margin-bottom: 1.1rem;
}
.sec-title .accent {
  background: var(--grad-green);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sec-title.light { color: #7ed957; }
.sec-title.light .accent { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.sec-lead { color: var(--muted); max-width: 660px; }
.sec-lead.light { color: #f4f4f4; }
.text-center .sec-lead { margin-inline: auto; }

/* decorative blobs */
.blob {
  position: absolute; border-radius: 50%; filter: blur(60px);
  opacity: .35; pointer-events: none; z-index: 0;
  animation: blob-drift 14s ease-in-out infinite alternate;
}
.blob.green { background: rgba(76,175,80,.45); }
.blob.gold  { background: rgba(212,175,55,.4); }

/* ---------- 03. BUTTONS ---------- */
.btn-lux {
  --btn-bg: var(--grad-green);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 2.1rem;
  font-family: var(--font-display);
  font-weight: 600; font-size: .95rem; letter-spacing: .02em;
  color: #fff; border: 0; border-radius: 999px;
  background: var(--btn-bg);
  box-shadow: 0 12px 28px -10px rgba(46, 125, 50, .55);
  transition: transform .35s var(--ease-lux), box-shadow .35s var(--ease-lux);
  z-index: 1;
}
.btn-lux::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .7s var(--ease-lux);
}
.btn-lux:hover {
  color: #fff; transform: translateY(-3px);
  box-shadow: 0 0 0 6px rgba(76,175,80,.15), 0 20px 40px -12px rgba(46,125,50,.65);
}
.btn-lux:hover::after { transform: translateX(120%); }

.btn-lux.btn-gold {
  --btn-bg: var(--grad-gold); color: #ffffff;
  box-shadow: 0 12px 28px -10px rgba(212,175,55,.55);
}
.btn-lux.btn-gold:hover { color: #3a2f05; box-shadow: 0 0 0 6px rgba(212,175,55,.18), 0 20px 40px -12px rgba(212,175,55,.6); }

.btn-lux.btn-white {
  --btn-bg: #fff;
  background: #fff; color: var(--primary);
  box-shadow: 0 12px 28px -10px rgba(6, 40, 24, .45);
}
.btn-lux.btn-white:hover {
  color: var(--dark-green);
  box-shadow: 0 0 0 6px rgba(255,255,255,.22), 0 20px 40px -12px rgba(6,40,24,.5);
}

.btn-lux.btn-ghost {
  --btn-bg: transparent;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.55);
  backdrop-filter: blur(8px); box-shadow: none;
  color: #fff;                     /* beats `.footer a` inside the footer band */
}
.btn-lux.btn-ghost:hover { background: rgba(255,255,255,.18); box-shadow: 0 0 0 5px rgba(255,255,255,.08); color: #fff; }

.btn-lux.btn-outline {
  --btn-bg: transparent;
  background: transparent; color: var(--primary);
  border: 1.5px solid rgba(0,127,95,.35); box-shadow: none;
}
.btn-lux.btn-outline:hover { background: var(--mist); color: var(--primary); box-shadow: 0 0 0 5px rgba(0,127,95,.08); }

.btn-lux.btn-sm { padding: .7rem 1.45rem; font-size: .85rem; }

.btn-lux .ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.5);
  transform: scale(0); animation: ripple .6s ease-out;
  pointer-events: none;
}

.sc-more {
  font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  color: var(--primary); display: inline-flex; align-items: center; gap: .4rem;
}
.sc-more .bi { transition: transform .3s var(--ease-lux); }
.sc-more:hover { color: var(--dark-green); }
.sc-more:hover .bi { transform: translateX(5px); }

/* ---------- 04. TOP BAR ---------- */
.topbar {
  background: var(--dark-green);
  color: rgba(255,255,255,.85);
  font-size: .8rem; position: relative; z-index: 1051;
}
.topbar a { color: rgba(255,255,255,.85); }
.topbar a:hover { color: var(--gold-soft); }
.topbar .bi { color: var(--gold); }
.topbar .sep { opacity: .25; }
.topbar-social a {
  display: inline-flex; width: 26px; height: 26px;
  align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,.08);
  transition: all .3s var(--ease-lux);
}
.topbar-social a:hover { background: var(--gold); color: #0C2340; transform: translateY(-2px); }

/* ---------- 05. HEADER / NAVBAR ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1050;
  transition: background .4s var(--ease-lux), box-shadow .4s var(--ease-lux), top .35s var(--ease-lux);
}
@media (min-width: 992px) {
  .topbar { height: 40px; display: flex; align-items: center; }
  .site-header:not(.scrolled) { top: 40px; }
}
.site-header .navbar { padding-block: 0; min-height: var(--header-h); transition: min-height .35s var(--ease-lux); }
.site-header .navbar-brand img { height: 90px; transition: height .35s var(--ease-lux); }

.site-header:not(.scrolled) { background: linear-gradient(180deg, rgba(8,24,12,.55), transparent); }
@media (min-width: 992px) {
  .site-header:not(.scrolled) .main-nav .nav-link { color: #fff; }
}
.site-header:not(.scrolled) .navbar-brand .logo-chip { background: rgba(255,255,255,.92); }

.site-header.scrolled {
  background: rgba(255,255,255,.97);
  box-shadow: 0 10px 30px -12px rgba(10,40,65,.18);
}
.site-header.scrolled .navbar { min-height: 68px; }
.site-header.scrolled .navbar-brand img { height: 44px; }
.site-header.scrolled .nav-link { color: var(--ink); }

.navbar-brand .logo-chip {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.92);
  padding: .35rem .9rem; border-radius: 14px;
  box-shadow: var(--shadow-card); transition: background .4s;
}

.main-nav .nav-link {
  font-family: var(--font-display);
  font-weight: 500; font-size: .95rem;
  padding: 1.7rem 1.05rem !important;
  position: relative; white-space: nowrap;
}
.main-nav .nav-link::after {
  content: ""; position: absolute;
  left: 1.05rem; right: 1.05rem; bottom: 1.2rem;
  height: 2px; border-radius: 2px; background: var(--grad-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-lux);
}
.main-nav .nav-link:hover::after,
.main-nav .nav-link.active::after { transform: scaleX(1); }
.main-nav .nav-link:hover, .main-nav .nav-link.active { color: var(--secondary) !important; }
.site-header:not(.scrolled) .main-nav .nav-link:hover,
.site-header:not(.scrolled) .main-nav .nav-link.active { color: var(--gold-soft) !important; }

.header-cta .call-chip {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  color: inherit;
}
.header-cta .call-chip .bi {
  display: inline-flex; width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: rgba(212,175,55,.16); color: var(--gold);
  border-radius: 50%; font-size: 1.05rem;
  animation: pulse-ring 2.4s infinite;
}
.site-header:not(.scrolled) .header-cta .call-chip { color: #fff; }
.site-header.scrolled .header-cta .call-chip { color: var(--ink); }

.navbar-toggler {
  border: 0; padding: 0; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler .hamburger {
  display: inline-flex; flex-direction: column; justify-content: space-between;
  width: 24px; height: 17px;
}
.navbar-toggler .hamburger span {
  display: block; height: 2.5px; width: 100%; border-radius: 2px;
  background: var(--primary);
  transition: transform .3s var(--ease-lux), opacity .3s var(--ease-lux);
}
.site-header:not(.scrolled) .navbar-toggler .hamburger span { background: #fff; }
.navbar-toggler[aria-expanded="true"] .hamburger span:nth-child(1) { transform: translateY(7.25px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .hamburger span:nth-child(2) { opacity: 0; }
.navbar-toggler[aria-expanded="true"] .hamburger span:nth-child(3) { transform: translateY(-7.25px) rotate(-45deg); }

/* mega menu */
.nav-item.has-mega { position: static; }
.mega-menu {
  position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%) translateY(14px);
  width: min(880px, calc(100vw - 32px));
  background: #fff; border-radius: var(--radius-md);
  box-shadow: 0 40px 90px -30px rgba(15,35,20,.35);
  padding: 1.8rem 1.8rem 1.4rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease-lux), transform .3s var(--ease-lux), visibility .3s;
  border-top: 3px solid var(--gold); z-index: 1300;
}
@media (min-width: 992px) {
  /* .is-open is held by the hover-intent handler in subpage.js — the panel
     sits ~18px below the nav item, and a bare :hover drops it while the
     pointer crosses that gap */
  .nav-item.has-mega:hover .mega-menu,
  .nav-item.has-mega:focus-within .mega-menu,
  .nav-item.has-mega.is-open .mega-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}
.mega-link {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--font-display); font-weight: 500; font-size: .86rem;
  color: var(--ink); padding: .5rem .6rem; border-radius: 12px;
  transition: all .25s var(--ease-lux);
}
.mega-link .mega-icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mist); color: var(--primary); font-size: 1rem;
  transition: all .3s var(--ease-lux);
}
.mega-link:hover { background: var(--mist); color: var(--primary); transform: translateX(4px); }
.mega-link:hover .mega-icon { background: var(--grad-green); color: #fff; }
.mega-link.is-current { background: var(--mist); color: var(--primary); font-weight: 600; }
.mega-link.is-current .mega-icon { background: var(--grad-green); color: #fff; }
.mega-all {
  font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  color: var(--primary); display: inline-flex; align-items: center; gap: .4rem;
}
.mega-all .bi { transition: transform .3s var(--ease-lux); }
.mega-all:hover { color: var(--dark-green); }
.mega-all:hover .bi { transform: translateX(5px); }
.mega-footer {
  border-top: 1px dashed #dff2e8; margin-top: 1.2rem; padding-top: .9rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-size: .85rem;
}

/* offcanvas */
@media (min-width: 992px) {
  .offcanvas-lux { flex-grow: 1; }
  .offcanvas-lux .offcanvas-body { display: flex; align-items: center; padding: 0; overflow: visible; }
}
@media (max-width: 991.98px) {
  .offcanvas-lux { width: 320px !important; background: #fff; }
  .offcanvas-lux .offcanvas-body { padding: .9rem 1.1rem 1.4rem; }
  .offcanvas-lux .nav-link {
    font-family: var(--font-display); font-weight: 500; font-size: .9rem;
    color: var(--ink) !important; padding: .55rem .25rem !important;
    border-bottom: 1px solid #edf7f1;
  }
  .offcanvas-lux .nav-link.active { color: var(--primary) !important; }
  .offcanvas-lux .offcanvas-body .sub-list { padding: .15rem 0 .15rem .85rem; }
  .offcanvas-lux .offcanvas-body .sub-list a { font-size: .8rem; padding: .18rem 0; }
}
.offcanvas-lux .offcanvas-header { border-bottom: 1px solid #ebf6f0; }
.offcanvas-lux .nav-link.active { color: var(--primary); }
.offcanvas-lux .collapse-toggle { display: flex; justify-content: space-between; align-items: center; }
.offcanvas-lux .collapse-toggle .bi-chevron-down { transition: transform .3s; font-size: .8rem; }
.offcanvas-lux .collapse-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.offcanvas-lux .sub-list { list-style: none; padding: .4rem 0 .4rem 1rem; margin: 0; }
.offcanvas-lux .sub-list a { display: block; font-size: .85rem; color: var(--muted); padding: .32rem 0; }
.offcanvas-lux .sub-list a:hover { color: var(--primary); }
.offcanvas-lux .sub-list a.active { color: var(--primary); font-weight: 600; }
.offcanvas-contact { font-size: .85rem; color: var(--muted); }
.offcanvas-contact .bi { color: var(--primary); width: 20px; }
.offcanvas-social a {
  display: inline-flex; width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: 50%; background: var(--mist); color: var(--primary);
  transition: all .3s var(--ease-lux);
}
.offcanvas-social a:hover { background: var(--grad-green); color: #fff; transform: translateY(-3px); }

/* ---------- 06. MOBILE CONTACT STRIP ---------- */
.mobile-contact-strip {
  position: relative; width: 100%;
  background: var(--grad-green); z-index: 1040;
}
.mobile-contact-strip .mcs-item {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  color: #fff; font-size: .76rem; font-weight: 600;
  padding: .6rem .4rem; min-width: 0;
  border-right: 1px solid rgba(255,255,255,.22);
}
.mobile-contact-strip .col-6:last-child .mcs-item { border-right: 0; }
.mobile-contact-strip .mcs-item i { font-size: .82rem; flex-shrink: 0; }
.mobile-contact-strip .mcs-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mobile-contact-strip .mcs-item:hover { color: var(--gold-soft); }

/* ============================================================
   07. SERVICE HERO
   ============================================================ */
.svc-hero {
  position: relative;
  padding: 210px 0 130px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.svc-hero__bg {
  position: absolute; inset: -90px 0; z-index: -3;
  background-size: cover; background-position: center;
  transform: scale(1.06);
  animation: hero-zoom 18s ease-in-out infinite alternate;
  /* `translate` is its own property, so the parallax offset composes with
     the hero-zoom animation instead of fighting it for `transform`. The
     negative inset is the bleed the offset travels into. */
  translate: 0 var(--py, 0px);
}
.svc-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(105deg, rgba(7,26,12,.92) 6%, rgba(10,34,16,.76) 45%, rgba(8,28,14,.5) 100%);
}
.svc-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background: linear-gradient(120deg, rgba(46,125,50,.3), rgba(126,217,87,.14), rgba(8,78,133,.3));
  background-size: 300% 300%;
  animation: gradient-shift 12s ease infinite;
  mix-blend-mode: soft-light;
}
/* soft light streak */
.svc-hero__glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 620px; height: 620px; right: -180px; top: -220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126,217,87,.28), transparent 62%);
  filter: blur(10px);
}

.svc-hero .breadcrumb-lux {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .55rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
  border-radius: 999px; padding: .45rem 1.15rem;
  font-size: .78rem; letter-spacing: .04em; margin-bottom: 1.4rem;
}
.svc-hero .breadcrumb-lux a { color: rgba(255,255,255,.78); }
.svc-hero .breadcrumb-lux a:hover { color: var(--secondary); }
.svc-hero .breadcrumb-lux .sep { color: rgba(255,255,255,.35); font-size: .7rem; }
.svc-hero .breadcrumb-lux .current { color: var(--gold-soft); font-weight: 600; }

.svc-hero .hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.1); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--gold-soft);
  font-family: var(--font-display); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .5rem 1.2rem; border-radius: 999px; margin-bottom: 1.2rem;
}
.svc-hero h1 {
  color: #fff; font-weight: 800;
  font-size: clamp(2.1rem, 4.8vw, 3.7rem);
  line-height: 1.08; letter-spacing: -.02em; margin-bottom: 1rem;
}
.svc-hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #7ED957, #A8E6CF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.svc-hero .lead-txt {
  color: rgba(255,255,255,.84); font-size: 1.02rem;
  max-width: 590px; margin-bottom: 1.8rem;
}
.svc-hero .hero-pills { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2rem; }
.svc-hero .hero-pills span {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; padding: .42rem 1rem;
  font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.9);
  transition: all .3s var(--ease-lux);
}
.svc-hero .hero-pills span i { color: var(--secondary); }
.svc-hero .hero-pills span:hover { background: rgba(126,217,87,.16); border-color: rgba(126,217,87,.45); transform: translateY(-2px); }

/* glass quick-facts card */
.hero-facts {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius-lg);
  padding: 1.7rem 1.7rem 1.5rem;
  box-shadow: 0 30px 70px -22px rgba(0,0,0,.55);
  animation: float-y 6.5s ease-in-out infinite;
}
.hero-facts h6 {
  color: var(--gold-soft); font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.1rem;
}
.hf-row { display: flex; gap: .85rem; align-items: flex-start; padding: .6rem 0; }
.hf-row + .hf-row { border-top: 1px solid rgba(255,255,255,.13); }
.hf-row i {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(126,217,87,.18); color: var(--secondary); font-size: .95rem;
}
.hf-row .lbl { font-size: .67rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.6); line-height: 1.6; }
.hf-row .val { font-size: .88rem; font-weight: 600; color: #fff; line-height: 1.45; font-family: var(--font-display); }
.hero-facts .hf-cta { margin-top: 1.2rem; }
.hero-facts .hf-cta .btn-lux { width: 100%; justify-content: center; }
.hero-facts .hf-note {
  display: block; text-align: center; margin-top: .8rem;
  font-size: .72rem; color: rgba(255,255,255,.6);
}

/* floating bubbles injected by JS */
.bubble {
  position: absolute; bottom: -60px; z-index: -1;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), rgba(255,255,255,.06) 60%);
  border: 1px solid rgba(255,255,255,.18);
  animation: bubble-rise linear infinite;
}

/* wave divider */
.svc-hero .hero-wave {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
  line-height: 0; pointer-events: none;
}
.svc-hero .hero-wave svg { width: 100%; height: 70px; display: block; }

/* ============================================================
   08. QUICK QUOTE — landscape form under the banner
   ============================================================ */
.quick-quote { margin-top: -70px; position: relative; z-index: 10; }

.qq-card {
  position: relative; overflow: hidden;
  background: #EAF6F0;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -34px rgba(10,40,65,.45);
  padding: 2.2rem 2.2rem 2rem;
}
/* gradient hairline across the top edge */
.qq-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--grad-green);
}
/* soft glow in the corner */
.qq-card::after {
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(126,217,87,.16), transparent 68%);
  pointer-events: none;
}

.qq-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-bottom: 1.3rem; margin-bottom: 1.5rem;
  border-bottom: 1px dashed #e2f0e8;
  position: relative; z-index: 2;
}
.qq-head__text { max-width: 640px; }
.qq-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--mist); color: var(--primary);
  font-family: var(--font-display); font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .4rem 1rem; border-radius: 999px; margin-bottom: .8rem;
}
.qq-head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800; margin-bottom: .35rem;
}
.qq-head p { font-size: .9rem; color: var(--muted); margin: 0; }

.qq-call { display: inline-flex; align-items: center; gap: .9rem; flex: 0 0 auto; }
.qq-call__ring {
  width: 50px; height: 50px; flex: 0 0 auto; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-green); color: #fff; font-size: 1.15rem;
  animation: pulse-ring 2.4s infinite;
}
.qq-call__text { display: flex; flex-direction: column; line-height: 1.3; }
.qq-call__text .lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.qq-call__text .num { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.qq-call:hover .num { color: var(--primary); }

/* fields with a leading icon */
.qq-form { position: relative; z-index: 2; }
.qq-field { position: relative; }
.qq-field > i {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--primary); font-size: 1rem; pointer-events: none;
  opacity: .65; transition: opacity .3s var(--ease-lux), color .3s var(--ease-lux);
  z-index: 2;
}
.qq-field--area > i { top: 1.15rem; transform: none; }
/* .form-lux .form-control sets a `padding` shorthand later in this file,
   so this needs the extra class to win on specificity */
.form-lux .qq-field .form-control,
.form-lux .qq-field .form-select { padding-left: 2.75rem; }
.qq-field:focus-within > i { opacity: 1; color: var(--secondary); }

/* Form layout is CSS Grid, not Bootstrap columns, because the message field
   has to span two rows — something a column grid cannot express.
   Desktop (>=992px):
     row 1  name | phone  | email  | message
     row 2  service | suburb | submit | (message continues)          */
.qq-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }

.qq-f-submit .btn-lux { width: 100%; justify-content: center; }
.qq-note { font-size: .8rem; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; }
.qq-note i { color: var(--gold); }
.qq-f-note { text-align: center; }

/* Below the 4-column layout the message and submit drop to the end, so the
   short inputs pair up cleanly instead of leaving a hole mid-form. */
@media (max-width: 991.98px) {
  .qq-f-msg     { order: 1; }
  .qq-f-submit  { order: 2; }
  .qq-f-note    { order: 3; }
  .qq-f-success { order: 4; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .qq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* name|phone, email|service, then suburb / message / submit full width */
  .qq-f-suburb, .qq-f-msg, .qq-f-submit,
  .qq-f-note, .qq-f-success { grid-column: 1 / -1; }
}

/* Desktop layout — 8 tracks so the left block divides into 3 (row 1) or 2
   (row 2), with the message occupying the right quarter across both rows:

     row 1   name   |  phone  |  email  |  message
     row 2   service      |  suburb     |  (message)
     row 3   privacy note               |  submit                       */
@media (min-width: 992px) {
  .qq-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .qq-f-name    { grid-column: 1 / span 2; grid-row: 1; }
  .qq-f-phone   { grid-column: 3 / span 2; grid-row: 1; }
  .qq-f-email   { grid-column: 5 / span 2; grid-row: 1; }
  .qq-f-msg     { grid-column: 7 / span 2; grid-row: 1 / span 2; }
  .qq-f-service { grid-column: 1 / span 3; grid-row: 2; }
  .qq-f-suburb  { grid-column: 4 / span 3; grid-row: 2; }
  .qq-f-note    { grid-column: 1 / span 6; grid-row: 3; }
  .qq-f-submit  { grid-column: 7 / span 2; grid-row: 3; }
  .qq-f-success { grid-column: 1 / -1; grid-row: 4; }

  .qq-f-note { display: flex; align-items: center; text-align: left; }

  /* the textarea grows to fill the full two-row span */
  .qq-f-msg, .qq-f-msg .qq-field { height: 100%; }
  .qq-f-msg .qq-field textarea { height: 100%; resize: none; }
}
/* ============================================================
   09. OVERVIEW
   ============================================================ */
.ov-collage { position: relative; padding: 0 26px 78px 0; }
.ov-collage .img-main {
  width: 100%; aspect-ratio: 4/4.3; object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -30px rgba(18,48,24,.42);
  translate: 0 var(--py, 0px);
}
.ov-collage .img-float {
  position: absolute; right: 0; bottom: 0; width: 54%;
  aspect-ratio: 4/3.1; object-fit: cover;
  border-radius: var(--radius-md); border: 8px solid #fff;
  box-shadow: var(--shadow-hover);
  animation: float-y 7s ease-in-out infinite;
  translate: 0 var(--py, 0px);
}
.ov-collage .ov-ring {
  position: absolute; inset: 26px 0 52px 26px;
  border: 3px solid var(--gold); border-radius: var(--radius-lg);
  opacity: .5; z-index: -1;
}
.ov-collage .ov-badge {
  position: absolute; top: 24px; left: -16px; z-index: 3;
  display: flex; align-items: center; gap: .7rem;
  background: var(--grad-green); color: #fff;
  padding: .9rem 1.2rem; border-radius: 18px;
  box-shadow: 0 18px 38px -12px rgba(46,125,50,.55);
  border: 3px solid rgba(255,255,255,.3);
  animation: float-y 5.5s ease-in-out infinite;
}
.ov-collage .ov-badge .n { font-family: var(--font-display); font-weight: 800; font-size: 1.85rem; line-height: 1; }
.ov-collage .ov-badge .t { font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .92; line-height: 1.3; }

.ov-check { list-style: none; padding: 0; margin: 0; }
.ov-check li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .92rem; font-weight: 500; padding: .32rem 0;
}
.ov-check li i { color: var(--gold); font-size: 1.05rem; margin-top: .28rem; }

.ov-highlight {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--light-bg); border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem; height: 100%;
  border-left: 3px solid var(--gold);
  transition: all .35s var(--ease-lux);
}
.ov-highlight:hover { background: #fff; box-shadow: var(--shadow-card); transform: translateY(-4px); }
.ov-highlight i { font-size: 1.45rem; color: var(--primary); line-height: 1.6; }
.ov-highlight h6 { margin-bottom: .15rem; font-size: .95rem; }
.ov-highlight p { font-size: .82rem; color: var(--muted); margin: 0; line-height: 1.6; }

/* ============================================================
   10. INCLUSION TABS
   ============================================================ */
.inc-wrap {
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow: hidden;
  border: 1px solid #eaf5ef;
}
.inc-tabs {
  list-style: none; margin: 0; padding: 1.4rem;
  background: linear-gradient(160deg, var(--dark-green), var(--primary));
  height: 100%; position: relative; overflow: hidden;
}
.inc-tabs::after {
  content: ""; position: absolute; right: -80px; bottom: -80px;
  width: 250px; height: 250px; border-radius: 50%;
  background: radial-gradient(circle, rgba(126,217,87,.35), transparent 70%);
  pointer-events: none;
}
.inc-tabs .inc-tab {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: .8rem; width: 100%;
  border: 0; background: transparent; text-align: left;
  color: rgba(255,255,255,.78);
  font-family: var(--font-display); font-weight: 500; font-size: .92rem;
  padding: .85rem 1rem; border-radius: 14px; margin-bottom: .3rem;
  transition: all .35s var(--ease-lux);
}
.inc-tabs .inc-tab i {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); font-size: 1.05rem;
  transition: all .35s var(--ease-lux);
}
.inc-tabs .inc-tab:hover { color: #fff; background: rgba(255,255,255,.08); }
.inc-tabs .inc-tab.active {
  background: #fff; color: var(--ink); font-weight: 600;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.5);
}
.inc-tabs .inc-tab.active i { background: var(--grad-green); color: #fff; }
.inc-tabs .inc-tab .cnt {
  margin-left: auto; font-size: .72rem; font-weight: 600;
  background: rgba(255,255,255,.14); color: #fff;
  border-radius: 999px; padding: .1rem .6rem;
}
.inc-tabs .inc-tab.active .cnt { background: var(--mist); color: var(--primary); }

.inc-panels { padding: 2rem 2rem 1.8rem; }
.inc-panel { display: none; }
.inc-panel.active { display: block; animation: fade-up .5s var(--ease-lux) both; }
.inc-panel h4 { font-size: 1.25rem; margin-bottom: .35rem; }
.inc-panel .p-lead { font-size: .88rem; color: var(--muted); margin-bottom: 1.3rem; }
.inc-list { list-style: none; padding: 0; margin: 0; }
.inc-list li {
  display: flex; align-items: flex-start; gap: .65rem;
  font-size: .88rem; padding: .42rem 0;
  border-bottom: 1px dashed #edf6f1;
}
.inc-list li:last-child { border-bottom: 0; }
.inc-list li i { color: var(--secondary); font-size: 1rem; margin-top: .3rem; flex: 0 0 auto; }
.inc-panel .p-img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
}
.inc-note {
  margin-top: 1.4rem;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  background: linear-gradient(135deg, #EFFAF4, #E9F7F0);
  border: 1px dashed rgba(46,125,50,.35);
  border-radius: 16px; padding: .9rem 1.2rem;
  font-size: .85rem; color: var(--muted);
}
.inc-note i { color: var(--gold); font-size: 1.2rem; }



/* ============================================================
   11. COUNTER BAND
   ============================================================ */
.counter-band {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 90px 0; color: #fff;
  background: var(--dark-green);
}
/* The photo moved off the section and onto its own layer so it can be
   translated. `background-attachment: fixed` used to fake this, but iOS
   ignores it outright — a transformed layer parallaxes everywhere. */
.counter-band::before {
  content: ""; position: absolute; inset: -90px 0; z-index: 0;
  background: url('../images/man-cleaning-home.jpg') center/cover no-repeat;
  transform: translate3d(0, var(--py, 0px), 0);
}
.counter-band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--grad-dark); }
.counter-band .container { position: relative; z-index: 2; }
.stat-item { text-align: center; }
.stat-item .num {
  font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800; line-height: 1;
}
.counter-band .stat-item .num { color: #fff; }
.counter-band .stat-item .num .suffix { color: var(--secondary); }
.counter-band .stat-item .lbl { color: rgba(255,255,255,.75); font-size: .85rem; margin-top: .35rem; font-weight: 500; }
.counter-band .stat-icon { font-size: 1.7rem; color: var(--secondary); display: block; margin-bottom: .7rem; }


/* ============================================================
   12. REASON CARDS
   ============================================================ */
.reason-card {
  position: relative; height: 100%; overflow: hidden;
  display: flex; align-items: flex-start; gap: .95rem;
  background: #fff; border: 1px solid #e8f5ee;
  border-radius: 18px; padding: 1.15rem 1.2rem;
  box-shadow: 0 10px 26px -18px rgba(18,48,24,.25);
  transition: transform .4s var(--ease-lux), box-shadow .4s, border-color .4s;
}
.reason-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--grad-gold);
  transform: scaleY(0); transform-origin: top;
  transition: transform .45s var(--ease-lux);
}
.reason-card:hover { transform: translateY(-6px); border-color: rgba(212,175,55,.4); box-shadow: var(--shadow-hover); }
.reason-card:hover::before { transform: scaleY(1); }
.rc-icon {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-green); color: #fff ; font-size: 1.25rem;
  transition: all .4s var(--ease-lux); 
}
.reason-card:hover .rc-icon {
   background: var(--mist); color: var(--primary);
  transform: rotate(-8deg) scale(1.05);
  box-shadow: 0 12px 24px -10px rgba(46,125,50,.55);
}
.reason-card h6 { font-size: .95rem; margin-bottom: .25rem; }
.reason-card p { font-size: .8rem; color: var(--muted); margin: 0; line-height: 1.55; }

.why-visual { position: relative; padding: 0 26px 26px 0; }
.why-visual img {
  width: 100%; aspect-ratio: 4/4.4; object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -30px rgba(18,48,24,.4);
  position: relative; z-index: 1;
}
.why-visual .wv-frame {
  position: absolute; inset: 26px 0 0 26px;
  border: 3px solid var(--gold); border-radius: var(--radius-lg); opacity: .55;
}
.wv-rating {
  position: absolute; z-index: 2; bottom: 44px; right: 2px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.7);
  padding: .85rem 1.1rem; border-radius: 16px;
  box-shadow: var(--shadow-hover);
}
.wv-rating .stars { color: var(--gold); font-size: .8rem; letter-spacing: 2px; }
.wv-rating .line1 { font-family: var(--font-display); font-weight: 700; font-size: .95rem; margin-top: .15rem; }
.wv-rating .line2 { font-size: .72rem; color: var(--muted); }

/* ============================================================
   13. FAQ
   ============================================================ */
.faq-accordion .accordion-item {
  border: 1px solid #e4f3ea !important; border-radius: var(--radius-sm) !important;
  overflow: hidden; margin-bottom: .9rem; box-shadow: 0 6px 18px -12px rgba(10,40,65,.15);
}
.faq-accordion .accordion-button {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  padding: 1.15rem 1.4rem; color: var(--ink); background: #fff;
}
.faq-accordion .accordion-button:not(.collapsed) { background: var(--grad-green); color: #fff; box-shadow: none; }
.faq-accordion .accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1); }
.faq-accordion .accordion-button:focus { box-shadow: none; }
.faq-accordion .accordion-body { font-size: .9rem; color: var(--muted); padding: 1.2rem 1.4rem; }

/* ============================================================
   14. SERVICE GALLERY — 3-image grid
   ============================================================ */
.sg-card {
  position: relative; margin: 0; height: 100%;
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .45s var(--ease-lux), box-shadow .45s var(--ease-lux);
}
.sg-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-hover); }
.sg-card img {
  width: 100%; height: 100%; min-height: 380px; object-fit: cover; display: block;
  transition: transform .8s var(--ease-lux);
}
.sg-card:hover img { transform: scale(1.08); }
.sg-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(10,32,16,.55) 62%, rgba(8,26,13,.92));
  transition: background .45s var(--ease-lux);
}
.sg-card:hover::after { background: linear-gradient(180deg, rgba(0,127,95,.22) 10%, rgba(10,32,16,.72) 58%, rgba(6,22,11,.95)); }

.sg-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.6rem 1.5rem; color: #fff;
}
.sg-tag {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.14); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.24);
  color: var(--gold-soft);
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem .9rem; border-radius: 999px; margin-bottom: .7rem;
}
.sg-card figcaption h5 { color: #fff; font-size: 1.1rem; margin-bottom: .35rem; }
.sg-card figcaption p {
  font-size: .84rem; color: rgba(255,255,255,.8); margin: 0; line-height: 1.6;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s var(--ease-lux), opacity .4s var(--ease-lux);
}
.sg-card:hover figcaption p { max-height: 7rem; opacity: 1; }

/* ============================================================
   15. CTA BANNER
   ============================================================ */
.cta-banner {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background: var(--dark-green);
}
.cta-banner::before {
  content: ""; position: absolute; inset: -90px 0; z-index: 0;
  background: url('../images/slider-img5.jpg') center/cover no-repeat;
  transform: translate3d(0, var(--py, 0px), 0);
}
.cta-banner::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(120deg, rgba(12,35,64,.95), rgba(0,127,95,.85) 55%, rgba(126,217,87,.45));
}
.cta-glass {
  position: relative; z-index: 2;
  background: rgba(255,255,255,.08); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.6rem);
}
.cta-glass h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; }
.cta-glass p { color: rgba(255,255,255,.85); }
.cta-glass .hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  color: var(--gold-soft); font-family: var(--font-display);
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: .5rem 1.2rem; border-radius: 999px;
}

/* ============================================================
   16. CONTACT & FORMS
   ============================================================ */
.contact-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-hover); overflow: hidden; }
.contact-info-pane {
  background: linear-gradient(160deg, var(--dark-green), var(--primary));
  color: #fff; padding: 2.6rem 2.2rem; height: 100%; position: relative; overflow: hidden;
}
.contact-info-pane::after {
  content: ""; position: absolute; right: -70px; bottom: -70px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(126,217,87,.35), transparent 70%);
}
.contact-info-pane h4 { color: #fff; }
.ci-row { display: flex; gap: 1rem; padding: .8rem 0; align-items: flex-start; position: relative; z-index: 2; }
.ci-row .bi {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: var(--gold-soft); font-size: 1.05rem;
}
.ci-row .lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.6); }
.ci-row .val, .ci-row .val a { font-size: .9rem; color: #fff; }
.ci-row .val a:hover { color: var(--gold-soft); }
.ci-social a {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: #fff;
  transition: all .3s var(--ease-lux);
}
.ci-social a:hover { background: var(--secondary); color: #14331f; transform: translateY(-3px); }

.form-lux .form-control, .form-lux .form-select {
  border: 1.5px solid #e2f2e9; border-radius: var(--radius-sm);
  padding: .85rem 1.1rem; font-size: .92rem; background: #bedbc873;
  transition: all .3s var(--ease-lux);
}
.form-lux .form-control:focus, .form-lux .form-select:focus {
  border-color: var(--secondary); background: #fff;
  box-shadow: 0 0 0 4px rgba(76,175,80,.14);
}
/* map fills the right half of the contact card and matches the info pane's height */
.contact-map { position: relative; height: 100%; min-height: 460px; }
.contact-map iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0; display: block;
  filter: saturate(.9);
}

/* ============================================================
   17. FOOTER
   ============================================================ */
.footer {
  position: relative; z-index: 1; overflow: visible;
  background:
    radial-gradient(800px 400px at 85% -10%, rgba(76,175,80,.14), transparent 60%),
    #0B1B2A;
  color: rgba(255,255,255,.72); font-size: .9rem;
}
.footer::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.09) 1.4px, transparent 1.4px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 220px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 220px, #000 calc(100% - 40px), transparent);
  pointer-events: none; z-index: 0;
}
.footer > .container { position: relative; z-index: 1; }
.footer .row.g-5, .footer .footer-bottom { position: relative; z-index: 1; }
.footer .animate-illustration { position: absolute; right: -14%; bottom: 66px; z-index: 0; pointer-events: none; opacity: .85; }
.footer .animate-illustration img { height: 300px; animation: fadeRightLeft 10s linear infinite; }
@media (max-width: 991px) { .footer .animate-illustration { display: none; } }

.footer .footer-cta {
  background: var(--grad-green); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.6rem); margin-top: -70px; position: relative; z-index: 3;
  box-shadow: var(--shadow-hover);
}
.footer .footer-cta h4 { color: #fff; margin: 0 0 .35rem; }
.footer .footer-cta p { color: rgba(255,255,255,.82); margin: 0; font-size: .88rem; }
.footer-cta__actions .btn-lux { white-space: nowrap; }

.footer h6 {
  color: #fff; font-size: .95rem; letter-spacing: .06em;
  margin-bottom: 1.2rem; position: relative; padding-bottom: .6rem;
}
.footer h6::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 30px; height: 2px; background: var(--gold); border-radius: 2px;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links a {
  color: rgba(255,255,255,.66); display: inline-flex; align-items: center; gap: .5rem;
  padding: .26rem 0; font-size: .86rem; transition: all .3s var(--ease-lux);
}
.footer-links a .bi, .footer-links a i { font-size: .65rem; color: var(--gold); transition: transform .3s var(--ease-lux); }
.footer-links a:hover { color: var(--gold-soft); transform: translateX(4px); }
.footer-links a:hover i { transform: translateX(3px); }
.footer-links a.is-current { color: var(--gold-soft); font-weight: 600; }
.footer-hours li { display: flex; justify-content: space-between; padding: .3rem 0; border-bottom: 1px dashed rgba(255,255,255,.1); font-size: .84rem; }
.footer-hours span:last-child { color: var(--gold-soft); }
.footer-social a {
  display: inline-flex; width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: 12px; background: var(--grad-gold);
  color: #14331f; transition: all .3s var(--ease-lux);
}
.footer-social a:hover { background: rgba(255,255,255,.1); color: #fff; transform: translateY(-4px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); font-size: .8rem; }
.footer-bottom a { color: rgba(255,255,255,.6); }
.footer-bottom a:hover { color: var(--gold-soft); }
.footer a { color: rgba(255,255,255,.72); }
.footer a:hover { color: var(--gold-soft); }

/* ============================================================
   18. FLOATING UI
   ============================================================ */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--grad-gold); z-index: 2000;
}
.social-float {
  position: fixed; top: 50%; right: 0; transform: translateY(-50%);
  z-index: 1150; display: flex; flex-direction: column;
}
.social-float a {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 2px;
  background: var(--grad-green); color: #fff; font-size: 1.05rem;
  border-radius: 10px 0 0 10px;
  box-shadow: -4px 4px 14px -6px rgba(10,40,65,.35);
  transition: all .3s var(--ease-lux);
}
.social-float a:hover { background: var(--grad-gold); color: #eafff2; transform: translateX(-6px); }

.back-to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 1200;
  width: 48px; height: 48px; border-radius: 14px; border: 0;
  background: var(--grad-green); color: #fff; font-size: 1.1rem;
  box-shadow: var(--shadow-hover);
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: all .4s var(--ease-lux);
}
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--grad-gold); color: #eafff2; }

/* mobile sticky action bar */
.mobile-action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1190;
  display: none; gap: .6rem; padding: .6rem .8rem;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid #e6f3ec;
  box-shadow: 0 -10px 30px -18px rgba(10,40,65,.4);
  transform: translateY(120%); transition: transform .4s var(--ease-lux);
}
.mobile-action-bar.show { transform: none; }
.mobile-action-bar a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .8rem .6rem; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: .88rem;
}
.mobile-action-bar .mab-call { background: var(--mist); color: var(--primary); }
.mobile-action-bar .mab-quote { background: var(--grad-green); color: #fff; box-shadow: 0 10px 22px -10px rgba(46,125,50,.6); }

/* preloader */
.preloader {
  position: fixed; inset: 0; z-index: 3000;
  background: #0B1B2A; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
  transition: opacity .6s var(--ease-lux), visibility .6s;
}
.preloader.done { opacity: 0; visibility: hidden; }
.preloader .ring {
  width: 64px; height: 64px; border-radius: 50%;
  border: 3px solid rgba(212,175,55,.2); border-top-color: var(--gold);
  animation: spin 1s linear infinite;
  display: flex; align-items: center; justify-content: center;
}
.preloader .ring .bi { color: var(--secondary); font-size: 1.4rem; animation: spin 1s linear infinite reverse; }
.preloader p { color: rgba(255,255,255,.6); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; margin: 0; }
/* ============================================================
   19. KEYFRAMES
   ============================================================ */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes hero-zoom {
  0%   { transform: scale(1.06); }
  100% { transform: scale(1.16); }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(126, 217, 87, .5); }
  70%  { box-shadow: 0 0 0 12px rgba(126, 217, 87, 0); }
  100% { box-shadow: 0 0 0 0 rgba(126, 217, 87, 0); }
}
@keyframes blob-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, -30px) scale(1.15); }
}
@keyframes bubble-rise {
  0%   { transform: translateY(0) translateX(0) scale(.7); opacity: 0; }
  12%  { opacity: .55; }
  85%  { opacity: .35; }
  100% { transform: translateY(-110vh) translateX(40px) scale(1.1); opacity: 0; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeRightLeft {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-40px); }
  100% { transform: translateX(0); }
}

/* reduced motion — quality floor */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   20. ABOUT PAGE
   ------------------------------------------------------------
   Components used only by /about-us/. Deliberately distinct from
   the service-page layout so the page reads as its own thing.
   All motion is disabled by the reduced-motion block below.
   ============================================================ */

/* ---------- 20a. split hero ---------- */
.about-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 200px 0 120px; color: #fff;
  background: #06251a;               /* base colour under the photo */
}
/* Photo at the very back. The brand gradient that used to be the section
   background moved onto ::after so it can sit *over* the image — that tint
   is what keeps the white headline readable, so it stays heavy. */
.about-hero__bg {
  position: absolute; inset: -90px 0; z-index: -4;
  background-size: cover; background-position: center;
  transform: scale(1.04);
  translate: 0 var(--py, 0px);
}
.about-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background:
    /* the diagonal tint is thinnest at the bottom-right, which is where the
       photo is brightest and the stat chips land — this evens it back out */
    radial-gradient(120% 95% at 100% 100%, rgba(4,26,18,.5), transparent 62%),
    linear-gradient(150deg, rgba(6,37,26,.93) 0%, rgba(11,63,44,.88) 46%, rgba(15,109,66,.8) 100%);
}
.about-hero__orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(70px); opacity: .55; z-index: -1;
  animation: orb-drift 18s ease-in-out infinite alternate;
  translate: 0 var(--py, 0px);
}
.about-hero__orb--a { width: 460px; height: 460px; top: -120px; left: -110px;
  background: radial-gradient(circle, rgba(126,217,87,.55), transparent 68%); }
.about-hero__orb--b { width: 520px; height: 520px; right: -160px; bottom: -180px;
  background: radial-gradient(circle, rgba(0,127,95,.6), transparent 66%);
  animation-duration: 22s; animation-delay: -6s; }
/* faint grid so the flat gradient has some texture */
.about-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 70% at 30% 30%, #000, transparent 78%);
  mask-image: radial-gradient(80% 70% at 30% 30%, #000, transparent 78%);
}

.about-hero h1 {
  color: #fff; font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.9rem);
  line-height: 1.06; letter-spacing: -.02em; margin-bottom: 1.2rem;
}
/* each word animates up in sequence — see .w spans in the markup */
.about-hero h1 .w {
  display: inline-block; opacity: 0;
  transform: translateY(30px) rotate(2deg);
  animation: word-rise .75s var(--ease-lux) forwards;
  animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}
.about-hero h1 em { font-style: normal; }
/* the gradient has to sit on the animated word spans themselves — a
   background-clip:text on the <em> does not paint through to child
   boxes that carry their own transform, so the words vanish. */
.about-hero h1 em .w {
  background: linear-gradient(120deg, #7ED957, #A8E6CF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.about-hero .lead-txt {
  color: rgba(255,255,255,.85); font-size: 1.05rem;
  max-width: 620px; margin-bottom: 2rem;
  opacity: 0; animation: word-rise .8s var(--ease-lux) .55s forwards;
}
.about-hero__cta { opacity: 0; animation: word-rise .8s var(--ease-lux) .7s forwards; }

/* stat chips under the headline */
.about-chips { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.1rem; }
.about-chip {
  display: inline-flex; align-items: center; gap: .6rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
  border-radius: 16px; padding: .7rem 1.1rem;
  opacity: 0; animation: word-rise .7s var(--ease-lux) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 400ms);
  transition: transform .35s var(--ease-lux), background .35s var(--ease-lux);
}
.about-chip:hover { transform: translateY(-4px); background: rgba(126,217,87,.16); }
.about-chip i { color: var(--secondary); font-size: 1.15rem; }
.about-chip .n {
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  line-height: 1; color: #fff;
}
.about-chip .t {
  display: block; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}

/* ---------- 20b. image mosaic ---------- */
.mosaic { position: relative; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.mosaic img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--radius-md);
  box-shadow: 0 26px 60px -24px rgba(0,0,0,.6);
}
.mosaic__a { grid-row: span 2; aspect-ratio: 3/4.5; animation: float-y 7s ease-in-out infinite; }
.mosaic__b { aspect-ratio: 4/3.1; animation: float-y 6s ease-in-out .8s infinite; }
.mosaic__c { aspect-ratio: 4/3.1; animation: float-y 8s ease-in-out 1.6s infinite; }
.mosaic__a, .mosaic__b, .mosaic__c {
  overflow: hidden; border-radius: var(--radius-md);
  /* three different travels — the tiles drift apart as the hero leaves */
  translate: 0 var(--py, 0px);
}
.mosaic__ring {
  position: absolute; inset: -18px -18px auto auto;
  width: 130px; height: 130px; border-radius: 50%;
  border: 2px dashed rgba(126,217,87,.5);
  animation: spin 26s linear infinite; pointer-events: none;
}
.mosaic__badge {
  position: absolute; left: -14px; bottom: 26px; z-index: 3;
  display: flex; align-items: center; gap: .75rem;
  background: var(--grad-green); color: #fff;
  padding: .95rem 1.25rem; border-radius: 18px;
  border: 3px solid rgba(255,255,255,.28);
  box-shadow: 0 20px 44px -14px rgba(0,0,0,.6);
  animation: float-y 5.5s ease-in-out infinite;
}
.mosaic__badge .n { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1; }
.mosaic__badge .t { font-size: .7rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; opacity: .92; line-height: 1.3; }

/* ---------- 20c. infinite marquee ---------- */
.brand-marquee {
  position: relative; overflow: hidden;
  background: var(--dark-green); padding: 1.05rem 0;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.brand-marquee::before, .brand-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.brand-marquee::before { left: 0;  background: linear-gradient(90deg, var(--dark-green), transparent); }
.brand-marquee::after  { right: 0; background: linear-gradient(270deg, var(--dark-green), transparent); }
.brand-marquee__track {
  display: flex; align-items: center; gap: 2.6rem;
  width: max-content; animation: marquee 32s linear infinite;
}
.brand-marquee:hover .brand-marquee__track { animation-play-state: paused; }
.brand-marquee__track span {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: .03em; white-space: nowrap; color: rgba(255,255,255,.88);
}
.brand-marquee__track i { color: var(--secondary); font-size: .8rem; }

/* ---------- 20d. value tiles ---------- */
.value-tile {
  position: relative; height: 100%; overflow: hidden;
  background: #fff; border: 1px solid #e8f5ee; border-radius: 22px;
  padding: 2rem 1.5rem 1.6rem;
  box-shadow: 0 12px 32px -22px rgba(18,48,24,.4);
  transition: transform .45s var(--ease-lux), box-shadow .45s, border-color .45s;
}
.value-tile__num {
  position: absolute; top: -18px; right: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 5.2rem; line-height: 1;
  color: rgba(0,127,95,.07); pointer-events: none;
  transition: color .45s var(--ease-lux), transform .45s var(--ease-lux);
}
.value-tile:hover { transform: translateY(-10px); box-shadow: var(--shadow-hover); border-color: rgba(126,217,87,.55); }
.value-tile:hover .value-tile__num { color: rgba(126,217,87,.18); transform: scale(1.08); }
.value-tile__icon {
  width: 56px; height: 56px; border-radius: 18px; margin-bottom: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mist); color: var(--primary); font-size: 1.45rem;
  transition: all .45s var(--ease-lux);
}
.value-tile:hover .value-tile__icon {
  background: var(--grad-green); color: #fff;
  transform: rotate(-8deg) scale(1.07);
  box-shadow: 0 14px 26px -10px rgba(46,125,50,.6);
}
.value-tile h5 { font-size: 1.05rem; margin-bottom: .4rem; position: relative; }
.value-tile p { font-size: .86rem; color: var(--muted); margin: 0; line-height: 1.62; position: relative; }

/* ---------- 20e. timeline ---------- */
.timeline { position: relative; }
.timeline__rail {
  position: absolute; left: 25px; top: 8px; bottom: 8px; width: 3px;
  background: #e2f0e8; border-radius: 3px;
}
.timeline__rail span {           /* fills as you scroll (set by subpage.js) */
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: var(--grad-green); border-radius: 3px;
  transition: height .15s linear;
}
.tl-item { position: relative; padding: 0 0 2.4rem 76px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item__dot {
  position: absolute; left: 0; top: 0;
  width: 53px; height: 53px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px dashed rgba(76,175,80,.5);
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  color: var(--primary); z-index: 2;
  transition: all .45s var(--ease-lux);
}
.tl-item.is-live .tl-item__dot {
  background: var(--grad-green); color: #fff; border-color: transparent;
  box-shadow: 0 12px 26px -10px rgba(46,125,50,.65);
  transform: scale(1.06);
}
.tl-item__card {
  background: #fff; border: 1px solid #e8f5ee; border-radius: 18px;
  padding: 1.2rem 1.35rem;
  box-shadow: 0 10px 26px -18px rgba(18,48,24,.3);
  transition: transform .4s var(--ease-lux), box-shadow .4s;
}
.tl-item:hover .tl-item__card { transform: translateX(6px); box-shadow: var(--shadow-card); }
.tl-item__card h6 { font-size: 1rem; margin-bottom: .25rem; }
.tl-item__card p { font-size: .86rem; color: var(--muted); margin: 0; line-height: 1.62; }

/* ---------- 20f. service deck (About page) ----------------------------
   An asymmetric bento rather than a uniform card grid: two photo-backed
   feature tiles anchor the block, six compact tiles fill around them, and
   the last tile is a solid-gradient CTA so "not sure which?" reads as an
   action instead of an eighth service.                                  */
.our-services {
  position: relative; overflow: hidden;
  background:
    radial-gradient(56% 50% at 8% 4%, rgba(126,217,87,.26), transparent 62%),
    radial-gradient(50% 46% at 96% 92%, rgba(0,127,95,.2), transparent 64%),
    linear-gradient(180deg, #eef8f2, #f7fcf9 55%, #eef8f2);
}

.svc-deck {
  display: grid; gap: 16px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(162px, auto);
}

.deck-tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 1.55rem 1.45rem;
  border-radius: 22px; border: 1px solid #e4f2ea; background: #fff;
  color: var(--dark-green); text-decoration: none;
  box-shadow: 0 14px 34px -26px rgba(18,48,24,.5);
  transition: transform .5s var(--ease-lux), box-shadow .5s var(--ease-lux),
              border-color .45s, color .45s;
}
/* the brand gradient sweeps up from the bottom edge on hover and the tile
   inverts to white text — the whole card reacts, not just an underline */
.deck-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(140deg, #072a1d, #0a5c42 55%, #0f7d55);
  opacity: 0; transform: translateY(42%) scale(1.12);
  transition: opacity .5s var(--ease-lux), transform .6s var(--ease-lux);
}
.deck-tile:hover,
.deck-tile:focus-visible {
  transform: translateY(-8px); color: #fff; border-color: transparent;
  box-shadow: 0 30px 62px -26px rgba(0,127,95,.6);
}
.deck-tile:hover::before,
.deck-tile:focus-visible::before { opacity: 1; transform: none; }

/* oversized icon watermark, bled off the bottom-right corner */
.deck-tile__ghost {
  position: absolute; right: -14px; bottom: -22px; z-index: -1;
  font-size: 6.2rem; line-height: 1; color: var(--primary); opacity: .07;
  transition: transform .65s var(--ease-lux), opacity .5s, color .5s;
}
.deck-tile:hover .deck-tile__ghost {
  transform: rotate(-12deg) scale(1.12); opacity: .16; color: #fff;
}

.deck-tile__icon {
  width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mist); color: var(--primary); font-size: 1.2rem;
  transition: background .45s, color .45s, transform .45s var(--ease-lux);
}
.deck-tile:hover .deck-tile__icon {
  background: rgba(255,255,255,.18); color: #fff; transform: rotate(-8deg);
}

/* margin-top:auto pins the icon to the top and the copy to the bottom,
   so tiles of different heights still line up along their text */
.deck-tile__body { margin-top: auto; padding-top: 1.1rem; }
.deck-tile h3 {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 700;
  color: inherit; margin: 0 0 .3rem;
}
.deck-tile p {
  font-size: .84rem; line-height: 1.6; margin: 0; color: var(--muted);
  transition: color .45s;
}
.deck-tile:hover p { color: rgba(255,255,255,.92); }   /* .86 landed under 4.5:1 on the lightest end of the ramp */

.deck-tile__arrow {
  position: absolute; top: 1.5rem; right: 1.45rem; z-index: 1;
  font-size: .95rem; color: var(--primary); opacity: .4;
  transition: transform .45s var(--ease-lux), opacity .45s, color .45s;
}
.deck-tile:hover .deck-tile__arrow {
  opacity: 1; color: #fff; transform: translate(4px, -4px) rotate(-45deg);
}

/* ---- photo feature tiles ---- */
.deck-tile--feature { padding: 0; border-color: transparent; color: #fff; }
.deck-tile--feature::before { display: none; }        /* photo, not gradient */
.deck-tile--feature .deck-tile__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease-lux);
}
.deck-tile--feature:hover .deck-tile__img { transform: scale(1.07); }
.deck-tile--feature .deck-tile__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(188deg, rgba(6,37,26,.12) 0%, rgba(6,37,26,.7) 52%, rgba(4,26,18,.95) 100%);
  transition: background .5s;
}
.deck-tile--feature:hover .deck-tile__scrim {
  background: linear-gradient(188deg, rgba(6,37,26,.28) 0%, rgba(7,60,42,.8) 52%, rgba(4,26,18,.96) 100%);
}
.deck-tile--feature .deck-tile__body {
  padding: 1.9rem 1.75rem; margin-top: auto;
}
.deck-tile--feature h3 { font-size: clamp(1.3rem, 2.3vw, 1.85rem); margin-bottom: .5rem; }
.deck-tile--feature p { color: rgba(255,255,255,.84); font-size: .92rem; max-width: 44ch; }
.deck-tile--feature:hover p { color: rgba(255,255,255,.92); }

.deck-tile__tag {
  display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .9rem;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  color: #fff; font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .42rem .9rem; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.deck-tile__go {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.05rem;
  font-weight: 600; font-size: .86rem; color: var(--secondary);
}
.deck-tile__go i { transition: transform .45s var(--ease-lux); }
.deck-tile--feature:hover .deck-tile__go i { transform: translateX(7px); }

/* ---- closing CTA tile ---- */
.deck-tile--cta {
  border-color: transparent; color: #fff;
  background: linear-gradient(140deg, #072a1d, #0a5c42 58%, #12855c);
}
.deck-tile--cta::before { display: none; }
/* slow sheen so the one solid tile is not a dead rectangle */
.deck-tile--cta::after {
  content: ""; position: absolute; inset: -45%; z-index: -1;
  background: radial-gradient(circle at 32% 22%, rgba(255,255,255,.28), transparent 55%);
  animation: cta-sheen 11s ease-in-out infinite alternate;
}
.deck-tile--cta p { color: rgba(255,255,255,.85); }
.deck-tile--cta .deck-tile__icon { background: rgba(255,255,255,.2); color: #fff; }
.deck-tile--cta .deck-tile__ghost { color: #fff; opacity: .14; }
.deck-tile--cta .deck-tile__arrow { color: #fff; opacity: .85; }
.deck-tile--cta:hover { transform: translateY(-8px); box-shadow: 0 30px 62px -26px rgba(0,127,95,.65); }

/* ---- bento placement ---- */
@media (min-width: 992px) {
  /* rows 1-2   lead (6) | deep (3) | end-of-lease (3)
                lead     | move-in (3) | ndis (3)
     rows 3-4   general (7) | apartment (5)
                general     | cta (5)
     Both feature tiles span two rows, so every row is the same height and
     no small tile gets stretched to fill a taller neighbour's row. */
  .deck-tile        { grid-column: span 3; }
  .deck-tile--lead  { grid-column: span 6; grid-row: span 2; }
  .deck-tile--wide  { grid-column: span 7; grid-row: span 2; }
  .deck-tile--half  { grid-column: span 5; }
  .deck-tile--cta   { grid-column: span 5; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .deck-tile       { grid-column: span 6; }
  .deck-tile--lead { grid-column: span 12; min-height: 300px; }
  .deck-tile--wide { grid-column: span 12; min-height: 250px; }
}
@media (max-width: 767.98px) {
  .svc-deck { gap: 13px; grid-auto-rows: minmax(0, auto); }
  .deck-tile { grid-column: span 12; }
  .deck-tile--feature { min-height: 268px; }
  .deck-tile__ghost { font-size: 5rem; }
}

/* ---------- 20g. about keyframes ---------- */
@keyframes word-rise {
  to { opacity: 1; transform: none; }
}
@keyframes orb-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(60px, -40px) scale(1.18); }
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}
@keyframes cta-sheen {
  to { transform: translate(26%, 18%); }
}

/* ---------- 20h. about responsive ---------- */
@media (max-width: 991.98px) {
  .about-hero { padding: 150px 0 100px; text-align: center; }
  .about-hero .lead-txt { margin-inline: auto; }
  .about-chips, .about-hero__cta { justify-content: center; }
  .mosaic { max-width: 500px; margin: 2.5rem auto 0; }
  .mosaic__badge { left: 0; }
}
@media (max-width: 767.98px) {
  .about-hero { padding: 128px 0 84px; }
  .about-hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .about-hero__cta { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; }
  .about-hero__cta .btn-lux { justify-content: center; }
  .about-chip { padding: .6rem .9rem; }
  .tl-item { padding-left: 62px; }
  .timeline__rail { left: 21px; }
  .tl-item__dot { width: 45px; height: 45px; font-size: 1rem; }
  .value-tile { padding: 1.7rem 1.25rem 1.35rem; }
  .value-tile__num { font-size: 4.2rem; }
}

/* motion off for anyone who asks for it */
@media (prefers-reduced-motion: reduce) {
  /* the driver never starts under reduced motion, but pin the offset to 0
     in case a stale --py survives a preference change mid-session */
  [data-parallax] { --py: 0px !important; }
  .about-hero h1 .w,
  .about-hero .lead-txt,
  .about-hero__cta,
  .about-chip { opacity: 1 !important; transform: none !important; animation: none !important; }
  .brand-marquee__track { animation: none !important; }
  .mosaic__a, .mosaic__b, .mosaic__c, .mosaic__ring, .mosaic__badge { animation: none !important; }
  .deck-tile--cta::after { animation: none !important; }
  .deck-tile:hover { transform: none !important; }
}

/* ============================================================
   21. BLOG
   ------------------------------------------------------------
   Listing cards (/blog/) and the article layout (/blog/<slug>/).
   The post hero reuses .svc-hero, so it inherits the parallax
   and glow that every other inner page already has.
   ============================================================ */

/* ---------- 21a. listing ---------- */
.blog-banner .lead-txt { max-width: 60ch; }
.blog-banner .breadcrumb-lux { justify-content: center; }

.blog-grid {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.blog-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); max-width: 900px; margin-inline: auto; }

.blog-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: #fff; border: 1px solid #e4f2ea; border-radius: 22px;
  box-shadow: 0 14px 34px -26px rgba(18,48,24,.5);
  transition: transform .5s var(--ease-lux), box-shadow .5s var(--ease-lux), border-color .45s;
}
.blog-card:hover,
.blog-card:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 30px 62px -26px rgba(0,127,95,.45);
  border-color: rgba(126,217,87,.55);
}
.blog-card__media {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--mist);
}
.blog-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s var(--ease-lux);
}
.blog-card:hover .blog-card__media img { transform: scale(1.07); }
.blog-card__cat {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--grad-green); color: #fff;
  font-size: .67rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  padding: .4rem .8rem; border-radius: 999px;
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.6);
}
.blog-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.4rem 1.6rem; }

/* shared by the card meta row and the post hero meta row */
.blog-meta, .post-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .7rem;
  font-size: .78rem; color: var(--muted); margin-bottom: .75rem;
}
.blog-meta i, .post-meta i { color: var(--primary); margin-right: .3rem; }
.blog-meta .dot, .post-meta .dot {
  width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .45;
}

.blog-card h2, .blog-card h3 {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
  line-height: 1.38; margin: 0 0 .55rem;
}
.blog-card--sm h3 { font-size: 1.02rem; }
.blog-card h2 a, .blog-card h3 a { color: var(--ink); transition: color .35s; }
.blog-card:hover h2 a, .blog-card:hover h3 a { color: var(--primary); }
.blog-card p { font-size: .86rem; line-height: 1.68; color: var(--muted); margin: 0 0 1.15rem; }
.blog-card__go {
  margin-top: auto; display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .85rem; color: var(--primary);
}
.blog-card__go i { transition: transform .4s var(--ease-lux); }
.blog-card:hover .blog-card__go i { transform: translateX(6px); }

/* ---------- 21b. article ---------- */
.post-hero .post-meta { color: rgba(255,255,255,.8); margin-top: 1.2rem; margin-bottom: 0; }
.post-hero .post-meta i { color: var(--secondary); }
.post-hero h1 em { font-style: normal; color: var(--secondary); }

.blog-article { padding-top: 78px; }
.post-body { max-width: 74ch; }
.post-body > :first-child { margin-top: 0; }
.post-body p {
  font-size: 1rem; line-height: 1.85; color: #3d4c57; margin: 0 0 1.15rem;
}
.post-body h2 {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: clamp(1.35rem, 2.6vw, 1.72rem);
  margin: 2.7rem 0 .9rem; padding-left: 1rem; position: relative;
}
.post-body h2::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 4px; background: var(--grad-green);
}
.post-body h3 {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: 1.08rem; margin: 1.9rem 0 .6rem;
}
.post-body ul { list-style: none; padding: 0; margin: 0 0 1.3rem; }
.post-body ul li {
  position: relative; padding-left: 1.65rem; margin-bottom: .62rem;
  font-size: .96rem; line-height: 1.75; color: #3d4c57;
}
/* drawn marker rather than an icon-font glyph, so the list never depends
   on bootstrap-icons having loaded */
.post-body ul li::before {
  content: ""; position: absolute; left: .1rem; top: .62em;
  width: 8px; height: 8px; border-radius: 3px; background: var(--grad-green);
}
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body a {
  color: var(--primary); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(0,127,95,.35);
  transition: color .3s, text-decoration-color .3s;
}
.post-body a:hover { color: var(--gold); text-decoration-color: currentColor; }

.post-callout {
  background: var(--mist); border-left: 4px solid var(--primary);
  border-radius: 0 18px 18px 0; padding: 1.3rem 1.45rem; margin: 1.9rem 0;
}
.post-callout p { margin: 0; font-size: .95rem; line-height: 1.75; }

.post-foot {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #e4f2ea;
}
/* .btn-ghost is white-on-dark; articles sit on a light page */
.btn-lux.btn-ghost-dark {
  background: transparent; color: var(--ink);
  border: 1px solid rgba(12,35,64,.18);
}
.btn-lux.btn-ghost-dark:hover {
  background: var(--ink); border-color: var(--ink); color: #fff;
}

/* ---------- 21c. article aside (sticky topics rail) ---------- */
/* sticky works here because nothing between .post-aside and the viewport
   sets overflow:hidden, and the rail is far shorter than the article */
.post-aside { position: sticky; top: 96px; display: grid; gap: 20px; }

.post-toc,
.blog-widget {
  background: #fff; border: 1px solid #e4f2ea; border-radius: 20px;
  padding: 1.4rem 1.35rem;
  box-shadow: 0 14px 34px -28px rgba(18,48,24,.5);
}
.post-toc h4,
.blog-widget h4 {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  margin: 0 0 .95rem; padding-bottom: .85rem; border-bottom: 1px solid #eef6f1;
}
.post-toc h4 i, .blog-widget h4 i { color: var(--primary); font-size: 1rem; }
.post-toc ul { list-style: none; margin: 0; padding: 0; }
.post-toc li + li { margin-top: .12rem; }
.post-toc a {
  display: block; position: relative;
  padding: .5rem .6rem .5rem .95rem; border-radius: 10px;
  font-size: .85rem; line-height: 1.5; color: var(--muted);
  transition: color .3s, background .3s;
}
.post-toc a::before {
  content: ""; position: absolute; left: 0; top: .75rem; bottom: .75rem;
  width: 3px; border-radius: 3px; background: var(--grad-green);
  opacity: 0; transition: opacity .3s, top .3s, bottom .3s;
}
.post-toc a:hover { color: var(--primary); background: var(--mist); }
.post-toc a.is-active { color: var(--primary); font-weight: 600; background: var(--mist); }
.post-toc a.is-active::before { opacity: 1; top: .45rem; bottom: .45rem; }

.aside-cta {
  background: linear-gradient(140deg, #072a1d, #0a5c42 58%, #12855c);
  color: #fff; border-radius: 20px; padding: 1.6rem 1.4rem; text-align: center;
}
.aside-cta__icon {
  width: 52px; height: 52px; border-radius: 16px; margin: 0 auto .9rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); font-size: 1.3rem;
}
.aside-cta h5 {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  color: #fff; margin-bottom: .5rem;
}
.aside-cta p { font-size: .84rem; line-height: 1.65; color: rgba(255,255,255,.85); margin-bottom: 1.1rem; }
.aside-cta__tel {
  display: block; margin-top: .9rem; color: #fff; font-weight: 600;
  font-size: .95rem; font-family: var(--font-display);
}
.aside-cta__tel:hover { color: var(--secondary); }

/* ---------- 21d. recent-posts widget ---------- */
.recent-list { list-style: none; margin: 0; padding: 0; }
.recent-list li + li { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid #eef6f1; }
.recent-list a { display: flex; gap: .85rem; align-items: center; }
.recent-thumb {
  flex: 0 0 68px; width: 68px; height: 68px;
  border-radius: 14px; overflow: hidden; background: var(--mist);
}
.recent-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease-lux);
}
.recent-list a:hover .recent-thumb img { transform: scale(1.09); }
.recent-txt { display: flex; flex-direction: column; gap: .3rem; }
.recent-title {
  font-family: var(--font-display); font-size: .88rem; font-weight: 600;
  line-height: 1.4; color: var(--ink); transition: color .3s;
}
.recent-list a:hover .recent-title { color: var(--primary); }
.recent-date { font-size: .74rem; color: var(--muted); }
.recent-date i { color: var(--primary); margin-right: .3rem; }

/* ---------- 21e. listing rows (narrow column beside the sidebar) ---------- */
.blog-grid--rows { grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 576px) {
  /* .blog-card is a flex column by default; turning it on its side keeps
     every other card style working unchanged */
  .blog-card--row { flex-direction: row; }
  .blog-card--row .blog-card__media { flex: 0 0 38%; aspect-ratio: auto; min-height: 230px; }
  .blog-card--row .blog-card__body { padding: 1.6rem 1.7rem; }
  .blog-card--row h2 { font-size: 1.22rem; }
  .blog-card--row p { font-size: .88rem; }
}

/* ---------- 21f. in-article figure ---------- */
.post-figure { margin: 2.1rem 0 2.3rem; }
.post-figure img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: 20px; box-shadow: 0 26px 60px -34px rgba(18,48,24,.6);
}
.post-figure figcaption {
  position: relative; margin-top: .85rem; padding-left: .9rem;
  font-size: .82rem; line-height: 1.6; color: var(--muted);
}
.post-figure figcaption::before {
  content: ""; position: absolute; left: 0; top: .28em; bottom: .28em;
  width: 3px; border-radius: 3px; background: var(--secondary);
}

/* ---------- 21g. blog responsive ---------- */
@media (max-width: 991.98px) {
  .blog-article { padding-top: 60px; }
  .post-body { max-width: none; }
  /* the rail reads as a jump-list above the article on a phone; the CTA is
     dropped because the page already ends with one plus the sticky bar */
  .blog-article aside { order: -1; }
  .post-aside { position: static; }
  .blog-article .aside-cta { display: none; }
}
@media (max-width: 575.98px) {
  .blog-card__body { padding: 1.25rem 1.15rem 1.4rem; }
  .post-body h2 { margin-top: 2.1rem; }
  .post-foot .btn-lux { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-card:hover { transform: none !important; }
  .blog-card:hover .blog-card__media img { transform: none !important; }
}

/* ============================================================
   22. RESPONSIVE
   ============================================================ */
@media (max-width: 1199.98px) {
  .main-nav .nav-link { padding: .5rem .75rem !important; }
  .main-nav .nav-link::after { left: .75rem; right: .75rem; bottom: .1rem; }
  .svc-hero { padding: 190px 0 120px; }
}

@media (max-width: 991.98px) {
  .section { padding: 80px 0; }
  .section-tight { padding: 64px 0; }

  .site-header:not(.scrolled) { top: 36px; }
  .site-header.scrolled { top: 0; }

  .svc-hero { padding: 150px 0 110px; text-align: center; }
  .svc-hero .lead-txt { margin-inline: auto; }
  .svc-hero .breadcrumb-lux, .svc-hero .hero-pills { justify-content: center; }
  .svc-hero .hero-btns { justify-content: center; }
  .hero-facts { margin-top: 2.4rem; text-align: left; animation: none; max-width: 420px; margin-inline: auto; }

  .quick-quote { margin-top: -48px; }
  .qq-card { padding: 1.8rem 1.6rem 1.6rem; }
  .qq-head { align-items: flex-start; }


  .ov-collage { max-width: 520px; margin-inline: auto; padding-right: 20px; }
  .why-visual { max-width: 480px; margin: 0 auto; }

  /* A horizontal scroller hid tabs 3-5 off-screen with no scrollbar to hint at
     them, so wrap into a 2-up grid instead — every tab stays visible. */
  .inc-tabs {
    padding: 1rem;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem;
  }
  .inc-tabs .inc-tab {
    width: 100%; margin-bottom: 0; padding: .6rem .75rem;
    font-size: .86rem; line-height: 1.3;
    white-space: normal; text-align: left;
  }
  .inc-tabs .inc-tab:last-child { grid-column: 1 / -1; }
  .inc-tabs .inc-tab i { width: 30px; height: 30px; font-size: .9rem; }
  .inc-tabs .inc-tab .cnt { display: none; }
  .inc-panels { padding: 1.6rem 1.4rem; }



  .counter-band { padding: 74px 0; }
  .contact-info-pane { border-radius: 0; }
  .contact-map { min-height: 340px; }
}

@media (max-width: 767.98px) {
  :root { --header-h: 72px; }
  .section { padding: 62px 0; }
  .section-tight { padding: 52px 0; }

  .topbar .topbar-right { display: none !important; }

  .svc-hero { padding: 128px 0 96px; }
  .svc-hero h1 { font-size: clamp(1.85rem, 8vw, 2.5rem); }
  .svc-hero .lead-txt { font-size: .93rem; }
  .svc-hero .hero-btns { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; }
  .svc-hero .hero-btns .btn-lux { justify-content: center; }
  .svc-hero .hero-wave svg { height: 44px; }

  .site-header .navbar-brand img { height: 44px; }
  .site-header.scrolled .navbar-brand img { height: 38px; }

  .sec-title { font-size: 1.7rem; }

  .quick-quote { margin-top: 26px; }
  .qq-card { padding: 1.5rem 1.2rem 1.4rem; border-radius: var(--radius-md); }
  .qq-head { gap: 1.1rem; padding-bottom: 1.1rem; margin-bottom: 1.2rem; }
  .qq-head h2 { font-size: 1.45rem; }
  .qq-note { justify-content: center; text-align: center; }


  .inc-panels { padding: 1.4rem 1.1rem; }


  .cta-glass { text-align: center; }
  .cta-glass .cta-actions { justify-content: center !important; }

  .footer .footer-cta { margin-top: -50px; text-align: center; }
  .footer-cta__actions { justify-content: center !important; margin-top: 1.2rem; }
  .footer-cta__actions .btn-lux { flex: 1 1 auto; justify-content: center; }


  .mobile-action-bar { display: flex; }
  body { padding-bottom: 70px; }
  .back-to-top { right: 14px; bottom: 82px; }
  .social-float a { width: 36px; height: 36px; font-size: .92rem; }
}

@media (max-width: 420px) {
  .btn-lux { padding: .85rem 1.6rem; font-size: .88rem; }
  .stat-item .num { font-size: 1.9rem; }
  .mobile-contact-strip .mcs-item span { max-width: 118px; }
  .social-float a { width: 32px; height: 32px; font-size: .82rem; }
  .ov-collage .ov-badge { left: 0; padding: .8rem 1rem; }
}