/* ================================================================
   EXPÉRIENCE ESTHÉTIQUE J.F.W — styles.css
   Premium Mobile Car Detailing Website

   TABLE OF CONTENTS:
   1.  CSS Variables (Design System)
   2.  Reset & Base Styles
   3.  Typography
   4.  Utility Classes & Reusable Components
   5.  Buttons
   6.  Navigation
   7.  Hero Section
   8.  Services Section
   9.  About Section
   10. Booking Section
   11. Reviews Section
   12. Loyalty Section
   13. Contact Section
   14. Footer
   15. Scroll Animations
   16. Media Queries (Responsive)
   ================================================================ */


/* ================================================================
   1. CSS VARIABLES — DESIGN SYSTEM
   Edit these variables to change colors or spacing site-wide.
   ================================================================ */
:root {
    /* --- Color Palette --- */
    --bg-primary:     #07070d;       /* Near-black background */
    --bg-secondary:   #0d1020;       /* Slightly lighter dark */
    --bg-card:        #0f1525;       /* Card backgrounds */
    --bg-card-hover:  #131c30;       /* Card hover state */

    --blue-deep:      #0d1b2a;       /* Deep navy */
    --blue-mid:       #1b3a5c;       /* Mid-tone blue */
    --blue-accent:    #2563eb;       /* Primary blue accent */
    --blue-bright:    #3b82f6;       /* Brighter blue (glow, hover) */
    --blue-glow:      rgba(37, 99, 235, 0.18);

    --silver:         #8899aa;       /* Metallic silver */
    --silver-light:   #b8c8d8;       /* Light silver */
    --silver-bright:  #dde6ef;       /* Bright silver */

    --gold:           #c8981a;       /* Gold accent (premium) */
    --gold-light:     #e8b832;       /* Lighter gold */
    --gold-glow:      rgba(200, 152, 26, 0.2);

    --text-primary:   #edf2f7;       /* Main text */
    --text-secondary: #94a3b8;       /* Secondary/muted text */
    --text-muted:     #5a6a7a;       /* Dimmed text */

    --border:         rgba(255, 255, 255, 0.07);
    --border-blue:    rgba(37, 99, 235, 0.35);
    --border-gold:    rgba(200, 152, 26, 0.4);

    /* --- Gradients --- */
    --gradient-hero:    linear-gradient(135deg, #07070d 0%, #0d1b2a 60%, #090e18 100%);
    --gradient-blue:    linear-gradient(135deg, #0d1b2a, #1b3a5c);
    --gradient-card:    linear-gradient(145deg, #0f1525, #111a2e);
    --gradient-gold:    linear-gradient(135deg, #c8981a, #e8b832);
    --gradient-silver:  linear-gradient(135deg, #8899aa, #b8c8d8);

    /* --- Shadows --- */
    --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:    0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg:    0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-blue:  0 8px 32px rgba(37, 99, 235, 0.2);
    --shadow-gold:  0 8px 32px rgba(200, 152, 26, 0.25);

    /* --- Spacing --- */
    --section-padding: clamp(80px, 10vw, 130px);
    --container-max:   1200px;
    --container-pad:   clamp(20px, 5vw, 60px);
    --gap-lg:          clamp(40px, 6vw, 80px);

    /* --- Border Radius --- */
    --radius-sm:  8px;
    --radius-md:  14px;
    --radius-lg:  20px;
    --radius-xl:  28px;

    /* --- Typography --- */
    --font-serif:  'Playfair Display', Georgia, serif;
    --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* --- Transitions --- */
    --transition-fast:   all 0.2s ease;
    --transition-base:   all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ================================================================
   2. RESET & BASE STYLES
   ================================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    zoom: 0.82;
}

body {
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-base);
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

::selection {
    background: var(--blue-accent);
    color: #fff;
}


/* ================================================================
   3. TYPOGRAPHY
   ================================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    line-height: 1.2;
    font-weight: 600;
    color: var(--text-primary);
}

h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }

p {
    color: var(--text-secondary);
    font-size: clamp(0.95rem, 1.5vw, 1.05rem);
    line-height: 1.75;
}


/* ================================================================
   4. UTILITY CLASSES & REUSABLE COMPONENTS
   ================================================================ */

/* Container */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

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

/* Section Header — reused across all sections */
.section-header {
    text-align: center;
    margin-bottom: clamp(50px, 7vw, 80px);
}

.section-label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blue-bright);
    margin-bottom: 16px;
    padding: 5px 14px;
    border: 1px solid var(--border-blue);
    border-radius: 100px;
    background: rgba(37, 99, 235, 0.08);
}

.section-label--light {
    color: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

.section-title {
    margin-top: 12px;
    margin-bottom: 20px;
}

.section-subtitle {
    max-width: 580px;
    margin: 0 auto;
    color: var(--text-secondary);
}

/* Decorative section divider line */
.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--border-blue), transparent);
}

/* Text link (inline) */
.text-link {
    color: var(--blue-bright);
    border-bottom: 1px solid transparent;
    transition: var(--transition-base);
}

.text-link:hover {
    border-bottom-color: var(--blue-bright);
}

.text-link--light {
    color: rgba(255, 255, 255, 0.8);
}

.text-link--light:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.6);
}


/* ================================================================
   5. BUTTONS — Reusable across all sections
   ================================================================ */

/* Base button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-base);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    text-decoration: none;
}

/* Button shine animation on hover */
.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s ease;
}

.btn:hover::after {
    left: 150%;
}

/* Sizes */
.btn-sm {
    padding: 8px 18px;
    font-size: 0.85rem;
}

.btn-lg {
    padding: 15px 32px;
    font-size: 1rem;
}

.btn-xl {
    padding: 18px 42px;
    font-size: 1.05rem;
}

.btn-full {
    width: 100%;
    margin-top: auto; /* pushes to bottom inside flex card */
}

/* Primary — Blue gradient button */
.btn-primary {
    padding: 12px 26px;
    font-size: 0.92rem;
    background: linear-gradient(135deg, var(--blue-accent), var(--blue-bright));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.35);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, var(--blue-accent));
    box-shadow: 0 6px 28px rgba(37, 99, 235, 0.5);
    transform: translateY(-2px);
    color: #fff;
}

.btn-primary:active {
    transform: translateY(0);
}

/* Outline — Bordered transparent button */
.btn-outline {
    padding: 12px 26px;
    font-size: 0.92rem;
    background: transparent;
    color: var(--silver-light);
    border: 1px solid var(--border);
    backdrop-filter: blur(4px);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--silver);
    color: var(--text-primary);
    transform: translateY(-2px);
}

/* Ghost — text-only with subtle hover */
.btn-ghost {
    padding: 12px 26px;
    font-size: 0.92rem;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-ghost:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Watch Results — video preview button */
.btn-watch {
    padding: 11px 26px;
    font-size: 0.92rem;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-sm);
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    margin-bottom: 10px;
    font-family: var(--font-sans);
    font-weight: 500;
}
.btn-watch:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Quick-result camera icon on optional items */
.result-peek {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    padding: 1px 5px;
    font-size: 0.78rem;
    cursor: pointer;
    margin-left: 6px;
    vertical-align: middle;
    transition: background 0.15s, transform 0.15s;
    line-height: 1;
}
.result-peek:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.15);
}

/* Video Results Modal */
.video-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.video-modal.is-open {
    display: flex;
}
.video-modal-box {
    position: relative;
    width: 80vw;
    max-height: 80vh;
    background: #0d1424;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
}
.video-modal-box iframe {
    width: 100%;
    height: calc(80vh - 48px);
    border: none;
    border-radius: 10px;
    display: block;
}
.video-modal-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #0a0a0a;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    transition: background 0.15s;
}
.video-modal-close:hover {
    background: #e0e0e0;
}

/* Gold — Premium package button */
.btn-gold {
    padding: 12px 26px;
    font-size: 0.92rem;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: #0a0800;
    font-weight: 600;
    border-color: transparent;
    box-shadow: 0 4px 20px var(--gold-glow);
}

.btn-gold:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    box-shadow: 0 6px 28px rgba(200, 152, 26, 0.45);
    transform: translateY(-2px);
    color: #0a0800;
}

/* Button icon (arrow etc.) */
.btn-icon {
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.btn:hover .btn-icon {
    transform: translateX(4px);
}


/* ================================================================
   6. NAVIGATION
   ================================================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(7, 7, 13, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    transition: var(--transition-base);
}

/* Scrolled state — more opaque */
.navbar.scrolled {
    background: rgba(7, 7, 13, 0.92);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.nav-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    height: 70px;
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Logo */
.nav-logo {
    flex-shrink: 0;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}

.logo-text { display: flex; align-items: center; gap: 2px; }

.logo-accent {
    color: var(--blue-bright);
    font-style: italic;
}

/* Desktop nav links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.nav-links a {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

/* Nav Book Now button */
.nav-book-btn {
    flex-shrink: 0;
}

/* Language Switcher */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.lang-btn {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 6px;
    transition: var(--transition-fast);
}

.lang-btn:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.05);
}

.lang-btn--active {
    color: var(--blue-bright);
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid var(--border-blue);
}

.lang-divider {
    color: var(--text-muted);
    font-size: 0.75rem;
    opacity: 0.4;
}

.mobile-lang {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    margin-bottom: 16px;
}

/* Mobile hamburger */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    cursor: pointer;
    flex-shrink: 0;
}

.hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: var(--transition-base);
    transform-origin: center;
}

/* Hamburger animation when open */
.nav-toggle.open .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle.open .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.nav-toggle.open .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu Dropdown */
.mobile-menu {
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 20px var(--container-pad) 30px;
    background: rgba(7, 7, 13, 0.98);
    border-top: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu.open {
    max-height: 500px;
}

.mobile-menu ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 24px;
}

.mobile-link {
    display: block;
    padding: 12px 16px;
    font-size: 1rem;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.mobile-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.mobile-book-btn {
    width: 100%;
}


/* ================================================================
   7. HERO SECTION
   ================================================================ */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 120px 0 80px;
}

/* Hero background */
.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        linear-gradient(to bottom,
            rgba(5, 12, 30, 0.62) 0%,
            rgba(5, 12, 30, 0.45) 50%,
            rgba(5, 12, 30, 0.72) 100%),
        url('hero-bg.jpg')
        center 40% / cover no-repeat;
}

.hero-video-bg { display: none; }
.hero-video-overlay { display: none; }

/* Grid pattern overlay — hidden */
.hero-grid-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: center center;
}

/* Glowing orbs */
.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
}

.hero-glow-1 {
    width: 600px;
    height: 600px;
    top: -100px;
    right: -150px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.25), transparent 70%);
    animation: glowPulse 8s ease-in-out infinite alternate;
}

.hero-glow-2 {
    width: 400px;
    height: 400px;
    bottom: 50px;
    left: -100px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.15), transparent 70%);
    animation: glowPulse 10s ease-in-out infinite alternate-reverse;
}

.hero-orb {
    position: absolute;
    width: 1px;
    height: 1px;
    top: 50%;
    left: 50%;
    box-shadow: 0 0 200px 120px rgba(37, 99, 235, 0.06);
    border-radius: 50%;
}

@keyframes glowPulse {
    from { opacity: 0.3; transform: scale(0.95); }
    to   { opacity: 0.6; transform: scale(1.05); }
}

/* Hero content */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* Premium badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    padding: 7px 18px;
    border: 1px solid var(--border-blue);
    border-radius: 100px;
    background: rgba(37, 99, 235, 0.06);
    margin-bottom: 32px;
}

.badge-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue-bright);
    box-shadow: 0 0 8px var(--blue-bright);
    animation: badgePulse 2.5s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--blue-bright); }
    50%       { opacity: 0.5; box-shadow: 0 0 14px var(--blue-bright); }
}

/* Hero title */
.hero-title {
    display: flex;
    flex-direction: column;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 28px;
}

.title-line {
    display: block;
}

/* Gold/blue gradient on "Esthétique" */
.title-accent {
    background: linear-gradient(135deg, var(--blue-bright) 0%, var(--silver-bright) 50%, var(--blue-bright) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: shimmer 4s linear infinite;
}

@keyframes shimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Tagline */
.hero-tagline {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: #ffffff;
    margin-bottom: 20px;
    opacity: 1;
}

/* Description */
.hero-description {
    max-width: 680px;
    margin: 0 auto 40px;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.90);
    line-height: 1.8;
}

/* CTA Buttons */
.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 64px;
}

/* Stats strip */
.hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 24px 32px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
    flex-wrap: wrap;
    gap: 0;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 32px;
}

.stat-number {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-star {
    color: var(--gold-light);
    font-size: 0.85em;
}

.stat-stars-row {
    display: block;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    color: #f59e0b;
    letter-spacing: 0.05em;
    line-height: 1;
    text-shadow: 0 0 10px rgba(245,158,11,0.5);
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border);
    flex-shrink: 0;
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.5;
    animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-mouse {
    width: 22px;
    height: 36px;
    border: 2px solid var(--silver);
    border-radius: 11px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

.scroll-wheel {
    width: 3px;
    height: 8px;
    background: var(--silver-light);
    border-radius: 3px;
    animation: scrollWheel 1.8s ease-in-out infinite;
}

.scroll-label {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--silver);
}

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

@keyframes scrollWheel {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(10px); opacity: 0; }
}


/* ================================================================
   8. SERVICES SECTION
   ================================================================ */
.services {
    position: relative;
    background:
        linear-gradient(
            to bottom,
            rgba(5, 8, 20, 0.78) 0%,
            rgba(5, 8, 20, 0.62) 40%,
            rgba(5, 8, 20, 0.80) 100%
        ),
        url('services-bg.jpg')
        center 30% / cover no-repeat;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

/* Base service card */
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px 30px;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
    overflow: hidden;
}

/* ── Video preview slot ───────────────────────────────────────── */
.card-video {
    /* bleed to card edges using negative margin matching padding */
    margin: -22px -22px 18px;
    height: 200px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: #060d1a;
    flex-shrink: 0;
}

.card-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* shown when no video file loaded yet */
.card-video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(160deg, #070f22 0%, #0d1f3c 60%, #091528 100%);
    pointer-events: none;
}

.card-video-placeholder .cv-play {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(37,99,235,0.55);
    background: rgba(37,99,235,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(37,99,235,0.9);
}

.card-video-placeholder .cv-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.card-video-placeholder .cv-hint {
    font-size: 0.64rem;
    color: rgba(100,120,160,0.6);
    font-style: italic;
}

/* hide placeholder once the video has loaded data */
.card-video video[data-loaded] + .card-video-placeholder {
    display: none;
}

/* premium gold tint on placeholder */
.service-card--premium .card-video-placeholder {
    background: linear-gradient(160deg, #0d0a00 0%, #1a1200 60%, #0d0900 100%);
}
.service-card--premium .card-video-placeholder .cv-play {
    border-color: rgba(200,152,26,0.55);
    background: rgba(200,152,26,0.10);
    color: var(--gold-light);
}

/* Subtle top border line accent on hover */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--blue-accent), transparent);
    opacity: 0;
    transition: var(--transition-base);
}

.service-card:hover {
    transform: translateY(-6px);
    background: var(--bg-card-hover);
    border-color: var(--border-blue);
    box-shadow: var(--shadow-blue);
}

.service-card:hover::before {
    opacity: 1;
}

/* Featured (Standard) card special styling */
.service-card--featured {
    border-color: var(--border-blue);
    background: linear-gradient(145deg, #111e3a, #0f1a30);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25), var(--shadow-md);
    transform: scale(1.02);
}

.service-card--featured::before {
    opacity: 1;
    background: linear-gradient(90deg, transparent, var(--blue-bright), transparent);
}

.service-card--featured:hover {
    transform: scale(1.02) translateY(-6px);
}

/* Premium card special styling */
.service-card--premium {
    border-color: var(--border-gold);
    background: linear-gradient(145deg, #171200, #1a1400);
}

.service-card--premium::before {
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.service-card--premium:hover {
    border-color: var(--gold-light);
    box-shadow: var(--shadow-gold);
}

.service-card--premium:hover::before {
    opacity: 1;
}

/* "Most Popular" badge */
.card-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--blue-accent);
    padding: 4px 10px;
    border-radius: 100px;
}

/* Card icon */
.card-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: var(--radius-md);
    color: var(--blue-bright);
    margin-bottom: 20px;
}

.service-card--premium .card-icon {
    background: rgba(200, 152, 26, 0.1);
    border-color: rgba(200, 152, 26, 0.2);
    color: var(--gold-light);
}

/* Tier label */
.card-tier {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue-bright);
    margin-bottom: 8px;
}

.card-tier--gold {
    color: var(--gold-light);
}

/* Card title */
.card-title {
    font-size: 1.4rem;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* Card description */
.card-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.6;
}

/* Time estimate */
.card-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--silver);
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 100px;
    margin-bottom: 24px;
    width: fit-content;
}

.card-time--gold {
    color: var(--gold-light);
    border-color: rgba(200, 152, 26, 0.2);
    background: rgba(200, 152, 26, 0.06);
}

/* Feature list */
.card-features {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 32px;
}

.card-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    padding-left: 0;
}

.card-features li::before {
    content: '✓';
    color: var(--blue-bright);
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.service-card--premium .card-features li::before {
    color: var(--gold-light);
}

/* Optional add-on items inside card */
.card-features li.optional {
    color: rgba(148, 178, 255, 0.65);
    font-style: italic;
    font-size: 0.85em;
}
.card-features li.optional::before {
    content: '';
}

/* Price disclaimer note inside card */
.card-price-note {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 20px;
    line-height: 1.5;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

/* Services footer note */
.services-note {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}


/* ================================================================
   9. ABOUT SECTION
   ================================================================ */
.about {
    background: var(--bg-primary);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-lg);
    align-items: start;
}

/* About text styles */
.about-title {
    margin-bottom: 24px;
}

.about-text {
    margin-bottom: 18px;
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* Rebrand sentence — subtle, integrated naturally */
.about-rebrand {
    font-style: italic;
    font-size: 0.875rem;
    color: var(--text-muted);
    border-left: 2px solid var(--border-blue);
    padding-left: 16px;
    margin: 24px 0;
    line-height: 1.6;
}

/* Trust checkpoints */
.about-points {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
}

.about-point {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.point-check {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.12);
    color: var(--blue-bright);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ---- Photo frame with overlaid stats ---- */
.about-photo-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: 20px;
}

.about-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.6s ease;
}

.about-photo-frame:hover img {
    transform: scale(1.04);
}

/* Stats overlay — 2×2 grid pinned to bottom of photo */
.about-stats-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 36px 20px 20px;
    background: linear-gradient(to top,
        rgba(5, 8, 20, 0.92) 0%,
        rgba(5, 8, 20, 0.65) 55%,
        transparent 100%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 8px;
}

.about-stat-chip {
    text-align: center;
}

.chip-number {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.01em;
}

.chip-number .chip-star { color: var(--gold-light); font-size: 0.7em; }

.chip-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 5px;
}

/* Subtle quote line below photo */
.about-photo-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.6;
    padding: 0 8px;
}


/* ================================================================
   10. BOOKING SECTION
   ================================================================ */
.booking {
    position: relative;
    background: linear-gradient(135deg, var(--blue-deep) 0%, #091520 50%, var(--bg-primary) 100%);
    text-align: center;
    overflow: hidden;
}

.booking::before {
    display: none; /* Override generic section divider */
}

.booking-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.booking-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, transparent 70%);
    border-radius: 50%;
}

.booking-content {
    position: relative;
    z-index: 2;
}

.booking-title {
    margin: 16px 0 20px;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
}

.title-accent-block {
    display: block;
    background: linear-gradient(135deg, var(--blue-bright), var(--silver-bright));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.booking-description {
    max-width: 560px;
    margin: 0 auto 40px;
    font-size: 1rem;
    color: var(--text-secondary);
}

/* Booking feature pills */
.booking-features {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.booking-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--silver-light);
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 100px;
}

.booking-feature-icon {
    font-size: 1rem;
}

.booking-main-btn {
    margin-bottom: 24px;
}

.booking-sub {
    font-size: 0.875rem;
    color: var(--text-muted);
}


/* ================================================================
   11. REVIEWS SECTION
   ================================================================ */
.reviews {
    background: var(--bg-secondary);
}

/* Overall rating display */
.reviews-overall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.overall-stars {
    display: flex;
    gap: 2px;
}

.star { font-size: 1.4rem; }
.star-full  { color: #f59e0b; }
.star-half  { color: #f59e0b; opacity: 0.6; }
.star-empty { color: var(--text-muted); }

.overall-rating {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.overall-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ── Floating review bubble arena — covers full hero ─────────── */
.review-bubbles-arena {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

/* Each bubble is a DOM element injected by JS */
.review-bubble {
    position: absolute;
    max-width: 320px;
    width: clamp(220px, 21vw, 320px);
    background: linear-gradient(135deg, rgba(15,28,58,0.97), rgba(10,20,45,0.95));
    border: 1px solid rgba(37,99,235,0.3);
    border-radius: 16px 16px 16px 4px;   /* chat-bubble tail bottom-left */
    padding: 16px 20px 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(37,99,235,0.1);
    pointer-events: none;

    /* pop-in */
    animation: bubblePopIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards,
               bubbleFloat  var(--float-dur, 6s) var(--float-delay, 0s) ease-in-out infinite,
               bubbleFadeOut 0.4s var(--fade-at, 5.6s) forwards;
    opacity: 0;
    transform: scale(0.5);
    transform-origin: bottom left;
}

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

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

@keyframes bubbleFadeOut {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.7) translateY(-20px); }
}

.review-bubble-stars {
    color: #f59e0b;
    font-size: 1rem;
    letter-spacing: 3px;
    margin-bottom: 8px;
    display: block;
}

.review-bubble-text {
    font-size: 0.82rem;
    color: rgba(200,215,240,0.92);
    line-height: 1.55;
    font-style: italic;
    margin-bottom: 10px;
}

.review-bubble-author {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--blue-bright);
    letter-spacing: 0.05em;
}

/* View all reviews CTA */
.reviews-cta {
    text-align: center;
}

.google-icon-btn {
    flex-shrink: 0;
}


/* ================================================================
   11b. HERO LOCATION PIN
   ================================================================ */
.hero-location-pin {
    position: absolute;
    top: 12%;
    right: 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    z-index: 10;
    cursor: pointer;
    animation: pinFloat 3s ease-in-out infinite;
}

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

/* Pulsing rings */
.pin-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 2px solid rgba(59,130,246,0.55);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

@keyframes pinRingPulse {
    0%   { transform: translate(-50%,-50%) scale(0.6); opacity: 0.8; }
    100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0;   }
}

.pin-pulse-1 { animation: pinRingPulse 2.2s ease-out infinite; }
.pin-pulse-2 { animation: pinRingPulse 2.2s ease-out infinite 1.1s; }

/* Pin body */
.pin-body {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50% 50% 50% 6px;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    box-shadow: 0 0 40px rgba(37,99,235,0.7), 0 8px 32px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.hero-location-pin:hover .pin-body {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    box-shadow: 0 0 60px rgba(59,130,246,0.9), 0 10px 40px rgba(0,0,0,0.55);
    transform: rotate(-45deg) scale(1.1);
}

.pin-body svg {
    width: 42px;
    height: 42px;
    color: #ffffff;
    transform: rotate(45deg);  /* counter-rotate so icon stays upright */
}

/* Label beneath pin */
.pin-label {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(191,219,254,0.9);
    text-transform: uppercase;
    background: rgba(10,20,48,0.78);
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(59,130,246,0.4);
    backdrop-filter: blur(6px);
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}

.hero-location-pin:hover .pin-label {
    color: #93c5fd;
    border-color: rgba(59,130,246,0.75);
}

@media (max-width: 768px) {
    .hero-location-pin {
        top: auto;
        bottom: 22%;
        right: 5%;
        transform: scale(0.85);
    }
}

/* ================================================================
   12. SERVICE AREA MAP
   ================================================================ */
.service-area-section {
    background: var(--bg-primary);
    padding: 100px 0 80px;
}

.map-wrapper {
    position: relative;
    margin-top: 48px;
}

.map-legend {
    display: flex;
    gap: 28px;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: rgba(191,219,254,0.65);
    letter-spacing: 0.04em;
}

.legend-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: rgba(37,99,235,0.65);
    border: 1.5px solid rgba(59,130,246,0.9);
    flex-shrink: 0;
}

.legend-dot--extended {
    background: rgba(99,102,241,0.25);
    border: 1.5px dashed rgba(99,102,241,0.6);
}

.legend-dot--primary {
    background: rgba(96,165,250,0.85);
    border: 1.5px solid #93c5fd;
    box-shadow: 0 0 8px rgba(96,165,250,0.70);
}

#serviceMap {
    width: 100%;
    max-width: 920px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 18px;
    border: 1px solid rgba(37,99,235,0.2);
    box-shadow: 0 0 70px rgba(37,99,235,0.08), 0 24px 64px rgba(0,0,0,0.45);
    cursor: default;
}

.map-region {
    cursor: pointer;
    transition: fill 0.18s ease, filter 0.18s ease;
}

.map-region:hover,
.map-region--active {
    fill: rgba(59,130,246,0.52) !important;
    filter: drop-shadow(0 0 14px rgba(59,130,246,0.65));
}

.map-region--extended:hover,
.map-region--extended.map-region--active {
    fill: rgba(99,102,241,0.35) !important;
    filter: drop-shadow(0 0 10px rgba(99,102,241,0.5));
}

/* River flow animation */
@keyframes riverFlow {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -60; }
}

.map-river {
    stroke-dasharray: 22, 10;
    animation: riverFlow 3s linear infinite;
}

.map-river-v {
    stroke-dasharray: 16, 8;
    animation: riverFlow 4s linear infinite;
}

/* Pulsing location pin */
@keyframes mapPing {
    0%   { r: 6;  opacity: 0.8; }
    80%  { r: 26; opacity: 0;   }
    100% { r: 6;  opacity: 0;   }
}

.map-ping-1 { animation: mapPing 2.2s ease-out infinite; }
.map-ping-2 { animation: mapPing 2.2s ease-out infinite 0.55s; }
.map-ping-3 { animation: mapPing 2.2s ease-out infinite 0.30s; }
.map-ping-4 { animation: mapPing 2.2s ease-out infinite 0.80s; }

/* Primary zone glow (Aylmer & Plateau) */
@keyframes primaryZoneGlow {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(96,165,250,0.30)); }
    50%       { filter: drop-shadow(0 0 16px rgba(96,165,250,0.70)); }
}
.map-region--primary {
    animation: primaryZoneGlow 2.8s ease-in-out infinite;
}

.map-caption {
    text-align: center;
    font-size: 0.82rem;
    color: rgba(148,163,184,0.55);
    margin-top: 18px;
    font-style: italic;
}

/* ================================================================
   13. LOYALTY SECTION
   ================================================================ */
.loyalty {
    background:
        linear-gradient(
            to bottom,
            rgba(5, 8, 20, 0.92) 0%,
            rgba(7, 12, 30, 0.88) 50%,
            rgba(5, 8, 20, 0.93) 100%
        ),
        url('https://images.pexels.com/photos/6026083/pexels-photo-6026083.jpeg?auto=compress&cs=tinysrgb&w=1920')
        center center / cover no-repeat;
}

/* ---- Plan benefits row ---- */
.plan-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 64px;
}

.plan-benefit {
    padding: 28px 24px;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: var(--transition-base);
}

.plan-benefit:hover {
    transform: translateY(-4px);
    border-color: var(--border-blue);
}

.plan-benefit-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.2);
    color: var(--blue-bright);
}

.plan-benefit-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.plan-benefit-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ---- Spin section layout ---- */
.spin-section {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: center;
    margin-bottom: 48px;
    padding: 44px 48px;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.spin-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue-bright);
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 100px;
    padding: 4px 14px;
    margin-bottom: 16px;
}

.spin-title {
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 2.5vw, 1.7rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    line-height: 1.3;
}

.spin-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 20px;
    max-width: 420px;
}

.spin-possible {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spin-possible li {
    font-size: 0.84rem;
    color: var(--text-muted);
    padding-left: 20px;
    position: relative;
}

.spin-possible li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--blue-bright);
    font-size: 0.8rem;
}

.spin-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.spin-wheel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pointer triangle at top of wheel */
.spin-pointer-top {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 16px solid var(--blue-bright);
    z-index: 2;
    filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.6));
}

#spinWheel {
    border-radius: 50%;
    display: block;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.06), 0 8px 32px rgba(0,0,0,0.5);
}

.spin-btn {
    gap: 8px;
    min-width: 180px;
}

/* ---- Result + lead form ---- */
.spin-result {
    display: none;
    padding: 40px;
    background: var(--gradient-card);
    border: 1px solid var(--border-blue);
    border-radius: var(--radius-lg);
    animation: fadeSlideUp 0.4s ease both;
}

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

.result-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
}

.result-checkmark {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue-bright);
}

.result-title {
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.result-sub {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Lead form */
.lead-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lead-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.lead-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.lead-field--full {
    grid-column: 1 / -1;
}

.lead-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lead-field input {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 11px 16px;
    font-size: 0.9rem;
    color: var(--text-primary);
    font-family: var(--font-sans);
    transition: border-color 0.2s;
    outline: none;
}

.lead-field input:focus {
    border-color: var(--blue-bright);
    background: rgba(37, 99, 235, 0.04);
}

.lead-field input::placeholder { color: var(--text-muted); }

.req-star { color: var(--blue-bright); }
.lead-optional { color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

.lead-interests {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.interest-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s, background 0.2s;
    font-size: 0.87rem;
    color: var(--text-secondary);
}

.interest-opt:hover,
.interest-opt:has(input:checked) {
    border-color: var(--blue-bright);
    background: rgba(37, 99, 235, 0.06);
    color: var(--text-primary);
}

.interest-opt input[type="radio"] {
    accent-color: var(--blue-bright);
    width: 15px;
    height: 15px;
}

.lead-form-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: -4px;
}


/* ================================================================
   13. CONTACT SECTION
   ================================================================ */
.contact {
    background: var(--bg-secondary);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--gap-lg);
    align-items: start;
}

.contact-title {
    margin-bottom: 16px;
}

.contact-description {
    margin-bottom: 32px;
    font-size: 1rem;
    line-height: 1.75;
}

/* Quote requirements box */
.quote-requirements {
    padding: 28px 32px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 32px;
}

.requirements-title {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.requirements-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.requirements-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.req-icon {
    color: var(--blue-bright);
    font-size: 0.85rem;
    flex-shrink: 0;
    font-weight: 700;
    margin-top: 2px;
}

.requirements-list strong {
    color: var(--text-primary);
    font-weight: 500;
}

.contact-email-btn {
    margin-bottom: 16px;
}

.contact-email-display {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: left;
}

/* Contact info card (right side) */
.contact-info-card {
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: sticky;
    top: 90px;
}

.info-card-header {
    padding: 24px 28px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
}

.info-card-header h3 {
    font-size: 1rem;
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.info-items {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.info-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.info-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

.info-item span,
.info-item a {
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.info-card-footer {
    padding: 24px 28px;
    border-top: 1px solid var(--border);
    background: rgba(37, 99, 235, 0.03);
}

.info-card-footer p {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 14px;
}


/* ================================================================
   14. FOOTER
   ================================================================ */
.footer {
    background: #040408;
    border-top: 1px solid var(--border);
    padding: 72px 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 48px;
    padding-bottom: 64px;
}

/* Footer brand */
.footer-logo {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    display: inline-block;
    margin-bottom: 12px;
}

.footer-tagline {
    font-style: italic;
    font-size: 0.9rem;
    color: var(--silver);
    margin-bottom: 12px;
    line-height: 1.5;
}

.footer-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 280px;
}

/* Footer headings */
.footer-heading {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* Footer nav links */
.footer-nav ul,
.footer-services ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-nav a {
    font-size: 0.88rem;
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.footer-nav a:hover {
    color: var(--text-primary);
}

.footer-services li {
    font-size: 0.88rem;
    color: var(--text-secondary);
}

/* Footer CTA */
.footer-cta p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.6;
}

.footer-email {
    display: block;
    margin-top: 14px;
    font-size: 0.82rem;
    color: var(--text-muted);
    transition: var(--transition-fast);
}

.footer-email:hover {
    color: var(--text-secondary);
}

/* Footer bottom bar */
.footer-bottom {
    border-top: 1px solid var(--border);
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-copy {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.footer-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    opacity: 0.6;
}


/* ================================================================
   15. SCROLL ANIMATIONS
   Elements with .scroll-reveal animate in when they enter viewport.
   JavaScript adds .is-visible to trigger the animation.
   Use data-delay="N" (ms) on elements for staggered effects.
   ================================================================ */
.scroll-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Initial hero animations */
.animate-fade-up {
    opacity: 0;
    transform: translateY(24px);
    animation: fadeUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* Delay utilities (applied inline via data-delay in JS) */
[data-delay="0"]   { animation-delay: 0ms;   transition-delay: 0ms; }
[data-delay="100"] { animation-delay: 100ms; transition-delay: 100ms; }
[data-delay="150"] { animation-delay: 150ms; transition-delay: 150ms; }
[data-delay="200"] { animation-delay: 200ms; transition-delay: 200ms; }
[data-delay="300"] { animation-delay: 300ms; transition-delay: 300ms; }
[data-delay="400"] { animation-delay: 400ms; transition-delay: 400ms; }
[data-delay="500"] { animation-delay: 500ms; transition-delay: 500ms; }


/* ================================================================
   16. MEDIA QUERIES — RESPONSIVE
   Mobile-first breakpoints:
   - sm: 576px
   - md: 768px
   - lg: 992px
   - xl: 1200px
   ================================================================ */

/* --- Loyalty section: stack on tablet --- */

@media (max-width: 860px) {
    .plan-benefits {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
    .spin-section {
        grid-template-columns: 1fr;
        padding: 28px 24px;
        gap: 32px;
    }
    .spin-area {
        order: -1;
    }
    .lead-form-row {
        grid-template-columns: 1fr;
    }
    .spin-result {
        padding: 24px 20px;
    }
}

/* --- Large screens (max 1100px) --- */
@media (max-width: 1100px) {
    .services-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Stack third service card below */
    .service-card:last-child {
        grid-column: 1 / -1;
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }

    /* Remove scale on featured card at smaller screens */
    .service-card--featured {
        transform: scale(1);
    }

    .service-card--featured:hover {
        transform: translateY(-6px);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

/* --- Tablets (max 900px) --- */
@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-info-card {
        position: static;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
    }

    /* 3-col reviews → 1-col on tablet */

    .plan-benefits {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- Mobile (max 768px) --- */
@media (max-width: 768px) {
    /* Navigation */
    .nav-links,
    .nav-book-btn {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .mobile-menu {
        display: flex;
    }

    .nav-container {
        gap: 16px;
    }

    /* Hero */
    .hero-stats {
        flex-direction: column;
        gap: 16px;
        padding: 24px;
    }

    .stat-divider {
        width: 60px;
        height: 1px;
    }

    .stat-item {
        padding: 0;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        text-align: center;
        justify-content: center;
    }

    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card:last-child {
        grid-column: auto;
        max-width: 100%;
    }

    /* Booking features */
    .booking-features {
        flex-direction: column;
        align-items: center;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        padding-bottom: 40px;
    }

    .footer-desc {
        max-width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    /* Loyalty spin section */
    .spin-section {
        padding: 24px 20px;
    }

    /* About stats */
    .about-stats-card {
        padding: 24px;
    }
}

/* --- Small mobile (max 480px) --- */
@media (max-width: 480px) {
    :root {
        --section-padding: 64px;
    }

    .hero-title {
        font-size: clamp(2.5rem, 12vw, 3.5rem);
    }

    .hero-badge {
        font-size: 0.68rem;
        padding: 5px 12px;
    }

    .service-card,
    .review-card {
        padding: 24px 20px;
    }

    .about-stats-card {
        padding: 20px;
    }

    .booking-features {
        gap: 8px;
    }

    .booking-feature {
        width: 100%;
        justify-content: center;
    }

    .quote-requirements {
        padding: 20px;
    }

    .info-items,
    .info-card-footer,
    .info-card-header {
        padding: 20px;
    }
}

/* ================================================================
   17. LOGO STYLES
   ================================================================ */

/* Navbar logo image */
.nav-logo-img {
    height: 52px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: var(--transition-base);
    filter: contrast(1.35) brightness(1.08) drop-shadow(0 0 8px rgba(37, 99, 235, 0.4));
}

.nav-logo:hover .nav-logo-img {
    filter: contrast(1.35) brightness(1.15) drop-shadow(0 0 14px rgba(37, 99, 235, 0.7));
    transform: scale(1.05);
}

/* Hero logo — sizing only; animation handled in section 22 */
.hero-logo {
    margin-bottom: 20px;
}

.hero-logo-img {
    width: clamp(380px, 56vw, 700px);
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

/* Footer logo */
.footer-logo-link {
    display: inline-block;
    margin-bottom: 14px;
    transition: var(--transition-base);
}

.footer-logo-img {
    height: 70px;
    width: auto;
    object-fit: contain;
    filter: contrast(1.35) brightness(1.08) drop-shadow(0 0 8px rgba(37, 99, 235, 0.3));
    transition: var(--transition-base);
}

.footer-logo-link:hover .footer-logo-img {
    filter: contrast(1.35) brightness(1.15) drop-shadow(0 0 16px rgba(37, 99, 235, 0.6));
}


/* ================================================================
   18. WATER / WAVE ANIMATIONS
   ================================================================ */

/* ---- Hero animated water waves at bottom ---- */
.hero-waves {
    display: none;
}

/* Each wave is a rotated oval that creates a natural sine-wave effect */
.wave {
    position: absolute;
    left: -50%;
    width: 200%;
    height: 200%;
    border-radius: 40%;
}

.wave-back {
    bottom: -80%;
    background: rgba(13, 32, 52, 0.25);
    animation: waveRotate 18s linear infinite;
}

.wave-mid {
    bottom: -75%;
    background: rgba(13, 26, 44, 0.35);
    animation: waveRotate 12s linear infinite reverse;
}

.wave-front {
    bottom: -70%;
    background: #0d1020;
    animation: waveRotate 9s linear infinite;
}

@keyframes waveRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ---- Water caustic light shimmer on hero ---- */
.water-caustic {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 120px 60px at 20% 30%, rgba(37, 99, 235, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 80px 40px at 70% 60%, rgba(37, 99, 235, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 160px 80px at 50% 80%, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
    animation: causticShift 10s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes causticShift {
    0%   { opacity: 0.4; transform: scale(1) translateX(0); }
    50%  { opacity: 0.8; transform: scale(1.05) translateX(20px); }
    100% { opacity: 0.4; transform: scale(0.97) translateX(-15px); }
}

/* ---- Wave dividers between sections ---- */
.wave-divider {
    display: block;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-top: -2px;
    margin-bottom: -2px;
}

.wave-divider svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Each divider has a different source section background so the
   wave reads against the right background color */
.wave-divider--down    { background: var(--bg-secondary); }
.wave-divider--up      { background: var(--bg-primary); }
.wave-divider--reviews { background: linear-gradient(135deg, var(--blue-deep), #091520); }
.wave-divider--loyalty { background: var(--bg-secondary); }
.wave-divider--contact { background: var(--bg-primary); }

/* ---- Water shimmer on service cards ---- */
.card-water-shimmer {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(37, 99, 235, 0.04) 40%,
        rgba(37, 99, 235, 0.08) 50%,
        rgba(37, 99, 235, 0.04) 60%,
        transparent 100%
    );
    background-size: 200% 200%;
    animation: liquidShimmer 6s ease-in-out infinite;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.card-water-shimmer--gold {
    background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(200, 152, 26, 0.04) 40%,
        rgba(200, 152, 26, 0.08) 50%,
        rgba(200, 152, 26, 0.04) 60%,
        transparent 100%
    );
}

.service-card:hover .card-water-shimmer {
    opacity: 1;
}

@keyframes liquidShimmer {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

/* ---- Booking section ripple ring decorations ---- */
.booking-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(37, 99, 235, 0.15);
    animation: bookingRipple 6s ease-out infinite;
    pointer-events: none;
}

.booking-ripple-1 { width: 300px;  height: 300px;  animation-delay: 0s; }
.booking-ripple-2 { width: 550px;  height: 550px;  animation-delay: 2s; }
.booking-ripple-3 { width: 800px;  height: 800px;  animation-delay: 4s; }

@keyframes bookingRipple {
    0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(0.8); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.3); }
}


/* ================================================================
   19. BUTTON RIPPLE EFFECT (click wave)
   The JS injects a .ripple-circle span into .ripple-btn on click.
   ================================================================ */
.ripple-btn {
    position: relative;
    overflow: hidden;
}

.ripple-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    pointer-events: none;
    transform: scale(0);
    animation: rippleExpand 0.6s ease-out forwards;
}

@keyframes rippleExpand {
    to {
        transform: scale(4);
        opacity: 0;
    }
}


/* ================================================================
   20. TESTIMONIAL / REVIEW CARD STYLES
   ================================================================ */

.testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 36px 32px 28px;
    overflow: visible;
}

/* Large decorative opening quote mark */
.testimonial-quote-mark {
    font-family: var(--font-serif);
    font-size: 5rem;
    line-height: 1;
    color: var(--blue-bright);
    opacity: 0.2;
    position: absolute;
    top: 12px;
    left: 24px;
    pointer-events: none;
    user-select: none;
    transition: var(--transition-base);
}

.testimonial-card:hover .testimonial-quote-mark {
    opacity: 0.4;
}

/* Testimonial text — italic, larger, more prominent */
.testimonial-text {
    font-style: italic;
    font-size: 0.97rem;
    color: var(--silver-bright);
    line-height: 1.8;
    margin: 28px 0 24px;
    flex: 1;
}

/* Footer: avatar + name + stars in one row */
.testimonial-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.testimonial-footer .reviewer-info {
    flex: 1;
}

.testimonial-footer .reviewer-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.testimonial-footer .reviewer-date {
    font-size: 0.73rem;
    color: var(--text-muted);
}

.testimonial-footer .review-stars {
    font-size: 0.9rem;
    color: #f59e0b;
    letter-spacing: 1px;
    flex-shrink: 0;
}

/* ================================================================
   21. MEDIA PLACEHOLDER SLOTS
   Visually mark where photos/videos will go.
   Replace each .media-slot div with a real <img> or <video> tag
   when you have the files ready. Remove this CSS block at that point.
   ================================================================ */

/* Base slot */
.media-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    border: 2px dashed rgba(37, 99, 235, 0.35);
    border-radius: var(--radius-lg);
    background:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 12px,
            rgba(37, 99, 235, 0.025) 12px,
            rgba(37, 99, 235, 0.025) 24px
        ),
        rgba(37, 99, 235, 0.03);
    padding: 32px 24px;
    overflow: hidden;
    transition: var(--transition-base);
}

.media-slot:hover {
    border-color: rgba(37, 99, 235, 0.6);
    background-color: rgba(37, 99, 235, 0.06);
}

/* Slot text elements */
.ms-icon  { font-size: 1.8rem; line-height: 1; }
.ms-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--silver-light);
    letter-spacing: 0.03em;
}
.ms-spec  { font-size: 0.75rem; color: var(--text-muted); }
.ms-hint  { font-size: 0.72rem; color: var(--blue-bright); opacity: 0.7; font-style: italic; }

/* Slot label badge (top-left corner) */
.media-slot::before {
    content: 'MEDIA SLOT';
    position: absolute;
    top: 10px;
    left: 12px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--blue-bright);
    opacity: 0.5;
    text-transform: uppercase;
}

/* ---- HERO BACKGROUND slot ---- */
.media-slot--hero-bg {
    position: absolute;
    inset: 0;
    border-radius: 0;
    border: none;
    border-bottom: 2px dashed rgba(37, 99, 235, 0.3);
    z-index: 0;          /* behind hero content */
    pointer-events: none;
    padding: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.media-slot--hero-bg::before { display: none; }

.media-slot--hero-bg .media-slot-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(7, 7, 13, 0.7);
    border: 1px dashed rgba(37, 99, 235, 0.4);
    border-radius: var(--radius-sm);
    margin: 20px;
    pointer-events: auto;
}

.media-slot--hero-bg .ms-icon  { font-size: 1rem; }
.media-slot--hero-bg .ms-title { font-size: 0.78rem; }
.media-slot--hero-bg .ms-spec  { font-size: 0.7rem; }
.media-slot--hero-bg .ms-hint  { display: none; }

/* ---- Video showcase row ---- */
.video-showcase-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 56px 0 0;
    width: 100%;
    box-sizing: border-box;
}

.showcase-video-slot {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #060d1a;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.showcase-video-slot video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
}

.showcase-video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 20px 18px;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 3px;
    pointer-events: none;
    z-index: 3;
}

.showcase-video-label {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
}

.showcase-video-hint {
    font-size: 0.68rem;
    color: rgba(150,180,220,0.7);
    font-style: italic;
}

.showcase-video-slot::before {
    content: '▶';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(37,99,235,0.4);
    background: linear-gradient(160deg, #070f22 0%, #0d1f3c 60%, #091528 100%);
    z-index: 0;
}

.showcase-video-slot:has(video[data-loaded])::before { display: none; }

/* .about-work-photo replaced by .about-photo-frame — see section 9 */

/* ---- Portfolio section ---- */
.portfolio {
    background: var(--bg-secondary);
}

.media-slot--feature-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 24px;
    border-color: rgba(37, 99, 235, 0.5);
}

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

.media-slot--portfolio {
    aspect-ratio: 4 / 3;
    padding: 20px;
}


/* ================================================================
   22. LOGO ANIMATION — premium detailing float
   Glides in like a freshly detailed car rolling out of the garage.
   Hovers with a subtle tilt (air from the detail spray).
   Periodic gleam sweeps across like light on ceramic coating.
   ================================================================ */

.hero-logo {
    position: relative;
    display: inline-block;
}

.hero-logo::before { display: none; }
.hero-logo::after  { display: none; }


/* Glide in + hover float */
.hero-logo-img {
    animation:
        logoGlideIn 1.3s cubic-bezier(0.22, 1, 0.36, 1) both,
        logoDetailFloat 5s 1.3s ease-in-out infinite;
}

/* Reveal — rises smoothly like a car rolling out of the detail bay */
@keyframes logoGlideIn {
    0% {
        opacity: 0;
        transform: translateY(28px) scale(0.96);
        filter: contrast(1.35) brightness(1.08) blur(6px) drop-shadow(0 0 0px rgba(37, 99, 235, 0));
    }
    55% {
        opacity: 1;
        filter: contrast(1.35) brightness(1.08)
                blur(0px) drop-shadow(0 0 40px rgba(37, 99, 235, 0.7))
                          drop-shadow(0 0 80px rgba(37, 99, 235, 0.3));
    }
    100% {
        opacity: 1;
        transform: translateY(0px) scale(1);
        filter: contrast(1.35) brightness(1.08)
                drop-shadow(0 0 22px rgba(37, 99, 235, 0.45))
                drop-shadow(0 0 55px rgba(37, 99, 235, 0.18));
    }
}

/* Idle hover — floats and tilts slightly like hovering on air
   from a detail spray mist, glow shadow shifts with position */
@keyframes logoDetailFloat {
    0% {
        transform: translateY(0px) rotate(0deg);
        filter: contrast(1.35) brightness(1.08)
                drop-shadow(0 0 22px rgba(37, 99, 235, 0.45))
                drop-shadow(0 0 55px rgba(37, 99, 235, 0.18));
    }
    25% {
        transform: translateY(-9px) rotate(-0.4deg);
        filter: contrast(1.35) brightness(1.08)
                drop-shadow(0 14px 30px rgba(37, 99, 235, 0.52))
                drop-shadow(0 0 65px rgba(37, 99, 235, 0.22));
    }
    50% {
        transform: translateY(-7px) rotate(0.3deg);
        filter: contrast(1.35) brightness(1.08)
                drop-shadow(0 10px 26px rgba(37, 99, 235, 0.48))
                drop-shadow(0 0 60px rgba(37, 99, 235, 0.20));
    }
    75% {
        transform: translateY(-10px) rotate(-0.2deg);
        filter: contrast(1.35) brightness(1.08)
                drop-shadow(0 16px 32px rgba(37, 99, 235, 0.55))
                drop-shadow(0 0 70px rgba(37, 99, 235, 0.24));
    }
    100% {
        transform: translateY(0px) rotate(0deg);
        filter: contrast(1.35) brightness(1.08)
                drop-shadow(0 0 22px rgba(37, 99, 235, 0.45))
                drop-shadow(0 0 55px rgba(37, 99, 235, 0.18));
    }
}


/* ================================================================
   RESPONSIVE — media placeholders
   ================================================================ */
@media (max-width: 900px) {
    .before-after-row {
        grid-template-columns: 1fr;
    }
    .media-slot--before-after {
        aspect-ratio: 16 / 7;
    }
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
    .media-slot--hero-bg .media-slot-inner {
        flex-direction: column;
        gap: 4px;
    }
}

/* ================================================================
   LOYALTY — DUAL AUDIENCE REDESIGN
   Quebec intro · Audience toggle · Business panel · Biz form
   ================================================================ */

/* ── Quebec value intro block ── */
.loyalty-intro {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: linear-gradient(135deg, rgba(8,20,52,0.92) 0%, rgba(5,12,32,0.95) 100%);
    border: 1px solid rgba(99,160,255,0.30);
    border-left: 3px solid rgba(99,160,255,0.80);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    margin-bottom: 48px;
}
.loyalty-intro-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(37,99,235,0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #93c5fd;
    margin-top: 2px;
}
.loyalty-intro-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: #e2eeff;
    margin: 0 0 10px;
}
.loyalty-intro-text {
    font-size: 0.92rem;
    color: #b8cfee;
    line-height: 1.7;
    margin: 0;
}

/* ── Audience toggle buttons ── */
.audience-toggle {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 52px;
    flex-wrap: wrap;
}
.aud-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(13,21,38,0.70);
    border: 1.5px solid rgba(99,160,255,0.18);
    border-radius: 14px;
    padding: 18px 28px;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    text-align: left;
    min-width: 230px;
    color: inherit;
}
.aud-btn:hover {
    background: rgba(20,40,80,0.80);
    border-color: rgba(99,160,255,0.40);
    transform: translateY(-2px);
}
.aud-btn--active {
    background: linear-gradient(135deg, rgba(13,42,82,0.85) 0%, rgba(26,58,122,0.70) 100%);
    border-color: rgba(99,160,255,0.60);
    box-shadow: 0 0 0 1px rgba(99,160,255,0.20), 0 8px 28px rgba(37,99,235,0.18);
}
.aud-btn-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(37,99,235,0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #93c5fd;
    transition: background 0.25s ease;
}
.aud-btn--active .aud-btn-icon { background: rgba(37,99,235,0.36); }
.aud-btn-label {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.aud-btn-label strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}
.aud-btn-label em {
    font-size: 0.75rem;
    font-style: normal;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

/* ── Panel wrapper (no visual styling — just a block container) ── */
.aud-panel { width: 100%; }

/* ── Business benefit icon — gold/amber accent ── */
.plan-benefit-icon--biz {
    background: rgba(180, 130, 20, 0.15);
    color: #f5c842;
}

/* ── Business CTA block ── */
.biz-cta {
    margin: 48px 0;
}
.biz-cta-inner {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    background: linear-gradient(135deg, rgba(13,21,38,0.80) 0%, rgba(20,35,65,0.60) 100%);
    border: 1px solid rgba(99,160,255,0.18);
    border-radius: var(--radius-lg);
    padding: 40px 44px;
}
.biz-cta-text { flex: 1; }
.biz-cta-title {
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 14px;
    line-height: 1.3;
}
.biz-cta-desc {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0 0 20px;
}
.biz-cta-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.biz-cta-points li {
    font-size: 0.87rem;
    color: var(--text-muted);
    padding-left: 18px;
    position: relative;
}
.biz-cta-points li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #93c5fd;
    font-size: 0.80rem;
}
.biz-cta-inner > .btn {
    flex-shrink: 0;
    align-self: center;
    white-space: nowrap;
}

/* ── Business result checkmark — gold variant ── */
.result-checkmark--biz {
    background: linear-gradient(135deg, rgba(160,115,10,0.30), rgba(200,150,20,0.18));
    border: 1px solid rgba(200,160,30,0.35);
    color: #f5c842;
}

/* ── Responsive — loyalty redesign ── */
@media (max-width: 860px) {
    .loyalty-intro { flex-direction: column; gap: 14px; padding: 22px 20px; }
    .audience-toggle { gap: 12px; }
    .aud-btn { min-width: 0; flex: 1; padding: 14px 18px; }
    .biz-cta-inner { flex-direction: column; gap: 28px; padding: 28px 24px; }
    .biz-cta-inner > .btn { width: 100%; }
}
@media (max-width: 560px) {
    .aud-btn { flex-direction: column; align-items: flex-start; gap: 10px; }
    .aud-btn-icon { width: 38px; height: 38px; }
}

/* ================================================================
   ENROLMENT SIDE TAB — Services section right edge
   Always visible, full sentence, professional
   ================================================================ */

@keyframes tabGlow {
    0%, 100% { box-shadow: 4px 0 28px rgba(37, 99, 235, 0.25), inset 0 0 0 1px rgba(99,160,255,0.20); }
    50%       { box-shadow: 4px 0 44px rgba(37, 99, 235, 0.55), inset 0 0 0 1px rgba(99,160,255,0.45); }
}
@keyframes tabNudge {
    0%, 100% { transform: translateY(-50%) translateX(0px); }
    30%       { transform: translateY(-50%) translateX(-5px); }
    60%       { transform: translateY(-50%) translateX(-3px); }
}

/* ── Vertical tab — visible only while the Services section is on screen ── */
.enroll-pin {
    /* positioning: fixed to viewport right edge, centred vertically */
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%) translateX(110%); /* hidden off-screen by default */
    opacity: 0;
    pointer-events: none;

    /* rotate so text reads bottom → top */
    writing-mode: vertical-rl;
    text-orientation: mixed;

    display: flex;
    flex-direction: column;          /* column = vertical flow */
    align-items: center;
    gap: 14px;

    /* visual */
    background: linear-gradient(to bottom, #0b2248 0%, #163d80 55%, #0b2248 100%);
    border-left: 1px solid rgba(99, 160, 255, 0.35);
    border-top: 1px solid rgba(99, 160, 255, 0.20);
    border-bottom: 1px solid rgba(99, 160, 255, 0.20);
    border-radius: 10px 0 0 10px;   /* rounded on the visible left side only */
    padding: 28px 12px;

    text-decoration: none;
    color: #fff;
    cursor: pointer;
    z-index: 50;
    white-space: nowrap;

    animation: tabGlow 3s ease-in-out infinite, tabNudge 4.5s ease-in-out infinite;
    transition: background 0.3s ease, padding 0.3s ease;
}

/* Icon — square, displayed inline in vertical flow */
.enroll-pin__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #93c5fd;
    /* icons don't respect writing-mode — reset to normal */
    writing-mode: horizontal-tb;
    transition: background 0.3s ease;
}

/* Main text line */
.enroll-pin__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.enroll-pin__text strong {
    font-size: 0.80rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #e2eeff;
}
.enroll-pin__text em {
    font-size: 0.72rem;
    font-style: normal;
    color: #7ab4ff;
    letter-spacing: 0.05em;
}

/* Arrow chevron at the bottom of the tab */
.enroll-pin__arrow {
    flex-shrink: 0;
    font-size: 1rem;
    color: #7ab4ff;
    /* arrows are glyphs — keep them horizontal */
    writing-mode: horizontal-tb;
    transform: rotate(90deg);        /* point left = "slide out" direction */
    transition: color 0.3s ease, transform 0.3s ease;
}

/* ── Hover: slide out slightly, brighten ── */
.enroll-pin:hover {
    background: linear-gradient(to bottom, #1340a0 0%, #2563eb 55%, #1340a0 100%);
    padding-left: 20px;              /* slides the tab out from the edge */
    animation: tabGlow 1.2s ease-in-out infinite;
}
.enroll-pin:hover .enroll-pin__icon {
    background: rgba(37, 99, 235, 0.55);
}
.enroll-pin:hover .enroll-pin__arrow {
    color: #fff;
    transform: rotate(90deg) translateX(-3px);
}

/* ── Visible: only when Services section is intersecting ── */
.enroll-pin--visible {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* ── Dismiss transition ── */
.enroll-pin {
    transition: background 0.3s ease, padding 0.3s ease, transform 0.4s cubic-bezier(0.4,0,0.6,1), opacity 0.4s ease;
}
.enroll-pin--dismissed {
    transform: translateX(110%) translateY(-50%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Close (×) button — mobile only ── */
.enroll-pin__close {
    display: none;
}

/* ── Mobile ── */
@media (max-width: 860px) {
    .enroll-pin {
        position: fixed;
        top: 75px;
        right: 0;
        transform: translateX(110%); /* hidden by default on mobile too */
        padding: 20px 10px;
    }
    .enroll-pin--visible {
        transform: translateX(0);
    }
    .enroll-pin--dismissed {
        transform: translateX(110%) !important;
    }
    .enroll-pin__text strong { font-size: 0.72rem; }
    .enroll-pin__text em     { font-size: 0.66rem; }
    .enroll-pin__icon        { width: 30px; height: 30px; }

    /* Show the × button on mobile */
    .enroll-pin__close {
        display: flex;
        align-items: center;
        justify-content: center;
        writing-mode: horizontal-tb;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: rgba(255,255,255,0.12);
        border: 1px solid rgba(255,255,255,0.25);
        color: #e2eeff;
        font-size: 0.85rem;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
        transition: background 0.2s ease;
    }
    .enroll-pin__close:hover {
        background: rgba(255,255,255,0.25);
    }
}

/* ================================================================
   END OF STYLES
   ================================================================ */