/*
Theme Name: Apex Inspections Theme
Theme URI: https://apexinspections.com.au/
Description: A premium, ultra-modern custom theme for building and pest inspections with rich 3D animations and advanced SEO optimization.
Version: 1.0.0
Author: Rajesh
Author URI: https://apexinspections.com.au/
Text Domain: apex-inspections
*/

/* ==========================================
   Apex Building & Pest Inspections Stylesheet
   Theme: Light Luxury (White/Soft Gray + Green #7AC943)
   ========================================== */

/* 1. Global Reset & Variables */
:root {
    --primary: #7AC943;
    --primary-dark: #62a334;
    --primary-light: #eff9e6;
    --dark: #0A0F1D;
    --dark-muted: #4B5563;
    --light: #F8FAFC;
    --white: #FFFFFF;
    
    /* System Colors */
    --green-ok: #10B981;
    --orange-alert: #F59E0B;
    --red-danger: #EF4444;
    
    /* Layout */
    --container-width: 1200px;
    --header-height: 80px;
    
    /* Gradients */
    --grad-light: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
    --grad-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.3) 100%);
    
    /* Shadows */
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.07), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-lux: 0 30px 60px -15px rgba(10, 15, 29, 0.08);
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--white);
    color: var(--dark);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--dark);
    font-weight: 700;
    line-height: 1.25;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* 2. Layout Elements & Helper Classes */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: 100px 0;
    background-color: var(--white);
    position: relative;
}

.text-center { text-align: center; }
.text-green { color: var(--green-ok) !important; }
.text-orange { color: var(--orange-alert) !important; }
.text-red { color: var(--red-danger) !important; }

/* Text Gradient Effect */
.text-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Badges & Pills */
.badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.green-badge {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    border: 1px solid rgba(122, 201, 67, 0.2);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 24px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background-color 0.24s ease, color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
    gap: 8px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--white);
    box-shadow: 0 8px 18px rgba(122, 201, 67, 0.28);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(122, 201, 67, 0.34);
}

.btn-secondary {
    background-color: var(--light);
    color: var(--dark);
    border: 1px solid rgba(10, 15, 29, 0.05);
}

.btn-secondary:hover {
    background-color: #E2E8F0;
    transform: translateY(-1px);
}

.btn-full {
    width: 100%;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
    border-radius: 999px;
}

/* Glassmorphism panel */
.glass-panel {
    background: var(--grad-glass);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow-lux);
    border-radius: 20px;
}

/* 3. Header Navigation styling */
.main-header {
    height: var(--header-height);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: transparent;
    backdrop-filter: none;
    border-bottom: 0;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: calc(100% - 48px);
    max-width: 1320px;
    margin: 14px auto 0 auto;
    padding: 0 22px;
    height: 58px;
    background: rgba(8, 18, 32, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: 999px;
    box-shadow: 0 18px 60px rgba(10, 15, 29, 0.22);
    backdrop-filter: blur(16px);
    position: relative;
}

.logo-wrapper {
    display: flex;
    flex-direction: column;
    line-height: 1;
    flex-shrink: 0;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    color: var(--white);
    text-shadow: 0 3px 14px rgba(10, 15, 29, 0.28);
    white-space: nowrap;
}

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

.logo-subtext {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
}

.nav-links {
    display: flex;
    gap: 24px;
    flex-shrink: 1;
    min-width: 0;
    margin: 0 16px;
}

.nav-links a {
    font-size: 0.98rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.96);
    white-space: nowrap;
    text-shadow: 0 2px 12px rgba(10, 15, 29, 0.55);
}

.nav-links a:hover, .nav-links a.active {
    color: var(--primary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.phone-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: var(--white);
    white-space: nowrap;
    flex-shrink: 0;
    text-shadow: 0 2px 12px rgba(10, 15, 29, 0.58);
}

.phone-link i {
    width: 18px;
    height: 18px;
    color: var(--primary);
}

.hamburger-btn {
    display: none;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--white);
    cursor: pointer;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.hamburger-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.hamburger-btn i {
    width: 24px;
    height: 24px;
}

.main-header.scrolled .header-container {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(10, 15, 29, 0.08);
}

.main-header.scrolled .logo-text,
.main-header.scrolled .phone-link,
.main-header.scrolled .hamburger-btn {
    color: var(--dark);
    text-shadow: none;
}

.main-header.scrolled .logo-subtext {
    color: var(--primary);
}

.main-header.scrolled .nav-links a {
    color: var(--dark-muted);
    text-shadow: none;
}

.mobile-menu {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background: var(--white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 24px;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--shadow-md);
    z-index: 999;
}

.mobile-menu.active {
    display: flex;
}

.mobile-menu > a, .mobile-menu-trigger {
    font-weight: 600;
    font-size: 1rem;
    color: var(--dark);
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
    text-decoration: none;
}

.mobile-menu > a:last-child {
    border-bottom: none;
}

.mobile-menu > a:hover, .mobile-menu-trigger:hover {
    color: var(--primary);
}

/* Services Mega Menu Styles */
.nav-item-has-mega {
    position: static;
}

.mega-menu-dropdown {
    position: absolute;
    top: calc(100% - 5px);
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    width: 940px;
    max-width: calc(100vw - 32px);
    background: #ffffff;
    border: 1px solid rgba(10, 15, 29, 0.08);
    border-radius: 28px;
    padding: 30px;
    box-shadow: 0 30px 70px rgba(10, 15, 29, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 1010;
    pointer-events: none;
}

.mega-menu-dropdown::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 25px;
    background: transparent;
}

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

.mega-menu-container {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr 1.05fr;
    gap: 28px;
}

.mega-menu-banner {
    background: #0A2216; /* Deep forest green */
    border-radius: 20px;
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
    min-height: 290px;
    box-shadow: 0 10px 30px rgba(122, 201, 67, 0.08);
}

.mega-menu-banner h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.mega-menu-banner .service-book-trigger {
    background: var(--primary);
    color: var(--white);
    border: none;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    width: 100%;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    box-shadow: 0 8px 20px rgba(122, 201, 67, 0.25);
}

.mega-menu-banner .service-book-trigger:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(122, 201, 67, 0.35);
}

.mega-menu-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mega-column-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #8A8D96;
    margin-bottom: 2px;
}

.mega-menu-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mega-menu-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 14px;
    border-radius: 18px;
    text-decoration: none;
    transition: background 0.2s ease;
    white-space: normal;
    text-shadow: none !important;
}

.mega-menu-item:hover {
    background: #FAF8F5;
}

.mega-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #E8F5E9; /* light green background */
    color: #0A2216; /* dark green icon color */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease;
}

.mega-menu-item:hover .mega-icon-box {
    background: #0A2216;
    color: #ffffff;
}

.mega-icon-box i {
    width: 20px;
    height: 20px;
}

.mega-item-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    white-space: normal;
}

.mega-item-text h5 {
    font-size: 13.5px;
    font-weight: 750;
    color: #0A0F1D;
    margin: 0;
    transition: color 0.2s ease;
}

.mega-menu-item:hover .mega-item-text h5 {
    color: #7ac943;
}

.mega-item-text p {
    font-size: 11.5px;
    line-height: 1.4;
    color: #6C707A;
    margin: 0;
}

/* Prevent mega menu overflow on smaller desktop viewports */
@media (min-width: 1221px) and (max-width: 1300px) {
    .mega-menu-dropdown {
        width: 880px;
        padding: 24px;
        border-radius: 24px;
    }
    .mega-menu-container {
        gap: 20px;
    }
    .mega-menu-banner {
        padding: 28px 20px;
        min-height: 270px;
        border-radius: 16px;
    }
    .mega-menu-banner h3 {
        font-size: 20px;
    }
    .mega-menu-item {
        padding: 8px 10px;
        gap: 12px;
        border-radius: 14px;
    }
    .mega-icon-box {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }
    .mega-icon-box i {
        width: 18px;
        height: 18px;
    }
    .mega-item-text h5 {
        font-size: 13px;
    }
    .mega-item-text p {
        font-size: 11px;
    }
}

/* Mobile Submenu styles */
.mobile-menu-item-collapsible {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mobile-menu-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1rem;
    color: var(--dark);
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
    cursor: pointer;
}

.mobile-chevron {
    transition: transform 0.3s ease;
}

.mobile-menu-item-collapsible.active .mobile-chevron {
    transform: rotate(180deg);
}

.mobile-submenu {
    display: none;
    flex-direction: column;
    padding-left: 16px;
    gap: 8px;
    margin: 8px 0;
}

.mobile-menu-item-collapsible.active .mobile-submenu {
    display: flex;
}

.mobile-submenu a {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--dark-muted);
    border-bottom: none !important;
    padding: 6px 0;
    text-decoration: none;
}

.mobile-submenu a:hover {
    color: var(--primary);
}

@media (max-width: 1220px) {
    .nav-links {
        display: none !important;
    }
    .hamburger-btn {
        display: flex;
    }
}

/* 4. Section 1: Hero Section */
.hero-section {
    padding-top: var(--header-height);
    height: 100vh;
    min-height: 800px;
    display: flex;
    align-items: stretch;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.hero-container {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr; /* 42.5% Left, 57.5% Right */
    max-width: 100% !important;
    width: 100%;
    padding-left: 80px;
    padding-right: 0;
    align-items: stretch;
    height: 100%;
}

.hero-section .green-badge {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.hero-section .green-badge::before {
    content: '';
    width: 20px;
    height: 2px;
    background-color: var(--primary);
    display: inline-block;
}

.hero-title {
    font-size: 4rem;
    line-height: 1.15;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--dark);
}

.hero-description {
    font-size: 1.2rem;
    color: var(--dark-muted);
    margin-bottom: 40px;
    max-width: 580px;
    line-height: 1.6;
}

.hero-ctas {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 48px;
}

.watch-video-btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    color: var(--dark);
    transition: all 0.3s ease;
}

.watch-video-btn:hover {
    color: var(--primary);
}

.watch-video-btn:hover .play-icon-circle {
    transform: scale(1.1);
    box-shadow: 0 12px 24px rgba(10, 15, 29, 0.15);
}

.play-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 8px 16px rgba(10, 15, 29, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.play-icon-circle i {
    width: 16px;
    height: 16px;
    fill: var(--dark);
    color: var(--dark);
    margin-left: 2px;
}

/* Side navigation */
.side-navigation {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    z-index: 100;
}

.side-navigation span {
    width: 6px;
    height: 6px;
    background: rgba(10, 15, 29, 0.25);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    color: transparent;
}

.side-navigation span.active {
    width: 26px;
    height: 26px;
    background: var(--white);
    border: 2px solid var(--dark);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--dark);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.social-proof {
    display: flex;
    align-items: center;
    gap: 16px;
}

.avatar-group {
    display: flex;
}

.avatar-group img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid var(--white);
    margin-right: -12px;
    object-fit: cover;
}

.proof-text .stars {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.star-fill {
    width: 16px;
    height: 16px;
    fill: #F59E0B;
    color: #F59E0B;
}

.rating-number {
    font-weight: 700;
    margin-left: 8px;
}

.proof-sub {
    font-size: 0.85rem;
    color: var(--dark-muted);
}

.hero-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 60px;
    z-index: 5;
}

.hero-right {
    position: relative;
    height: 100%;
    z-index: 2;
}

.hero-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-house-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    opacity: 0.34;
    filter: saturate(0.85) contrast(1.05) !important;
}

.hero-image-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 25%);
    z-index: 3;
    pointer-events: none;
}

.inspection-orbit-scene {
    position: absolute;
    inset: 7% 8% 8% 2%;
    z-index: 4;
    perspective: 1100px;
    transform-style: preserve-3d;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.inspection-orbit-scene::before {
    content: '';
    position: absolute;
    inset: 8% 2% 4% 12%;
    background:
        radial-gradient(circle at 50% 40%, rgba(122, 201, 67, 0.24), transparent 32%),
        linear-gradient(140deg, rgba(10, 15, 29, 0.72), rgba(10, 15, 29, 0.18) 48%, rgba(122, 201, 67, 0.22));
    border: 1px solid rgba(122, 201, 67, 0.28);
    border-radius: 28px;
    box-shadow: 0 30px 90px rgba(10, 15, 29, 0.32);
    transform: rotateX(58deg) rotateZ(-10deg) translateZ(-140px);
    filter: blur(0.2px);
}

.orbit-grid {
    position: absolute;
    width: min(78%, 620px);
    aspect-ratio: 1.45;
    border-radius: 50%;
    background:
        linear-gradient(rgba(122, 201, 67, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122, 201, 67, 0.18) 1px, transparent 1px);
    background-size: 28px 28px;
    border: 1px solid rgba(122, 201, 67, 0.45);
    transform: rotateX(70deg) rotateZ(-12deg);
    animation: gridPulse 4s ease-in-out infinite;
}

.holo-ring {
    position: absolute;
    width: min(70%, 560px);
    aspect-ratio: 1.75;
    border: 1px solid rgba(122, 201, 67, 0.55);
    border-radius: 50%;
    transform-style: preserve-3d;
    box-shadow: 0 0 26px rgba(122, 201, 67, 0.16);
}

.ring-one {
    transform: rotateX(72deg) rotateZ(-10deg);
    animation: orbitSpin 10s linear infinite;
}

.ring-two {
    width: min(55%, 440px);
    border-color: rgba(16, 185, 129, 0.42);
    transform: rotateX(66deg) rotateY(14deg) rotateZ(18deg);
    animation: orbitSpinReverse 13s linear infinite;
}

.ring-three {
    width: min(38%, 300px);
    border-color: rgba(245, 158, 11, 0.42);
    transform: rotateX(78deg) rotateZ(36deg);
    animation: orbitSpin 8s linear infinite;
}

.scan-sweep {
    position: absolute;
    width: 58%;
    height: 120%;
    background: linear-gradient(90deg, transparent 0%, rgba(122, 201, 67, 0.08) 34%, rgba(122, 201, 67, 0.46) 50%, rgba(122, 201, 67, 0.08) 66%, transparent 100%);
    transform: rotateZ(-13deg) translateX(-75%);
    mix-blend-mode: screen;
    filter: blur(0.3px);
    animation: scannerSweep 4.8s ease-in-out infinite;
}

.holo-house {
    position: relative;
    width: min(42vw, 360px);
    height: 280px;
    transform-style: preserve-3d;
    transform: rotateX(60deg) rotateZ(-12deg);
    animation: houseFloat3d 5.5s ease-in-out infinite;
}

.house-base {
    position: absolute;
    left: 50%;
    bottom: 38px;
    width: 250px;
    height: 145px;
    transform: translateX(-50%) translateZ(34px);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(203, 246, 180, 0.72)),
        linear-gradient(90deg, transparent 49%, rgba(10, 15, 29, 0.12) 50%, transparent 51%);
    border: 1px solid rgba(122, 201, 67, 0.56);
    box-shadow: 0 22px 40px rgba(10, 15, 29, 0.22), inset 0 0 24px rgba(122, 201, 67, 0.26);
}

.house-base::before,
.house-base::after {
    content: '';
    position: absolute;
    top: 16px;
    width: 48px;
    height: 112px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.34), rgba(15, 23, 42, 0.1));
    border: 1px solid rgba(122, 201, 67, 0.24);
}

.house-base::before {
    left: -50px;
    transform: skewY(-18deg);
    transform-origin: right top;
}

.house-base::after {
    right: -50px;
    transform: skewY(18deg);
    transform-origin: left top;
}

.house-roof {
    position: absolute;
    left: 50%;
    bottom: 178px;
    width: 298px;
    height: 92px;
    transform: translateX(-50%) translateZ(58px);
    transform-style: preserve-3d;
}

.roof-face {
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: linear-gradient(135deg, rgba(10, 15, 29, 0.9), rgba(38, 65, 42, 0.86));
    border: 1px solid rgba(122, 201, 67, 0.55);
    box-shadow: inset 0 -18px 28px rgba(122, 201, 67, 0.16);
}

.roof-left {
    transform: translateX(-42px) rotateY(-26deg);
    opacity: 0.84;
}

.roof-right {
    transform: translateX(42px) rotateY(26deg);
    opacity: 0.92;
}

.window,
.door {
    position: absolute;
    background: rgba(10, 15, 29, 0.76);
    border: 1px solid rgba(122, 201, 67, 0.55);
    box-shadow: 0 0 18px rgba(122, 201, 67, 0.22);
}

.window {
    top: 38px;
    width: 45px;
    height: 34px;
}

.window-one { left: 42px; }
.window-two { right: 42px; }

.door {
    left: 50%;
    bottom: 0;
    width: 42px;
    height: 72px;
    transform: translateX(-50%);
}

.thermal-zone {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.76), rgba(245, 158, 11, 0.34) 44%, transparent 70%);
    filter: blur(1px);
    animation: thermalPulse 2.6s ease-in-out infinite;
}

.zone-one {
    left: 82px;
    bottom: 108px;
}

.zone-two {
    right: 84px;
    bottom: 58px;
    animation-delay: 1.1s;
}

.foundation-line {
    position: absolute;
    left: 50%;
    bottom: 20px;
    width: 310px;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(122, 201, 67, 0.95), transparent);
    transform: translateX(-50%) translateZ(76px);
    box-shadow: 0 0 18px rgba(122, 201, 67, 0.48);
}

.inspection-drone {
    position: absolute;
    top: 18%;
    left: 23%;
    width: 92px;
    height: 44px;
    animation: droneSurvey 7s ease-in-out infinite;
}

.drone-core {
    position: absolute;
    left: 28px;
    top: 15px;
    width: 36px;
    height: 14px;
    border-radius: 999px;
    background: #0a0f1d;
    box-shadow: 0 8px 18px rgba(10, 15, 29, 0.24);
}

.drone-rotor {
    position: absolute;
    top: 6px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(122, 201, 67, 0.54);
    animation: rotorBlur 0.42s linear infinite;
}

.rotor-a { left: 0; }
.rotor-b { right: 0; }

.drone-light {
    position: absolute;
    left: 43px;
    top: 28px;
    width: 6px;
    height: 120px;
    background: linear-gradient(180deg, rgba(122, 201, 67, 0.72), transparent);
    filter: blur(2px);
    transform-origin: top;
    transform: rotate(7deg);
}

.defect-pin,
.report-hud {
    position: absolute;
    min-width: 104px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(122, 201, 67, 0.32);
    box-shadow: 0 18px 36px rgba(10, 15, 29, 0.18);
    backdrop-filter: blur(12px);
    transform-style: preserve-3d;
}

.defect-pin::before {
    content: '';
    position: absolute;
    left: 18px;
    bottom: -18px;
    width: 2px;
    height: 18px;
    background: rgba(122, 201, 67, 0.7);
}

.defect-pin span,
.report-hud span {
    display: block;
    font-size: 0.62rem;
    color: var(--dark-muted);
    font-weight: 800;
    letter-spacing: 0.08em;
}

.defect-pin strong,
.report-hud strong {
    display: block;
    margin-top: 3px;
    color: var(--dark);
    font-size: 1rem;
    line-height: 1;
}

.pin-roof {
    top: 27%;
    right: 19%;
    animation: hudFloat 3.8s ease-in-out infinite;
}

.pin-moisture {
    left: 16%;
    bottom: 25%;
    animation: hudFloat 4.3s ease-in-out infinite 0.4s;
}

.pin-termite {
    right: 7%;
    bottom: 22%;
    border-color: rgba(239, 68, 68, 0.3);
    animation: hudFloat 4s ease-in-out infinite 0.8s;
}

.hud-score {
    top: 13%;
    right: 2%;
    min-width: 126px;
}

.hud-report {
    left: 9%;
    top: 13%;
    min-width: 122px;
}

/* Drone visual markup */
.drone-wrapper {
    position: absolute;
    top: 10%;
    left: 20%;
    opacity: 1;
    animation: none;
}

.drone-body {
    width: 40px;
    height: 12px;
    background: #000;
    border-radius: 6px;
    position: relative;
}

.drone-body::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 12px;
    width: 16px;
    height: 8px;
    background: var(--primary);
    border-radius: 4px;
}

.rotor {
    width: 32px;
    height: 2px;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: -10px;
    animation: none;
}

.rotor-1 { left: -10px; }
.rotor-2 { right: -10px; }

/* Floating Cards in Hero */
.floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--shadow-lux);
    border-radius: 14px;
    z-index: 5;
    opacity: 0;
    transform: translateY(25px) scale(0.95);
}

.roof-ok {
    top: 12%;
    right: 5%;
    animation: cardPopIn 1.0s cubic-bezier(0.25, 1, 0.5, 1) forwards, floatCard 4s infinite ease-in-out;
    animation-delay: 2.5s, 3.5s;
}

.moisture-med {
    top: 42%;
    right: -2%;
    animation: cardPopIn 1.0s cubic-bezier(0.25, 1, 0.5, 1) forwards, floatCard 4s infinite ease-in-out;
    animation-delay: 2.7s, 3.7s;
}

.termite-warn {
    top: 72%;
    right: 8%;
    animation: cardPopIn 1.0s cubic-bezier(0.25, 1, 0.5, 1) forwards, floatCard 4s infinite ease-in-out;
    animation-delay: 2.9s, 3.9s;
}

.badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--white);
}

.ok-icon { background: var(--green-ok); }
.alert-icon { background: var(--orange-alert); }
.danger-icon { background: var(--red-danger); }

.badge-icon i {
    width: 18px;
    height: 18px;
}

.card-details {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.card-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--dark-muted);
}

.card-status {
    font-size: 0.85rem;
    font-weight: 800;
}

.ok-status { color: var(--green-ok); }
.alert-status { color: var(--orange-alert); }
.danger-status { color: var(--red-danger); }

/* 5. About Showcase */
.about-showcase-section {
    background: var(--white);
    padding-top: 92px;
    padding-bottom: 92px;
}

.about-showcase-container {
    display: grid;
    grid-template-columns: 0.75fr 1.15fr 0.75fr;
    gap: 42px;
    align-items: center;
}

.about-image-card {
    position: relative;
    overflow: hidden;
    min-height: 310px;
    border-radius: 0 34px 34px 0;
    box-shadow: 0 28px 62px rgba(10, 15, 29, 0.16);
}

.about-image-right {
    border-radius: 34px 0 0 34px;
    align-self: end;
    transform: translateY(42px);
}

.about-image-card img {
    width: 100%;
    height: 100%;
    min-height: 310px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.about-image-card:hover img {
    transform: scale(1.05);
}

.about-showcase-copy {
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
}

.about-spark {
    display: block;
    margin-bottom: 18px;
    color: var(--dark);
    font-size: 1.6rem;
}

.about-showcase-copy h2 {
    margin: 18px 0 18px;
    color: var(--dark);
    font-size: clamp(2.2rem, 4.4vw, 5rem);
    line-height: 1.02;
    letter-spacing: 0;
}

.about-showcase-copy p {
    max-width: 560px;
    margin: 0 auto 28px;
    color: var(--dark-muted);
    font-size: 1.03rem;
    line-height: 1.75;
}

.about-showcase-copy .btn {
    margin: 0 auto;
}

.about-estate-container {
    display: flex;
    flex-direction: column;
    gap: 52px;
}

.about-estate-hero {
    display: grid;
    grid-template-columns: 0.96fr 1.04fr;
    gap: 14px;
    align-items: stretch;
}

.about-estate-copy {
    min-height: 470px;
    padding: 56px;
    border-radius: 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #071525;
    color: var(--white);
    box-shadow: 0 28px 70px rgba(10, 15, 29, 0.18);
}

.about-mini-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.78rem;
    font-weight: 800;
}

.about-mini-kicker i {
    width: 15px;
    height: 15px;
    color: var(--primary);
}

.about-estate-copy h2 {
    max-width: 560px;
    margin-bottom: 22px;
    color: var(--white);
    font-size: clamp(2.6rem, 5vw, 5.3rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.about-estate-copy > p {
    max-width: 590px;
    margin-bottom: 28px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.08rem;
    line-height: 1.75;
}

.about-estate-copy .btn {
    align-self: flex-start;
}

.about-trust-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
}

.about-avatar-stack {
    display: flex;
}

.about-avatar-stack span {
    width: 36px;
    height: 36px;
    margin-left: -8px;
    border: 2px solid #071525;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--dark);
    font-size: 0.72rem;
    font-weight: 900;
}

.about-avatar-stack span:first-child {
    margin-left: 0;
}

.about-trust-row p {
    margin: 0;
    max-width: 330px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.86rem;
    line-height: 1.45;
}

.about-estate-visual {
    position: relative;
    min-height: 470px;
    overflow: hidden;
    border-radius: 26px;
    background: var(--dark);
    box-shadow: 0 28px 70px rgba(10, 15, 29, 0.16);
}

.about-estate-visual img {
    width: 100%;
    height: 100%;
    min-height: 470px;
    object-fit: cover;
    object-position: center;
    transition: transform 0.8s ease;
}

.about-estate-visual:hover img {
    transform: scale(1.05);
}

.about-property-chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--dark);
    box-shadow: 0 18px 44px rgba(10, 15, 29, 0.18);
    backdrop-filter: blur(10px);
}

.about-property-chip i {
    width: 22px;
    height: 22px;
    color: var(--primary);
}

.about-property-chip strong,
.about-property-chip span {
    display: block;
}

.about-property-chip strong {
    font-size: 0.9rem;
}

.about-property-chip span {
    color: var(--dark-muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.about-chip-top {
    top: 22px;
    left: 22px;
}

.about-chip-bottom {
    right: 22px;
    bottom: 22px;
}

.about-story-panel {
    position: relative;
    text-align: center;
}

.about-story-center {
    max-width: 820px;
    margin: 0 auto;
}

.about-story-center h3,
.about-tools-heading h3 {
    margin: 18px 0 16px;
    color: var(--dark);
    font-size: clamp(2.1rem, 4vw, 4rem);
    line-height: 1;
    letter-spacing: 0;
}

.about-story-center p {
    color: var(--dark-muted);
    font-size: 1.05rem;
    line-height: 1.8;
}

.about-tools-wrap {
    padding-top: 8px;
}

.about-tools-heading {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: end;
    margin-bottom: 26px;
}

.about-tools-heading h3 {
    max-width: 610px;
    margin-bottom: 0;
}

.about-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.about-tool-card {
    min-height: 220px;
    padding: 24px;
    border: 1px solid rgba(10, 15, 29, 0.07);
    border-radius: 24px;
    background: #F7FAFC;
    box-shadow: 0 16px 38px rgba(10, 15, 29, 0.06);
}

.about-tool-card i {
    width: 38px;
    height: 38px;
    padding: 9px;
    margin-bottom: 24px;
    border-radius: 14px;
    color: var(--dark);
    background: var(--primary-light);
}

.about-tool-card h4 {
    margin-bottom: 10px;
    color: var(--dark);
    font-size: 1.15rem;
}

.about-tool-card h3 {
    margin-bottom: 10px;
    color: var(--dark);
    font-size: 1.15rem;
}

.about-tool-card p {
    color: var(--dark-muted);
    line-height: 1.65;
    font-size: 0.95rem;
}

/* 5. Section 2: Digital Twin Section */
.digital-section {
    position: relative;
    overflow: hidden;
    background: var(--white);
}

.digital-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.36fr 0.64fr;
    gap: 42px;
    align-items: center;
}

.digital-section::after {
    display: none;
    content: none;
}

.service-showcase-copy {
    max-width: 330px;
}

.service-showcase-copy h2 {
    margin: 18px 0 16px;
    color: var(--dark);
    font-size: clamp(2.25rem, 4.2vw, 4rem);
    line-height: 1.08;
    letter-spacing: 0;
}

.service-showcase-copy p {
    max-width: 300px;
    margin-bottom: 28px;
    color: var(--dark-muted);
    font-size: 1.05rem;
    line-height: 1.55;
}

.section-title {
    font-size: 2.75rem;
    margin-bottom: 24px;
}

.section-desc {
    font-size: 1.1rem;
    color: var(--dark-muted);
    margin-bottom: 24px;
    max-width: 620px;
}

.digital-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 320px;
    margin-bottom: 24px;
}

.digital-menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dark-muted);
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
}

.digital-menu-item:hover {
    background: rgba(255, 255, 255, 0.5);
    color: var(--dark);
}

.digital-menu-item.active {
    background: var(--white);
    color: var(--primary-dark);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(122, 201, 67, 0.15);
}

.digital-menu-item i {
    width: 18px;
    height: 18px;
}

.learn-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--primary-dark);
    letter-spacing: 0.05em;
    margin-top: 16px;
}

.learn-more-link:hover {
    color: var(--primary);
    transform: translateX(4px);
}

.digital-viewer-wrapper {
    position: relative;
    width: 100%;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inspection-scope-list {
    position: relative;
    z-index: 12;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    max-width: 820px;
    margin: 0 0 0 auto;
}

.inspection-scope-card {
    position: relative;
    min-height: 292px;
    overflow: hidden;
    border-radius: 30px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--white);
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 22px 46px rgba(10, 15, 29, 0.24);
    isolation: isolate;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.inspection-scope-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.55), transparent 20%),
        linear-gradient(135deg, rgba(122, 201, 67, 0.24), rgba(8, 17, 34, 0.04));
}

.inspection-scope-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 58px rgba(10, 15, 29, 0.26);
}

.inspection-scope-card span {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--dark);
    font-size: 0.72rem;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(10, 15, 29, 0.18);
}

.inspection-scope-card strong {
    max-width: 190px;
    font-size: 1.62rem;
    line-height: 1.02;
    letter-spacing: 0;
}

.inspection-scope-card p {
    margin: 9px 0 14px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.86rem;
    line-height: 1.35;
}

.scope-action {
    width: 100%;
    border: 0;
    min-height: 36px;
    padding: 7px 8px 7px 15px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--dark);
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.24s ease, background 0.24s ease;
}

.scope-action:hover {
    transform: translateY(-1px);
    background: var(--white);
}

.scope-action i {
    width: 24px;
    height: 24px;
    padding: 6px;
    border-radius: 50%;
    background: var(--dark);
    color: var(--white);
}

.scope-prepurchase {
    background-image: linear-gradient(180deg, rgba(104, 167, 222, 0.22) 0%, rgba(10, 15, 29, 0.1) 32%, rgba(10, 15, 29, 0.86) 100%), url("assets/suburb_werribee_v2.png");
    background-position: 42% center;
}
.scope-building-pest {
    background-image: linear-gradient(180deg, rgba(104, 167, 222, 0.22) 0%, rgba(10, 15, 29, 0.1) 32%, rgba(10, 15, 29, 0.86) 100%), url("assets/termite_why_v2.png");
    background-position: 56% center;
}
.scope-construction {
    background-image: linear-gradient(180deg, rgba(104, 167, 222, 0.22) 0%, rgba(10, 15, 29, 0.1) 32%, rgba(10, 15, 29, 0.86) 100%), url("assets/stage_hero.png");
    background-position: 68% center;
}
.scope-moisture {
    background-image: linear-gradient(180deg, rgba(104, 167, 222, 0.22) 0%, rgba(10, 15, 29, 0.1) 32%, rgba(10, 15, 29, 0.86) 100%), url("assets/thermal_scan_clean_v3.png");
    background-position: 38% center;
}
.scope-termites {
    background-image: linear-gradient(180deg, rgba(104, 167, 222, 0.22) 0%, rgba(10, 15, 29, 0.1) 32%, rgba(10, 15, 29, 0.86) 100%), url("assets/termite_accordion_v3.png");
    background-position: 58% center;
}
.scope-reports {
    background-image: linear-gradient(180deg, rgba(104, 167, 222, 0.22) 0%, rgba(10, 15, 29, 0.1) 32%, rgba(10, 15, 29, 0.86) 100%), url("assets/defect_hero.png");
    background-position: 74% center;
}

.house-realistic-layer, .house-xray-layer {
    position: absolute;
    width: 100%;
    max-width: 440px;
    height: auto;
    transition: opacity 0.8s ease-in-out;
}

.house-realistic-layer img, .house-xray-layer img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 15px 35px rgba(10, 15, 29, 0.1));
}

.house-realistic-layer {
    opacity: 0.15;
    z-index: 1;
}

/* 6. Certification Section */
.certification-section {
    background: var(--white);
    padding-top: 76px;
    padding-bottom: 76px;
}

.certification-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 42px;
    align-items: center;
}

.certification-copy {
    min-height: 330px;
    height: 330px;
    padding: 34px 28px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--dark);
    color: var(--white);
    box-shadow: 0 28px 64px rgba(10, 15, 29, 0.18);
}

.certification-copy h2 {
    margin: 18px 0 14px;
    max-width: 280px;
    color: var(--white);
    font-size: clamp(1.55rem, 2vw, 2.25rem);
    line-height: 1.08;
    letter-spacing: 0;
}

.certification-copy p {
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
}

.certification-copy strong {
    display: inline-flex;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--dark);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.certification-logo-rail {
    position: relative;
    height: 330px;
    overflow: hidden;
    border-radius: 30px;
    background: #F7FAFC;
    box-shadow: inset 0 0 0 1px rgba(10, 15, 29, 0.06);
}

.certification-logo-rail::before,
.certification-logo-rail::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: 70px;
    pointer-events: none;
}

.certification-logo-rail::before {
    left: 0;
    right: auto;
    background: linear-gradient(90deg, #F7FAFC, rgba(247, 250, 252, 0));
}

.certification-logo-rail::after {
    right: 0;
    left: auto;
    background: linear-gradient(270deg, #F7FAFC, rgba(247, 250, 252, 0));
}

.certification-logo-track {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 18px;
    width: max-content;
    height: 100%;
    align-items: center;
    animation: certificationLogoSlideX 18s linear infinite;
}

.certification-logo-rail:hover .certification-logo-track {
    animation-play-state: paused;
}

.certification-logo-card {
    width: 190px;
    min-height: 136px;
    padding: 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    box-shadow: 0 14px 32px rgba(10, 15, 29, 0.08);
}

.certification-logo-card img {
    max-width: 100%;
    max-height: 54px;
    object-fit: contain;
}

@keyframes certificationLogoSlide {
    from { transform: translateY(0); }
    to { transform: translateY(calc(-50% - 8px)); }
}

@keyframes certificationLogoSlideX {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - 8px)); }
}

.cert-cta-section {
    padding: 0 0 72px;
    background: var(--white);
}

.cert-cta-card {
    position: relative;
    min-height: 238px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 0.48fr 0.52fr;
    align-items: stretch;
    max-width: 1160px;
    margin: 0 auto;
    border-radius: 22px;
    background:
        linear-gradient(95deg, #102f47 0%, #1d5778 48%, #71a5bf 100%);
    box-shadow: 0 24px 58px rgba(10, 15, 29, 0.16);
    isolation: isolate;
    cursor: pointer;
}

.cert-cta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(7, 24, 38, 0.94) 0%, rgba(16, 47, 71, 0.86) 43%, rgba(16, 47, 71, 0.2) 64%, rgba(16, 47, 71, 0) 100%);
    pointer-events: none;
}

.cert-cta-card::after {
    content: "";
    position: absolute;
    inset: 14px;
    pointer-events: none;
    z-index: 4;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
}

.cert-cta-copy {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 38px 0 38px 60px;
    color: var(--white);
}

.cert-cta-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: rgba(225, 246, 255, 0.78);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
}

.cert-cta-copy h2 {
    max-width: 370px;
    margin: 0;
    color: var(--white);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.25rem, 3.5vw, 3.4rem);
    font-weight: 500;
    line-height: 0.94;
    letter-spacing: 0;
}

.cert-cta-copy h2 span {
    display: block;
    font-style: italic;
    font-weight: 400;
}

.cert-cta-visual {
    position: relative;
    min-height: 238px;
    z-index: 2;
}

.cert-cta-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(16, 47, 71, 0.58), rgba(16, 47, 71, 0.02) 34%, rgba(16, 47, 71, 0));
}

.cert-cta-visual img {
    width: 100%;
    height: 100%;
    min-height: 238px;
    object-fit: cover;
    object-position: center right;
    transform: scale(1.02);
    transition: transform 0.8s ease;
}

.cert-cta-card:hover .cert-cta-visual img {
    transform: scale(1.06);
}

.cert-cta-book {
    position: absolute;
    right: 38px;
    bottom: 34px;
    z-index: 8;
    min-height: 54px;
    padding: 0 22px 0 26px;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--primary);
    color: var(--dark);
    box-shadow: 0 18px 42px rgba(122, 201, 67, 0.34);
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.cert-cta-book i {
    width: 20px;
    height: 20px;
    transition: transform 0.25s ease;
}

.cert-cta-card:hover .cert-cta-book,
.cert-cta-book:hover {
    transform: translateY(-3px);
    background: #8ee052;
    box-shadow: 0 22px 52px rgba(122, 201, 67, 0.44);
}

.cert-cta-card:hover .cert-cta-book i,
.cert-cta-book:hover i {
    transform: translateX(4px);
}

.cert-cta-book:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 4px;
}

.house-xray-layer {
    opacity: 1;
    z-index: 2;
}

/* X-Ray Utility highlights */
.system-overlay {
    position: absolute;
    width: 36px;
    height: 36px;
    background: rgba(122, 201, 67, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.5s ease;
    box-shadow: 0 0 15px var(--primary);
}

.system-overlay i { width: 18px; height: 18px; }

.plumbing-system { top: 40%; left: 45%; background: rgba(59, 130, 246, 0.85); box-shadow: 0 0 15px rgba(59, 130, 246, 0.6); }
.electrical-system { top: 30%; left: 65%; background: rgba(245, 158, 11, 0.85); box-shadow: 0 0 15px rgba(245, 158, 11, 0.6); }
.foundation-system { bottom: 25%; left: 35%; background: rgba(16, 185, 129, 0.85); box-shadow: 0 0 15px rgba(16, 185, 129, 0.6); }

.thermal-card {
    position: absolute;
    bottom: -20px;
    right: 0;
    width: 180px;
    padding: 12px;
    z-index: 10;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.thermal-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--dark-muted);
    margin-bottom: 8px;
}

.thermal-header i { width: 12px; height: 12px; color: var(--red-danger); }

.thermal-image-wrapper {
    width: 100%;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}

.thermal-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thermal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.6rem;
    font-weight: 700;
}

.thermal-color-bar {
    width: 80px;
    height: 6px;
    background: linear-gradient(90deg, blue, green, yellow, red);
    border-radius: 3px;
}

.flex-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
}

.view-all-link {
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--primary-dark);
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.view-all-link:hover {
    background: transparent;
    box-shadow: none;
    transform: translateX(4px);
    color: var(--primary);
}

/* 7. Section 4: Statistics & Why BEST Grid */
.stats-section {
    background:
        linear-gradient(180deg, var(--white) 0%, #F3F7F4 100%);
    border-bottom: 1px solid rgba(10, 15, 29, 0.06);
}

.stats-container {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.68fr);
    gap: 28px;
    align-items: stretch;
}

.stats-left-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "intro intro"
        "years inspections"
        "rating report";
    grid-auto-rows: auto;
    gap: 16px;
    padding: 18px;
    border-radius: 32px;
    background: var(--white);
    box-shadow: 0 28px 68px rgba(10, 15, 29, 0.09);
}

.stat-command-header {
    grid-area: intro;
    min-height: 220px;
    padding: 34px 38px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--dark);
    color: var(--white);
}

.stat-command-header h2 {
    margin-top: 20px;
    color: var(--white);
    font-size: clamp(1.85rem, 3.1vw, 3.45rem);
    line-height: 1.04;
    letter-spacing: 0;
}

.stat-years { grid-area: years; }
.stat-inspections { grid-area: inspections; }
.stat-rating { grid-area: rating; }
.stat-report { grid-area: report; }

.stat-item-circle {
    position: relative;
    overflow: hidden;
    background: #F7FAFC;
    border: 1px solid rgba(10, 15, 29, 0.06);
    box-shadow: none;
    border-radius: 24px;
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
    padding: 24px;
    min-width: 0;
    margin: 0;
    transition: all 0.4s ease;
    animation: statCardFloat 6s ease-in-out infinite;
}

.stat-item-circle:nth-child(3) { animation-delay: 0.8s; }
.stat-item-circle:nth-child(4) { animation-delay: 1.5s; }
.stat-item-circle:nth-child(5) { animation-delay: 2.2s; }

.stat-item-circle::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -46px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(122, 201, 67, 0.16);
    animation: statOrbPulse 4.8s ease-in-out infinite;
}

.stat-item-circle::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.72), transparent 65%);
    animation: statCardShimmer 7s ease-in-out infinite;
}

.stat-inspections {
    background: linear-gradient(135deg, #E9F8DF, #F7FAFC);
}

.stat-animated {
    box-shadow: 0 24px 58px rgba(122, 201, 67, 0.2);
}

.stat-item-circle:hover {
    transform: translateY(-4px);
    border-color: rgba(122, 201, 67, 0.34);
}

.stat-circle-content {
    position: relative;
    z-index: 1;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2.8rem, 4.2vw, 4.7rem);
    font-weight: 800;
    color: var(--dark);
    line-height: 1;
    margin-bottom: 0;
    white-space: nowrap;
}

.stat-inspections .stat-circle-content {
    font-size: clamp(2.9rem, 4.4vw, 4.9rem);
}

@keyframes statCardFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes statOrbPulse {
    0%, 100% {
        opacity: 0.75;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.18);
    }
}

@keyframes statCardShimmer {
    0%, 45% { transform: translateX(-120%); }
    65%, 100% { transform: translateX(120%); }
}

.stat-circle-label {
    position: relative;
    z-index: 1;
    max-width: 210px;
    font-size: 0.82rem;
    color: var(--dark-muted);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.stats-right-why {
    padding: 34px;
    border-radius: 32px;
    background: var(--dark);
    color: var(--white);
    box-shadow: 0 28px 68px rgba(10, 15, 29, 0.16);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.why-title {
    color: var(--white);
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 1.05;
    margin: 18px 0 28px;
    letter-spacing: 0;
}

.why-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.why-checklist li {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 700;
}

.why-checklist i {
    width: 22px;
    height: 22px;
    color: var(--primary);
    flex-shrink: 0;
}

/* 8. Section 5: Process Timeline */
.timeline-section {
    background-color: var(--white);
}

.timeline-header {
    margin-bottom: 80px;
}

.timeline-wrapper {
    position: relative;
    width: 100%;
    padding: 40px 0;
}

.timeline-progress-track {
    position: absolute;
    top: 75px;
    left: 8%;
    width: 84%;
    height: 4px;
    background: #E2E8F0;
    z-index: 1;
}

.timeline-progress-bar {
    width: 0%;
    height: 100%;
    background: var(--primary);
    transition: width 0.8s ease;
}

.timeline-steps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    position: relative;
    z-index: 2;
}

.timeline-step {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
}

.step-circle {
    width: 56px;
    height: 56px;
    background: var(--white);
    border: 3px solid #E2E8F0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark-muted);
    margin-bottom: 20px;
    transition: all 0.5s ease;
}

.step-circle i { width: 22px; height: 22px; }

.timeline-step h4 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.timeline-step p {
    font-size: 0.85rem;
    color: var(--dark-muted);
    line-height: 1.4;
}

.timeline-step.active .step-circle {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary-dark);
    box-shadow: 0 0 15px rgba(122, 201, 67, 0.3);
}

/* 9. Section 6: Feedback & Sample Report Combined */
.feedback-report-section {
    background-color: var(--light);
}

.feedback-report-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 80px;
    align-items: flex-start;
}

.testimonial-slider-container-mockup {
    position: relative;
    margin-top: 32px;
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: var(--shadow-lux);
    padding: 40px;
    border-radius: 20px;
}

.review-quote {
    font-size: 1.15rem;
    font-style: italic;
    color: var(--dark);
    line-height: 1.6;
    margin-bottom: 24px;
    border-left: 3px solid var(--primary);
    padding-left: 16px;
}

.reviewer-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.reviewer-meta img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.reviewer-info strong {
    display: block;
    font-size: 0.95rem;
    color: var(--dark);
}

.reviewer-info span {
    font-size: 0.8rem;
    color: var(--dark-muted);
}

.testimonial-nav-arrows {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.nav-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: var(--white);
    color: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.nav-arrow:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.nav-arrow i { width: 16px; height: 16px; }

.report-split-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
    margin-top: 32px;
}

.report-checklists-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.report-checklists-side .report-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.report-checklists-side .report-checklist li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--dark);
}

.report-checklists-side .report-checklist i {
    width: 16px;
    height: 16px;
    color: var(--primary);
}

/* CSS Laptop Mockup */
.laptop-mockup-wrapper {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    perspective: 1200px;
    cursor: pointer;
}

.laptop-base-shadow {
    position: absolute;
    bottom: -15px;
    left: 5%;
    width: 90%;
    height: 20px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    filter: blur(8px);
    transform: rotateX(85deg);
    transition: all 0.6s ease;
}

.laptop-device {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.laptop-lid {
    width: 92%;
    height: 240px;
    background: #000;
    border-radius: 12px 12px 0 0;
    padding: 8px;
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.2);
    transform-origin: bottom center;
    transform: rotateX(45deg);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.laptop-screen {
    width: 100%;
    height: 100%;
    background: #111;
    border-radius: 6px;
    overflow: hidden;
}

.laptop-report-display {
    width: 100%;
    height: 100%;
    background: var(--white);
    display: flex;
    flex-direction: column;
    padding: 12px;
    font-family: 'Inter', sans-serif;
    transform: scale(1);
    transition: transform 0.5s ease;
}

.report-pdf-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.5rem;
    font-weight: 800;
    color: var(--dark-muted);
    border-bottom: 1px solid #E2E8F0;
    padding-bottom: 6px;
    margin-bottom: 6px;
}

.pdf-content-page {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.pdf-address-title {
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.pdf-chart-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.pdf-mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    width: 40px;
    height: 40px;
    background: #F8FAFC;
    border-radius: 4px;
    padding: 4px;
}

.bar {
    width: 8px;
    border-radius: 2px;
}

.bar-red { background: var(--red-danger); }
.bar-orange { background: var(--orange-alert); }
.bar-green { background: var(--green-ok); }

.pdf-summary-stats {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.pdf-stat-line {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.45rem;
    font-weight: 700;
}

.badge-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.dot-red { background: var(--red-danger); }
.dot-orange { background: var(--orange-alert); }
.dot-green { background: var(--green-ok); }

.pdf-defect-section {
    margin-top: auto;
}

.pdf-defect-card {
    border-left: 2px solid;
    padding-left: 6px;
}

.border-red { border-left-color: var(--red-danger); }

.def-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.45rem;
    font-weight: 800;
    margin-bottom: 2px;
}

.hazard-major { color: var(--red-danger); }

.font-xs { font-size: 0.45rem; line-height: 1.3; }

.laptop-keyboard {
    width: 100%;
    height: 14px;
    background: #D1D5DB;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
}

.keyboard-indent {
    position: absolute;
    top: 1px;
    left: 10%;
    width: 80%;
    height: 4px;
    background: #9CA3AF;
    border-radius: 2px;
}

.trackpad {
    position: absolute;
    bottom: 1px;
    left: 42%;
    width: 16%;
    height: 5px;
    background: #E5E7EB;
    border-radius: 1px;
}

.laptop-mockup-wrapper:hover .laptop-lid {
    transform: rotateX(0deg);
}

.laptop-mockup-wrapper:hover .laptop-base-shadow {
    transform: rotateX(85deg) scale(1.15);
    opacity: 0.8;
}

/* 10. Section 7: Coverage Map */
.map-section {
    background-color: var(--white);
}

.map-container {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 60px;
    align-items: center;
}

.map-locations-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
}

.map-loc-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.map-loc-item:hover {
    background: rgba(0, 0, 0, 0.02);
}

.map-loc-item.active {
    background: var(--light);
    box-shadow: var(--shadow-sm);
}

.pulse-dot {
    width: 12px;
    height: 12px;
    background-color: var(--primary);
    border-radius: 50%;
    position: relative;
}

.pulse-dot::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    width: 24px;
    height: 24px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    animation: pulseScale 1.5s infinite;
}

.map-loc-item h5 { font-size: 1rem; }

.interactive-map-holder {
    position: relative;
    background: var(--white);
    border-radius: 24px;
    box-shadow: var(--shadow-lux);
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vic-svg-map {
    width: 100%;
    height: auto;
    max-height: 320px;
}

.map-outline-path {
    transition: fill 0.3s ease;
}

.map-pin-group {
    cursor: pointer;
}

.pin-core {
    fill: var(--dark-muted);
    transition: fill 0.3s ease;
}

.pin-ripple {
    fill: transparent;
    stroke: var(--dark-muted);
    stroke-width: 1px;
    opacity: 0;
    transform: scale(0.5);
    transform-origin: center;
    transition: all 0.3s ease;
}

.map-pin-group.active .pin-core, .map-pin-group:hover .pin-core {
    fill: var(--primary);
}

.map-pin-group.active .pin-ripple, .map-pin-group:hover .pin-ripple {
    stroke: var(--primary);
    opacity: 1;
    animation: pinRippleZoom 2s infinite;
}

.map-tooltip {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: calc(100% - 40px);
    padding: 16px;
    z-index: 10;
    pointer-events: none;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.4s ease;
}

.map-tooltip.active {
    transform: translateY(0);
    opacity: 1;
}

.map-tooltip h4 { font-size: 0.95rem; margin-bottom: 4px; }
.map-tooltip hr { border: 0; height: 1px; background: rgba(0, 0, 0, 0.05); margin-bottom: 8px; }
.map-tooltip p { font-size: 0.75rem; color: var(--dark-muted); line-height: 1.4; }

/* 11. SEO Answer Section */
.seo-answer-section {
    background: #F7FAFC;
    padding: 86px 0;
    border-top: 1px solid rgba(10, 15, 29, 0.06);
}

.seo-answer-container {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: 38px;
    align-items: start;
}

.seo-answer-intro {
    position: sticky;
    top: 112px;
}

.seo-answer-intro h2 {
    margin: 18px 0 18px;
    color: var(--dark);
    font-size: clamp(2.25rem, 4.2vw, 4.4rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.seo-answer-intro p {
    max-width: 520px;
    color: var(--dark-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

.seo-answer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.seo-answer-card {
    min-height: 260px;
    padding: 28px;
    border-radius: 24px;
    background: var(--white);
    border: 1px solid rgba(10, 15, 29, 0.06);
    box-shadow: 0 18px 44px rgba(10, 15, 29, 0.07);
}

.seo-answer-card i {
    width: 38px;
    height: 38px;
    padding: 9px;
    margin-bottom: 28px;
    border-radius: 14px;
    color: var(--dark);
    background: var(--primary-light);
}

.seo-answer-card h3 {
    margin-bottom: 12px;
    color: var(--dark);
    font-size: 1.35rem;
    line-height: 1.2;
}

.seo-answer-card p {
    color: var(--dark-muted);
    line-height: 1.7;
}

/* 12. Section 8: Final CTA */
.final-cta-section {
    min-height: 360px;
    padding: 86px 0;
    overflow: hidden;
    background: var(--dark);
    color: var(--white);
    display: flex;
    align-items: center;
}

.cta-visual-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.cta-house-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.23;
    filter: saturate(0.82) contrast(1.08);
}

.cta-visual-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.08), transparent 34%),
        linear-gradient(90deg, rgba(5, 8, 15, 0.92), rgba(5, 8, 15, 0.7), rgba(5, 8, 15, 0.92));
}

.cta-wireframe-grid {
    display: none;
}

.final-cta-container {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
}

.final-title {
    max-width: 880px;
    font-size: clamp(3rem, 6vw, 4.8rem);
    color: var(--white);
    margin-bottom: 20px;
    line-height: 0.98;
    letter-spacing: 0;
}

.final-subtitle {
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    color: rgba(255, 255, 255, 0.78);
    max-width: 760px;
    margin: 0 auto 34px auto;
    line-height: 1.65;
}

.final-buttons .btn-primary {
    min-height: 58px;
    padding: 0 30px;
    border-radius: 999px;
    box-shadow: 0 16px 34px rgba(118, 202, 61, 0.26);
}

/* 13. Footer Styles */
.main-footer {
    background-color: #05080F;
    color: rgba(255, 255, 255, 0.6);
    padding: 80px 0 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-brand-col .logo-text { color: var(--white); }
.footer-brand-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 20px 0;
}

.footer-socials {
    display: flex;
    gap: 12px;
}

.footer-socials a {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}

.footer-socials a:hover {
    background: var(--primary);
    transform: translateY(-2px);
}

.footer-socials i { width: 16px; height: 16px; }

.footer-grid h4 {
    font-size: 1rem;
    color: var(--white);
    margin-bottom: 24px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    font-size: 0.85rem;
}

.footer-links a:hover {
    color: var(--primary);
    padding-left: 4px;
}

.footer-contact-info {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.85rem;
}

.footer-contact-info i {
    width: 16px;
    height: 16px;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 3px;
}

.footer-rating-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-rating-card .rating-val {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--white);
    line-height: 1;
}

.footer-rating-card .stars {
    display: flex;
    gap: 4px;
    margin: 8px 0;
}

.review-count {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 16px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
    font-size: 0.8rem;
}

.footer-policy-links {
    display: flex;
    gap: 24px;
}

/* 13. Modals & Popups styling */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.modal.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 15, 29, 0.4);
    backdrop-filter: blur(10px);
}

.modal-container {
    background: var(--white);
    border-radius: 24px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 580px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    transform: translateY(40px);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.modal.active .modal-container {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--light);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}

.modal-close i { width: 18px; height: 18px; }

.video-modal-container {
    max-width: 720px;
}

.video-holder {
    position: relative;
    padding-bottom: 56.25%;
    background: #000;
}

.video-placeholder-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--white);
    padding: 40px;
    text-align: center;
    background: linear-gradient(135deg, #0A0F1D 0%, #1A253C 100%);
}

.video-placeholder-frame i {
    width: 48px;
    height: 48px;
    color: var(--primary);
    margin-bottom: 20px;
}

/* Booking wizard styling */
.wizard-header {
    padding: 32px 32px 20px 32px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.wizard-steps-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #E2E8F0;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--dark-muted);
}

.step-dot.active {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary-dark);
}

.step-line {
    flex-grow: 1;
    height: 2px;
    background: #E2E8F0;
}

.wizard-content {
    padding: 32px;
}

.wizard-step-pane {
    display: none;
    flex-direction: column;
    gap: 20px;
}

.wizard-step-pane.active {
    display: flex;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark);
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1.5px solid #E2E8F0;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
}

.wizard-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

/* Report modal details */
.report-modal-container {
    max-width: 680px;
}

.report-modal-content {
    padding: 40px;
}

.report-modal-header h2 { font-size: 1.75rem; }
.report-subtitle { font-size: 0.85rem; color: var(--dark-muted); }

.report-modal-sections {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 24px 0;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 8px;
}

.hazard-summary-list {
    display: flex;
    gap: 16px;
    margin-top: 12px;
}

.hazard-stat {
    flex-grow: 1;
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.hazard-stat .num { font-size: 1.75rem; font-weight: 800; }
.hazard-stat .txt { font-size: 0.75rem; font-weight: 600; }

.hazard-stat.major { background: #FEF2F2; color: var(--red-danger); }
.hazard-stat.minor { background: #FFFBEB; color: var(--orange-alert); }
.hazard-stat.safety { background: #ECFDF5; color: var(--green-ok); }

.finding-card-detail {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 14px;
    padding: 20px;
}

.major-badge {
    background: #FEF2F2;
    color: var(--red-danger);
    font-size: 0.65rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 12px;
}

.finding-card-detail h4 { margin-bottom: 8px; }
.finding-card-detail p { font-size: 0.85rem; color: var(--dark-muted); margin-bottom: 8px; }

.report-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* 14. Animations Keyframes */
@keyframes rotateSlowly {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spinRotor {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes droneFlyAround {
    0% { transform: translate(0, 0) scale(1); }
    30% { transform: translate(25px, -15px) scale(0.95); }
    70% { transform: translate(-15px, 20px) scale(1.05); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes floatCard {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes pinRippleZoom {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

@keyframes pulseScale {
    0% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 0.4; }
}

@keyframes gridPulse {
    0%, 100% { opacity: 0.42; filter: drop-shadow(0 0 0 rgba(122, 201, 67, 0)); }
    50% { opacity: 0.82; filter: drop-shadow(0 0 18px rgba(122, 201, 67, 0.28)); }
}

@keyframes orbitSpin {
    from { transform: rotateX(72deg) rotateZ(-10deg); }
    to { transform: rotateX(72deg) rotateZ(350deg); }
}

@keyframes orbitSpinReverse {
    from { transform: rotateX(66deg) rotateY(14deg) rotateZ(18deg); }
    to { transform: rotateX(66deg) rotateY(14deg) rotateZ(-342deg); }
}

@keyframes scannerSweep {
    0%, 100% { transform: rotateZ(-13deg) translateX(-78%); opacity: 0; }
    15%, 70% { opacity: 1; }
    50% { transform: rotateZ(-13deg) translateX(78%); opacity: 0.95; }
}

@keyframes houseFloat3d {
    0%, 100% { transform: rotateX(60deg) rotateZ(-12deg) translateY(0); }
    50% { transform: rotateX(58deg) rotateZ(-8deg) translateY(-16px); }
}

@keyframes thermalPulse {
    0%, 100% { opacity: 0.38; transform: scale(0.82); }
    50% { opacity: 0.9; transform: scale(1.12); }
}

@keyframes droneSurvey {
    0%, 100% { transform: translate3d(0, 0, 80px) rotate(-3deg); }
    35% { transform: translate3d(120px, -24px, 120px) rotate(7deg); }
    68% { transform: translate3d(42px, 58px, 90px) rotate(-8deg); }
}

@keyframes rotorBlur {
    from { transform: rotate(0deg) scaleX(1); opacity: 0.55; }
    to { transform: rotate(360deg) scaleX(1.18); opacity: 0.9; }
}

@keyframes hudFloat {
    0%, 100% { transform: translateY(0) translateZ(70px); }
    50% { transform: translateY(-12px) translateZ(90px); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal initial state */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.scroll-reveal.reveal-active {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Breakpoints */
@media (max-width: 1250px) {
    .nav-links {
        gap: 16px;
    }
    .nav-links a {
        font-size: 0.85rem;
    }
    .header-container {
        padding: 0 16px;
    }
    .header-actions {
        gap: 16px;
    }
    .hero-container {
        padding: 0 40px;
    }
    .side-navigation {
        right: 20px;
    }
}

@media (max-width: 1024px) {
    .nav-links {
        display: none;
    }
    .hero-section {
        height: auto;
        min-height: 100vh;
        padding-top: calc(var(--header-height) + 40px);
        padding-bottom: 40px;
        align-items: center;
    }
    .hero-container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0 24px;
        min-height: calc(100vh - var(--header-height) - 80px);
    }
    .hero-title {
        font-size: 3.25rem;
        line-height: 1.05;
        margin-bottom: 18px;
    }
    .hero-description {
        margin-bottom: 26px;
    }
    .hero-ctas {
        margin-bottom: 28px;
    }
    .hero-left {
        padding-right: 0;
        position: relative;
        z-index: 6;
        max-width: 760px;
    }
    .hero-right {
        position: absolute;
        inset: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
        opacity: 0.38;
    }
    .hero-house-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.2 !important;
        transform: none !important;
        animation: none !important;
    }
    .inspection-orbit-scene {
        inset: 0;
        max-width: 100%;
        margin: 0 auto;
    }
    .inspection-orbit-scene::before {
        inset: 10% 4% 6%;
    }
    .holo-house {
        width: 310px;
        height: 245px;
    }
    .house-base {
        width: 216px;
        height: 126px;
    }
    .house-roof {
        width: 260px;
        bottom: 154px;
    }
    .pin-roof {
        right: 16%;
    }
    .pin-termite {
        right: 10%;
    }
    .hero-image-overlay {
        display: none;
    }
    .side-navigation {
        display: none;
    }
    .hero-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .hero-ctas { justify-content: center; }
    .social-proof { justify-content: center; }
    
    .digital-container, .map-container, .feedback-report-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .seo-answer-container {
        grid-template-columns: 1fr;
    }

    .seo-answer-intro {
        position: static;
    }

    .about-showcase-container {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
    }

    .about-estate-hero {
        grid-template-columns: 1fr;
    }

    .about-estate-copy {
        min-height: 0;
        padding: 44px 36px;
    }

    .about-estate-copy .btn {
        align-self: center;
    }

    .about-trust-row {
        justify-content: center;
    }

    .about-tools-heading {
        display: block;
        text-align: center;
    }

    .about-tools-heading h3 {
        margin: 18px auto 0;
    }

    .about-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-image-card,
    .about-image-right {
        width: min(620px, 100%);
        min-height: 260px;
        margin: 0 auto;
        border-radius: 28px;
        transform: none;
    }

    .about-image-card img {
        min-height: 260px;
    }

    .certification-container {
        grid-template-columns: 1fr;
    }

    .certification-copy {
        height: auto;
        min-height: 0;
        text-align: center;
        padding: 38px 28px;
    }

    .certification-copy strong {
        justify-content: center;
    }

    .certification-logo-rail {
        height: 190px;
    }

    .certification-logo-track {
        flex-direction: row;
        width: max-content;
        animation-name: certificationLogoSlideX;
    }

    .cert-cta-card {
        grid-template-columns: 1fr;
    }

    .cert-cta-copy {
        padding: 44px 38px;
    }

    .cert-cta-visual,
    .cert-cta-visual img {
        min-height: 220px;
    }

    .cert-cta-book {
        right: 32px;
        bottom: 28px;
    }
    
    .digital-section {
        background: var(--light);
    }

    .service-showcase-copy {
        max-width: 620px;
        text-align: center;
        margin: 0 auto;
    }

    .service-showcase-copy p {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    .inspection-scope-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 680px;
        margin: 0 auto;
    }

    .report-split-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .stats-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .stats-left-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "intro intro"
            "years inspections"
            "rating report";
        min-height: 0;
    }

    .stat-command-header {
        min-height: 260px;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .hero-title { font-size: 2.5rem; }
    .hero-right {
        height: 360px;
    }
    .inspection-orbit-scene {
        inset: 0 -12px;
    }
    .holo-house {
        width: 240px;
        height: 210px;
    }
    .house-base {
        width: 178px;
        height: 104px;
        bottom: 34px;
    }
    .house-base::before,
    .house-base::after {
        width: 34px;
        height: 86px;
    }
    .house-base::before {
        left: -34px;
    }
    .house-base::after {
        right: -34px;
    }
    .house-roof {
        width: 210px;
        height: 74px;
        bottom: 136px;
    }
    .window {
        width: 34px;
        height: 26px;
        top: 28px;
    }
    .window-one { left: 30px; }
    .window-two { right: 30px; }
    .door {
        width: 32px;
        height: 54px;
    }
    .defect-pin,
    .report-hud {
        min-width: 86px;
        padding: 8px 9px;
    }
    .defect-pin span,
    .report-hud span {
        font-size: 0.54rem;
    }
    .defect-pin strong,
    .report-hud strong {
        font-size: 0.82rem;
    }
    .hud-report {
        left: 2%;
    }
    .hud-score {
        right: 1%;
    }
    .inspection-drone {
        top: 12%;
        left: 18%;
        transform: scale(0.8);
    }
    
    .timeline-progress-track { display: none; }
    .timeline-steps {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    .footer-policy-links {
        justify-content: center;
    }
}

/* ------------------------------------------------------------- */
/* Mockup Loading Animation Timeline Sequence                    */
/* ------------------------------------------------------------- */

/* Initial hidden states for timeline elements */
.main-header {
    opacity: 0;
    animation: fadeInHeader 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.2s;
}

.hero-section .green-badge {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInBadge 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.5s;
}

.hero-title span {
    display: block;
    opacity: 0;
    transform: translateY(24px);
    animation: fadeInUpTitle 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.hero-title span:nth-child(1) { animation-delay: 0.8s; }
.hero-title span:nth-child(2) { animation-delay: 1.0s; }
.hero-title span:nth-child(3) { animation-delay: 1.2s; }

.hero-description {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUpText 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 1.4s;
}

.hero-ctas {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUpText 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 1.6s;
}

.social-proof {
    opacity: 0;
    transform: translateY(15px);
    animation: fadeInUpText 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 1.8s;
}

.avatar-group img {
    opacity: 0;
    transform: scale(0.7);
    animation: popInAvatar 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.avatar-group img:nth-child(1) { animation-delay: 1.9s; }
.avatar-group img:nth-child(2) { animation-delay: 2.1s; }
.avatar-group img:nth-child(3) { animation-delay: 2.3s; }
.avatar-group img:nth-child(4) { animation-delay: 2.5s; }

.hero-house-image {
    opacity: 0;
    transform: scale(0.95);
    animation: scaleHouseIn 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 1.8s;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s linear;
}

/* Keyframes for layout timeline */
@keyframes fadeInHeader {
    to { opacity: 1; }
}

@keyframes slideInBadge {
    to { opacity: 1; transform: translateX(0); }
}

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

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

@keyframes popInAvatar {
    to { opacity: 1; transform: scale(1); }
}

@keyframes scaleHouseIn {
    to { opacity: 1; transform: scale(1); }
}

.hero-image-wrapper .hero-house-image {
    animation-name: scaleHouseInSoft;
}

@keyframes scaleHouseInSoft {
    to { opacity: 0.34; transform: scale(1); }
}

/* Australian property-style hero override */
.hero-aus-style {
    min-height: 100vh;
    height: 100vh;
    padding: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #8fcaf6;
    isolation: isolate;
}

.hero-aus-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    z-index: -3;
}

.hero-aus-shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 50% 48%, rgba(7, 16, 30, 0.62) 0%, rgba(7, 16, 30, 0.42) 27%, rgba(7, 16, 30, 0.08) 52%, transparent 72%),
        linear-gradient(180deg, rgba(58, 154, 221, 0.02) 0%, rgba(10, 15, 29, 0.18) 42%, rgba(10, 15, 29, 0.38) 100%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, transparent 24%, transparent 72%, rgba(255, 255, 255, 0.08) 100%);
}

.hero-aus-word {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    font-family: var(--font-heading);
    font-size: clamp(6rem, 17vw, 15rem);
    line-height: 0.8;
    letter-spacing: -0.09em;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.48);
    text-shadow: 0 26px 60px rgba(7, 16, 30, 0.2);
    pointer-events: none;
    white-space: nowrap;
}

.hero-aus-word span {
    color: var(--primary);
}

.hero-aus-copy {
    width: min(920px, calc(100% - 48px));
    margin: 0 auto 74px auto;
    text-align: center;
    color: var(--white);
    text-shadow: 0 8px 28px rgba(7, 16, 30, 0.8);
    z-index: 4;
}

.hero-aus-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(8, 18, 32, 0.58);
    color: var(--white);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.hero-aus-style .hero-title {
    color: var(--white);
    font-size: clamp(3rem, 5vw, 4.85rem);
    line-height: 1.02;
    margin-bottom: 20px;
    letter-spacing: -0.035em;
    text-shadow: 0 8px 28px rgba(7, 16, 30, 0.9);
}

.hero-aus-style .hero-description {
    color: rgba(255, 255, 255, 0.98);
    max-width: 780px;
    margin: 0 auto 26px auto;
    font-size: clamp(1.12rem, 1.65vw, 1.42rem);
    line-height: 1.4;
    font-weight: 600;
    text-shadow: 0 5px 18px rgba(7, 16, 30, 0.9);
}

.hero-aus-style .hero-ctas {
    justify-content: center;
    margin-bottom: 0;
}

.hero-aus-style .watch-video-btn {
    color: var(--white);
}

.hero-aus-style .play-icon-circle {
    background: rgba(255, 255, 255, 0.92);
}

.hero-call-btn {
    min-height: 46px;
    padding: 11px 22px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--dark);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 14px 34px rgba(7, 16, 30, 0.24);
    backdrop-filter: blur(12px);
}

.hero-call-btn:hover {
    background: var(--white);
    color: var(--primary-dark);
    transform: translateY(-1px);
}

.hero-call-btn i {
    width: 18px;
    height: 18px;
}

.hero-search-panel {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    width: min(920px, calc(100% - 48px));
    z-index: 5;
}

.hero-search-panel {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr auto;
    gap: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 18px;
    box-shadow: 0 26px 70px rgba(10, 15, 29, 0.34);
    backdrop-filter: blur(16px);
}

.search-field {
    min-width: 0;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.96);
}

.search-field span {
    display: block;
    margin-bottom: 4px;
    font-size: 0.72rem;
    color: #334155;
    font-weight: 800;
}

.search-field strong {
    display: block;
    overflow: hidden;
    color: var(--dark);
    font-size: 1rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-search-btn {
    min-width: 132px;
    border: 0;
    border-radius: 12px;
    background: var(--dark);
    color: var(--white);
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease;
}

.hero-search-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.hero-proof-points {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px 26px;
    margin: 0 auto 28px auto;
}

.hero-proof-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--white);
    text-shadow: 0 4px 16px rgba(7, 16, 30, 0.9);
}

.hero-proof-item i {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    color: var(--primary);
    stroke-width: 2.8;
    filter: drop-shadow(0 3px 8px rgba(7, 16, 30, 0.45));
}

.hero-proof-item span {
    display: block;
    font-size: 0.96rem;
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: 0;
}

.hero-corner-action {
    position: absolute;
    right: 26px;
    bottom: 98px;
    z-index: 5;
    width: 84px;
    height: 84px;
    border: 0;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--dark);
    box-shadow: 0 22px 54px rgba(10, 15, 29, 0.22);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease;
}

.hero-corner-action:hover {
    transform: translateY(-4px) scale(1.02);
    background: var(--primary);
}

.hero-corner-action i {
    width: 34px;
    height: 34px;
}

.area-marquee-section {
    padding: 78px 0 86px;
    background: #ffffff;
    overflow: hidden;
}

.area-marquee-heading {
    text-align: center;
    margin-bottom: 32px;
}

.area-marquee-heading h2 {
    margin-top: 18px;
    font-size: clamp(2.6rem, 6vw, 5rem);
    line-height: 0.95;
    color: var(--dark);
}

.area-marquee {
    position: relative;
    overflow: hidden;
    padding: 18px 0;
    border-top: 1px solid rgba(10, 15, 29, 0.08);
    border-bottom: 1px solid rgba(10, 15, 29, 0.08);
}

.area-marquee::before,
.area-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: min(18vw, 220px);
    pointer-events: none;
}

.area-marquee::before {
    left: 0;
    background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.area-marquee::after {
    right: 0;
    background: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.area-marquee-track {
    display: flex;
    gap: 16px;
    width: max-content;
    padding-left: 16px;
    animation: areaMarquee 34s linear infinite;
    will-change: transform;
}

.area-marquee:hover .area-marquee-track {
    animation-play-state: paused;
}

.area-marquee-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 0 24px;
    border-radius: 999px;
    color: var(--dark);
    background: #f6f8fb;
    border: 1px solid rgba(10, 15, 29, 0.08);
    box-shadow: 0 14px 34px rgba(10, 15, 29, 0.08);
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.area-marquee-link:hover {
    transform: translateY(-3px);
    color: #ffffff;
    background: var(--dark);
    box-shadow: 0 18px 42px rgba(10, 15, 29, 0.18);
}

.area-marquee-link i {
    width: 18px;
    height: 18px;
    color: var(--primary);
}

.area-marquee-link:hover i {
    color: #ffffff;
}

@media (max-width: 1024px) {
    .hero-aus-style {
        min-height: 760px;
        height: 100vh;
        padding-top: var(--header-height);
    }

    .hero-aus-copy {
        margin-bottom: 72px;
    }

    .hero-aus-word {
        top: 16%;
        font-size: clamp(6rem, 23vw, 12rem);
    }

    .hero-search-panel {
        grid-template-columns: 1fr 1fr;
    }

    .hero-search-btn {
        min-height: 48px;
        grid-column: span 2;
    }

    .hero-proof-points {
        gap: 12px 18px;
        margin-bottom: 24px;
    }

    .hero-corner-action {
        display: none;
    }
}

@media (max-width: 640px) {
    html,
    body {
        overflow-x: hidden;
    }

    .main-header {
        height: 76px;
    }

    .header-container {
        width: calc(100% - 24px);
        height: 54px;
        margin-top: 10px;
        padding: 0 12px;
        gap: 10px;
    }

    .logo-text {
        font-size: 1.15rem;
        letter-spacing: 0.03em;
    }

    .logo-subtext {
        max-width: 145px;
        overflow: hidden;
        font-size: 0.47rem;
        letter-spacing: 0.13em;
        text-overflow: clip;
    }

    .header-actions {
        gap: 8px;
    }

    .phone-link {
        width: 36px;
        height: 36px;
        justify-content: center;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.18);
    }

    .phone-link span,
    .header-actions .btn-primary {
        display: none;
    }

    .phone-link i {
        width: 19px;
        height: 19px;
    }

    .hamburger-btn {
        width: 36px;
        height: 36px;
    }

    .hero-aus-style {
        min-height: 720px;
    }

    .hero-aus-bg {
        object-position: center bottom;
    }

    .hero-aus-copy {
        width: calc(100% - 28px);
        margin-bottom: 44px;
    }

    .hero-aus-word {
        top: 18%;
        max-width: 100%;
        font-size: clamp(5.5rem, 28vw, 8rem);
    }

    .hero-aus-kicker {
        max-width: calc(100% - 18px);
        padding: 8px 12px;
        white-space: normal;
        text-align: center;
        font-size: 0.72rem;
        line-height: 1.45;
        letter-spacing: 0.08em;
    }

    .hero-aus-style .hero-title {
        font-size: 3rem;
    }

    .hero-aus-style .hero-description {
        font-size: 1rem;
    }

    .hero-aus-style .hero-ctas {
        flex-direction: column;
        gap: 14px;
    }

    .about-showcase-section {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .about-showcase-copy h2 {
        font-size: 2.45rem;
    }

    .about-estate-container {
        gap: 38px;
    }

    .about-estate-copy {
        padding: 38px 24px;
        text-align: center;
    }

    .about-estate-copy h2 {
        font-size: 2.7rem;
    }

    .about-estate-copy > p {
        font-size: 1rem;
    }

    .about-estate-visual,
    .about-estate-visual img {
        min-height: 360px;
    }

    .about-property-chip {
        padding: 10px 12px;
    }

    .about-chip-top {
        top: 14px;
        left: 14px;
    }

    .about-chip-bottom {
        right: 14px;
        bottom: 14px;
    }

    .about-tools-grid {
        grid-template-columns: 1fr;
    }

    .about-tool-card {
        min-height: 0;
    }

    .inspection-scope-list {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 360px;
        margin-bottom: 0;
    }

    .service-showcase-copy h2 {
        font-size: 2.55rem;
    }

    .inspection-scope-card {
        min-height: 260px;
        border-radius: 20px;
    }

    .certification-section {
        padding-top: 54px;
        padding-bottom: 54px;
    }

    .certification-copy h2 {
        font-size: 2.6rem;
    }

    .certification-logo-card {
        width: 180px;
    }

    .cert-cta-section {
        padding-bottom: 54px;
    }

    .cert-cta-card {
        border-radius: 22px;
    }

    .cert-cta-card::before {
        inset: 12px;
        border-radius: 18px;
    }

    .cert-cta-copy {
        padding: 38px 24px;
    }

    .cert-cta-copy h2 {
        font-size: 2.45rem;
    }

    .cert-cta-book {
        right: 50%;
        bottom: 22px;
        min-height: 48px;
        padding: 0 18px 0 22px;
        transform: translateX(50%);
        font-size: 0.82rem;
    }

    .cert-cta-card:hover .cert-cta-book,
    .cert-cta-book:hover {
        transform: translateX(50%) translateY(-3px);
    }

    .seo-answer-section {
        padding: 58px 0;
    }

    .seo-answer-grid {
        grid-template-columns: 1fr;
    }

    .seo-answer-card {
        min-height: 0;
        padding: 24px;
    }

    .stats-left-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "intro"
            "years"
            "inspections"
            "rating"
            "report";
    }

    .stat-item-circle {
        min-height: 210px;
    }

    .hero-search-panel {
        width: calc(100% - 24px);
        grid-template-columns: 1fr;
        bottom: 16px;
    }

    .hero-search-btn {
        grid-column: auto;
    }

    .hero-proof-points {
        max-width: 360px;
        gap: 10px 14px;
        margin-bottom: 22px;
    }

    .hero-proof-item span {
        font-size: 0.82rem;
    }

    .area-marquee-section {
        padding: 58px 0 66px;
    }

    .area-marquee-track {
        gap: 12px;
        animation-duration: 26s;
    }

    .area-marquee-link {
        min-height: 50px;
        padding: 0 18px;
        font-size: 0.92rem;
    }
}

@keyframes droneFlyIn {
    from { opacity: 0; transform: translate(-150px, -80px) scale(0.4); }
    to { opacity: 1; transform: translate(0, 0) scale(1); }
}

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

@keyframes areaMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* About page */
.about-page {
    background: #f6f8f7;
    color: var(--text-dark);
    overflow-x: hidden;
}

.about-page-hero {
    min-height: 680px;
    padding: 156px 0 92px;
    background: #070d1a;
    color: #ffffff;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.about-page-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.42;
}

.about-page-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(5, 8, 15, 0.64), rgba(5, 8, 15, 0.82)),
        linear-gradient(90deg, rgba(5, 8, 15, 0.9), rgba(5, 8, 15, 0.38), rgba(5, 8, 15, 0.9));
}

.about-page-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    text-align: center;
}

.about-page-hero-inner h1 {
    max-width: 900px;
    margin: 26px 0 18px;
    font-size: clamp(3.6rem, 7vw, 7.2rem);
    line-height: 0.9;
    letter-spacing: 0;
    color: #ffffff;
}

.about-page-hero-inner p {
    max-width: 800px;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(1.02rem, 1.45vw, 1.28rem);
    line-height: 1.72;
}

.about-page-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 30px;
}

.about-page-hero-proof {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
}

.about-page-hero-proof span {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(14px);
    font-size: 0.9rem;
    font-weight: 800;
}

.about-page-hero-proof strong {
    color: var(--accent-green);
    margin-right: 4px;
}

.about-page-story,
.about-page-method,
.about-page-cta {
    padding: 86px 0;
}

.about-page-story-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
    gap: 26px;
    align-items: stretch;
}

.about-page-dark-card {
    min-height: 410px;
    padding: 46px;
    border-radius: 28px;
    background: #070d1a;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.about-page-dark-card h2 {
    margin-top: 28px;
    max-width: 520px;
    color: #ffffff;
    font-size: clamp(2.15rem, 3.25vw, 3.9rem);
    line-height: 1.02;
    letter-spacing: 0;
    word-break: normal;
    overflow-wrap: normal;
}

.about-page-copy {
    padding: 46px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(7, 13, 26, 0.08);
    box-shadow: 0 24px 60px rgba(7, 13, 26, 0.08);
}

.about-page-copy p {
    margin: 0 0 20px;
    color: #4b5565;
    font-size: 1.04rem;
    line-height: 1.85;
}

.about-page-copy p:last-child {
    margin-bottom: 0;
}

.about-page-method {
    background: #ffffff;
}

.about-page-method-head {
    max-width: 760px;
    margin-bottom: 32px;
}

.about-page-method-head h2 {
    margin: 18px 0 12px;
    font-size: clamp(2.7rem, 5vw, 5.6rem);
    line-height: 0.95;
    letter-spacing: 0;
}

.about-page-method-head p {
    color: var(--text-muted);
    font-size: 1.08rem;
    line-height: 1.7;
}

.about-page-tools-grid .about-tool-card {
    background: #f6f8f7;
}

@media (max-width: 1100px) {
    .about-page-story-grid {
        grid-template-columns: 1fr;
    }

    .about-page-dark-card {
        min-height: 0;
    }
}

@media (max-width: 768px) {
    .about-page-hero {
        min-height: 620px;
        padding: 126px 0 70px;
    }

    .about-page-dark-card,
    .about-page-copy {
        padding: 30px 22px;
        border-radius: 22px;
    }

    .about-page-dark-card h2 {
        font-size: 2.35rem;
        line-height: 1.05;
    }

    .about-page-hero-inner h1 {
        font-size: 3.2rem;
    }

    .about-page-hero-inner p {
        font-size: 1rem;
    }

    .about-page-actions {
        flex-direction: column;
        width: min(100%, 320px);
    }

    .about-page-actions .btn {
        width: 100%;
    }

    .about-page-hero-proof {
        flex-direction: column;
        width: min(100%, 330px);
    }

    .about-page-hero-proof span {
        justify-content: center;
        text-align: center;
    }

    .about-page-story,
    .about-page-method,
    .about-page-cta {
        padding: 56px 0;
    }

    .final-cta-section {
        min-height: 330px;
        padding: 64px 0;
    }

    .final-title {
        font-size: 2.6rem;
    }
}

/* Service pages */
.service-page {
    background: #f6f8f7;
    color: var(--text-dark);
    overflow: hidden;
}

.service-hero {
    min-height: 720px;
    padding: 160px 0 86px;
    background: #070d1a;
    color: #ffffff;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.service-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.48;
}

.service-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 52% 38%, rgba(118, 202, 61, 0.16), transparent 32%),
        linear-gradient(90deg, rgba(5, 8, 15, 0.92), rgba(5, 8, 15, 0.55), rgba(5, 8, 15, 0.9)),
        linear-gradient(180deg, rgba(5, 8, 15, 0.32), rgba(5, 8, 15, 0.86));
}

.service-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1080px;
}

.service-eyebrow {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: 0 18px;
    border-radius: 999px;
    color: #4d9b21;
    background: rgba(236, 255, 226, 0.96);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

.service-hero h1 {
    max-width: 900px;
    margin: 28px 0 20px;
    color: #ffffff;
    font-size: clamp(3.6rem, 7vw, 7.5rem);
    line-height: 0.9;
    letter-spacing: 0;
}

.service-hero p {
    max-width: 820px;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(1.02rem, 1.45vw, 1.24rem);
    line-height: 1.75;
}

.service-hero-actions,
.service-area-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.service-proof-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
}

.service-proof-strip span {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.88);
    font-weight: 800;
    backdrop-filter: blur(14px);
}

.service-proof-strip i {
    width: 17px;
    height: 17px;
    color: var(--accent-green);
}

.service-intro-section,
.service-scope-section,
.service-why-section,
.service-related-section,
.service-area-section,
.service-faq-section {
    padding: 86px 0;
}

.service-intro-grid,
.service-why-grid,
.service-faq-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
    gap: 26px;
    align-items: stretch;
}

.service-intro-card,
.service-why-copy {
    min-height: 360px;
    padding: 42px;
    border-radius: 28px;
    background: #070d1a;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service-intro-card h2,
.service-why-copy h2,
.service-section-head h2,
.service-area-card h2,
.service-faq-heading h2 {
    margin-top: 22px;
    letter-spacing: 0;
    line-height: 1;
}

.service-intro-card h2,
.service-why-copy h2 {
    color: #ffffff;
    font-size: clamp(2.2rem, 3.8vw, 4.4rem);
}

.service-intro-copy {
    padding: 42px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(7, 13, 26, 0.08);
    box-shadow: 0 22px 58px rgba(7, 13, 26, 0.08);
}

.service-intro-copy p,
.service-why-copy p,
.service-area-card p {
    color: #4b5565;
    font-size: 1.05rem;
    line-height: 1.8;
}

.service-why-copy p {
    color: rgba(255, 255, 255, 0.74);
    margin-top: 18px;
}

.service-section-head {
    max-width: 820px;
    margin-bottom: 34px;
}

.service-section-head h2,
.service-area-card h2,
.service-faq-heading h2 {
    font-size: clamp(2.6rem, 4.8vw, 5.5rem);
}

.service-scope-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.service-scope-item,
.service-related-card,
.service-faq-item {
    border: 1px solid rgba(7, 13, 26, 0.08);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(7, 13, 26, 0.07);
}

.service-scope-item {
    min-height: 280px;
    padding: 28px;
    display: flex;
    flex-direction: column;
}

.service-scope-item i {
    width: 42px;
    height: 42px;
    padding: 10px;
    margin-bottom: 34px;
    border-radius: 16px;
    background: #ecffe2;
    color: #070d1a;
}

.service-scope-item h3,
.service-faq-item h3 {
    margin-bottom: 10px;
    color: #070d1a;
    font-size: 1.18rem;
}

.service-scope-item p,
.service-faq-item p {
    color: #566173;
    line-height: 1.7;
}

.service-why-section {
    background: #ffffff;
}

.service-why-list {
    display: grid;
    gap: 16px;
}

.service-why-row {
    min-height: 92px;
    padding: 22px 24px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f6f8f7;
    border: 1px solid rgba(7, 13, 26, 0.08);
    font-weight: 900;
    color: #070d1a;
}

.service-why-row i {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    color: var(--accent-green);
}

.service-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.service-related-card {
    min-height: 122px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #070d1a;
    font-weight: 900;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.service-related-card:hover {
    transform: translateY(-4px);
    background: #ecffe2;
    box-shadow: 0 22px 54px rgba(7, 13, 26, 0.1);
}

.service-related-card i {
    width: 28px;
    height: 28px;
}

.service-area-card {
    padding: 42px;
    border-radius: 30px;
    background: #070d1a;
    color: #ffffff;
    box-shadow: 0 28px 70px rgba(7, 13, 26, 0.16);
}

.service-area-card h2 {
    max-width: 900px;
    color: #ffffff;
}

.service-area-card p {
    max-width: 980px;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.76);
}

.service-area-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.service-area-tags span {
    min-height: 40px;
    padding: 0 15px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.9rem;
    font-weight: 800;
}

.service-faq-section {
    background: #ffffff;
}

.service-faq-heading {
    align-self: start;
    position: sticky;
    top: 120px;
}

.service-faq-list {
    display: grid;
    gap: 16px;
}

.service-faq-item {
    padding: 28px;
}

@media (max-width: 1100px) {
    .service-scope-grid,
    .service-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-intro-grid,
    .service-why-grid,
    .service-faq-grid {
        grid-template-columns: 1fr;
    }

    .service-faq-heading {
        position: static;
    }
}

@media (max-width: 768px) {
    .service-hero {
        min-height: 660px;
        padding: 128px 0 66px;
    }

    .service-hero h1 {
        font-size: 3.2rem;
    }

    .service-hero-actions,
    .service-area-actions {
        flex-direction: column;
    }

    .service-hero-actions .btn,
    .service-area-actions .btn {
        width: 100%;
    }

    .service-intro-section,
    .service-scope-section,
    .service-why-section,
    .service-related-section,
    .service-area-section,
    .service-faq-section {
        padding: 56px 0;
    }

    .service-intro-card,
    .service-intro-copy,
    .service-why-copy,
    .service-area-card {
        min-height: 0;
        padding: 30px 22px;
        border-radius: 22px;
    }

    .service-scope-grid,
    .service-related-grid {
        grid-template-columns: 1fr;
    }

    .service-scope-item {
        min-height: 0;
    }
}

/* ==========================================
   Apex About Page New Design (Figma Match)
   ========================================== */
.about-page-new {
    background: #FAF8F5; /* Warm off-white background matching Figma */
    color: #0A0F1D;
    padding: 0 0 100px 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.about-hero-new-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 120px;
}

.about-hero-new-left {
    border-radius: 32px;
    overflow: hidden;
    height: 600px;
}

.about-hero-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-hero-new-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.about-kicker {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0A0F1D;
    margin-bottom: 24px;
    display: inline-block;
    border: 1px solid rgba(10, 15, 29, 0.15);
    padding: 6px 16px;
    border-radius: 100px;
}

.about-title-main {
    font-size: clamp(2.5rem, 4vw, 4.5rem);
    line-height: 1.1;
    font-weight: 800;
    color: #0A0F1D;
    margin: 0 0 24px 0;
    letter-spacing: -0.02em;
}

.about-desc-main {
    font-size: 18px;
    line-height: 1.6;
    color: #555861;
    margin: 0 0 36px 0;
    max-width: 480px;
}

/* View All Services Button with green circle */
.btn-about-view {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    border: 1px solid rgba(10, 15, 29, 0.1);
    padding: 10px 10px 10px 24px;
    border-radius: 100px;
    color: #0A0F1D;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

.btn-about-view:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    border-color: rgba(10, 15, 29, 0.2);
}

.btn-about-view .arrow-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #7ac943; /* Figma Light Lime Yellow */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0A0F1D;
    transition: transform 0.3s ease;
}

.btn-about-view:hover .arrow-circle {
    transform: rotate(45deg);
}

/* Stats and Video Row */
.about-hero-stats-row {
    display: flex;
    align-items: center;
    gap: 48px;
    margin-top: 48px;
    width: 100%;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Let's style the 40 stat exactly like Figma! In Figma, "40" has a bright yellow-green oval background, and "years of experiences" is next to it! */
.stat-number {
    background: #7ac943;
    color: #0A0F1D;
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 48px;
    font-weight: 800;
    display: inline-block;
    line-height: 1;
}

.stat-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #0A0F1D;
    text-transform: lowercase;
}

/* Stat Video Trigger Button */
.stat-video-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    background: #FFFFFF;
    padding: 10px 24px 10px 10px;
    border-radius: 100px;
    border: 1px solid rgba(10, 15, 29, 0.08);
    transition: all 0.3s ease;
}

.stat-video-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(10, 15, 29, 0.15);
}

.video-preview-thumb {
    width: 80px;
    height: 48px;
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}

.video-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 29, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transition: background 0.3s ease;
}

.stat-video-btn:hover .play-overlay {
    background: rgba(10, 15, 29, 0.6);
}

.play-overlay i {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.video-btn-label {
    font-size: 14px;
    font-weight: 700;
    color: #0A0F1D;
}

/* Landmark Section & Cards */
.about-landmark-section {
    margin-bottom: 80px;
}

.about-landmark-title {
    font-size: clamp(2.2rem, 3.5vw, 3.8rem);
    line-height: 1.15;
    font-weight: 800;
    color: #0A0F1D;
    margin: 0 0 60px 0;
    letter-spacing: -0.01em;
}

.about-landmark-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.about-landmark-card {
    height: 480px;
    border-radius: 32px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.about-landmark-card:hover {
    transform: translateY(-8px);
}

.card-num {
    font-size: 16px;
    font-weight: 700;
    opacity: 0.5;
}

.about-landmark-card h3 {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 16px 0;
    line-height: 1.2;
}

.about-landmark-card p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    opacity: 0.8;
}

.card-link-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    width: 100%;
}

.card-arrow-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Card 1: Dark */
.card-dark {
    background: #111517;
    color: #FFFFFF;
}

.card-dark .card-link-bottom {
    color: #FFFFFF;
}

.card-dark .card-arrow-circle {
    background: #7ac943;
    color: #0A0F1D;
}

.card-dark:hover .card-arrow-circle {
    transform: rotate(45deg);
}

/* Card 2: Lime-Green */
.card-lime {
    background: #7ac943;
    color: #111517;
}

.card-lime .card-link-bottom {
    color: #111517;
}

.card-lime .card-arrow-circle {
    background: #111517;
    color: #7ac943;
}

.card-lime:hover .card-arrow-circle {
    transform: rotate(45deg);
}

.card-sketch-graphic {
    position: absolute;
    bottom: -10px;
    left: 20px;
    pointer-events: none;
}

/* Card 3: Image BG */
.card-img-bg {
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
}

.card-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(17,21,23,0.3) 0%, rgba(17,21,23,0.9) 100%);
    z-index: 1;
}

.card-img-bg > * {
    position: relative;
    z-index: 2;
}

.card-img-bg .card-link-bottom {
    color: #FFFFFF;
}

.card-img-bg .card-arrow-circle {
    background: #7ac943;
    color: #0A0F1D;
}

.card-img-bg:hover .card-arrow-circle {
    transform: rotate(45deg);
}

/* Pills Section */
.about-pills-section {
    padding-top: 40px;
}

.about-pills-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.about-pill-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(10, 15, 29, 0.08);
    padding: 10px 28px 10px 10px;
    border-radius: 100px;
    font-weight: 700;
    color: #0A0F1D;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.01);
}

.pill-thumb {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

/* Service Page Redesign (Figma-inspired) */
.service-redesign-hero {
    min-height: 640px;
    background: #070d1a;
    color: #ffffff;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 140px 0 100px;
}
.service-redesign-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
    z-index: 1;
}
.service-redesign-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 13, 26, 0.7) 0%, rgba(7, 13, 26, 0.95) 100%);
    z-index: 2;
}
.service-redesign-hero-inner {
    position: relative;
    z-index: 3;
    max-width: 900px;
}
.service-redesign-hero .service-eyebrow {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #7ac943;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    padding: 0;
}
.service-redesign-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4.8rem);
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    margin: 0 0 24px;
    letter-spacing: -0.02em;
}
.service-redesign-hero p {
    font-size: clamp(1rem, 1.3vw, 1.25rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 36px;
}
.service-redesign-hero-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Service Info Grid */
.service-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 80px 0;
}
.service-info-card {
    background: #ffffff;
    border: 1px solid rgba(10, 15, 29, 0.06);
    border-radius: 20px;
    padding: 32px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}
.service-info-card:hover {
    border-color: #7ac943;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}
.service-info-card span {
    font-size: 14px;
    font-weight: 700;
    color: #555861;
    display: block;
    margin-bottom: 12px;
}
.service-info-card h3 {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 12px;
    color: #0A0F1D;
}
.service-info-card p {
    font-size: 14px;
    line-height: 1.5;
    color: #555861;
    margin: 0;
}

/* Marquee Row */
.marquee-wrap {
    overflow: hidden;
    background: #FAF8F5;
    padding: 24px 0;
    border-top: 1px solid rgba(10, 15, 29, 0.06);
    border-bottom: 1px solid rgba(10, 15, 29, 0.06);
    margin-bottom: 80px;
}
.marquee-inner {
    display: flex;
    width: 200%;
    animation: marquee 25s linear infinite;
}
.marquee-inner span {
    font-size: 28px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(10, 15, 29, 0.15);
    margin-right: 60px;
    white-space: nowrap;
}
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Highlight Banner Block */
.highlight-banner-block {
    background: #0A0F1D;
    color: #ffffff;
    border-radius: 28px;
    padding: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 80px;
    border: 1px solid rgba(10, 15, 29, 0.06);
}
.highlight-banner-img {
    height: 380px;
    border-radius: 20px;
    overflow: hidden;
}
.highlight-banner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.highlight-banner-copy .badge {
    background: #7ac943;
    color: #0A0F1D;
    padding: 6px 14px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    display: inline-block;
}
.highlight-banner-copy h2 {
    font-size: 36px;
    font-weight: 800;
    margin: 18px 0;
    color: #ffffff;
}
.highlight-banner-list {
    display: grid;
    gap: 16px;
}
.highlight-banner-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.highlight-banner-item i {
    color: #7ac943;
    margin-top: 4px;
    flex-shrink: 0;
}
.highlight-banner-item span {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

/* Accordion Split Layout */
.accordion-split-layout {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 80px;
}
.accordion-list {
    display: grid;
    gap: 16px;
}
.accordion-item-new {
    background: #FAF8F5;
    border: 1px solid rgba(10, 15, 29, 0.06);
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.accordion-item-new:hover, .accordion-item-new.active {
    background: #ffffff;
    border-color: #7ac943;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
.accordion-header-new {
    display: flex;
    align-items: center;
    gap: 16px;
}
.accordion-header-new span {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0A0F1D;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}
.accordion-item-new:hover .accordion-header-new span, .accordion-item-new.active .accordion-header-new span {
    background: #7ac943;
    color: #0A0F1D;
}
.accordion-header-new h4 {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: #0A0F1D;
}
.accordion-item-new .accordion-content-new {
    font-size: 14px;
    line-height: 1.6;
    color: #555861;
    margin: 0 0 0 24px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, margin-top 0.35s ease;
}
.accordion-item-new.active .accordion-content-new {
    max-height: 200px;
    margin-top: 12px;
    opacity: 1;
}
.accordion-visual {
    height: 480px;
    border-radius: 28px;
    overflow: hidden;
}
.accordion-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Stats Showcase Banner */
.stats-showcase-banner {
    background: #0A0F1D;
    border-radius: 28px;
    padding: 48px;
    color: #ffffff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 80px;
}
.stats-showcase-copy h2 {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 20px;
    color: #ffffff;
}
.stats-showcase-copy p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 24px;
}
.stats-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.stats-showcase-item {
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    padding: 24px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.stats-showcase-item strong {
    font-size: 36px;
    font-weight: 900;
    color: #7ac943;
    display: block;
    margin-bottom: 8px;
}
.stats-showcase-item span {
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
}

/* Suburbs Photo Grid */
.suburbs-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 80px;
}
.suburb-photo-card {
    position: relative;
    height: 300px;
    border-radius: 24px;
    overflow: hidden;
}
.suburb-photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.suburb-photo-card:hover img {
    transform: scale(1.05);
}
.suburb-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(10, 15, 29, 0.85) 100%);
}
.suburb-photo-name {
    position: absolute;
    bottom: 24px;
    left: 24px;
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
}

/* FAQ Accordion Block */
.faq-accordion-block {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 80px;
}
.faq-visual-wrap {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    height: 440px;
}
.faq-visual-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.faq-visual-badge {
    position: absolute;
    top: 30px;
    left: 30px;
    background: #7ac943;
    color: #0A0F1D;
    font-weight: 800;
    padding: 10px 20px;
    border-radius: 12px;
}

/* Video Showcase Block */
.video-showcase-block {
    background: #FAF8F5;
    border-radius: 28px;
    padding: 60px;
    text-align: center;
    margin-bottom: 80px;
    border: 1px solid rgba(10, 15, 29, 0.06);
}
.video-showcase-block h2 {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 16px;
}
.video-showcase-block p {
    font-size: 16px;
    color: #555861;
    max-width: 600px;
    margin: 0 auto 30px;
}
.video-player-container {
    position: relative;
    height: 450px;
    border-radius: 24px;
    overflow: hidden;
    max-width: 800px;
    margin: 0 auto;
}
.video-player-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-play-btn-large {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #7ac943;
    color: #0A0F1D;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(122, 201, 67, 0.4);
    transition: transform 0.3s ease;
}
.video-player-container:hover .video-play-btn-large {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Promo CTA Box */
.promo-cta-box {
    background: #0A0F1D;
    border-radius: 28px;
    padding: 60px;
    text-align: center;
    color: #ffffff;
    margin-bottom: 80px;
}
.promo-cta-box h2 {
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 16px;
    color: #ffffff;
}
.promo-cta-box p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto 30px;
}

/* Responsive Overrides */
@media (max-width: 1100px) {
    .service-info-grid, .suburbs-photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .highlight-banner-block, .accordion-split-layout, .stats-showcase-banner, .faq-accordion-block {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 24px;
    }
    .highlight-banner-img, .accordion-visual, .faq-visual-wrap {
        height: 320px;
    }
    .about-hero-new-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    
    .about-hero-new-left {
        height: 450px;
    }
    
    .about-landmark-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .about-landmark-card {
        height: 420px;
    }
}
@media (max-width: 640px) {
    .service-info-grid, .suburbs-photo-grid {
        grid-template-columns: 1fr;
    }
    .stats-showcase-grid {
        grid-template-columns: 1fr;
    }
}

/* Geolocation Loader Spinner Animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.spinning {
    animation: spin 1s linear infinite;
    display: inline-block;
}

/* Mobile responsiveness overrides to fix inline grid layouts on service & contact pages */
@media (max-width: 768px) {
    /* Force standard grids and inline grids to stack into 1 column on mobile */
    .contact-hero-section .container,
    .contact-info-cards-grid,
    #location-section .container > div,
    .about-estate-hero,
    .about-tools-wrap,
    .about-pills-row,
    .service-hero-inner,
    .service-redesign-hero-inner,
    .about-page-hero-inner,
    .inspection-scope-list,
    .stats-showcase-grid,
    .timeline-steps,
    .suburbs-photo-grid,
    .about-landmark-grid,
    .service-info-grid,
    .highlight-banner-list,
    .accordion-list,
    .service-why-list,
    .about-hero-stats-row {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 24px !important;
    }

    .about-hero-stats-row {
        margin-top: 32px !important;
    }

    .about-estate-visual {
        height: 320px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .contact-hero-right {
        justify-content: center !important;
        margin-top: 24px;
        width: 100% !important;
    }

    .contact-arch-wrapper {
        margin: 0 auto;
        max-width: 100% !important;
    }

    /* Target any div elements that have inline multi-column styles */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns: 1.1fr 0.9fr"],
    div[style*="grid-template-columns: 1.15fr 0.85fr"],
    div[style*="grid-template-columns: repeat(3, 1fr)"],
    div[style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 30px 20px !important;
    }
}