/* ==========================================================================
   Homepage Redesign — component styles only.
   Element-level resets (*, body, h1-h6, a, img) are intentionally NOT
   duplicated here — css/style.css already owns those site-wide.
   Utility classes that collide with Bootstrap's own class names
   (.container, .btn / .btn-primary / .btn-outline, .badge) are prefixed
   with "hp-" below, because the unprefixed names are still load-bearing
   on other customer pages (about-us.php, service.php, order-history.php,
   payment-success.php, checkout.php, etc.) that this stylesheet also
   loads on via the shared header/footer.
   ========================================================================== */

/* Preserves the overflow-x:hidden behavior that css/style.css previously
   provided via .main-page-wrapper (that wrapper div is dropped from
   includes/header.php since the new fixed-position header doesn't need
   it) — also required so the full-bleed marquee/ticker sections below
   (100vw width with negative margins) don't introduce a horizontal
   scrollbar. */
body {
    overflow-x: hidden;
}

:root {
    --bg-primary: #F5F6FA;      /* Light cream - warm & safe */
    --bg-secondary: #F1ECF9;    /* Soft Lavender */
    --bg-dark: #161D2B;         /* Slate dark for footer / awards */
    --bg-dark-accent: #21162C;  /* Purple dark tint */

    --primary: #7B3BB0;         /* Royal Purple */
    --primary-light: #9E5CD6;
    --primary-glow: rgba(123, 59, 176, 0.15);
    --secondary: #00D1FF;       /* Cyan */
    --secondary-dark: #00BBE6;
    --accent-green: #10B981;    /* Emerald for trust/success */

    --text-main: #332F3A;       /* Deep slate/grey text */
    --text-muted: #6B7280;      /* Muted grey */
    --text-light: #F9FAFB;

    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Outfit', sans-serif;
    --font-quote: 'Playfair Display', serif;

    --radius-card: 24px;
    --radius-pill: 9999px;
    --radius-btn: 16px;

    --shadow-soft: 0 4px 20px -2px rgba(123, 59, 176, 0.06), 0 2px 6px -1px rgba(0,0,0,0.02);
    --shadow-clay: 0 8px 30px rgba(123, 59, 176, 0.08), inset -3px -3px 8px rgba(123, 59, 176, 0.06), inset 3px 3px 8px rgba(255, 255, 255, 0.8);
    --shadow-hover: 0 20px 40px -10px rgba(123, 59, 176, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.04);

    --transition-spring: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.skip-link {
    position: absolute;
    top: -50px;
    left: 16px;
    background: var(--primary);
    color: white;
    padding: 10px 18px;
    border-radius: var(--radius-btn);
    z-index: 10001;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 16px;
}

.hp-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.section-padding {
    padding: 100px 0;
}

@media (max-width: 768px) {
    .section-padding {
        padding: 60px 0;
    }
}

/* Utility Components (prefixed to avoid clobbering Bootstrap's own
   .container/.btn/.btn-primary/.badge used on other pages) */
.hp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hp-badge-purple-glow {
    background: var(--primary-glow);
    color: var(--primary);
    border: 1px solid rgba(123, 59, 176, 0.2);
}

.hp-badge-amber-glow {
    background: rgba(245, 158, 11, 0.1);
    color: var(--secondary-dark);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.badge-premium {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(255, 219, 30, 0.15);
    border: 1px solid rgba(255, 219, 30, 0.3);
    color: #FFDB1E;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: var(--radius-btn);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-spring);
    border: none;
    outline: none;
    text-decoration: none;
}

.hp-btn:active {
    transform: scale(0.96);
}

.hp-btn-primary {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: white;
    box-shadow: 0 10px 20px -5px rgba(123, 59, 176, 0.3);
}

.hp-btn-primary:hover {
    box-shadow: 0 15px 25px -5px rgba(123, 59, 176, 0.4);
    transform: translateY(-2px);
    color: white;
}

.hp-btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.hp-btn-outline:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
}

.hp-btn-whatsapp {
    background-color: #10B981;
    color: white;
    box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.3);
}

.hp-btn-whatsapp:hover {
    background-color: #059669;
    box-shadow: 0 15px 25px -5px rgba(16, 185, 129, 0.4);
    transform: translateY(-2px);
    color: white;
}

.hp-btn-text {
    color: var(--primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hp-btn-text:hover i {
    transform: translateX(4px);
}

.hp-btn-text i {
    transition: var(--transition-smooth);
}

/* 1. Modern Floating Header */
.main-header {
    position: fixed;
    top: 16px;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: var(--transition-smooth);
}

.main-header.scrolled {
    top: 8px;
}

.navbar {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: none;
    border-radius: 20px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0 0 1px rgba(123, 59, 176, 0.12), var(--shadow-soft);
    transition: var(--transition-smooth);
}

.main-header.scrolled .navbar {
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0 0 1px rgba(123, 59, 176, 0.18), var(--shadow-hover);
}

.main-header.scrolled .logo img {
    height: 40px;
}

.logo img {
    height: 48px;
    width: auto;
}

.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 32px;
}

.nav-link {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-main);
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: var(--transition-smooth);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* "Our Services" hover dropdown — restores the individual-service submenu
   the old header had, listing services from $navigationServices. */
.nav-dropdown {
    position: relative;
}

.nav-dropdown > .nav-link i {
    font-size: 0.7rem;
    margin-left: 4px;
    transition: var(--transition-smooth);
}

.nav-dropdown:hover > .nav-link i {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 20px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 280px;
    background: white;
    border-radius: var(--radius-btn);
    box-shadow: var(--shadow-hover);
    border: 1px solid rgba(123, 59, 176, 0.08);
    padding: 10px;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-smooth);
    z-index: 1001;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    top: calc(100% + 12px);
}

.nav-dropdown-menu a {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
}

.nav-dropdown-menu a:hover {
    background: var(--primary-glow);
    color: var(--primary);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nav-phone-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-glow);
    color: var(--primary);
    font-size: 0.95rem;
    transition: var(--transition-spring);
    flex-shrink: 0;
}

.nav-phone-link:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.06);
}

.nav-mobile-book-btn {
    display: none;
}

.nav-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-btn);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: white;
    box-shadow: 0 8px 16px -4px rgba(123, 59, 176, 0.35);
    transition: var(--transition-spring);
    white-space: nowrap;
}

.nav-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px -4px rgba(123, 59, 176, 0.45);
    color: white;
}

.login-google-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: var(--radius-btn);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    background: white;
    border: 1px solid #E5E7EB;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.login-google-btn:hover {
    border-color: #CBD5E1;
    background-color: #F9FAFB;
}

.login-google-btn img {
    width: 18px;
    height: 18px;
}

.hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-main);
    cursor: pointer;
}

@media (max-width: 992px) {
    .nav-menu {
        display: none;
    }
    /* The call button, Login, and desktop Book Now are all dropped here —
       call and login stay reachable via the mobile drawer and the sticky
       bottom action bar. In their place, a single "Book Your Nanny" CTA
       fills the space between the logo and the hamburger.

       Logo and hamburger differ in width, so flex's justify-content:
       space-between would NOT put the CTA at the true visual center
       (space-between only centers a middle item when its two neighbors
       are equal width). Switch to a 3-column grid instead — .nav-actions
       flattens via display:contents so its visible child (the CTA)
       becomes its own grid column alongside the hamburger, guaranteeing
       a true center regardless of either end's width. */
    .navbar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    .logo {
        justify-self: start;
    }
    .nav-actions {
        display: contents;
    }
    .nav-phone-link,
    .nav-cta-btn,
    .login-google-btn,
    .nav-actions .dropdown {
        display: none;
    }
    .nav-mobile-book-btn {
        display: inline-flex;
        align-items: center;
        justify-self: center;
        padding: 10px 24px;
        border-radius: var(--radius-pill);
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 0.9rem;
        white-space: nowrap;
        background: linear-gradient(135deg, var(--primary-light), var(--primary));
        color: white;
        box-shadow: 0 8px 16px -4px rgba(123, 59, 176, 0.35);
        transition: var(--transition-spring);
    }
    .nav-mobile-book-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 20px -4px rgba(123, 59, 176, 0.45);
        color: white;
    }
    .hamburger {
        display: block;
        justify-self: end;
    }
}

/* Mobile Nav Drawer */
.mobile-drawer {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    max-width: 85vw;
    height: 100%;
    background: white;
    box-shadow: -10px 0 40px rgba(0,0,0,0.15);
    z-index: 1100;
    padding: 30px 24px;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.mobile-drawer.active {
    right: 0;
}

.drawer-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-main);
    cursor: pointer;
    margin-bottom: 30px;
    display: block;
    margin-left: auto;
}

.drawer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.drawer-menu a {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.1rem;
}

.drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(123, 59, 176, 0.1);
}

.drawer-actions .nav-cta-btn,
.drawer-actions .login-google-btn {
    display: flex;
    justify-content: center;
    width: 100%;
}

.drawer-phone-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--primary);
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(22, 29, 43, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-smooth);
}

.drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Sticky Mobile Action Bar */
.mobile-action-bar {
    display: none;
}

@media (max-width: 768px) {
    .mobile-action-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 998;
        background: white;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    }

    /* The pre-existing WhatsApp chat widget (whatsappScript/mentors-chat-
       support.min.js, rendered into #whatsAppChatSupport) shows its own
       floating bubble + "How can we help you?" tooltip, which stacks
       awkwardly on top of this sticky action bar on small screens. The
       action bar's WhatsApp button already covers that entry point on
       mobile, so hide the widget's own bubble there. */
    #whatsAppChatSupport {
        display: none !important;
    }

    .mobile-action-bar a {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 16px 0;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 0.95rem;
    }

    .mobile-action-bar .call-action {
        color: var(--primary);
        border-right: 1px solid rgba(0,0,0,0.06);
    }

    .mobile-action-bar .whatsapp-action {
        background-color: #10B981;
        color: white;
    }

    body {
        padding-bottom: 58px;
    }
}

/* 2. Hero Section */
.hero-section {
    padding: 160px 0 80px 0;
    background-color: var(--bg-primary);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: -20%; right: -10%;
    width: 70vw; height: 70vw;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.05) 0%, transparent 60%);
    border-radius: 50%;
    z-index: 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 20px;
    color: var(--text-main);
    letter-spacing: -0.03em;
    font-family: var(--font-heading);
}

.hero-content p {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-bottom: 30px;
    max-width: 90%;
    line-height: 1.6;
}

.hero-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: white;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 99px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.filter-pill i {
    color: var(--secondary);
}

.filter-pill:hover {
    border-color: var(--secondary);
    transform: translateY(-2px);
    color: var(--primary);
}

.hero-inline-stats {
    display: flex;
    align-items: center;
    gap: 40px;
}

.inline-stat {
    display: flex;
    flex-direction: column;
}

.inline-stat .stat-num {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 4px;
}

.inline-stat .stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.hero-visual {
    position: relative;
    height: 500px;
}

.masonry-card {
    background: white;
    border-radius: 24px;
    padding: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    position: absolute;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.masonry-card img {
    border-radius: 16px;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.main-card {
    width: 280px;
    top: 20px;
    left: 20px;
    z-index: 2;
}

.main-card img {
    height: 300px;
}

.side-card {
    width: 240px;
    bottom: 20px;
    right: 0;
    z-index: 3;
    box-shadow: 0 25px 50px rgba(0,0,0,0.12);
}

.side-card img {
    height: 240px;
}

.masonry-badge {
    position: absolute;
    background: white;
    border-radius: 100px;
    padding: 10px 20px 10px 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    z-index: 5;
    animation: floating 4s ease-in-out infinite;
}

.masonry-badge .icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
}

.badge-matched {
    top: 40px;
    right: -20px;
}

.badge-matched .icon-circle {
    background: linear-gradient(135deg, #FFDB1E, #F59E0B);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.35);
}

.badge-near {
    bottom: 60px;
    left: -40px;
    animation-delay: 2s;
}

.badge-near .icon-circle {
    background: var(--primary);
    box-shadow: 0 4px 10px rgba(123, 59, 176, 0.3);
}

.masonry-badge .badge-text {
    display: flex;
    flex-direction: column;
}

.badge-title {
    font-weight: 700;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: var(--text-main);
    line-height: 1.2;
}

.badge-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

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

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

@media (max-width: 992px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .hero-inline-stats {
        gap: 20px;
        justify-content: center;
    }
    .hero-content {
        text-align: center;
    }
    .hero-content p {
        margin: 0 auto 30px auto;
    }
    .hero-filters {
        justify-content: center;
    }
    .hero-visual {
        height: 480px;
        max-width: 500px;
        margin: 0 auto;
    }
    /* The badges' desktop offsets (right:-20px / left:-40px) assume a
       wider hero-visual than this breakpoint's centered, max-width:500px
       box — at this size they float in the gap between the two cards
       instead of sitting on a corner. Pull them inward so they read as
       intentional, not misplaced. (576px and below has its own further
       reduction on top of this.) */
    .badge-matched {
        top: 20px;
        right: 10px;
    }
    .badge-near {
        bottom: 40px;
        left: 10px;
    }
}

@media (max-width: 576px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .hero-inline-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    .inline-stat .stat-num {
        font-size: 1.5rem;
    }
    .main-card {
        width: 240px;
        left: -40px;
    }
    .side-card {
        width: 200px;
        bottom: 10px;
    }
    /* The desktop offsets below (right:-20px / left:-40px) intentionally
       let these badges pop out past the card edges on a wide hero-visual.
       On a narrow mobile viewport that same offset pushes them past the
       screen edge entirely (badge-near was clipping ~16px off-screen) —
       pull both back within the visual's own bounds here. */
    .badge-matched {
        right: 0;
    }
    .badge-near {
        left: 0;
    }
    /* At mobile card widths, the badge text wraps to 2-3 lines; a full
       pill radius and desktop padding look cramped/overlapping against
       the images, so scale both down here. */
    .masonry-badge {
        padding: 8px 14px 8px 8px;
        border-radius: 20px;
        gap: 8px;
        max-width: 200px;
    }
    .masonry-badge .icon-circle {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
        flex-shrink: 0;
    }
    .badge-title {
        font-size: 0.8rem;
    }
    .badge-desc {
        font-size: 0.7rem;
    }
    .stat-card .number {
        font-size: 2.2rem !important;
    }
}

/* 3. Trust Ribbon */
.trust-ribbon {
    background-color: white;
    padding: 50px 0 60px 0;
    border-bottom: 1px solid rgba(123, 59, 176, 0.08);
    position: relative;
    z-index: 10;
}

.trust-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 24px;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-main);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

@media (max-width: 576px) {
    .trust-header {
        flex-wrap: wrap;
    }
}

.trust-header i {
    color: var(--secondary);
    font-size: 1.5rem;
}

.trust-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.trust-feature-card {
    background: var(--bg-primary);
    padding: 24px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: var(--transition-spring);
    border: 1px solid rgba(123, 59, 176, 0.05);
}

.trust-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    background: white;
    border-color: rgba(123, 59, 176, 0.15);
}

.trust-feature-card .tf-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 16px;
}

.tf-icon-1 { background: rgba(16, 185, 129, 0.1); color: #10B981; }
.tf-icon-2 { background: rgba(245, 158, 11, 0.1); color: #F59E0B; }
.tf-icon-3 { background: rgba(123, 59, 176, 0.1); color: var(--primary); }
.tf-icon-4 { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }

.trust-feature-card h4 {
    font-size: 1.05rem;
    color: var(--text-main);
    line-height: 1.4;
    font-weight: 700;
}

@media (max-width: 992px) {
    .trust-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .trust-features-grid { grid-template-columns: 1fr; }
}

/* 3b. Instant Booking Spotlight */
.instant-spotlight-section {
    background: var(--bg-primary);
    padding: 60px 0;
}

.instant-spotlight-card {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
    background: white;
    border-radius: var(--radius-card);
    padding: 48px 50px;
    box-shadow: var(--shadow-hover);
    border: 1.5px solid rgba(16, 185, 129, 0.18);
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
}

.instant-spotlight-card::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, rgba(245, 158, 11, 0) 70%);
    z-index: 0;
}

.instant-live-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    border-radius: var(--radius-pill);
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: var(--accent-green);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
}

.pulse-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-green);
}

.pulse-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--accent-green);
    animation: pulseDot 1.8s ease-out infinite;
}

@keyframes pulseDot {
    0% { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.9); opacity: 0; }
}

.instant-spotlight-left {
    position: relative;
    z-index: 1;
}

.instant-spotlight-left h2 {
    font-size: 2.2rem;
    margin-bottom: 16px;
    font-family: var(--font-heading);
}

.instant-spotlight-left h2 .highlight {
    color: var(--secondary-dark);
}

.instant-spotlight-left p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 26px;
    max-width: 520px;
}

.instant-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

.instant-feature {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    background: var(--bg-secondary);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-main);
}

.instant-feature i {
    color: var(--accent-green);
}

.instant-ctas {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.instant-spotlight-right {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--bg-secondary);
    border-radius: var(--radius-card);
    padding: 36px 24px;
}

.instant-icon-holder {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.9rem;
    margin: 0 auto 20px auto;
    box-shadow: 0 10px 24px -6px rgba(245, 158, 11, 0.45);
}

.instant-price-tag .label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.instant-price-tag .amount {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.instant-price-tag .unit {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 600;
}

@media (max-width: 992px) {
    .instant-spotlight-card {
        grid-template-columns: 1fr;
        padding: 36px 28px;
        text-align: center;
    }
    .instant-spotlight-left p {
        margin-left: auto;
        margin-right: auto;
    }
    .instant-features,
    .instant-ctas {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .instant-spotlight-card {
        padding: 30px 22px;
    }
    .instant-spotlight-left h2 {
        font-size: 1.7rem;
    }
}

/* 4. Stats & Philosophy Section (absorbs the unique "who we are" content) */
.stats-section {
    background: linear-gradient(135deg, #4a1e68 0%, #5F2C82 100%);
    color: white;
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}

.stats-section::before {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255, 219, 30, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.stats-left h2 {
    font-size: 3rem;
    color: white;
    margin-top: 15px;
    margin-bottom: 25px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1px;
    font-family: var(--font-heading);
}

.stats-left p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 35px;
    line-height: 1.8;
    font-weight: 400;
}

.stats-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.stats-cards .stat-card:last-child {
    grid-column: span 2;
}

.stat-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 24px;
    padding: 35px 30px;
    text-align: left;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 219, 30, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.stat-card .icon-holder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 16px;
    background: rgba(255, 219, 30, 0.15);
    color: #FFDB1E;
    font-size: 1.6rem;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.stat-card:hover .icon-holder {
    background: #FFDB1E;
    color: #5F2C82;
    transform: scale(1.1);
}

.stat-card .number {
    font-family: var(--font-heading);
    font-size: 3.2rem;
    font-weight: 700;
    color: white;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-card .label {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
}

@media (max-width: 992px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .stats-cards .stat-card:last-child {
        grid-column: span 1;
    }
    .stats-cards {
        grid-template-columns: 1fr 1fr;
    }
}

/* 4.5. Who We Are — restored as its own standalone section (matches the
   mockup's ".who-we-are-legacy" 1:1; this was previously merged into
   .stats-section, which lost the section's identity — restored per
   direct feedback). */
.who-we-are-legacy {
    padding: 80px 0 60px 0;
    background: #fff;
}

.legacy-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.legacy-subtitle {
    color: var(--primary);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.legacy-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 25px;
    line-height: 1.2;
    font-family: var(--font-heading);
}

.legacy-desc {
    font-size: 1.15rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 35px;
}

.legacy-btn {
    display: inline-block;
    padding: 14px 35px;
    background: var(--primary);
    color: #fff;
    border-radius: 99px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.legacy-btn:hover {
    background: var(--secondary);
    color: #161D2B;
}

.legacy-stats-row {
    display: flex;
    gap: 50px;
    margin-top: 45px;
    padding-top: 30px;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.legacy-stat-num {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
    margin-bottom: 8px;
    font-family: var(--font-heading);
}

.legacy-stat-num span {
    font-size: 1.5rem;
}

.legacy-stat-text {
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 500;
}

.legacy-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: var(--shadow-hover);
}

.legacy-bottom-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 70px;
    padding-top: 50px;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.legacy-card {
    text-align: center;
    padding: 20px 10px;
    background: #fff;
}

.legacy-card-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: var(--shadow-soft);
}

.legacy-card-icon img {
    max-width: 45px;
    max-height: 45px;
}

.legacy-card h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 15px;
    font-family: var(--font-heading);
}

.legacy-card p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
}

@media (max-width: 992px) {
    .legacy-top-row {
        grid-template-columns: 1fr;
    }
    .legacy-bottom-row {
        grid-template-columns: 1fr;
    }
}

/* 5. Interactive Featured Services */
.services-section {
    background-color: var(--bg-primary);
}

.section-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 60px auto;
    padding: 0 24px;
}

.section-header h2 {
    font-size: 2.5rem;
    margin-top: 12px;
    margin-bottom: 16px;
    font-family: var(--font-heading);
}

.section-header p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 50px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
}

.service-card {
    background-color: white;
    border-radius: var(--radius-card);
    border: 1px solid rgba(123, 59, 176, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-spring);
    height: 100%;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(123, 59, 176, 0.2);
}

.service-img-holder {
    height: 390px;
    overflow: hidden;
    position: relative;
}

.service-img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-spring);
}

.service-card:hover .service-img-holder img {
    transform: scale(1.08);
}

.service-info {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.service-info h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    font-weight: 700;
    font-family: var(--font-heading);
}

.service-info p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    flex-grow: 1;
}

.service-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px dashed rgba(123, 59, 176, 0.1);
}

.service-price {
    display: flex;
    flex-direction: column;
}

.service-price span:first-child {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.service-price span:last-child {
    font-weight: 800;
    font-family: var(--font-heading);
    color: var(--primary);
    font-size: 1.1rem;
}

.service-card-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-glow);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.service-card:hover .service-card-btn {
    background-color: var(--primary);
    color: white;
    transform: rotate(-45deg);
}

.services-more-cta {
    text-align: center;
}

@media (max-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 576px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* 6. Award Spotlight Section */
.award-section {
    background: linear-gradient(135deg, var(--bg-dark), var(--bg-dark-accent));
    color: white;
    position: relative;
    overflow: hidden;
}

.award-section::after {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(123, 59, 176, 0.12) 0%, rgba(0,0,0,0) 70%);
    z-index: 1;
}

.award-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.award-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.cert-container {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-card);
    padding: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 440px;
    cursor: pointer;
    transition: var(--transition-spring);
}

.cert-container:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(123, 59, 176, 0.2);
    border-color: rgba(123, 59, 176, 0.4);
}

.cert-image {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
}

.cert-zoom-hint {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transition: var(--transition-smooth);
}

.cert-container:hover .cert-zoom-hint {
    opacity: 1;
}

.award-content h2 {
    color: white;
    font-size: 2.6rem;
    margin-bottom: 24px;
    line-height: 1.2;
    font-family: var(--font-heading);
}

.award-content h2 span {
    color: var(--secondary);
}

.award-content p {
    color: rgba(255,255,255,0.75);
    font-size: 1.1rem;
    margin-bottom: 40px;
    line-height: 1.7;
}

.award-badges {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.award-badge-item {
    text-align: center;
}

.award-icon-box {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: white;
    margin: 0 auto 12px auto;
    box-shadow: 0 8px 16px rgba(123, 59, 176, 0.2);
}

.award-badge-item span {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    text-transform: uppercase;
}

/* Lightbox styling (used by the award certificate) */
.lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.lightbox-modal.active {
    display: flex;
}

.lightbox-modal img {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    transform: scale(0.95);
    transition: var(--transition-spring);
}

.lightbox-modal.active img {
    transform: scale(1);
}

@media (max-width: 992px) {
    .award-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    .award-visual {
        order: 2;
    }
    .award-content {
        order: 1;
    }
    .award-badges {
        justify-content: center;
    }
}

/* 7. "How It Works" Timeline */
.timeline-section {
    background-color: var(--bg-secondary);
}

.timeline-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
    margin-top: 40px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
}

.timeline-container::before {
    content: '';
    position: absolute;
    top: 75px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: repeating-linear-gradient(to right, var(--primary) 0, var(--primary) 8px, transparent 8px, transparent 16px);
    z-index: 1;
}

.timeline-step {
    text-align: center;
    position: relative;
    z-index: 2;
}

.timeline-icon-wrapper {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: white;
    box-shadow: var(--shadow-clay);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px auto;
    position: relative;
    transition: var(--transition-spring);
    border: 4px solid var(--bg-secondary);
    overflow: hidden;
}

.timeline-step:hover .timeline-icon-wrapper {
    transform: scale(1.1) translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.timeline-icon-wrapper img {
    width: auto;
    height: 108px;
    max-width: 90%;
    object-fit: contain;
}

@media (max-width: 576px) {
    .timeline-icon-wrapper {
        width: 120px;
        height: 120px;
    }
    .timeline-icon-wrapper img {
        height: 92px;
    }
}

.timeline-number {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(123, 59, 176, 0.3);
    border: 2px solid white;
}

.timeline-step h3 {
    font-size: 1.3rem;
    margin-bottom: 12px;
    font-family: var(--font-heading);
}

.timeline-step p {
    color: var(--text-muted);
    font-size: 0.95rem;
    max-width: 280px;
    margin: 0 auto;
}

@media (max-width: 992px) {
    .timeline-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .timeline-container::before {
        display: none;
    }
    .timeline-step p {
        max-width: 380px;
    }
}

/* 8. Assurance & Guarantees Section — restored to the mockup's actual
   photo background + dark overlay treatment (a flat gradient was
   substituted here previously, which is why the section didn't match
   the design's "Why Choose Us" image background — fixed per feedback). */
.assurance-section {
    position: relative;
    padding: 120px 0;
    background-image: url('https://images.unsplash.com/photo-1609220136736-443140cffec6?q=80&w=2000&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 15px;
    border-radius: 40px;
    overflow: hidden;
}

.assurance-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 1;
}

.assurance-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.assurance-content .sub-title {
    color: #fff;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: block;
}

.assurance-content h2 {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 30px;
    line-height: 1.2;
    font-family: var(--font-heading);
}

.assurance-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
}

.assurance-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #ffffff;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.assurance-item:hover {
    transform: translateX(10px);
}

.assurance-check-box {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.assurance-item p {
    font-size: 1.05rem;
    font-weight: 500;
    color: #161D2B;
    margin: 0;
}

@media (max-width: 992px) {
    .assurance-grid {
        grid-template-columns: 1fr;
    }
}

/* 9. Testimonials — Editorial Marquee */
.testimonials-section {
    background-color: var(--bg-primary);
}

.rating-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: -20px auto 50px auto;
}

.rating-banner .rating-score {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.9rem;
    color: var(--text-main);
    line-height: 1;
}

.rating-banner .rating-stars-row {
    display: flex;
    gap: 3px;
}

.rating-banner .rating-stars-row svg {
    width: 18px;
    height: 18px;
    fill: var(--secondary);
}

.rating-banner .rating-divider {
    width: 1px;
    height: 20px;
    background: rgba(123, 59, 176, 0.15);
}

.rating-banner .rating-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 600;
}

.testimonial-marquee-outer {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    padding: 10px 0 8px 0;
}

.testimonial-marquee-outer::before,
.testimonial-marquee-outer::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 140px;
    z-index: 2;
    pointer-events: none;
}

.testimonial-marquee-outer::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-primary), rgba(250, 247, 242, 0));
}

.testimonial-marquee-outer::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-primary), rgba(250, 247, 242, 0));
}

.testimonial-track {
    display: flex;
    gap: 28px;
    width: max-content;
    padding: 0 28px;
    animation: testimonialScroll 50s linear infinite;
}

.testimonial-track:hover,
.testimonial-track.paused {
    animation-play-state: paused;
}

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

@media (prefers-reduced-motion: reduce) {
    .testimonial-track,
    .location-ticker-track {
        animation: none;
    }
}

.testimonial-card {
    position: relative;
    background: #FFFFFF;
    border-radius: 22px;
    padding: 34px 32px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 380px;
    flex-shrink: 0;
    border: 1.5px solid rgba(51, 27, 68, 0.12);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 20px -6px rgba(16, 24, 40, 0.06);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.testimonial-card:hover {
    transform: translateY(-6px);
    border-color: var(--primary);
    box-shadow: 0 4px 8px rgba(16, 24, 40, 0.05), 0 24px 40px -12px rgba(123, 59, 176, 0.22);
}

.testimonial-quote-mark {
    position: absolute;
    top: 26px;
    right: 28px;
    z-index: 0;
}

.testimonial-quote-mark svg {
    width: 46px;
    height: 46px;
    fill: var(--primary);
    opacity: 0.07;
}

.testimonial-stars {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 3px;
}

.testimonial-stars svg {
    width: 14px;
    height: 14px;
    fill: var(--secondary);
}

.testimonial-text {
    position: relative;
    z-index: 1;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-main);
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.testimonial-readmore {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--primary);
    cursor: pointer;
    margin-top: -10px;
}

.testimonial-readmore:hover {
    text-decoration: underline;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar-photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px white, 0 0 0 3.5px rgba(123, 59, 176, 0.15);
}

.author-info h4 {
    font-size: 0.98rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.author-info h4 .verified-badge {
    color: var(--accent-green);
    font-size: 0.85rem;
}

.author-info p {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

@media (max-width: 768px) {
    .testimonial-card {
        padding: 28px 24px;
    }
}

@media (max-width: 576px) {
    .testimonial-card {
        width: 290px;
        padding: 28px 24px 24px 24px;
    }
    .testimonial-marquee-outer::before,
    .testimonial-marquee-outer::after {
        width: 60px;
    }
}

/* Full-review modal */
.review-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(22, 29, 43, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10010;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.review-modal-overlay.active {
    display: flex;
}

.review-modal {
    position: relative;
    background: white;
    border-radius: var(--radius-card);
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 48px 40px 40px 40px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

.review-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: none;
    color: var(--text-main);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.review-modal-close:hover {
    background: var(--primary);
    color: white;
}

.review-modal-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
}

.review-modal-stars svg {
    width: 16px;
    height: 16px;
    fill: var(--secondary);
}

.review-modal-text {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-main);
    margin-bottom: 30px;
    white-space: pre-line;
}

.review-modal-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid rgba(123, 59, 176, 0.1);
}

@media (max-width: 576px) {
    .review-modal {
        padding: 40px 24px 28px 24px;
    }
}

/* 9b. Areas We Serve — full-width scrolling location ticker */
.location-ticker-section {
    background: linear-gradient(135deg, #4a1e68 0%, #5F2C82 100%);
    padding: 50px 0 46px 0;
    overflow: hidden;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.location-ticker-header {
    text-align: center;
    padding: 0 24px;
    margin-bottom: 32px;
}

.location-ticker-header h2 {
    color: white;
    font-size: 2rem;
    margin-top: 14px;
    margin-bottom: 10px;
    font-family: var(--font-heading);
}

.location-ticker-header .location-ticker-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
}

.location-ticker-header .location-ticker-cta-link:hover {
    color: #FFDB1E;
}

.location-ticker-viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.location-ticker-viewport::before,
.location-ticker-viewport::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}

.location-ticker-viewport::before {
    left: 0;
    background: linear-gradient(to right, #4a1e68, rgba(74, 30, 104, 0));
}

.location-ticker-viewport::after {
    right: 0;
    background: linear-gradient(to left, #5F2C82, rgba(95, 44, 130, 0));
}

.location-ticker-track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: locationTickerScroll 32s linear infinite;
}

.location-ticker-track:hover {
    animation-play-state: paused;
}

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

.location-ticker-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 17px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    color: white;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.location-ticker-chip i {
    color: #FFDB1E;
    font-size: 0.8rem;
}

.location-ticker-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 219, 30, 0.4);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .location-ticker-header h2 {
        font-size: 1.6rem;
    }
}

/* 9c. FAQ Accordion */
.faq-section {
    background-color: var(--bg-secondary);
}

.faq-list {
    max-width: 780px;
    margin: 40px auto 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 24px;
}

.faq-item {
    background: white;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(123, 59, 176, 0.06);
    overflow: hidden;
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 28px;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-main);
    cursor: pointer;
}

.faq-question i {
    color: var(--primary);
    transition: var(--transition-smooth);
    flex-shrink: 0;
}

.faq-item.open .faq-question i {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-answer p {
    padding: 0 28px 24px 28px;
    color: var(--text-muted);
    font-size: 0.98rem;
    line-height: 1.7;
}

/* 10. Call-to-Action Footer Section */
.cta-section {
    background-color: var(--bg-primary);
    padding-top: 60px;
    padding-bottom: 100px;
}

@media (max-width: 768px) {
    .cta-section {
        padding-top: 40px;
    }
}

.cta-banner {
    background: linear-gradient(135deg, var(--bg-dark-accent) 0%, var(--primary) 100%);
    border-radius: var(--radius-card);
    padding: 80px 60px;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(123, 59, 176, 0.2);
    max-width: 1200px;
    margin: 0 auto;
}

.cta-banner h2 {
    color: white;
    font-size: 2.8rem;
    margin-bottom: 16px;
    font-weight: 800;
    font-family: var(--font-heading);
}

.cta-banner p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.15rem;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cta-buttons .hp-btn-primary {
    background: white;
    color: var(--primary);
}

.cta-buttons .hp-btn-primary:hover {
    background-color: #F9FAFB;
    box-shadow: 0 15px 25px rgba(255, 255, 255, 0.15);
    color: var(--primary);
}

.cta-buttons .hp-btn-outline {
    border-color: white;
    color: white;
}

.cta-buttons .hp-btn-outline:hover {
    background-color: white;
    color: var(--primary);
}

@media (max-width: 768px) {
    .cta-banner {
        padding: 50px 24px;
    }
    .cta-banner h2 {
        font-size: 2rem;
    }
}

/* 10.5. Shared Inner-Page Header Band (used by services.php, service.php,
   about-us.php, etc. — a light page-header/breadcrumb treatment that
   isn't part of the original homepage mockup but follows its own
   design tokens/spacing conventions, for the inner-page rollout). */
.page-header-band {
    background: var(--bg-primary);
    padding: 160px 0 60px 0;
    position: relative;
    overflow: hidden;
}

.page-header-band::before {
    content: '';
    position: absolute;
    top: -20%; right: -10%;
    width: 50vw; height: 50vw;
    background: radial-gradient(circle, rgba(123, 59, 176, 0.06) 0%, transparent 60%);
    border-radius: 50%;
    z-index: 0;
}

.page-header-band .hp-container {
    position: relative;
    z-index: 1;
}

.page-header-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.page-header-breadcrumb a {
    color: var(--primary);
}

.page-header-breadcrumb a:hover {
    text-decoration: underline;
}

.page-header-band h1 {
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.page-header-band p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 640px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .page-header-band {
        padding: 140px 0 40px 0;
    }
    .page-header-band h1 {
        font-size: 2.1rem;
    }
}

/* Photo-background variant (services.php, service.php) — background-image
   is set inline per-page/per-service; this adds the dark readability
   overlay and switches text to white, matching the site's existing photo-
   banner convention (e.g. the old inner-banner-one, .assurance-section). */
.page-header-band.has-photo {
    background-color: var(--bg-dark);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page-header-band.has-photo::before {
    display: none;
}

.page-header-band.has-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 0;
}

.page-header-band.has-photo .page-header-breadcrumb,
.page-header-band.has-photo .page-header-breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
}

.page-header-band.has-photo h1,
.page-header-band.has-photo p {
    color: #fff;
}

/* Services catalog grid (services.php) — 3 columns instead of the
   homepage's curated 4, so each card gets more visual weight on the
   full-catalog listing page. Reuses the same .service-card component. */
.services-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto 50px auto;
    padding: 0 24px;
}

@media (max-width: 992px) {
    .services-catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .services-catalog-grid {
        grid-template-columns: 1fr;
    }
}

/* Star rating row (services.php cards) */
.service-rating {
    display: flex;
    gap: 3px;
    margin-bottom: 4px;
}

.service-rating i {
    color: var(--secondary-dark);
    font-size: 0.85rem;
}

/* 11. Custom Modern Footer */
.footer {
    background-color: var(--bg-dark);
    color: rgba(255,255,255,0.7);
    padding: 80px 0 30px 0;
    font-size: 0.95rem;
}

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

.footer-logo img {
    height: 56px;
    margin-bottom: 24px;
}

.footer-info p {
    margin-bottom: 20px;
    line-height: 1.6;
}

.footer-col h4 {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 24px;
    font-weight: 600;
    font-family: var(--font-heading);
}

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

.footer-links a:hover {
    color: white;
    padding-left: 4px;
}

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

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

.footer-contact-item i {
    color: var(--primary-light);
    font-size: 1.1rem;
    margin-top: 3px;
}

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

.footer-bottom a {
    color: var(--primary-light);
}

.footer-bottom a:hover {
    text-decoration: underline;
}

@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .footer-grid > *:first-child,
    .footer-grid > *:last-child {
        grid-column: span 2;
    }
}
@media (max-width: 576px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .footer-grid > *:first-child,
    .footer-grid > *:last-child {
        grid-column: span 1;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}