/* ==========================================================================
   GreenLeaf Care Template - Premium Redesign
   Inspired by Coran, Crafto & Govity premium templates
   ========================================================================== */

:root {
    /* ── Brand Palette — Built around logo green #57ba47 ── */
    --primary-color: #57ba47;
    --primary-light: #6fce5f;
    --primary-dark: #3d8a32;
    --primary-rgb: 87, 186, 71;
    --primary-glow: rgba(87, 186, 71, 0.12);

    --secondary-color: #2f6b3a;
    --accent-color: #a7e88f;

    /* ── Tailwind-inspired Green Scale (anchored on #57ba47) ── */
    --green-50:  #f0fdf0;
    --green-100: #dcfce4;
    --green-200: #bbf7c8;
    --green-300: #86efac;
    --green-400: #6fce5f;
    --green-500: #57ba47;
    --green-600: #47a339;
    --green-700: #3d8a32;
    --green-800: #2f6b3a;
    --green-900: #1a4023;
    --green-950: #0f2914;

    /* Warm Complement */
    --orange-color: #f59e0b;
    --orange-light: #fbbf24;
    --orange-dark: #d97706;

    /* Neutrals — Slate scale for readability */
    --heading-color: #1e293b;
    --text-color: #475569;
    --text-muted: #64748b;
    --text-light: #ffffff;

    --bg-color: #ffffff;
    --bg-light: #f5f7f6;
    --bg-dark: #111923;
    --bg-darker: #0a1018;
    --bg-card: #ffffff;

    --border-color: #e2e8ed;
    --border-light: #e0ebe3;

    /* ── Derived / Tinted backgrounds ── */
    --bg-primary-tint: #f0faf0;
    --bg-primary-tint-2: #e8f5e4;
    --bg-accent-tint: #d4f0ce;
    --bg-warm-tint: #fef9f0;
    --bg-warm-tint-2: #fef3e2;
    --bg-footer-gradient-end: #1a3d2e;
    --bg-separator: #e9ecef;
    --text-dim: #b0b5bd;

    /* ── Shadow Scale (Crafto-inspired progressive) ── */
    --shadow-xs: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-sm: 0 0 18px rgba(72,199,50,0.15);
    --shadow-md: 0 0 32px rgba(72,199,50,0.20);
    --shadow-lg: 0 0 48px rgba(72,199,50,0.22);
    --shadow-xl: 0 0 64px rgba(72,199,50,0.25);
    --shadow-card: 0 0 20px rgba(72,199,50,0.12);
    --shadow-card-hover: 0 0 48px rgba(72,199,50,0.30);

    /* ── Radius ── */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-pill: 50px;

    /* ── Typography — Lato body + Plus Jakarta Sans headings ── */
    --heading-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --body-font: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ── Spacing ── */
    --section-py: 110px;
    --section-py-sm: 80px;
    --container-max: min(1440px, 92vw);

    /* ── Transitions ── */
    --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   Long Arrow Utility
   ========================================================================== */
.long-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0;
    position: relative;
    width: 28px;
    height: 1em;
    vertical-align: middle;
    margin-left: 6px;
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.long-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transform: translateY(-50%);
}
.long-arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}
a:hover .long-arrow,
button:hover .long-arrow {
    width: 38px;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

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

html {
    font-size: 16px; /* fixed root — all rem values now predictable like Alex */
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--body-font);
    color: var(--text-color);
    background: var(--bg-color);
    line-height: 1.75;
    font-size: 1.175rem;
    font-weight: 400;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/* Mobile nav close button & overlay — hidden on desktop, visible on mobile only */
.nav-close { display: none; }
.nav-overlay { display: none; }
@media (max-width: 991px) {
    .nav-close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--green-50);
        border: 2px solid var(--green-200);
        color: var(--green-800);
        font-size: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 2001;
        transition: all 0.2s ease;
    }
    .nav-close:hover {
        background: var(--green-100);
        border-color: var(--green-400);
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    color: var(--heading-color);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

h1 { font-size: 3.25rem; }
h2 { font-size: 2.75rem; }
h3 { font-size: 2.1rem; }
h4 { font-size: 1.65rem; }
h5 { font-size: 1.35rem; }
h6 { font-size: 1.1rem; }

/* ── PSBuilder Image Wrapper & Blob Background Support ── */
.psb-img-wrapper {
    position: relative;
    display: inline-block;
    line-height: 0;
    z-index: 0;           /* creates stacking context so z-index:-1 blob stays visible */
    overflow: visible;     /* let the blob extend beyond the image bounds */
}
.psb-img-wrapper img {
    position: relative;
    z-index: 1;            /* image sits above the blob */
    display: block;
    max-width: 100%;
    height: auto;
}
.psb-img-blob {
    position: absolute;
    pointer-events: none;
    z-index: 0;            /* behind image (z:1) but above wrapper background */
}
.psb-img-blob svg {
    width: 100%;
    height: 100%;
    display: block;
}
.psb-img-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;            /* overlay sits above image */
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}
a:hover {
    color: var(--primary-light);
}

/* ── Wide Fluid Container — scales with viewport ── */
.container {
    max-width: var(--container-max) !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1rem, 3vw, 2.5rem);
    padding-right: clamp(1rem, 3vw, 2.5rem);
}

img {
    max-width: 100%;
    height: auto;
}

.text-accent {
    color: var(--primary-color);
}

/* ── Section Common ── */
.section {
    padding: var(--section-py) 0;
    position: relative;
}

.bg-light {
    background-color: var(--bg-light) !important;
}

.bg-pattern {
    background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.03) 1px, transparent 0);
    background-size: 32px 32px;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--green-50), var(--green-100));
    color: var(--green-700);
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--body-font);
    margin-bottom: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--green-200);
}

.section-header {
    max-width: min(720px, 85vw);
    margin: 0 auto 20px;
}
.section-header h2 { margin-bottom: 16px; }
.section-header p { color: var(--text-muted); font-size: 1.125rem; }

/* ==========================================================================
   Buttons — Premium hover with slide reveal
   ========================================================================== */

.btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    padding: 14px 32px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    z-index: 1;
    letter-spacing: 0.01em;
}
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--primary-dark);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}
.btn-primary:hover {
    background: var(--primary-color);
    border-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.35);
}
.btn-primary:hover::before { left: 0; }

.btn-outline-light {
    padding: 14px 32px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    border-width: 2px;
    transition: var(--transition);
}
.btn-outline-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255,255,255,0.15);
}

.btn-light { transition: var(--transition); }
.btn-light:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-lg {
    padding: 16px 36px !important;
    font-size: 1rem !important;
}

/* ==========================================================================
   Header — Floating content-width with mega menu (Govity-inspired)
   ========================================================================== */

/* --- Top Bar (full width) --- */
.top-bar {
    background: var(--bg-dark);
    color: rgba(255,255,255,0.7);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
}
.top-bar .container {
    padding-top: 9px;
    padding-bottom: 9px;
}
.top-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
}
.top-bar__item:hover { color: var(--text-light); }
.top-bar__item i { color: var(--primary-color); font-size: 0.75rem; }
.top-bar__left { gap: 28px; }
.top-bar__right { gap: 24px; }
.top-bar__left .top-bar__item + .top-bar__item::before {
    content: '';
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.18);
    margin-right: 4px;
    display: inline-block;
    vertical-align: middle;
}

/* --- Floating Nav Wrapper --- */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    width: 100%;
}
.site-header.scrolled {
    position: fixed;
    animation: headerSlideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header.scrolled .top-bar { display: none !important; }
.site-header.scrolled .main-nav {
    margin: 0;
    border-radius: 0;
    max-width: 100%;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}
@keyframes headerSlideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* --- Main Nav (floating container-width bar) --- */
.main-nav {
    position: relative;
    background: var(--bg-color);
    max-width: min(1480px, 94vw);   /* fluid — scales with viewport */
    margin: 10px auto 0;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 40px rgba(0,0,0,0.08);
    padding: 0 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
}
/* When mega-menu is open, keep the nav bar corners rounded since dropdown is narrower */
.main-nav:has(.nav-item.has-mega:hover) {
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.main-nav .container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
}

/* Desktop nav — horizontal flex row, always visible */
.nav-collapse {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

/* Logo */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--heading-color) !important;
    font-family: var(--heading-font);
    letter-spacing: -0.02em;
    text-decoration: none;
    padding: 12px 0;
    margin-right: 0;
    flex-shrink: 0;
}
.navbar-logo {
    height: 50px;
    width: auto;
    max-width: 200px;
    transition: var(--transition);
}
.site-header.scrolled .navbar-logo { height: 42px; }

/* Nav Links */
.navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.navbar-nav .nav-item { position: relative; }
.navbar-nav .nav-link {
    display: block;
    color: var(--heading-color);
    font-weight: 600;
    padding: 0.5px 12px !important;
    margin: 18px 2px;
    font-size: 0.9062rem;
    position: relative;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    letter-spacing: -0.005em;
    text-decoration: none;
    text-transform: capitalize;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--primary-color);
    border-color: rgba(87,186,71,0.35);
}

/* Dropdown Arrow */
.navbar-nav .dropdown-toggle::after {
    border: none;
    content: '\F282';
    font-family: 'bootstrap-icons';
    font-size: 0.625rem;
    vertical-align: middle;
    margin-left: 4px;
    transition: transform 0.3s ease;
}
.navbar-nav .dropdown:hover .dropdown-toggle::after { transform: rotate(180deg); }

/* ─── Mega Menu ─── */

/* Break out of nav-item — position relative to .main-nav instead */
.nav-item.has-mega {
    position: static !important;
}

.mega-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max(680px, min(900px, 90%));
    background: var(--bg-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.12),
               -4px 0 20px rgba(0,0,0,0.04),
                4px 0 20px rgba(0,0,0,0.04);
    padding: 0;
    border: 1px solid rgba(0,0,0,0.06);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    z-index: 1050;
    display: flex;
}

/* Hover bridge — seamless transition from nav-link to dropdown */
.mega-menu::before {
    content: '';
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: 24px;
}

.nav-item.has-mega:hover > .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Services grid — left side */
.mega-menu__body {
    flex: 1;
    min-width: 0;
    padding: 20px 24px 16px;
}
.mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}
.mega-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
    color: var(--text-color);
}
.mega-menu__item:hover {
    background: var(--bg-light);
    color: var(--heading-color);
    transform: translateX(4px);
    box-shadow: -2px 0 0 0 var(--primary-color);
}
.mega-menu__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(88, 186, 71, 0.08);
    color: var(--primary-color);
    font-size: 0.9375rem;
    flex-shrink: 0;
    transition: var(--transition);
}
.mega-menu__item:hover .mega-menu__icon {
    background: var(--primary-color);
    color: var(--text-light);
}
.mega-menu__text h4 {
    font-size: 0.8125rem;
    font-weight: 700;
    margin: 0;
    color: var(--heading-color);
    font-family: var(--heading-font);
    line-height: 1.3;
}
.mega-menu__text p {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.3;
}
.mega-menu__footer {
    border-top: 1px solid var(--border-color);
    margin-top: 12px;
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mega-menu__footer a {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}
.mega-menu__footer a:hover { gap: 8px; }
.mega-menu__footer a i { margin-left: 4px; transition: margin 0.3s ease; }
.mega-menu__footer a:hover i { margin-left: 8px; }
.mega-menu__footer-cta {
    display: flex;
    align-items: center;
    gap: 14px;
}
.mega-menu__footer-cta .btn-mega-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    background: var(--primary-color);
    color: var(--text-light);
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.mega-menu__footer-cta .btn-mega-cta:hover {
    background: var(--primary-dark);
    color: var(--text-light);
}
.mega-menu__footer-cta .mega-menu__footer-phone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7188rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
}
.mega-menu__footer-cta .mega-menu__footer-phone i { font-size: 0.6875rem; }
.mega-menu__footer-cta .mega-menu__footer-phone:hover { color: var(--primary-color); }

/* CTA sidebar — hidden, moved to footer */
.mega-menu__cta { display: none; }

/* Standard dropdown fallback (for non-mega items) */
.dropdown-menu {
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    border-radius: var(--radius-md);
    padding: 12px 0;
    margin-top: 0 !important;
    animation: dropdownFade 0.3s ease;
    min-width: 240px;
    top: 100%;
}
@keyframes dropdownFade {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.dropdown-item {
    padding: 10px 24px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color);
    transition: var(--transition);
    border-left: 3px solid transparent;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--bg-light);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
    padding-left: 28px;
}

/* Header Right: Phone + CTA */
.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    padding-left: 16px;
    flex-shrink: 0;
}

.header-phone {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}
.header-phone__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(88, 186, 71, 0.08);
    color: var(--primary-color);
    font-size: 1rem;
    transition: var(--transition);
    flex-shrink: 0;
}
.header-phone:hover .header-phone__icon {
    background: var(--primary-color);
    color: var(--text-light);
}
.header-phone__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.header-phone__label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 500;
}
.header-phone__number {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--heading-color);
    text-decoration: none;
    font-family: var(--heading-font);
    letter-spacing: -0.01em;
}
.header-phone__number:hover { color: var(--primary-color); }

/* CTA Button */
.header-cta {
    display: inline-flex;
    align-items: center;
    padding: 11px 28px;
    background: var(--primary-color);
    color: var(--text-light) !important;
    font-size: 0.8438rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: var(--transition);
    white-space: nowrap;
    text-transform: uppercase;
}
.header-cta:hover {
    background: var(--heading-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Toggler */
.navbar-toggler {
    border: 2px solid var(--border-color);
    font-size: 1.4rem;
    color: var(--heading-color);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: none;
    line-height: 1;
    margin-left: auto;
    display: none;
}
.navbar-toggler:focus { box-shadow: none; outline: none; }

/* ==========================================================================
   Hero Section — Govity-inspired animated slider
   ========================================================================== */

.hero-section {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: center;
    padding-top: 160px !important;     /* clear floating header (top-bar + nav ~120px + breathing room) */
    padding-bottom: 60px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    width: 100%;
    background: var(--green-900);
    box-sizing: border-box;
}
.hero-section--full {
    min-height: 100vh;
}

/* Single background image with subtle Ken Burns */
.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    animation: heroKenBurns 20s ease-out forwards;
}
@keyframes heroKenBurns {
    0%   { transform: scale(1); }
    100% { transform: scale(1.08); }
}

/* Green tint removed — let the photo colours come through naturally */

/* Dark overlay — fully controlled via custom properties:
   --hero-overlay-type:    none | solid | linear | radial
   --hero-overlay-color:   any CSS color (e.g. #000000, #031208)
   --hero-overlay-opacity: 0..1
   --hero-overlay-angle:   0..360 (degrees, for linear gradients)
   --hero-overlay-spread:  10..100 (%, how far the solid color extends)
   --hero-overlay-bg:      computed gradient for desktop
   --hero-overlay-bg-mobile: computed gradient for mobile (forced top→bottom)
*/
.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hero-overlay-bg, linear-gradient(150deg,
        rgba(15, 74, 40, 0.72) 0%,
        rgba(26, 64, 35, 0.42) 35%,
        rgba(87, 186, 71, 0.15) 60%,
        rgba(167, 232, 143, 0.05) 78%,
        transparent 100%));
    z-index: 2;
    opacity: var(--hero-overlay-opacity, 1);
    transition: opacity 0.3s, background 0.3s;
}

/* Decorative shapes (Govity-style) */
.hero-shape {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
}
.hero-shape--1 {
    top: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(87,186,71,0.25) 0%, rgba(111,206,95,0.08) 50%, transparent 70%);
    animation: heroShape1 3s ease-out 0.5s forwards;
}
.hero-shape--2 {
    bottom: -60px;
    left: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167,232,143,0.20) 0%, rgba(87,186,71,0.06) 50%, transparent 70%);
    animation: heroShape2 3s ease-out 0.8s forwards;
}
.hero-shape--3 {
    top: 30%;
    right: 10%;
    width: 200px;
    height: 200px;
    border: 2px solid rgba(167,232,143,0.15);
    border-radius: 50%;
    animation: heroShape3 4s ease-out 1.2s forwards;
}
@keyframes heroShape1 {
    from { opacity: 0; transform: translateX(80px) scale(0.5); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes heroShape2 {
    from { opacity: 0; transform: translateY(60px) scale(0.5); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroShape3 {
    from { opacity: 0; transform: scale(0.3); }
    to   { opacity: 1; transform: scale(1); }
}

/* Content layer */
.hero-section .container { position: relative; z-index: 10; }

/* ─── Gradient Mesh Overlay — adds green warmth ─── */
.hero-mesh {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 15% 85%, rgba(87, 186, 71, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 50% 50% at 75% 30%, rgba(111, 206, 95, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 70% 40% at 50% 50%, rgba(167, 232, 143, 0.06) 0%, transparent 60%);
    mix-blend-mode: screen;
}

/* ─── Floating particles ─── */
.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}
.hero-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: heroParticleFloat 12s ease-in-out infinite;
}
.hero-particle--1 {
    width: 6px; height: 6px;
    background: var(--green-400);
    top: 20%; left: 15%;
    animation-delay: 0s;
    animation-duration: 14s;
}
.hero-particle--2 {
    width: 4px; height: 4px;
    background: var(--green-300);
    top: 40%; right: 25%;
    animation-delay: 2s;
    animation-duration: 10s;
}
.hero-particle--3 {
    width: 8px; height: 8px;
    background: var(--accent-color);
    bottom: 30%; left: 45%;
    animation-delay: 4s;
    animation-duration: 16s;
}
.hero-particle--4 {
    width: 3px; height: 3px;
    background: rgba(255,255,255,0.4);
    top: 60%; right: 10%;
    animation-delay: 1s;
    animation-duration: 11s;
}
.hero-particle--5 {
    width: 5px; height: 5px;
    background: var(--green-200);
    top: 70%; left: 30%;
    animation-delay: 3s;
    animation-duration: 13s;
}
@keyframes heroParticleFloat {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
    10% { opacity: 0.6; }
    50% { opacity: 0.8; transform: translateY(-60px) scale(1); }
    90% { opacity: 0.4; }
}

/* ─── Govity-style staggered entry animations ─── */
.hero-content { padding: 20px 0 80px; }
.hero-anim {
    opacity: 0;
    transform: translateY(50px);
    animation: heroContentSlideUp 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero-anim--1 { animation-delay: 0.3s; }
.hero-anim--2 { animation-delay: 0.5s; }
.hero-anim--3 { animation-delay: 0.7s; }
.hero-anim--4 { animation-delay: 0.9s; }
.hero-anim--5 { animation-delay: 1.1s; }

@keyframes heroContentSlideUp {
    to { opacity: 1; transform: translateY(0); }
}

/* Sub-title badge */
.hero-sub-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(87, 186, 71, 0.15) 0%, rgba(167, 232, 143, 0.10) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(87, 186, 71, 0.25);
    color: var(--text-light);
    padding: 10px 24px;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.hero-sub-title__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green-400);
    animation: heroDotPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes heroDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.3); }
}
.hero-sub-title i { color: var(--accent-color); }
.hero-sub-title .ndis-badge-logo {
    height: 20px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* Main heading */
.hero-section h1 {
    color: var(--text-light) !important;
    font-weight: 800;
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
}
.hero-section h1 span {
    color: var(--accent-color);
    position: relative;
}
.hero-section h1 span.hero-highlight {
    background: linear-gradient(135deg, var(--green-300), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-section h1 span.hero-highlight::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--green-400), var(--accent-color));
    border-radius: 2px;
    opacity: 0.5;
}

/* Lead text */
.hero-section .hero-lead {
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.375rem;
    line-height: 1.75;
    max-width: min(620px, 90vw);
    margin-bottom: 36px;
}

/* Hero buttons */
.hero-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 0;
}
.hero-btn-group .btn-primary {
    padding: 15px 36px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    letter-spacing: 0.02em;
}
.hero-btn-group .btn-outline-light {
    padding: 15px 36px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border-width: 2px;
}

/* ── Hero Premium Button Variants ── */
.btn-hero-primary {
    background: linear-gradient(135deg, var(--green-500) 0%, var(--green-600) 100%);
    border: 2px solid var(--green-400);
    color: #fff !important;
    padding: 16px 36px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    letter-spacing: 0.02em;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(87, 186, 71, 0.3), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-hero-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--green-400) 0%, var(--green-500) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}
.btn-hero-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(87, 186, 71, 0.45), 0 0 0 4px rgba(87, 186, 71, 0.1);
    border-color: var(--green-300);
    color: #fff !important;
}
.btn-hero-primary:hover::before { opacity: 1; }

.btn-hero-outline {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid rgba(255,255,255,0.2);
    color: #fff !important;
    padding: 16px 36px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-hero-outline:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.4);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    color: #fff !important;
}

/* ── Hero Trust Indicators ── */
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.hero-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
}
.hero-trust__item i {
    color: var(--green-400);
    font-size: 0.9375rem;
}

/* ── Hero Stats Card (floating right column) ── */
.hero-stats-card {
    position: relative;
    margin-bottom: 40px;
    max-width: 340px;
    margin-left: auto;
}
.hero-stats-card__glow {
    position: absolute;
    inset: -3px;
    background: linear-gradient(135deg, rgba(87,186,71,0.25) 0%, rgba(167, 232, 143, 0.35) 50%, rgba(87,186,71,0.20) 100%);
    border-radius: var(--radius-xl);
    filter: blur(2px);
    z-index: 0;
}
.hero-stats-card__inner {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border-radius: var(--radius-xl);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--green-100);
    box-shadow: 0 25px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(87,186,71,0.10);
}
.hero-stats-card__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 8px;
}
.hero-stats-card__divider {
    width: 85%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--green-200), transparent);
    margin: 0 auto;
}
.hero-stats-card__icon-wrap {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--green-100), var(--green-200));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--green-700);
    transition: var(--transition);
}
.hero-stats-card__item:hover .hero-stats-card__icon-wrap {
    background: linear-gradient(135deg, var(--green-500), var(--green-400));
    color: #fff;
    transform: scale(1.08) rotate(-5deg);
    box-shadow: 0 6px 16px rgba(87,186,71,0.3);
}
.hero-stats-card__text {
    flex: 1;
}
.hero-stats-card__heading {
    font-family: var(--heading-font);
    font-size: 1rem;
    font-weight: 700;
    color: #1a2e1a;
    line-height: 1.2;
    margin-bottom: 3px;
}
.hero-stats-card__desc {
    font-size: 0.8438rem;
    font-weight: 500;
    color: #526b52;
    line-height: 1.3;
}
/* Legacy number styles — kept for other pages */
.hero-stats-card__number {
    font-family: var(--heading-font);
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--green-700);
    margin-bottom: 6px;
}
.hero-stats-card__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Hero Stats Row */
.hero-stats {
    display: flex;
    gap: 0;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-stat {
    padding-right: 44px;
    margin-right: 44px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.hero-stat__number {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-light);
    font-family: var(--heading-font);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 4px;
}
.hero-stat__label {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Slider nav dots */
.hero-dots {
    position: absolute;
    bottom: 40px;
    right: 60px;
    z-index: 10;
    display: flex;
    gap: 10px;
}
.hero-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: all 0.4s ease;
    border: none;
    padding: 0;
}
.hero-dot.active {
    background: var(--bg-color);
    transform: scale(1.2);
}
.hero-dot:hover { background: rgba(255,255,255,0.7); }

/* ==========================================================================
   Image + Text Section (legacy — kept for inner pages)
   ========================================================================== */

.image-text-section {
    padding: var(--section-py) 0 !important;
}
.image-text-section h2 {
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 24px;
}
.image-text-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 3px;
}
.image-text-section .prose {
    font-size: 0.9688rem;
    line-height: 1.85;
    color: var(--text-color);
}
.image-text-section .prose p { margin-bottom: 16px; }
.image-text-section .prose ul {
    padding-left: 0;
    list-style: none;
    margin: 20px 0;
}
.image-text-section .prose ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
}
.image-text-section .prose ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
}
.image-text-section .img-fluid {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   Feature One — Coran-inspired Why Choose Us section
   ========================================================================== */

.feature-one {
    position: relative;
    padding: var(--section-py) 0;
    background:
        /* Subtle diagonal lines */
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 28px,
            rgba(88, 186, 71, 0.025) 28px,
            rgba(88, 186, 71, 0.025) 29px
        ),
        /* Faint dot grid */
        radial-gradient(circle, rgba(88, 186, 71, 0.035) 1px, transparent 1px),
        /* Base colour */
        var(--bg-light);
    background-size: auto, 24px 24px, auto;
    overflow-x: clip;
    overflow-y: visible;
    z-index: 1;
}

/* Irregular organic SVG shapes */
.feature-one__svg {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
/* Large top-right blob — fully inside section */
.feature-one__svg--1 {
    width: 480px;
    height: 480px;
    top: 0;
    right: -120px;
    animation: shapeFloat1 20s ease-in-out infinite;
}
/* Large bottom-left blob — fully inside section */
.feature-one__svg--2 {
    width: 420px;
    height: 420px;
    bottom: 0;
    left: -100px;
    animation: shapeFloat2 24s ease-in-out infinite;
}
/* Medium centre blob */
.feature-one__svg--3 {
    width: 300px;
    height: 300px;
    top: 35%;
    left: 38%;
    animation: shapeFloat3 16s ease-in-out infinite;
}
/* Small accent blob */
.feature-one__svg--4 {
    width: 150px;
    height: 150px;
    top: 18%;
    right: 20%;
    animation: shapeFloat1 14s ease-in-out infinite reverse;
}

@keyframes shapeFloat1 {
    0%   { transform: translate(0, 0) rotate(0deg); }
    33%  { transform: translate(15px, -20px) rotate(6deg); }
    66%  { transform: translate(-10px, 12px) rotate(-4deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes shapeFloat2 {
    0%   { transform: translate(0, 0) rotate(0deg); }
    33%  { transform: translate(-18px, 14px) rotate(-5deg); }
    66%  { transform: translate(12px, -16px) rotate(7deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes shapeFloat3 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(10px, -10px) scale(1.05); }
    100% { transform: translate(0, 0) scale(1); }
}

/* Section Tagline Badge */
.section-tagline {
    display: inline-block;
    margin-bottom: 20px;
}
.section-tagline span {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green-700);
    background: linear-gradient(135deg, var(--green-50), var(--green-100));
    padding: 8px 22px;
    border-radius: var(--radius-pill);
    position: relative;
    border: 1px solid var(--green-200);
}

/* Reusable green underline accent — add to any heading */
.accent-underline {
    position: relative;
    padding-bottom: 10px;
    display: inline-block;
}
.accent-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 2px;
    background: var(--primary-color);
    border-radius: 2px;
}

/* Feature Content — Left column */
.feature-one__content {
    max-width: min(600px, 95%);
}
.feature-one__title {
    color: var(--heading-color);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}
.feature-one__highlight {
    color: var(--primary-color);
    position: relative;
}
.feature-one__highlight::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, var(--green-300), var(--accent-color));
    border-radius: 3px;
    opacity: 0.35;
    z-index: -1;
}
.feature-one__text {
    color: var(--text-color);
    font-size: 0.9688rem;
    line-height: 1.85;
    margin-bottom: 28px;
}

/* Checklist — badge pills with hairline outline */
.feature-one__checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.feature-one__checklist li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
    font-size: 0.8438rem;
    font-weight: 500;
    line-height: 1;
    padding: 9px 18px 9px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--green-200);
    background: var(--green-50);
    cursor: default;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.feature-one__checklist li::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--green-500), var(--green-600));
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}
.feature-one__checklist li:hover::before {
    transform: scaleX(1);
}
.feature-one__checklist li:hover {
    border-color: var(--green-500);
    color: var(--text-light);
    box-shadow: 0 4px 14px rgba(87, 186, 71, 0.2);
}
.feature-one__checklist li i {
    position: relative;
    z-index: 1;
    color: var(--primary-color);
    font-size: 1rem;
    flex-shrink: 0;
    transition: color 0.35s ease;
}
.feature-one__checklist li span {
    position: relative;
    z-index: 1;
}
.feature-one__checklist li:hover i {
    color: var(--text-light);
}

/* Actions row — primary button + secondary text link */
.feature-one__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}
.feature-one__link {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--green-700);
    transition: var(--transition);
    text-decoration: none;
}
.feature-one__link:hover {
    color: var(--primary-color);
    transform: translateX(3px);
}

/* Feature Cards Grid — Right column */
.feature-one__grid {
    position: relative;
}
.feature-one__card {
    position: relative;
    background: var(--bg-color);
    border-radius: var(--radius-md);
    padding: 36px 28px 28px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--green-100);
}

/* Step number — top right corner */
.feature-one__card-number {
    position: absolute;
    top: 16px;
    right: 20px;
    font-family: var(--heading-font);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--green-100);
    z-index: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    user-select: none;
}
.feature-one__card:hover .feature-one__card-number {
    color: var(--green-200);
    transform: scale(1.1) translateY(-2px);
}

/* Corner glow — radiates from top-left on hover */
.feature-one__card::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -60%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%,
        var(--green-100) 0%,
        var(--green-50) 30%,
        transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
    pointer-events: none;
}

/* Bottom accent stripe */
.feature-one__card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--green-500), var(--green-300), var(--accent-color));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
    z-index: 3;
}

.feature-one__card:hover {
    transform: translateY(-10px);
    box-shadow:
        0 24px 48px rgba(87, 186, 71, 0.12),
        0 12px 24px rgba(0, 0, 0, 0.04),
        0 0 0 1px var(--green-200);
    border-color: var(--green-200);
}
.feature-one__card:hover::before {
    opacity: 1;
}
.feature-one__card:hover::after {
    transform: scaleX(1);
}

.feature-one__card--offset {
    margin-top: 30px;
}

/* Blob Icon Background */
.feature-one__card-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 20px;
    z-index: 1;
}
.feature-one__card-icon .blob-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--green-100) 0%, var(--green-50) 100%);
    border-radius: 42% 58% 62% 38% / 45% 55% 45% 55%;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature-one__card:hover .blob-bg {
    border-radius: 58% 42% 35% 65% / 50% 60% 40% 50%;
    background: linear-gradient(135deg, var(--green-500) 0%, var(--green-400) 100%);
    transform: scale(1.12) rotate(-6deg);
    box-shadow:
        0 8px 24px rgba(87, 186, 71, 0.30),
        0 0 0 6px var(--green-50);
    animation: blobPulse 2s ease-in-out infinite;
}
@keyframes blobPulse {
    0%, 100% { border-radius: 58% 42% 35% 65% / 50% 60% 40% 50%; transform: scale(1.12) rotate(-6deg); }
    50%      { border-radius: 40% 60% 55% 45% / 60% 42% 58% 40%; transform: scale(1.08) rotate(3deg); }
}
.feature-one__card-icon i {
    position: relative;
    z-index: 2;
    font-size: 1.75rem;
    color: var(--primary-color);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feature-one__card:hover .feature-one__card-icon i {
    color: var(--text-light);
    transform: scale(1.12) rotate(-5deg);
}

/* Card Text */
.feature-one__card h3 {
    position: relative;
    z-index: 1;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 14px;
    padding-bottom: 12px;
    transition: all 0.4s ease 0.05s;
}
.feature-one__card h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 3px;
    border-radius: 3px;
    background: var(--green-400);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
}
.feature-one__card:hover h3::after {
    width: 52px;
    background: var(--green-500);
}
.feature-one__card p {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-color);
    margin: 0;
    transition: color 0.4s ease 0.08s;
}
.feature-one__card:hover h3 {
    color: var(--primary-dark);
    transform: translateX(3px);
}
.feature-one__card:hover p {
    color: var(--text-color);
}

/* ==========================================================================
   Services — Split Layout (original design)
   Portrait image left  |  Content + 9 service cards right
   ========================================================================== */

.svc-split {
    padding: var(--section-py, 110px) 0;
    background-color: var(--bg-primary-tint);
    position: relative;
    overflow: hidden;
}

/* Step drop at top-right — smooth S-curve at ~80% */
.svc-l-shape {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 120px;
    z-index: 2;
    pointer-events: none;
}

/* ── Left: Image composition ────────────────────────────────────────────── */
.svc-img {
    position: relative;
    padding: 24px 24px 24px 0;
}

/* Decorative green shape that peeks behind the image */
.svc-img__shape {
    position: absolute;
    top: 0;
    left: -16px;
    width: 85%;
    height: 100%;
    background: var(--primary-color);
    border-radius: var(--radius-lg, 20px);
    z-index: 0;
}
.svc-img__shape::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 72px;
    height: 72px;
    border: 4px solid var(--accent-color, var(--accent-color));
    border-radius: 12px;
}

/* Image frame — green-tinted border, rounded, sits above shape */
.svc-img__frame {
    position: relative;
    z-index: 1;
    border-radius: var(--radius-lg, 20px);
    overflow: hidden;
    border: 5px solid rgba(88, 186, 71, 0.25);
    box-shadow: 0 20px 50px rgba(88, 186, 71, 0.18), 0 0 0 1px rgba(88, 186, 71, 0.08);
}
.svc-img__frame img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;
}

/* "Perth WA" badge — floating card, bottom-right */
.svc-img__badge {
    position: absolute;
    bottom: 44px;
    right: -18px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 18px 24px;
    border-radius: 16px;
    border: 1px solid rgba(88, 186, 71, 0.15);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.08),
        0 4px 12px rgba(88, 186, 71, 0.1);
    text-align: center;
    line-height: 1;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
    animation: floatBadge 4s ease-in-out infinite;
}
.svc-img__badge:hover {
    transform: translateY(-4px);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.1),
        0 6px 16px rgba(88, 186, 71, 0.15);
}
@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.svc-img__badge strong {
    display: block;
    font-family: var(--heading-font);
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--primary-color);
}
.svc-img__badge span {
    font-family: var(--heading-font);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--primary-dark, var(--primary-dark));
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Counter — floating card, top-right */
.svc-img__counter {
    position: absolute;
    top: 36px;
    right: -18px;
    z-index: 2;
    background: rgba(88, 186, 71, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-light);
    padding: 20px 22px;
    text-align: center;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 12px 32px rgba(88, 186, 71, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
    animation: floatCounter 4s ease-in-out 1s infinite;
}
.svc-img__counter:hover {
    transform: translateY(-4px);
    box-shadow:
        0 18px 40px rgba(88, 186, 71, 0.3),
        0 6px 16px rgba(0, 0, 0, 0.08);
}
@keyframes floatCounter {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.svc-img__counter h5 {
    margin: 0 0 2px;
    font-family: var(--heading-font);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-light);
}
.svc-img__counter h5 sup {
    font-size: 1.125rem;
    vertical-align: super;
}
.svc-img__counter p {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
}

/* Vertical accent text — left edge, rotated */
.svc-img__vertical {
    position: absolute;
    bottom: 80px;
    left: -42px;
    z-index: 2;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}
.svc-img__vertical span {
    display: inline-block;
    background: var(--primary-color);
    color: var(--text-light);
    font-family: var(--heading-font);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 18px 10px;
    border-radius: 8px;
}

/* ── Right: Content + cards ─────────────────────────────────────────────── */
.svc-content {
    padding-left: 28px;
}

/* Tag / subtitle pill */
.svc-content__tag {
    display: inline-flex;
    align-items: center;
    background: rgba(88, 186, 71, 0.1);
    color: var(--primary-color);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 18px;
    border-radius: 50px;
    margin-bottom: 16px;
}
.svc-content__tag i {
    font-size: 0.875rem;
}

/* Title */
.svc-content__title {
    font-family: var(--heading-font);
    font-size: 2.625rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--heading-color);
    margin-bottom: 16px;
}

/* Description */
.svc-content__desc {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* Label before cards */
.svc-content__label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 20px;
}

/* ── 3×3 service card grid ──────────────────────────────────────────────── */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.svc-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--bg-color);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 16px 14px;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 18px rgba(72,199,50,0.14);
}
.svc-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(88, 186, 71, 0.06) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.svc-box:hover {
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 0 40px rgba(72,199,50,0.30);
}
.svc-box:hover::before { opacity: 1; }

.svc-box__icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 42% 58% 62% 38% / 45% 55%;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-color);
    font-size: 1.1875rem;
    transition: all 0.35s ease;
    position: relative;
    z-index: 1;
}
.svc-box:hover .svc-box__icon {
    background: var(--primary-color);
    color: var(--text-light);
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(88, 186, 71, 0.25);
}

.svc-box__text { position: relative; z-index: 1; min-width: 0; }
.svc-box__text h4 {
    font-size: 0.8438rem;
    font-weight: 700;
    color: var(--heading-color);
    margin: 0 0 2px;
    line-height: 1.3;
    transition: color 0.3s ease;
}
.svc-box:hover .svc-box__text h4 { color: var(--primary-color); }
.svc-box__text span {
    font-size: 0.75rem;
    color: var(--text-muted, var(--text-muted));
    line-height: 1.4;
    display: block;
}

/* Card arrow indicator */
.svc-box__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 0;
    background: none;
    color: var(--primary-color);
    margin-left: auto;
    align-self: flex-end;
    opacity: 0;
    transform: translateX(-6px);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    z-index: 1;
}
.svc-box__arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 1.5px;
    background: currentColor;
    transform: translateY(-50%);
}
.svc-box__arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}
.svc-box:hover .svc-box__arrow {
    opacity: 1;
    transform: translateX(0);
    background: none;
    color: var(--primary-color);
}

/* ── CTA row ────────────────────────────────────────────────────────────── */
.svc-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.svc-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-family: var(--heading-font);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--heading-color);
    transition: color 0.3s ease;
}
.svc-cta__phone:hover { color: var(--primary-color); }
.svc-cta__phone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 42% 58% 62% 38% / 45% 55%;
    background: rgba(var(--primary-rgb), 0.2);
    color: var(--primary-dark);
    font-size: 1.125rem;
    transition: all 0.3s ease;
}
.svc-cta__phone:hover .svc-cta__phone-icon {
    background: var(--primary-color);
}

.svc-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 0.9375rem;
    background: var(--primary-color);
    padding: 14px 32px;
    color: var(--text-light);
    border: 2px solid var(--primary-color);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.svc-cta__btn:hover {
    background: transparent;
    color: var(--primary-color);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .svc-content__title { font-size: 2.125rem; }
    .svc-grid { grid-template-columns: repeat(2, 1fr); }
    .svc-content { padding-left: 16px; }
}
@media (max-width: 991px) {
    .svc-split { padding: 70px 0; }
    .svc-l-shape { height: 80px; }
    .svc-img { max-width: 480px; margin: 0 auto 40px; padding: 0 0 70px; }
    .svc-img__shape { display: none; }
    .svc-img__frame { border-radius: 20px; }
    .svc-img__frame img { aspect-ratio: 4 / 3; }
    /* Reposition floating cards as a row below the image */
    .svc-img__badge,
    .svc-img__counter {
        position: absolute;
        bottom: 0;
        top: auto;
        animation: none;
    }
    .svc-img__badge {
        left: 0;
        right: auto;
        padding: 14px 20px;
        border-radius: 14px;
    }
    .svc-img__counter {
        right: 0;
        left: auto;
        padding: 14px 18px;
        border-radius: 14px;
    }
    .svc-img__counter h5 { font-size: 1.5rem; }
    .svc-content { padding-left: 0; }
    .svc-grid { grid-template-columns: repeat(3, 1fr); }
    .svc-content__title { font-size: 2.25rem; }
}
@media (max-width: 767px) {
    .svc-l-shape { height: 50px; }
    .svc-img { max-width: 100%; padding: 0 0 65px; }
    .svc-img__vertical { display: none; }
    .svc-img__shape { display: none; }
    .svc-img__frame img { aspect-ratio: 16 / 10; object-position: center 30%; }
    .svc-img__badge { padding: 12px 16px; border-radius: 12px; }
    .svc-img__badge strong { font-size: 1.25rem; }
    .svc-img__badge span { font-size: 0.9375rem; letter-spacing: 1px; }
    .svc-img__counter { padding: 12px 16px; border-radius: 12px; }
    .svc-img__counter h5 { font-size: 1.25rem; }
    .svc-img__counter p { font-size: 0.9375rem; }
    .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .svc-box { padding: 14px 12px; gap: 10px; }
    .svc-box__icon { width: 40px; height: 40px; min-width: 40px; font-size: 1.0625rem; border-radius: 10px; }
    .svc-box__text h4 { font-size: 1rem; }
    .svc-box__text span { font-size: 0.9375rem; }
    .svc-content__title { font-size: 1.875rem; }
}
@media (max-width: 480px) {
    .svc-grid { grid-template-columns: 1fr; }
    .svc-img { padding: 0 0 60px; }
    .svc-img__badge { padding: 10px 14px; }
    .svc-img__badge strong { font-size: 1.125rem; }
    .svc-img__counter { padding: 10px 14px; }
    .svc-img__counter h5 { font-size: 1.125rem; }
}

/* ==========================================================================
   Features Section — Premium bordered cards
   ========================================================================== */

.features-section {
    padding: var(--section-py) 0 !important;
}
.features-section .text-center h2 {
    position: relative;
    display: inline-block;
}
.features-section .text-center h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--primary-color);
    margin: 16px auto 0;
    border-radius: 3px;
}

.feature-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    background: var(--primary-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--primary-color);
    margin: 0 auto 20px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}
.feature-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    background: rgba(var(--primary-rgb), 0.06);
    z-index: -1;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.features-section .border {
    border: 1px solid var(--border-color) !important;
    transition: var(--transition-slow);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 18px rgba(72,199,50,0.14);
}
.features-section .border::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-color);
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.features-section .border:hover {
    border-color: rgba(var(--primary-rgb), 0.2) !important;
    box-shadow: 0 0 44px rgba(72,199,50,0.30);
    transform: translateY(-6px);
}
.features-section .border:hover::before { transform: scaleX(1); }
.features-section .border:hover .feature-icon {
    background: var(--primary-color);
    color: var(--text-light);
    border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
    transform: scale(1.1);
}
.features-section .border:hover .feature-icon::after {
    border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
    inset: -6px;
}

/* ==========================================================================
   How It Works Section — Premium Two-Column Layout
   ========================================================================== */

.how-it-works-section {
    position: relative;
    min-height: 680px;
}

/* Background styling */
.hiw-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--green-800) 0%, var(--green-700) 50%, var(--green-600) 100%);
}
.hiw-overlay {
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(ellipse 80% 70% at 20% 90%, rgba(87, 186, 71, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 60% 60% at 80% 20%, rgba(167, 232, 143, 0.06) 0%, transparent 50%);
}
.hiw-pattern {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(87, 186, 71, 0.04) 100%);
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
}

/* Left Column - Intro */
.hiw-intro {
    color: var(--text-light);
    padding: 40px 0;
}

.hiw-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(87, 186, 71, 0.15), rgba(167, 232, 143, 0.10));
    color: var(--accent-color);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 24px;
    border: 1px solid rgba(87, 186, 71, 0.25);
    backdrop-filter: blur(8px);
    letter-spacing: 0.03em;
}
.hiw-badge i {
    color: var(--accent-color);
}

.hiw-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -0.03em;
    color: var(--text-light);
}

.hiw-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    margin-bottom: 32px;
}

/* Checklist */
.hiw-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 36px;
}
.hiw-checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: var(--transition);
}
.hiw-checklist li:hover {
    padding-left: 6px;
    color: #fff;
}
.hiw-checklist li:last-child {
    border-bottom: none;
}
.hiw-checklist li i {
    color: var(--green-400);
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: var(--transition);
}
.hiw-checklist li:hover i {
    color: var(--accent-color);
    transform: scale(1.15);
}

/* CTA Button */
.hiw-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--green-500), var(--green-400));
    color: #fff;
    padding: 16px 36px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 30px rgba(87, 186, 71, 0.3), 0 0 0 0 rgba(87, 186, 71, 0);
    border: 2px solid rgba(255,255,255,0.15);
}
.hiw-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(87, 186, 71, 0.4), 0 0 0 4px rgba(87, 186, 71, 0.15);
    color: #fff;
    background: linear-gradient(135deg, var(--green-400), var(--green-500));
}
.hiw-cta-btn i {
    transition: transform 0.3s ease;
}
.hiw-cta-btn:hover i {
    transform: translateX(4px);
}

/* Right Column - Steps */
.hiw-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hiw-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-left: 3px solid transparent;
    border-radius: 20px;
    padding: 28px 28px 28px 26px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hiw-step:hover {
    background: rgba(255, 255, 255, 0.10);
    transform: translateX(8px);
    border-color: rgba(255, 255, 255, 0.18);
    border-left-color: var(--green-400);
    box-shadow: 0 0 44px rgba(72,199,50,0.35);
}

/* Step number */
.hiw-step-number {
    position: absolute;
    top: -10px;
    right: 24px;
    font-size: 3.5rem;
    font-weight: 800;
    color: rgba(87, 186, 71, 0.10);
    line-height: 1;
    letter-spacing: -0.05em;
    transition: var(--transition);
}
.hiw-step:hover .hiw-step-number {
    color: rgba(87, 186, 71, 0.18);
    transform: scale(1.08);
}

/* Step icon */
.hiw-step-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light, var(--accent-color)) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-light);
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.3);
    transition: all 0.3s ease;
}
.hiw-step:hover .hiw-step-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 12px 32px rgba(var(--primary-rgb), 0.4);
}

/* Step content */
.hiw-step-content {
    flex: 1;
}
.hiw-step-content h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 8px;
}
.hiw-step-content p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 991.98px) {
    .hiw-title {
        font-size: 2rem;
    }
    .hiw-intro {
        text-align: center;
        padding-bottom: 20px;
    }
    .hiw-checklist li {
        justify-content: center;
    }
    .hiw-cta-btn {
        margin: 0 auto;
    }
}
@media (max-width: 767.98px) {
    .how-it-works-section {
        min-height: auto;
    }
    .hiw-intro {
        padding: 30px 0 20px;
    }
    .hiw-title {
        font-size: 1.875rem;
    }
    .hiw-subtitle {
        font-size: 1.0625rem;
    }
    .hiw-badge {
        font-size: 0.9375rem;
        padding: 6px 14px;
    }
    .hiw-checklist li {
        font-size: 1rem;
        padding: 8px 0;
    }
    .hiw-step {
        padding: 22px;
    }
    .hiw-step-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        font-size: 1.25rem;
        border-radius: 12px;
    }
    .hiw-step-number {
        font-size: 2.5rem;
        right: 16px;
    }
    .hiw-step-content h3 {
        font-size: 1.0625rem;
    }
    .hiw-step-content p {
        font-size: 1rem;
    }
    .hiw-cta-btn {
        padding: 14px 24px;
        font-size: 1rem;
    }
}

/* ==========================================================================
   CTA Section — Premium with decorative shapes
   ========================================================================== */

.cta-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0 !important;
    background: var(--primary-dark);
}
.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -15%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}
.cta-section::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -10%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}
.cta-section h2 { color: var(--text-light) !important; letter-spacing: -0.03em; position: relative; z-index: 1; }
.cta-section p { position: relative; z-index: 1; }
.cta-section .btn { position: relative; z-index: 1; }

/* ==========================================================================
   Testimonials — Float-up hover with premium cards
   ========================================================================== */

.testimonials-section {
    padding: var(--section-py) 0 !important;
    position: relative;
}

.testimonials-section {
    padding: var(--section-py) 0 !important;
    position: relative;
    background: linear-gradient(180deg, var(--bg-color) 0%, var(--green-50) 40%, var(--green-50) 60%, var(--bg-color) 100%);
    overflow: hidden;
}

/* Subtle dot pattern background */
.testimonials-bg-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(87, 186, 71, 0.06) 1px, transparent 0);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}
.testimonials-section .container { position: relative; z-index: 1; }

.testimonial-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    box-shadow: var(--shadow-card);
    height: 100%;
    transition: var(--transition-slow);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}
.testimonial-card__accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--green-500), var(--green-300), var(--accent-color));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonial-card:hover .testimonial-card__accent {
    transform: scaleX(1);
}
.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 48px rgba(72,199,50,0.30);
    border-color: rgba(var(--primary-rgb), 0.12);
}
/* Featured first card */
.testimonial-card--featured {
    border-color: rgba(var(--primary-rgb), 0.08);
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--green-50) 100%);
}
.testimonial-card--featured .testimonial-card__accent {
    transform: scaleX(1);
}

.testimonial-stars {
    color: var(--orange-color);
    font-size: 0.9375rem;
    letter-spacing: 2px;
    margin-bottom: 16px;
}
.quote-icon {
    font-family: var(--heading-font);
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--green-200), var(--green-100));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: -10px;
    display: block;
}
.testimonial-card blockquote {
    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--text-color);
    margin-bottom: 24px;
    font-style: normal;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}
.testimonial-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green-100), var(--green-50));
    color: var(--green-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    font-family: var(--heading-font);
    flex-shrink: 0;
    border: 2px solid rgba(var(--primary-rgb), 0.2);
    transition: var(--transition);
}
.testimonial-card:hover .testimonial-avatar {
    background: linear-gradient(135deg, var(--green-500), var(--green-400));
    color: #fff;
    border-color: var(--green-400);
    box-shadow: 0 4px 12px rgba(87, 186, 71, 0.3);
}
.testimonial-verified {
    margin-left: auto;
    color: var(--green-500);
    font-size: 1.125rem;
    opacity: 0.6;
    transition: var(--transition);
}
.testimonial-card:hover .testimonial-verified {
    opacity: 1;
    color: var(--green-400);
}
.testimonial-author-info .name {
    font-weight: 700;
    color: var(--heading-color);
    font-size: 0.9375rem;
    font-family: var(--heading-font);
}
.testimonial-author-info .role {
    font-size: 0.9375rem;
    color: var(--text-muted);
}

/* ==========================================================================
   Contact Section — Premium dark info card + clean form
   ========================================================================== */

.contact-section {
    padding: var(--section-py) 0 !important;
}

/* Individual contact cards */
.contact-card-single {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 28px 20px;
    height: 100%;
    text-decoration: none;
    color: var(--text-color);
    transition: var(--transition);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}
.contact-card-single::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--green-500), var(--green-300));
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-card-single:hover::after {
    transform: scaleX(1);
}
.contact-card-single:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 44px rgba(72,199,50,0.30);
    border-color: var(--green-200);
    color: var(--text-color);
}
.contact-card-single__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--green-50), var(--green-100));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--green-600);
    margin-bottom: 14px;
    transition: var(--transition);
}
.contact-card-single:hover .contact-card-single__icon {
    background: linear-gradient(135deg, var(--green-500), var(--green-400));
    color: var(--text-light);
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 8px 20px rgba(87, 186, 71, 0.3);
}
.contact-card-single__label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 4px;
}
.contact-card-single__value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--heading-color);
    word-break: break-word;
}
a.contact-card-single .contact-card-single__value {
    color: var(--primary-color);
}
a.contact-card-single:hover .contact-card-single__value {
    color: var(--primary-dark);
}

.contact-info-card {
    background: var(--bg-dark);
    border-radius: var(--radius-xl);
    padding: 40px 36px;
    height: 100%;
    position: relative;
    overflow: hidden;
    color: var(--text-light);
}
.contact-info-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.08);
    pointer-events: none;
}
.contact-info-card h3 { color: var(--text-light); }

.contact-info-item {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    align-items: flex-start;
}
.contact-info-item .icon-wrap {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: var(--radius-sm);
    background: rgba(var(--primary-rgb), 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--accent-color);
    transition: var(--transition);
}
.contact-info-item:hover .icon-wrap {
    background: var(--primary-color);
    color: var(--text-light);
    transform: scale(1.08);
}
.contact-info-item .info-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
    margin-bottom: 2px;
}
.contact-info-item .info-text { color: rgba(255,255,255,0.85); font-size: 0.9375rem; }
.contact-info-item .info-text div { color: rgba(255,255,255,0.85); }
.contact-info-item .info-text a { color: var(--accent-color) !important; font-weight: 600; }

.contact-form-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 40px 36px;
    border: 1px solid var(--border-color);
    box-shadow: 0 0 24px rgba(72,199,50,0.15);
    position: relative;
    overflow: hidden;
}
.contact-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--green-500), var(--green-300), var(--accent-color));
}

.form-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.form-control,
.form-select {
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-color);
    padding: 13px 18px;
    font-size: 0.9375rem;
    transition: var(--transition);
    font-family: var(--body-font);
    background: var(--bg-light);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--green-500);
    box-shadow: 0 0 0 4px rgba(87, 186, 71, 0.1), 0 2px 8px rgba(87, 186, 71, 0.08);
    background: var(--bg-color);
}

/* ==========================================================================
   Content Section (prose pages)
   ========================================================================== */

.content-section {
    padding: var(--section-py) 0 !important;
}
.content-section .prose {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text-color);
}
.content-section .prose h2 {
    margin-top: 40px;
    margin-bottom: 16px;
    font-size: 1.5rem;
    position: relative;
    padding-bottom: 14px;
}
.content-section .prose h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 3px;
}
.content-section .prose h2:first-child { margin-top: 0; }
.content-section .prose p { margin-bottom: 18px; }
.content-section .prose ul {
    padding-left: 0;
    list-style: none;
    margin: 20px 0;
}
.content-section .prose ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 14px;
    line-height: 1.7;
}
.content-section .prose ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
}

/* ==========================================================================
   Footer — Modern 4-column premium dark
   ========================================================================== */

.site-footer {
    background: var(--bg-dark);
    color: rgba(255, 255, 255, 0.7);
    position: relative;
    padding: 0;
    margin: 0;
}

/* ==========================================================================
   CTA Final — Clean Conversion Section
   ========================================================================== */

/* Section wrapper */
.cta-final {
    position: relative;
    padding: clamp(60px, 8vw, 100px) 0;
    background: linear-gradient(170deg, #f0fdf0 0%, #e8f8e4 40%, #f7faf5 100%);
    overflow: hidden;
}

/* Decorative shapes */
.cta-final__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.cta-final__shape {
    position: absolute;
    border-radius: 50%;
}
.cta-final__shape--1 {
    width: 500px;
    height: 500px;
    top: -180px;
    right: -100px;
    background: radial-gradient(circle, rgba(87, 186, 71, 0.1) 0%, transparent 70%);
}
.cta-final__shape--2 {
    width: 400px;
    height: 400px;
    bottom: -160px;
    left: -120px;
    background: radial-gradient(circle, rgba(47, 107, 58, 0.06) 0%, transparent 70%);
}
.cta-final__dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(47, 107, 58, 0.06) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* Grid layout */
.cta-final__grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
    position: relative;
    z-index: 1;
}

/* ── Left: Message ── */
.cta-final__message {
    max-width: min(620px, 100%);
}

.cta-final__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--green-600);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    padding: 7px 18px;
    border-radius: 50px;
    margin-bottom: 24px;
    letter-spacing: 0.02em;
}
.cta-final__pill i {
    font-size: 0.9375rem;
}

.cta-final__heading {
    font-family: var(--heading-font);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--green-900);
    margin: 0 0 20px;
}
.cta-final__heading em {
    font-style: normal;
    color: var(--green-600);
    position: relative;
}
.cta-final__heading em::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 6px;
    background: var(--green-200);
    border-radius: 4px;
    z-index: -1;
}

.cta-final__lead {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--text-body);
    margin: 0 0 36px;
}

/* Promise rows */
.cta-final__promises {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.cta-final__promise {
    display: flex;
    align-items: center;
    gap: 16px;
}
.cta-final__promise-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--green-100);
    color: var(--green-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.cta-final__promise:hover .cta-final__promise-icon {
    background: var(--green-600);
    color: #fff;
    transform: scale(1.08);
}
.cta-final__promise strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--green-900);
    line-height: 1.3;
}
.cta-final__promise span {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Right: Action Card ── */
.cta-final__action {
    position: relative;
}
.cta-final__card {
    position: relative;
    border-radius: 24px;
    background: #fff;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.02),
        0 12px 40px rgba(47, 107, 58, 0.1),
        0 0 0 1px rgba(47, 107, 58, 0.06);
    overflow: hidden;
}
.cta-final__card-accent {
    height: 5px;
    background: linear-gradient(90deg, var(--green-500) 0%, var(--green-400) 50%, var(--green-300) 100%);
}
.cta-final__card-body {
    padding: 40px 36px 36px;
}

.cta-final__card-top {
    text-align: center;
    margin-bottom: 28px;
}
.cta-final__card-emoji {
    font-size: 2.5rem;
    margin-bottom: 12px;
    line-height: 1;
}
.cta-final__card-top h3 {
    font-family: var(--heading-font);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--green-900);
    margin: 0 0 8px;
}
.cta-final__card-top p {
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0;
}

/* Primary CTA */
.cta-final__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 18px 28px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--green-600) 0%, var(--green-500) 100%);
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(87, 186, 71, 0.3);
}
.cta-final__btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(87, 186, 71, 0.4);
    color: #fff;
}
.cta-final__btn i {
    transition: transform 0.3s ease;
}
.cta-final__btn:hover i {
    transform: translateX(4px);
}

/* Or divider */
.cta-final__or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: var(--text-dim);
    font-size: 0.9375rem;
}
.cta-final__or::before,
.cta-final__or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bg-separator, #e8e8e8);
}

/* Phone row */
.cta-final__phone {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--green-50);
    border: 2px solid var(--green-100);
    text-decoration: none;
    transition: all 0.3s ease;
}
.cta-final__phone:hover {
    border-color: var(--green-400);
    background: var(--green-100);
    transform: translateY(-2px);
}
.cta-final__phone-ring {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--green-600);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.125rem;
    flex-shrink: 0;
}
.cta-final__phone strong {
    display: block;
    color: var(--green-900);
    font-size: 1.0625rem;
    font-weight: 700;
}
.cta-final__phone span {
    font-size: 0.9375rem;
    color: var(--text-muted);
}

/* Card footer */
.cta-final__card-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--bg-separator, #e8e8e8);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}
.cta-final__card-foot i {
    color: var(--green-500);
    font-size: 0.875rem;
}

/* ── Responsive ── */
@media (max-width: 1199.98px) {
    .cta-final__grid {
        grid-template-columns: 1fr 380px;
    }
}
@media (max-width: 991.98px) {
    .cta-final__grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .cta-final__message {
        max-width: 600px;
        margin: 0 auto;
    }
    .cta-final__promises {
        align-items: center;
    }
    .cta-final__promise {
        text-align: left;
    }
    .cta-final__action {
        max-width: 440px;
        margin: 0 auto;
        width: 100%;
    }
}
@media (max-width: 575.98px) {
    .cta-final {
        padding: 50px 0;
    }
    .cta-final__heading {
        font-size: 1.875rem;
    }
    .cta-final__lead {
        font-size: 1.0625rem;
        margin-bottom: 28px;
    }
    .cta-final__pill {
        font-size: 0.875rem;
        padding: 6px 14px;
    }
    .cta-final__card-body {
        padding: 32px 24px 28px;
    }
    .cta-final__btn {
        padding: 16px 24px;
        font-size: 1rem;
        border-radius: 12px;
    }
    .cta-final__phone {
        padding: 12px 14px;
    }
    .cta-final__phone-ring {
        width: 42px;
        height: 42px;
    }
    .cta-final__promise-icon {
        width: 40px;
        height: 40px;
    }
}

/* ── Old CTA Section (kept for compatibility) ──────────── */
.premium-cta {
    background: linear-gradient(160deg, var(--bg-primary-tint) 0%, var(--bg-primary-tint-2) 50%, var(--bg-warm-tint) 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.premium-cta__shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.premium-cta__shape {
    position: absolute;
    border-radius: 50%;
}
.premium-cta__shape--1 {
    width: 600px;
    height: 600px;
    top: -250px;
    right: -150px;
    background: radial-gradient(circle, rgba(88, 186, 71, 0.08) 0%, transparent 70%);
}
.premium-cta__shape--2 {
    width: 500px;
    height: 500px;
    bottom: -200px;
    left: -120px;
    background: radial-gradient(circle, rgba(232, 135, 14, 0.06) 0%, transparent 70%);
}
.premium-cta__grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.premium-cta__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-color);
    border: 1px solid rgba(88, 186, 71, 0.3);
    color: var(--primary-dark);
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(88, 186, 71, 0.1);
}
.premium-cta__badge i { color: var(--primary-color); }
.premium-cta__title {
    color: var(--heading-color);
    font-family: var(--heading-font);
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin: 0 0 16px;
}
.premium-cta__title em {
    font-style: normal;
    color: var(--primary-color);
}
.premium-cta__desc {
    color: var(--text-color);
    font-size: 1.0625rem;
    line-height: 1.7;
    margin: 0 0 36px;
    max-width: min(600px, 95%);
}
.premium-cta__stats {
    display: flex;
    gap: 32px;
}
.premium-cta__stat {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 16px;
}
.premium-cta__stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 3px;
    background: var(--primary-color);
    opacity: 0.5;
}
.premium-cta__stat-number {
    color: var(--heading-color);
    font-family: var(--heading-font);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.premium-cta__stat-label {
    color: var(--text-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    margin-top: 4px;
}

/* Action card — elevated white */
.premium-cta__card {
    background: var(--bg-color);
    border-radius: 20px;
    padding: 40px 32px;
    text-align: center;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.04),
        0 12px 40px rgba(88, 186, 71, 0.1);
    border: 1px solid rgba(88, 186, 71, 0.1);
}
.premium-cta__card-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bg-primary-tint-2), var(--bg-accent-tint));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--primary-dark);
    font-size: 1.75rem;
}
.premium-cta__card h3 {
    font-family: var(--heading-font);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--heading-color);
    margin: 0 0 8px;
}
.premium-cta__card > p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 24px;
}
.btn-cta-primary {
    display: block;
    width: 100%;
    padding: 16px 24px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    background: var(--primary-color);
    color: var(--text-light);
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(88, 186, 71, 0.3);
}
.btn-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(88, 186, 71, 0.35);
    color: var(--text-light);
    background: var(--primary-dark);
}
.premium-cta__or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--text-dim);
    font-size: 0.9375rem;
}
.premium-cta__or::before,
.premium-cta__or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bg-separator);
}
.btn-cta-call {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 24px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--primary-dark);
    border: 2px solid rgba(88, 186, 71, 0.35);
    transition: all 0.3s ease;
    text-decoration: none;
}
.btn-cta-call:hover {
    background: rgba(88, 186, 71, 0.06);
    border-color: var(--primary-color);
    color: var(--primary-dark);
    transform: translateY(-1px);
}
.premium-cta__hours {
    color: var(--text-muted);
    font-size: 0.9375rem;
    margin: 16px 0 0;
}
.premium-cta__promise {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.premium-cta__promise span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}
.premium-cta__promise i {
    color: var(--primary-color);
    font-size: 0.875rem;
}

/* Main footer grid */
.footer-main {
    padding: 64px 0 48px;
}
.footer-brand {
    margin-bottom: 20px;
}
.footer-brand img {
    height: 44px;
    width: auto;
    filter: brightness(0) invert(1);
    margin-bottom: 16px;
}
.footer-brand p {
    font-size: 0.875rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.55);
    margin-bottom: 20px;
    max-width: 300px;
}
.footer-social {
    display: flex;
    gap: 10px;
}
.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
    font-size: 1rem;
    transition: var(--transition);
}
.footer-social a:hover {
    background: var(--primary-color);
    color: var(--text-light);
    transform: translateY(-2px);
}

/* Footer headings & link columns */
.footer-heading {
    color: #fff;
    font-family: var(--heading-font);
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 12px;
}
.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background: var(--primary-color);
    border-radius: 2px;
}
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li {
    margin-bottom: 10px;
}
.footer-links li a {
    color: rgba(255,255,255,0.6);
    font-size: 1rem;
    text-decoration: none;
    transition: var(--transition);
    position: relative;
    padding-left: 0;
}
.footer-links li a::before {
    content: '';
    display: inline-block;
    width: 0;
    transition: width 0.3s ease, margin 0.3s ease;
}
.footer-links li a:hover {
    color: var(--accent-color);
    padding-left: 6px;
}
.footer-links li a:hover::before {
    width: 6px;
    margin-right: 2px;
}

/* Contact items with icons */
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 0.875rem;
}
.footer-contact-item i {
    color: var(--primary-color);
    font-size: 0.9375rem;
    margin-top: 3px;
    flex-shrink: 0;
}
.footer-contact-item span {
    color: rgba(255,255,255,0.6);
}
.footer-contact-item a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: var(--transition);
}
.footer-contact-item a:hover {
    color: var(--accent-color);
}

/* NDIS badge */
.footer-ndis-badge {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-ndis-badge img {
    height: 48px;
    width: auto;
    opacity: 0.85;
    transition: var(--transition);
    background: #fff;
    border-radius: 6px;
    padding: 6px 12px;
}
.footer-ndis-badge img:hover {
    opacity: 1;
}

/* Bottom bar links */
.footer-bottom__links {
    display: flex;
    align-items: center;
    gap: 18px;
}
.footer-bottom__links a {
    color: rgba(255,255,255,0.4);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: var(--transition);
}
.footer-bottom__links a:hover {
    color: var(--accent-color);
}


/* Bottom bar */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 20px 0;
}
.footer-bottom__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-bottom__inner p {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.35);
    margin: 0;
}
.footer-bottom__inner a {
    color: rgba(255,255,255,0.45);
    transition: var(--transition);
}
.footer-bottom__inner a:hover { color: var(--accent-color); }

/* Dynamic footer columns (Markdown-rendered) */
.footer-col-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.55);
    margin-bottom: 10px;
    max-width: 340px;
}
.footer-col-content strong {
    color: #fff;
    font-family: var(--heading-font);
    font-size: 1.0625rem;
    font-weight: 700;
    display: block;
    margin-bottom: 16px;
}
.footer-col-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-col-content ul li {
    margin-bottom: 10px;
}
.footer-col-content ul li a {
    color: rgba(255,255,255,0.6);
    font-size: 1rem;
    transition: var(--transition);
}
.footer-col-content ul li a:hover {
    color: var(--accent-color);
    padding-left: 6px;
}



/* ==========================================================================
   Back to Top
   ========================================================================== */

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.3);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 999;
}
.back-to-top.active { opacity: 1; visibility: visible; }
.back-to-top:hover {
    background: var(--primary-dark);
    color: var(--text-light);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(var(--primary-rgb), 0.4);
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

.stagger-children > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children > *:nth-child(2) { transition-delay: 100ms; }
.stagger-children > *:nth-child(3) { transition-delay: 200ms; }
.stagger-children > *:nth-child(4) { transition-delay: 300ms; }
.stagger-children > *:nth-child(5) { transition-delay: 400ms; }
.stagger-children > *:nth-child(6) { transition-delay: 500ms; }

/* ==========================================================================
   Utility Helpers
   ========================================================================== */

.rounded-4 { border-radius: var(--radius-xl) !important; }
.min-vh-75 { min-height: 75vh; }

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.2); }
    50% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}

/* ==========================================================================
   Hero Slider — RevSlider-inspired
   ========================================================================== */

.hero-slider {
    position: relative;
    width: 100%;
    height: var(--hs-height, 90vh);
    min-height: 600px;
    overflow: hidden;
    background: var(--bg-dark);
}
.hs-track { position: relative; width: 100%; height: 100%; }

.hs-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition: opacity 1s ease, visibility 1s ease;
}
.hs-slide.active { opacity: 1; visibility: visible; z-index: 3; }
.hs-slide.exit { opacity: 0; z-index: 2; transition: opacity 1.2s ease; }

.hs-bg { position: absolute; inset: 0; z-index: 0; }
.hs-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: hsKenBurns 20s ease-out forwards;
    will-change: transform;
}
.hs-slide.active .hs-bg img { animation: hsKenBurns 20s ease-out forwards; }
.hs-slide:nth-child(even) .hs-bg img { animation-name: hsKenBurns2; }
.hs-bg-color {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

@keyframes hsKenBurns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.15) translate(-1.5%, -1%); }
}
@keyframes hsKenBurns2 {
    0%   { transform: scale(1.1) translate(-1%, 0); }
    100% { transform: scale(1) translate(0.5%, 0.5%); }
}

.hs-bg::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.hs-overlay-gradient .hs-bg::after,
.hs-overlay-gradient.hs-bg::after {
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(10, 15, 12, 0.62) 40%,
        rgba(15, 20, 15, 0.55) 100%);
}
.hs-overlay-dark .hs-bg::after { background: rgba(0, 0, 0, 0.55); }
.hs-overlay-light .hs-bg::after { background: rgba(255, 255, 255, 0.65); }
.hs-overlay-none .hs-bg::after { background: transparent; }

.hs-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 120px 0 80px;
}
.hs-layers { max-width: min(800px, 90%); }

.hs-layer {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.hs-layer[data-anim="fadeDown"] { transform: translateY(-30px); }
.hs-layer.animate { opacity: 1; transform: translateY(0); }

.hs-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-light);
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    letter-spacing: 0.02em;
}
.hs-badge i { color: var(--accent-color, var(--accent-color)); }

.hs-headline {
    color: var(--text-light);
    font-size: clamp(2.75rem, 5.5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.12;
    margin-bottom: 20px;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}
.hs-sub {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 32px;
    max-width: min(640px, 95%);
}
.hs-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.btn-hs-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 36px;
    background: var(--bg-color);
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: var(--transition);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.btn-hs-primary:hover {
    background: var(--accent-color, var(--accent-color));
    color: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.btn-hs-primary i { transition: transform 0.3s ease; }
.btn-hs-primary:hover i { transform: translateX(4px); }

.btn-hs-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 36px;
    background: transparent;
    color: var(--text-light);
    font-weight: 600;
    font-size: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: var(--transition);
}
.btn-hs-outline:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.8);
    color: var(--text-light);
    transform: translateY(-2px);
}

.hs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-light);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    opacity: 0;
}
.hero-slider:hover .hs-arrow { opacity: 1; }
.hs-prev { left: 30px; }
.hs-next { right: 30px; }
.hs-arrow:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-50%) scale(1.1);
}

.hs-dots {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 12px;
}
.hs-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hs-dot::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}
.hs-dot.active::before {
    background: var(--bg-color);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}
.hs-dot:hover::before { background: rgba(255, 255, 255, 0.8); }

.hs-dot svg {
    position: absolute;
    inset: 0;
    width: 36px;
    height: 36px;
    transform: rotate(-90deg);
}
.hs-dot-progress {
    fill: none;
    stroke: rgba(255, 255, 255, 0);
    stroke-width: 2;
    stroke-dasharray: 100.5;
    stroke-dashoffset: 100.5;
    stroke-linecap: round;
}
.hs-dot.active .hs-dot-progress {
    stroke: rgba(255, 255, 255, 0.8);
    animation: hsDotFill 6000ms linear forwards;
}
@keyframes hsDotFill { to { stroke-dashoffset: 0; } }

.hs-counter {
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 10;
    font-family: var(--heading-font);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
}
.hs-counter-current { color: var(--text-light); font-size: 1.75rem; line-height: 1; vertical-align: baseline; }
.hs-counter-sep { margin: 0 4px; opacity: 0.4; }

.hs-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 10;
}
.hs-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-color, var(--accent-color)), #fff);
    border-radius: 0 2px 2px 0;
}

.hs-stats {
    background: var(--primary-color);
    padding: 0;
    position: relative;
    z-index: 5;
    margin-top: -1px;
}
.hs-stats-row { display: flex; justify-content: center; gap: 0; }
.hs-stat {
    flex: 1;
    padding: 28px 24px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.3s ease;
}
.hs-stat:last-child { border-right: none; }
.hs-stat:hover { background: rgba(255, 255, 255, 0.06); }
.hs-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 42% 58% 62% 38% / 45% 55% 45% 55%;
    background: rgba(126, 207, 130, .15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    transition: all .5s cubic-bezier(.25,.46,.45,.94);
}
.hs-stat-icon i { color: var(--accent-color, var(--accent-color)); font-size: 1.4rem; line-height: 1; }
.hs-stat:hover .hs-stat-icon {
    border-radius: 58% 42% 38% 62% / 55% 45% 55% 45%;
    background: rgba(126, 207, 130, .22);
    transform: scale(1.08);
}
.hs-stat > i { color: var(--accent-color, var(--accent-color)); font-size: 1.4rem; margin-bottom: 6px; display: block; }
.hs-stat-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-light);
    line-height: 1.1;
    margin-bottom: 4px;
    font-family: var(--heading-font);
    letter-spacing: -0.03em;
}
.hs-stat-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ==========================================================================
   FAQ Section — Premium numbered accordion
   ========================================================================== */

.faq-section { padding: var(--section-py) 0 !important; }

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: 0 0 16px rgba(72,199,50,0.10);
}
.faq-item:hover {
    border-color: rgba(var(--primary-rgb), 0.3);
    box-shadow: 0 0 32px rgba(72,199,50,0.25);
}
.faq-item.active {
    border-color: var(--primary-color);
    box-shadow: 0 8px 30px rgba(var(--primary-rgb), 0.1);
}
.faq-item__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 28px;
    cursor: pointer;
    user-select: none;
}
.faq-item__num {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--heading-font);
    font-weight: 800;
    font-size: 0.875rem;
    color: var(--text-muted);
    transition: var(--transition);
}
.faq-item.active .faq-item__num {
    background: var(--primary-color);
    color: var(--text-light);
}
.faq-item__question {
    flex: 1;
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 1rem;
    color: var(--heading-color);
    letter-spacing: -0.01em;
    line-height: 1.4;
}
.faq-item.active .faq-item__question { color: var(--primary-dark); }
.faq-item__toggle {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    color: var(--text-muted);
    transition: var(--transition);
}
.faq-item.active .faq-item__toggle {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    transform: rotate(45deg);
}
.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 28px 0 80px;
}
.faq-item.active .faq-item__answer {
    max-height: 300px;
    padding: 0 28px 24px 80px;
}
.faq-item__answer p {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--text-color);
    margin: 0;
}

/* Fallback: keep basic accordion styles for the dedicated FAQ page */
.accordion-button {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--heading-color);
    padding: 20px 24px;
    border-radius: var(--radius-sm) !important;
}
.accordion-button:not(.collapsed) {
    background: var(--primary-glow);
    color: var(--primary-color);
    box-shadow: none;
}
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1); }
.accordion-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md) !important;
    margin-bottom: 12px;
    overflow: hidden;
}
.accordion-body {
    padding: 20px 24px;
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--text-color);
}

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

@media (max-width: 1199px) {
    :root { --section-py: 90px; }
    .mega-menu__grid { grid-template-columns: repeat(2, 1fr); }
    .header-phone { display: none !important; }
    .feature-one__card { padding: 32px 24px 28px; }
    .feature-one__card-icon { width: 76px; height: 76px; }
    .feature-one__card-icon i { font-size: 1.75rem; }
}

@media (max-width: 991px) {
    :root { --section-py: 70px; }

    /* Mobile header */
    .top-bar { display: none !important; }
    .main-nav {
        margin: 0;
        border-radius: 0;
        max-width: 100%;
        padding: 0 12px;
    }
    .site-header { position: fixed; }
    .site-header .top-bar { display: none !important; }
    .navbar-toggler { display: block; }

    /* Overlay backdrop */
    .nav-overlay {
        display: block;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.45);
        z-index: 1999;
        opacity: 0; visibility: hidden;
        transition: opacity 0.35s, visibility 0.35s;
        pointer-events: none;
    }
    .nav-overlay.show {
        opacity: 1; visibility: visible;
        pointer-events: auto;
    }

    /* Right-side slide-in drawer */
    .nav-collapse {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        left: auto;
        width: min(380px, 85vw);
        background: var(--bg-color);
        z-index: 2000;
        padding: 80px 30px 30px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex-direction: column;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
        visibility: hidden;
        box-shadow: -8px 0 30px rgba(0,0,0,0.12);
    }
    .nav-collapse.show {
        transform: translateX(0);
        visibility: visible;
    }
    .navbar-nav { flex-direction: column; width: 100%; }
    .navbar-nav .nav-link {
        padding: 14px 0 !important;
        font-size: 1.125rem;
        border-bottom: 1px solid rgba(0,0,0,0.06);
        transition: color 0.25s ease, padding-left 0.25s ease;
    }
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        color: var(--primary-color);
        padding-left: 8px !important;
        border-color: transparent;
    }
    .navbar-nav .nav-link::after { display: none; }
    .navbar-nav .nav-link .bi-chevron-down { font-size: 0.75rem !important; }
    .nav-item.has-mega { position: relative !important; }
    .mega-menu {
        position: static !important;
        transform: none !important;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
        border: none;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: none;
        width: 100%;
        flex-direction: column;
        left: auto;
    }
    .nav-item.has-mega.show .mega-menu { display: flex; }
    .mega-menu__body { padding: 12px 0 8px; }
    .mega-menu__grid { grid-template-columns: 1fr; gap: 0; }
    .mega-menu__item {
        padding: 14px 12px;
        border-radius: 10px;
        border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.06));
        gap: 14px;
    }
    .mega-menu__item:last-child { border-bottom: none; }
    .mega-menu__icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 1.125rem;
    }
    .mega-menu__text h4 {
        font-size: 1rem;
        margin-bottom: 2px;
    }
    .mega-menu__text p {
        display: block;
        font-size: 0.875rem;
        color: var(--text-muted);
        line-height: 1.4;
    }
    .mega-menu__footer { display: none; }
    .mega-menu__footer-cta { display: none; }
    .header-actions {
        flex-direction: column;
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid var(--border-color);
        gap: 12px;
    }
    .header-phone { display: flex !important; }
    .header-cta { text-align: center; justify-content: center; width: 100%; }

    /* Mobile hero — clear fixed header (~70px) + breathing room */
    .hero-section { min-height: auto; padding-top: 120px !important; }
    .hero-section--full { min-height: 85vh; }
    .hero-content { padding: 20px 0 60px; }
    .hero-section h1 { font-size: 3rem !important; }
    .hero-shape { display: none; }

    .hero-bg::after {
        /* On mobile, use the auto-generated top→bottom version of the overlay */
        background: var(--hero-overlay-bg-mobile, var(--hero-overlay-bg, linear-gradient(to bottom,
            rgba(10, 61, 31, 0.75) 0%,
            rgba(15, 41, 20, 0.45) 50%,
            rgba(87, 186, 71, 0.10) 100%)));
        opacity: var(--hero-overlay-opacity, 0.55);
    }
    .hero-stats { flex-wrap: wrap; gap: 16px; }
    .hero-stat { border-right: none; padding-right: 0; margin-right: 20px; }
    .hero-dots { display: none; }
    .hero-mesh { display: none; }
    .hero-particles { display: none; }
    .hero-trust { gap: 12px; }
    .hero-trust__item { font-size: 0.875rem; }
    .hero-btn-group { flex-direction: column; }
    .hero-btn-group .btn { width: 100%; text-align: center; justify-content: center; }

    /* Feature section tablet */
    .feature-one__content { max-width: 100%; }
    .feature-one__card { padding: 28px 22px 24px; }
    .feature-one__card--offset { margin-top: 0; }
    .feature-one__svg--1 { width: 360px; height: 360px; }
    .feature-one__svg--2 { width: 300px; height: 300px; }
    .feature-one__svg--3 { width: 200px; height: 200px; opacity: 0.6; }
    .feature-one__svg--4 { display: none; }
    .feature-one__checklist { gap: 8px; }
    .feature-one__checklist li { font-size: 1rem; padding: 8px 14px 8px 12px; }

    .hero-slider { height: var(--hs-height, 80vh); min-height: 500px; }
    .hs-content { padding: 100px 0 80px; }
    .hs-headline { font-size: clamp(2.25rem, 5vw, 3rem); }
    .hs-arrow { width: 44px; height: 44px; font-size: 1.1rem; }
    .hs-prev { left: 16px; }
    .hs-next { right: 16px; }
    .hs-counter { display: none; }
}

@media (max-width: 767px) {
    :root { --section-py: 60px; }
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2.1rem; }
    h3 { font-size: 1.7rem; }
    .hero-section h1 { font-size: 2.625rem !important; }
    .hero-lead { font-size: 1.25rem !important; }
    .hero-trust { flex-direction: column; gap: 8px; border-top: none; padding-top: 16px; }
    .hero-sub-title { font-size: 0.9375rem; padding: 8px 16px; }
    .btn-hero-primary, .btn-hero-outline { padding: 14px 28px !important; font-size: 1.0625rem !important; }

    /* Feature section mobile */
    .feature-one__title { font-size: 1.875rem !important; }
    .feature-one__checklist { gap: 8px; }
    .feature-one__checklist li { font-size: 1rem; padding: 8px 14px 8px 12px; }
    .feature-one__card { padding: 28px 20px 24px; }
    .feature-one__card--offset { margin-top: 0; }
    .feature-one__card-icon { width: 72px; height: 72px; }
    .feature-one__card-icon i { font-size: 1.625rem; }
    .feature-one__svg { display: none; }

    .container > .row,
    .container > div > .row { margin-left: -10px; margin-right: -10px; }
    .container > .row > [class*="col"],
    .container > div > .row > [class*="col"] { padding-left: 10px; padding-right: 10px; }

    img, video, iframe, embed, object, table { max-width: 100%; }

    /* Mobile hero small screens — clear fixed header */
    .hero-section { padding-top: 110px !important; padding-bottom: 40px !important; }
    .hero-content { padding: 10px 0 40px; }
    .hero-section h1 { font-size: 2.5rem !important; }
    .hero-section .hero-lead { font-size: 1.1875rem !important; }
    .hero-btn-group { flex-direction: column; }
    .hero-btn-group .btn-primary,
    .hero-btn-group .btn-outline-light,
    .hero-btn-group .btn-hero-primary,
    .hero-btn-group .btn-hero-outline { width: 100%; justify-content: center; }
    .hero-stats { flex-direction: column; gap: 12px; padding-top: 20px; }
    .hero-stat { display: flex; align-items: center; gap: 10px; margin-right: 0; }
    .hero-stat__number { font-size: 1.5rem; }

    .testimonial-card { padding: 28px 24px; }
    .contact-info-card, .contact-form-card { padding: 28px 24px; }
    .contact-card-single { padding: 20px 16px; }
    .contact-card-single__icon { width: 52px; height: 52px; font-size: 1.25rem; }
    .contact-card-single__value { font-size: 1rem; }
    .cta-section { padding: 60px 0 !important; }
    footer { padding: 0 !important; }

    /* Premium CTA small mobile */
    .premium-cta { padding: 48px 0; }
    .premium-cta__title { font-size: 1.75rem; }
    .premium-cta__desc { font-size: 1.0625rem; }
    .premium-cta__stats { flex-wrap: wrap; gap: 16px; }
    .premium-cta__stat-number { font-size: 1.375rem; }
    .premium-cta__card { padding: 32px 24px; border-radius: 16px; }
    .premium-cta__promise { gap: 12px; }

    /* FAQ mobile */
    .faq-item__header { padding: 18px 20px; gap: 12px; }
    .faq-item__answer { padding: 0 20px 0 64px; }
    .faq-item.active .faq-item__answer { padding: 0 20px 20px 64px; }

    /* Premium CTA mobile */
    .premium-cta { padding: 60px 0; }
    .premium-cta__grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .premium-cta__desc { max-width: none; }
    .premium-cta__stats { justify-content: center; }
    .premium-cta__action { max-width: 400px; margin: 0 auto; }
    .footer-main { padding: 48px 0 32px; }
    .footer-bottom__inner { flex-direction: column; text-align: center; }
    .footer-bottom__links { justify-content: center; }

    .features-section .border:hover { transform: translateY(-3px); }
    .features-section .border { text-align: center; }
    .service-card:hover { transform: translateY(-5px); }

    .hero-slider { height: auto; min-height: 85vh; }
    .hs-content { padding: 110px 0 100px; }
    .hs-headline { font-size: clamp(2.125rem, 7vw, 2.75rem); }
    .hs-sub { font-size: 1.125rem; margin-bottom: 24px; }
    .hs-actions { flex-direction: column; }
    .hs-actions .btn-hs-primary,
    .hs-actions .btn-hs-outline { width: 100%; justify-content: center; padding: 14px 28px; }
    .hs-arrow { display: none; }
    .hs-dots { bottom: 24px; gap: 8px; }
    .hs-dot { width: 28px; height: 28px; }
    .hs-dot svg { width: 28px; height: 28px; }
    .hs-dot::before { width: 8px; height: 8px; }
    .hs-stats-row { flex-wrap: wrap; }
    .hs-stat {
        flex: 1 1 50%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 20px 16px;
    }
    .hs-stat:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.1); }
    .hs-stat-number { font-size: 1.8rem; }

    /* Testimonials: stack to single column */
    .testimonials-section .row.g-4 > [class*="col-md-4"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .testimonial-card { margin-bottom: 0; }
    .testimonial-card blockquote { font-size: 1.0625rem; }
    .quote-icon { font-size: 3rem; }

    /* Contact: 2-col on small tablets, stack on phone */
    .contact-card-single__value {
        word-break: break-all;
        overflow-wrap: break-word;
        font-size: 1rem;
    }
    .contact-form-card { padding: 24px 20px; }
    .contact-section .text-center .lead { font-size: 1.0625rem !important; }

    /* Footer: stack fully */
    .footer-main .row > [class*="col"] {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }
    .footer-brand { text-align: center; }
    .footer-brand p { max-width: none; margin-left: auto; margin-right: auto; }
    .footer-social { justify-content: center; }
    .footer-heading::after { left: 50%; transform: translateX(-50%); }
    .footer-heading { text-align: center; }
    .footer-links { text-align: center; }
    .footer-links li a::before { display: none; }
    .footer-contact-item { justify-content: center; }
    .footer-ndis-badge { text-align: center; }
    .footer-main { padding: 40px 0 28px; }
    .footer-bottom { padding: 16px 0; }
    .footer-bottom__inner { flex-direction: column; text-align: center; gap: 8px; }
    .footer-bottom__links { justify-content: center; gap: 14px; flex-wrap: wrap; }

    /* Section taglines */
    .section-tagline { font-size: 0.9375rem; }

    /* Long text overflow safety */
    h1, h2, h3, h4, h5, h6, p, a, span, blockquote {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

/* Extra-small screens (≤ 400px) */
@media (max-width: 400px) {
    h1 { font-size: 2.1rem; }
    h2 { font-size: 1.85rem; }
    h3 { font-size: 1.5rem; }
    .hero-section h1 { font-size: 2.25rem !important; }
    .hero-lead { font-size: 1.125rem !important; }
    .hero-sub-title { font-size: 0.875rem; padding: 8px 14px; }
    .hero-trust__item { font-size: 0.875rem; }
    .hero-trust__item i { font-size: 0.875rem; }
    .btn-hero-primary, .btn-hero-outline { padding: 14px 24px !important; font-size: 1rem !important; }

    .feature-one__title { font-size: 1.625rem !important; }
    .feature-one__text { font-size: 1rem; }
    .feature-one__card { padding: 24px 18px 22px; }
    .feature-one__card h3 { font-size: 1.125rem; }
    .feature-one__card p { font-size: 0.9375rem; }
    .feature-one__card-number { font-size: 2rem; }
    .feature-one__actions .btn { font-size: 1rem; padding: 14px 22px; }
    .feature-one__link { font-size: 0.9375rem; }

    .svc-content__title { font-size: 1.625rem; }
    .svc-box { padding: 12px 10px; }
    .svc-box__text h4 { font-size: 0.9375rem; }
    .svc-box__text span { font-size: 0.875rem; }
    .svc-content__tag { font-size: 0.875rem; }

    .hiw-title { font-size: 1.625rem; }
    .hiw-subtitle { font-size: 1rem; }
    .hiw-step { padding: 18px 16px; }
    .hiw-step-content h3 { font-size: 1.0625rem; }
    .hiw-step-content p { font-size: 0.9375rem; }

    .testimonials-section h2 { font-size: 1.625rem; }
    .testimonial-card { padding: 24px 18px; }
    .testimonial-card blockquote { font-size: 1rem; line-height: 1.75; }
    .testimonial-avatar { width: 42px; height: 42px; font-size: 0.9375rem; }

    .contact-section h2 { font-size: 1.625rem; }
    .contact-card-single { padding: 18px 14px; }
    .contact-card-single__icon { width: 48px; height: 48px; font-size: 1.2rem; }
    .contact-card-single__value { font-size: 0.9375rem; }
    .contact-form-card h3 { font-size: 1.125rem; }

    .cta-final__heading { font-size: 1.625rem; }
    .cta-final__lead { font-size: 1rem; }
    .cta-final__card-body { padding: 28px 20px 24px; }
    .cta-final__card-top h3 { font-size: 1.25rem; }
    .cta-final__btn { padding: 14px 20px; font-size: 0.9375rem; border-radius: 10px; }
    .cta-final__phone { padding: 10px 12px; border-radius: 10px; }
    .cta-final__phone-ring { width: 38px; height: 38px; border-radius: 10px; }
    .cta-final__phone strong { font-size: 1rem; }
    .cta-final__promise-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 1rem; }
    .cta-final__promise strong { font-size: 1rem; }
    .cta-final__promise span { font-size: 0.9375rem; }

    .footer-brand img { height: 36px; }
    .footer-heading { font-size: 1.0625rem; }
    .footer-links li a { font-size: 1rem; }
    .footer-contact-item { font-size: 1rem; }
}

/* Tablet landscape tweaks (768-991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Testimonials: 2 columns on tablet */
    .testimonials-section .row.g-4 { justify-content: center; }
    .testimonials-section .row.g-4 > [class*="col-md-4"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .testimonials-section .row.g-4 > [class*="col-md-4"]:last-child {
        flex: 0 0 50%;
        max-width: 50%;
    }
    /* Contact cards: 2x2 */
    .contact-section .row.g-4 > .col-sm-6.col-lg-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
/* ==========================================================================
   Hover Effect Utilities (consolidated from inline styles)
   ========================================================================== */

/* Disable heavy hover effects on touch screens */
@media (hover: none) {
    .hover-lift:hover,
    .hover-grow:hover,
    .hover-shrink:hover,
    .hover-rotate:hover,
    .feature-one__card:hover,
    .testimonial-card:hover,
    .contact-card-single:hover,
    .svc-box:hover {
        transform: none !important;
    }
}

.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-8px); box-shadow: 0 0 44px rgba(72,199,50,0.30); }

.hover-grow { transition: transform 0.3s ease; }
.hover-grow:hover { transform: scale(1.05); }

.hover-shrink { transition: transform 0.3s ease; }
.hover-shrink:hover { transform: scale(0.95); }

.hover-rotate { transition: transform 0.3s ease; }
.hover-rotate:hover { transform: rotate(3deg); }

.hover-pulse { animation: none; }
.hover-pulse:hover { animation: pulse 1s infinite; }
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.hover-shake { animation: none; }
.hover-shake:hover { animation: shake 0.5s ease-in-out; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.hover-glow { transition: box-shadow 0.3s ease; }
.hover-glow:hover { box-shadow: 0 0 20px rgba(88, 186, 71, 0.4); }

.hover-shadow { transition: box-shadow 0.3s ease; }
.hover-shadow:hover { box-shadow: 0 0 52px rgba(72,199,50,0.30); }

.hover-border-animate { position: relative; overflow: hidden; }
.hover-border-animate::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transition: left 0.4s ease;
}
.hover-border-animate:hover::after { left: 0; }

/* ==========================================================================
   Image Proportion Utilities — prevent CLS + enforce ratios
   ========================================================================== */

.image-text-section .img-fluid {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* ==========================================================================
   404 Page Styles (moved from inline <style>)
   ========================================================================== */

.gl-404-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(170deg, var(--bg-primary-tint) 0%, var(--bg-light) 50%, var(--bg-primary-tint) 100%);
    text-align: center;
    padding: 6rem 1rem;
    position: relative;
}
.gl-404-content { position: relative; z-index: 2; max-width: 580px; }
.gl-404-code {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(6rem, 16vw, 10rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: .5rem;
}
.gl-404-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--bg-dark);
    margin-bottom: .75rem;
}
.gl-404-text { color: var(--text-muted); font-size: 1.1rem; line-height: 1.75; margin-bottom: 2rem; }
.gl-404-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--primary-color);
    color: var(--text-light);
    font-weight: 600;
    font-size: 1.05rem;
    padding: .85rem 2.2rem;
    border-radius: 10px;
    text-decoration: none;
    transition: all .3s ease;
    border: none;
}
.gl-404-btn:hover { background: var(--primary-dark); color: var(--text-light); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(88,186,71,.25); }
.gl-404-links { margin-top: 1.5rem; display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.gl-404-links a { color: var(--text-muted); font-size: .95rem; text-decoration: none; transition: color .3s; font-weight: 500; }
.gl-404-links a:hover { color: var(--primary-color); }

/* ── Auto-linked service keywords ── */
.auto-svc-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.auto-svc-link:hover {
    color: var(--primary-dark);
    border-bottom-color: var(--primary-color);
}
/* Inside dark sections (hero, footer, CTA) use accent/light colour */
.hero-section .auto-svc-link,
.cta-section .auto-svc-link,
.cta-final .auto-svc-link,
.premium-cta .auto-svc-link,
footer .auto-svc-link {
    color: var(--accent-color, var(--green-300));
}
.hero-section .auto-svc-link:hover,
.cta-section .auto-svc-link:hover,
.cta-final .auto-svc-link:hover,
.premium-cta .auto-svc-link:hover,
footer .auto-svc-link:hover {
    color: #fff;
    border-bottom-color: var(--accent-color, var(--green-300));
}

.gl-404-leaf {
    position: absolute;
    font-size: 12rem;
    opacity: .03;
    pointer-events: none;
    bottom: 10%;
    right: 8%;
    transform: rotate(20deg);
}