/* =============================================================
   styles.css — Private Limo Lane
   Complete website styles.

   HOW TO FIND SECTIONS:
   Search (Ctrl+F / Cmd+F) for the section name in ALL CAPS,
   e.g. "NAVBAR", "HERO", "COLORS", "RESPONSIVE".
   ============================================================= */


/* =============================================================
   RESET
   Removes default browser spacing so everything looks
   consistent across Chrome, Safari, Firefox, etc.
   You do not need to edit this section.
   ============================================================= */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }


/* =============================================================
   COLORS & FONTS  ← START HERE TO REBRAND THE SITE

   These are the main colors used throughout the site.
   Change a value once here and it updates everywhere.

   --obsidian  : very dark black (main dark background)
   --smoke     : slightly lighter dark (cards, sections)
   --champagne : gold accent color (buttons, highlights)
                 TO CHANGE BRAND COLOR → change --champagne
   --ivory     : warm off-white (light section backgrounds)
   --mid       : medium grey (body text, labels)
   --white     : pure white

   Fonts:
   --serif : Playfair Display (used for headings)
   --sans  : Montserrat (used for body text, buttons, labels)
   Both fonts are loaded from Google Fonts in index.html.
   ============================================================= */
:root {
    --obsidian:     #0a0a0c;
    --smoke:        #1e1b18;
    --champagne:    #c9a84c;
    --ivory:        #f7f4ef;
    --mid:          #8a8480;
    --border-light: rgba(0,0,0,0.1);
    --border-dark:  rgba(255,255,255,0.08);
    --white:        #ffffff;
    --serif:        'Playfair Display', Georgia, serif;
    --sans:         'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    color: var(--obsidian);
    line-height: 1.6;
    overflow-x: hidden;
    background: var(--ivory);
    -webkit-font-smoothing: antialiased;
}

img { display:block; max-width:100%; height:auto; }
a   { color:inherit; }
* { -webkit-tap-highlight-color:transparent; }
input, select, textarea, button { touch-action:manipulation; }

/* =============================================================
   BASE BODY STYLES
   Sets the default font, background color, and text color
   for the whole page.
   ============================================================= */

/* =============================================================
   LAYOUT UTILITIES
   .container  : centers content and limits max width to 1200px
   section     : adds top/bottom spacing to every section
   .eyebrow    : the small gold label above section headings
                 e.g. "What We Offer", "Our Guarantee"
   .body-copy  : standard paragraph text style
   ============================================================= */
.container { max-width:1200px; margin:0 auto; padding:0 5%; }
section    { padding: 8rem 0; }

.eyebrow {
    display: block;
    font-size: 0.72rem; font-weight:600; letter-spacing:0.22em;
    text-transform: uppercase; color: var(--champagne); margin-bottom:1rem;
}

.section-header { margin-bottom: 4rem; }
.section-header h2 {
    font-family: var(--serif);
    font-size: clamp(2rem,3.5vw,2.8rem);
    font-weight: 700; line-height:1.12; color:var(--obsidian);
}

.body-copy { font-size:1rem; color:var(--mid); line-height:1.9; font-weight:400; }

/* =============================================================
   SCROLL ANIMATIONS
   Elements with class "fade-up" start invisible and slide up
   when they enter the screen. Elements with "scale-in" start
   slightly smaller and grow in.
   JavaScript (script.js section 3) controls when they trigger.
   Add class="fade-up" to any HTML element to animate it.
   ============================================================= */
.fade-up {
    opacity:0; transform:translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.visible { opacity:1; transform:translateY(0); }

.scale-in {
    opacity:0; transform:scale(0.97);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.scale-in.visible { opacity:1; transform:scale(1); }

/* =============================================================
   BUTTONS
   .btn-primary : gold filled button (main call-to-action)
   .btn-outline : transparent button with white border
   .btn-full    : makes a button stretch to full width

   TO CHANGE BUTTON COLOR: update --champagne in the COLORS
   section at the top of this file.
   ============================================================= */
.btn-primary {
    display:inline-block; padding:0.95rem 2.4rem;
    background:var(--champagne); color:var(--obsidian);
    font-family:var(--sans); font-size:0.82rem; font-weight:700;
    letter-spacing:0.14em; text-transform:uppercase;
    text-decoration:none; border:none; border-radius:3px;
    cursor:pointer; transition:opacity 0.2s ease, transform 0.2s ease;
}
.btn-primary:hover { opacity:0.88; transform:translateY(-2px); }
.btn-full { width:100%; text-align:center; }

.btn-outline {
    display:inline-block; padding:0.85rem 2rem;
    background:transparent; color:var(--ivory);
    font-family:var(--sans); font-size:0.82rem; font-weight:600;
    letter-spacing:0.12em; text-transform:uppercase;
    text-decoration:none; border:1px solid rgba(255,255,255,0.2);
    border-radius:3px; cursor:pointer;
    transition:border-color 0.2s ease, color 0.2s ease;
}
.btn-outline:hover { border-color:var(--champagne); color:var(--champagne); }

/* =============================================================
   WHATSAPP FLOATING BUTTON
   The green "Text Us" button fixed to the bottom-right corner.
   TO CHANGE THE PHONE NUMBER: update the href in index.html
   (search for "wa.me" in index.html).
   On mobile it moves up to sit above the sticky call bar.
   ============================================================= */
.whatsapp-btn {
    position:fixed; bottom:2rem; right:2rem; z-index:8000;
    display:flex; align-items:center; gap:0.5rem;
    background:#25D366; color:#fff; text-decoration:none;
    padding:0.7rem 1.2rem 0.7rem 0.9rem; border-radius:50px;
    font-family:var(--sans); font-size:0.78rem; font-weight:700;
    letter-spacing:0.06em; box-shadow:0 6px 24px rgba(37,211,102,0.35);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-btn:hover { transform:translateY(-3px); box-shadow:0 10px 32px rgba(37,211,102,0.45); }

/* =============================================================
   STICKY MOBILE BOTTOM BAR
   The "Call Now" + "Book a Ride" bar pinned to the bottom of
   the screen on phones. Only visible on screens ≤ 768px wide.
   TO CHANGE THE PHONE NUMBER: update the href in index.html
   (search for "mobile-bar" in index.html).
   ============================================================= */
.mobile-bar {
    display:none; position:fixed; bottom:0; left:0; right:0; z-index:7000;
    background:var(--obsidian); border-top:1px solid rgba(255,255,255,0.08);
    padding:0.75rem 1rem; padding-bottom:calc(0.75rem + env(safe-area-inset-bottom));
    gap:0.75rem;
}
.mobile-bar-btn {
    flex:1; display:flex; align-items:center; justify-content:center;
    gap:0.5rem; padding:0.85rem 1rem; border-radius:6px;
    font-family:var(--sans); font-size:0.82rem; font-weight:700;
    letter-spacing:0.08em; text-decoration:none; text-transform:uppercase;
    transition:opacity 0.2s ease;
}
.mobile-bar-call { background:rgba(255,255,255,0.08); color:var(--ivory); border:1px solid rgba(255,255,255,0.12); }
.mobile-bar-book { background:var(--champagne); color:var(--obsidian); }
.mobile-bar-btn:hover { opacity:0.85; }

/* =============================================================
   EXIT-INTENT OVERLAY
   The popup that appears when a visitor's mouse moves above
   the browser (suggesting they're about to leave).
   Shows the phone number to capture last-minute calls.
   Only triggers once per visit on desktop.
   ============================================================= */
.exit-overlay {
    position:fixed; inset:0; z-index:99000;
    background:rgba(0,0,0,0.72);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity 0.35s ease;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.exit-overlay.show { opacity:1; pointer-events:all; }

.exit-card {
    background:var(--smoke); border:1px solid rgba(201,168,76,0.2);
    border-radius:8px; padding:3.5rem 3rem; text-align:center;
    max-width:420px; width:90%; position:relative;
    transform:translateY(20px); transition:transform 0.35s ease;
}
.exit-overlay.show .exit-card { transform:translateY(0); }
.exit-close {
    position:absolute; top:1.1rem; right:1.25rem;
    background:none; border:none; color:rgba(255,255,255,0.35);
    font-size:1rem; cursor:pointer; transition:color 0.2s ease;
}
.exit-close:hover { color:rgba(255,255,255,0.8); }
.exit-label { font-size:0.68rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--champagne); margin-bottom:0.9rem; }
.exit-headline { font-family:var(--serif); font-size:2.1rem; font-weight:700; color:var(--ivory); line-height:1.15; margin-bottom:1.5rem; }
.exit-number { display:block; font-size:1.5rem; font-weight:300; letter-spacing:0.12em; color:var(--champagne); text-decoration:none; margin-bottom:1rem; transition:opacity 0.2s; }
.exit-number:hover { opacity:0.75; }
.exit-sub { font-size:0.72rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:rgba(247,244,239,0.3); }

/* =============================================================
   NAVBAR  (top navigation bar)
   Fixed to the top of the screen at all times.
   Starts semi-transparent, becomes more opaque on scroll
   (class "scrolled" is added by JavaScript).
   The logo size is controlled by: width:clamp(150px,14vw,205px)
   TO CHANGE LOGO: replace the image file referenced in index.html
   (search for "nav-logo" in index.html).
   ============================================================= */
.navbar {
    position:fixed; top:0; width:100%; z-index:1000;
    background:rgba(10,10,12,0.75);
    -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
    border-bottom:1px solid rgba(255,255,255,0.05); transition:background 0.4s ease;
}
.navbar.scrolled { background:rgba(10,10,12,0.97); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding-top:1.1rem; padding-bottom:1.1rem; }
.nav-brand { text-decoration:none; flex-shrink:0; }
.nav-logo  { width:clamp(150px,14vw,205px); height:auto; object-fit:contain; }
.nav-menu  { display:flex; list-style:none; gap:2rem; align-items:center; }
.nav-link  { color:rgba(255,255,255,0.65); text-decoration:none; font-size:0.82rem; font-weight:500; letter-spacing:0.08em; transition:color 0.2s ease; }
.nav-link:hover, .nav-link.active { color:#fff; }
.nav-cta   { padding:0.5rem 1.3rem; background:var(--champagne); color:var(--obsidian)!important; border-radius:3px; font-weight:700; transition:opacity 0.2s ease; }
.nav-cta:hover { opacity:0.85; }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; z-index:1001; }
.nav-toggle span { display:block; width:22px; height:1.5px; background:rgba(255,255,255,0.85); transition:all 0.28s ease; }

/* ── Mobile Nav Backdrop ───────────────────────────────────── */
.nav-backdrop {
    display:none;
    position:fixed; inset:0;
    background:rgba(0,0,0,0.6);
    z-index:1001;
    pointer-events:none;   /* never blocks clicks — menu handles its own events */
}

/* ── Slide-in keyframe ─────────────────────────────────────── */
@keyframes slideInRight {
    from { transform:translateX(100%); }
    to   { transform:translateX(0);    }
}

/* ── Mobile nav at 900px ───────────────────────────────────── */
@media (max-width:900px) {

    /* Show hamburger button */
    .nav-toggle { display:flex; z-index:1003; }

    /* Hamburger → X animation */
    .nav-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(4.5px,5px); }
    .nav-toggle.open span:nth-child(2) { opacity:0; }
    .nav-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(4.5px,-5px); }

    /* Hide desktop nav */
    .nav-menu {
        display:none;
        position:fixed;
        top:0;
        right:0;
        width:min(320px, 92vw);
        height:100%;
        height:100dvh;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:0;
        list-style:none;
        background:#111;
        border-left:none;
        box-shadow:-8px 0 40px rgba(0,0,0,0.7);
        z-index:1002;
        padding:5.5rem 1.1rem 2.5rem;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    /* Show + animate when active */
    .nav-menu.active {
        display:flex;
        animation:slideInRight 0.32s ease forwards;
    }

    /* Group nav items in a card */
    .nav-menu li {
        width:100%;
    }
    .nav-menu li:first-child {
        margin-top:0;
        border-radius:14px 14px 0 0;
        overflow:hidden;
    }
    .nav-menu li:last-of-type:not(:has(.nav-cta)) {
        border-radius:0 0 14px 14px;
        overflow:hidden;
    }
    .nav-menu li:not(:has(.nav-cta)) {
        background:#2c2c2c;
    }

    .nav-link {
        display:block;
        width:100%;
        padding:1.2rem 1.4rem;
        font-size:1.05rem;
        font-weight:600;
        letter-spacing:0.02em;
        text-transform:none;
        color:#ffffff !important;
        border-bottom:1px solid rgba(255,255,255,0.1);
        transition:background 0.18s;
    }
    .nav-menu li:first-child .nav-link { border-top:none; }
    .nav-link:hover { background:#383838 !important; color:#fff !important; }

    /* Book Now button */
    .nav-cta {
        display:block !important;
        margin:1.2rem 0 0 !important;
        padding:1.05rem !important;
        text-align:center;
        background:var(--champagne) !important;
        color:var(--obsidian) !important;
        border-radius:12px !important;
        font-size:0.95rem;
        font-weight:700;
        letter-spacing:0.08em;
        border-bottom:none !important;
        width:100%;
    }
    .nav-cta:hover { opacity:0.88 !important; background:var(--champagne) !important; }
}

/* =============================================================
   HERO SECTION  (the full-screen top section with the car photo)
   - The background image is set inline in index.html
     (search for "hero-bg" in index.html to find it).
   - The title animates in word-by-word on page load.
   - The live LA time appears above the title.
   - clamp(min, preferred, max) makes text scale with screen size.
   ============================================================= */
.hero { position:relative; height:100vh; min-height:640px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; transform:scale(1.04); animation:heroZoom 14s ease-out forwards; }
@keyframes heroZoom { from{transform:scale(1.04)} to{transform:scale(1.0)} }
.hero-overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(160deg,rgba(10,10,12,.28) 0%,rgba(10,10,12,.65) 100%); }
.hero-content { position:relative; z-index:2; text-align:center; color:#fff; max-width:780px; padding:0 2rem; }

.hero-live-time { font-size:0.72rem; font-weight:500; letter-spacing:0.24em; text-transform:uppercase; color:var(--champagne); margin-bottom:1.5rem; display:flex; align-items:center; justify-content:center; gap:0.6rem; opacity:0; transition:opacity 0.6s ease; }
.hero-live-time.show { opacity:1; }
.live-dot { width:6px; height:6px; background:var(--champagne); border-radius:50%; animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

.hero-title { font-family:var(--serif); font-size:clamp(2.8rem,5.8vw,4.8rem); font-weight:700; line-height:1.06; letter-spacing:-0.5px; margin-bottom:1.2rem; }
.hero-title .word { display:inline-block; opacity:0; transform:translateY(22px); transition:opacity 0.55s ease, transform 0.55s ease; }
.hero-title .word.show { opacity:1; transform:translateY(0); }

.hero-value-props { display:flex; align-items:center; justify-content:center; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.2rem; opacity:0; transition:opacity 0.5s ease; }
.hero-value-props.show { opacity:1; }
.hero-value-props span { font-size:0.75rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.7); }
.hero-dot { color:var(--champagne); }

.hero-sub { font-size:0.82rem; font-weight:400; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:2.5rem; opacity:0; transition:opacity 0.6s ease; }
.hero-sub.show { opacity:1; }
.hero-cta-wrap { opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.hero-cta-wrap.show { opacity:1; transform:translateY(0); }
.hero-phone { display:block; margin-top:1.1rem; font-size:0.8rem; font-weight:400; letter-spacing:0.1em; color:rgba(255,255,255,.5); text-decoration:none; transition:color 0.2s ease; }
.hero-phone:hover { color:rgba(255,255,255,.88); }

/* =============================================================
   TRUST BAR  (the scrolling ticker below the hero)
   The text scrolls continuously left.
   TO CHANGE THE TICKER TEXT: edit the ticker items in index.html
   (search for "ticker-item" in index.html).
   Each item appears twice in the HTML so the loop is seamless.
   ============================================================= */
.trust-bar { background:var(--obsidian); overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06); height:46px; display:flex; align-items:center; }
.ticker-track { display:flex; white-space:nowrap; animation:ticker 32s linear infinite; }
.ticker-track:hover { animation-play-state:paused; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-item { display:inline-flex; align-items:center; gap:0.6rem; padding:0 2.5rem; font-size:0.72rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,.65); white-space:nowrap; }
.ticker-gem { color:var(--champagne); font-size:0.65rem; }

/* =============================================================
   PROMISE / GUARANTEE SECTION  (4 cards: On Time, Fixed Price…)
   Shows 4 columns on desktop, 2 on tablet, 1 on phone.
   TO EDIT THE CARDS: find the "promise-grid" section in index.html.
   ============================================================= */
.promise { background:var(--ivory); }
.promise .section-header h2 { color:var(--obsidian); }
.promise .section-header { text-align:center; }

.promise-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--border-light); border:1px solid var(--border-light); border-radius:4px; overflow:hidden; }

.promise-card { background:var(--white); padding:2.5rem 2rem; transition:background 0.2s ease; }
.promise-card:hover { background:var(--ivory); }

.promise-icon { width:56px; height:56px; background:rgba(201,168,76,0.08); border:1px solid rgba(201,168,76,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--champagne); margin-bottom:1.5rem; transition:background 0.3s ease; }
.promise-card:hover .promise-icon { background:rgba(201,168,76,0.15); }

.promise-card h3 { font-family:var(--serif); font-size:1.1rem; font-weight:700; color:var(--obsidian); margin-bottom:0.75rem; }
.promise-card p  { font-size:0.88rem; color:var(--mid); line-height:1.75; }

/* =============================================================
   ABOUT SECTION
   Two-column layout: text on left, stats (24/7, 3 classes…)
   on right. Collapses to a single column on tablet/phone.
   TO EDIT: find id="about" in index.html.
   ============================================================= */
.about { background:var(--ivory); }
.about-inner { display:grid; grid-template-columns:1fr 1fr; gap:7rem; align-items:center; }
.about-text h2 { font-family:var(--serif); font-size:clamp(2rem,3vw,2.7rem); font-weight:700; line-height:1.12; color:var(--obsidian); margin-bottom:1.6rem; }
.about-text .body-copy + .body-copy { margin-top:1rem; }
.about-stats { display:flex; flex-direction:column; gap:2.8rem; border-left:1px solid var(--border-light); padding-left:4rem; }
.stat-number { display:block; font-family:var(--serif); font-size:3.2rem; font-weight:700; color:var(--obsidian); line-height:1; }
.stat-label  { display:block; font-size:0.7rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--mid); margin-top:0.5rem; }

/* =============================================================
   HOW IT WORKS SECTION  (3 steps: Book → Confirm → Arrive)
   The connector lines between steps are CSS elements (::after).
   On tablet/phone, steps stack vertically.
   TO EDIT: find class="how-it-works" in index.html.
   ============================================================= */
.how-it-works { background:var(--smoke); }
.how-it-works .section-header h2 { color:var(--ivory); }
.how-it-works .section-header { text-align:center; }

.hiw-grid { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:start; }

.hiw-step { text-align:center; padding:2.5rem 2rem; }
.hiw-number { font-family:var(--serif); font-size:0.7rem; font-weight:700; letter-spacing:0.3em; color:var(--champagne); margin-bottom:1.5rem; display:block; }
.hiw-icon { width:72px; height:72px; background:rgba(201,168,76,0.08); border:1px solid rgba(201,168,76,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; color:var(--champagne); transition:background 0.3s, border-color 0.3s; }
.hiw-step:hover .hiw-icon { background:rgba(201,168,76,0.15); border-color:rgba(201,168,76,0.45); }
.hiw-step h3 { font-family:var(--serif); font-size:1.2rem; font-weight:700; color:var(--ivory); margin-bottom:0.75rem; }
.hiw-step p  { font-size:0.88rem; color:rgba(247,244,239,0.5); line-height:1.8; }

.hiw-connector { align-self:center; width:60px; height:1px; background:linear-gradient(to right,rgba(201,168,76,0.35),rgba(201,168,76,0.1)); margin-top:-2rem; position:relative; }
.hiw-connector::after { content:''; position:absolute; right:-4px; top:-3px; width:7px; height:7px; border-right:1.5px solid rgba(201,168,76,0.45); border-top:1.5px solid rgba(201,168,76,0.45); transform:rotate(45deg); }

/* =============================================================
   SERVICES SECTION  (photo cards grid with filter buttons)
   3 columns on desktop → 2 on tablet → 1 on phone.
   .service-card.dimmed   : faded out when filter is active
   .service-card.highlighted : full opacity when filter matches
   The "Book Now" link on each card is hidden until hover.
   TO ADD A SERVICE: copy a .service-card block in index.html
   and update the image, label, title, and description.
   ============================================================= */
.services { background:var(--obsidian); }
.services .section-header h2 { color:var(--ivory); }

.scene-filter { display:flex; gap:0.75rem; flex-wrap:wrap; margin-bottom:3rem; }
.scene-btn { padding:0.55rem 1.4rem; border:1px solid rgba(255,255,255,0.15); background:transparent; color:rgba(255,255,255,0.5); font-family:var(--sans); font-size:0.72rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; border-radius:50px; cursor:pointer; transition:all 0.25s ease; }
.scene-btn:hover { border-color:rgba(201,168,76,.5); color:rgba(255,255,255,.85); }
.scene-btn.active { background:var(--champagne); border-color:var(--champagne); color:var(--obsidian); }

.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.service-card { position:relative; height:480px; overflow:hidden; cursor:pointer; transition:opacity 0.4s ease, transform 0.4s ease; }
.service-card.dimmed { opacity:0.22; transform:scale(0.98); }
.service-card-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 0.75s ease; }
.service-card:hover .service-card-bg { transform:scale(1.06); }
.service-card-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(10,10,12,.88) 0%,rgba(10,10,12,.1) 55%,transparent 100%); }
.service-card-body { position:absolute; bottom:0; left:0; right:0; padding:2rem 1.8rem; z-index:2; }
.service-label { font-size:0.66rem; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--champagne); margin-bottom:0.5rem; display:block; }
.service-card h3 { font-family:var(--serif); font-size:1.4rem; font-weight:700; color:#fff; margin-bottom:0.6rem; line-height:1.2; }
.service-card p  { font-size:0.85rem; color:rgba(255,255,255,.62); line-height:1.72; margin-bottom:1.2rem; }
.service-link { display:inline-block; font-size:0.78rem; font-weight:700; color:#fff; text-decoration:none; letter-spacing:0.1em; text-transform:uppercase; border-bottom:1px solid var(--champagne); padding-bottom:2px; transform:translateY(8px); opacity:0; transition:color 0.2s ease, transform 0.35s ease, opacity 0.35s ease; }
.service-card:hover .service-link { transform:translateY(0); opacity:1; color:var(--champagne); }

/* =============================================================
   FLEET SECTION  (horizontally scrollable vehicle panels)
   Users can drag (desktop) or swipe (mobile) to browse vehicles.
   Each panel has a photo on the left and details on the right.
   On mobile, photo and details stack vertically.
   TO EDIT: find id="fleet" in index.html.
   ============================================================= */
.fleet { background:var(--ivory); overflow:hidden; }
.fleet-scroll-wrap { overflow-x:auto; cursor:grab; -ms-overflow-style:none; scrollbar-width:none; margin-left:-5%; margin-right:-5%; padding:0 5%; }
.fleet-scroll-wrap::-webkit-scrollbar { display:none; }
.fleet-scroll-wrap.grabbing { cursor:grabbing; }
.fleet-track { display:flex; gap:3px; width:max-content; padding-bottom:2px; }
.fleet-panel { width:72vw; max-width:860px; min-width:320px; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border-radius:3px; flex-shrink:0; }
.fleet-panel-img { overflow:hidden; height:440px; }
.fleet-panel-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.8s ease; }
.fleet-panel:hover .fleet-panel-img img { transform:scale(1.04); }
.fleet-panel-info { background:var(--smoke); color:var(--ivory); padding:3rem 2.5rem; display:flex; flex-direction:column; justify-content:center; height:440px; }
.fleet-panel-info h3 { font-family:var(--serif); font-size:clamp(1.5rem,2vw,2rem); font-weight:700; color:var(--ivory); margin-bottom:0.4rem; }
.fleet-models { font-size:0.7rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--champagne); margin-bottom:1.25rem; }
.fleet-panel-info > p { font-size:0.93rem; color:rgba(247,244,239,.6); line-height:1.85; margin-bottom:1.75rem; }
.fleet-panel-info ul { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0.55rem 1rem; }
.fleet-panel-info ul li { font-size:0.85rem; color:rgba(247,244,239,.75); padding-left:1rem; position:relative; }
.fleet-panel-info ul li::before { content:'—'; position:absolute; left:0; color:var(--champagne); }
.fleet-scroll-hint { margin-top:1.75rem; display:flex; align-items:center; gap:0.6rem; font-size:0.72rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--mid); }
.fleet-scroll-hint span { display:inline-block; animation:nudge 2.2s ease-in-out infinite; }
@keyframes nudge { 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }
.fleet-custom-note { margin-top:3rem; padding:2.5rem 3rem; background:var(--smoke); border-left:3px solid var(--champagne); border-radius:3px; max-width:760px; }
.fleet-custom-note p { font-size:0.97rem; color:rgba(247,244,239,.75); line-height:1.9; margin:0; }

/* =============================================================
   COMPARISON TABLE  (Private Limo Lane vs Uber Black vs others)
   The middle column (.col-us) is highlighted in gold.
   Horizontally scrollable on small screens.
   TO EDIT: find class="comparison-table" in index.html.
   ============================================================= */
.comparison { background:var(--obsidian); }
.comparison .section-header h2 { color:var(--ivory); }
.comparison .section-header { text-align:center; }

.comparison-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

.comparison-table { width:100%; border-collapse:collapse; font-family:var(--sans); min-width:560px; }

.comparison-table thead tr { border-bottom:1px solid rgba(255,255,255,0.08); }

.comparison-table th {
    padding:1.2rem 1.5rem; font-size:0.72rem; font-weight:700;
    letter-spacing:0.14em; text-transform:uppercase;
    color:rgba(247,244,239,0.45); text-align:center;
}
.comparison-table th:first-child { text-align:left; }
.comparison-table th.col-us { color:var(--champagne); }

.comparison-table tbody tr { border-bottom:1px solid rgba(255,255,255,0.05); transition:background 0.2s ease; }
.comparison-table tbody tr:hover { background:rgba(255,255,255,0.03); }

.comparison-table td { padding:1.1rem 1.5rem; font-size:0.88rem; color:rgba(247,244,239,0.55); text-align:center; }
.comparison-table td:first-child { text-align:left; color:rgba(247,244,239,0.75); font-weight:500; }
.comparison-table td.col-us { background:rgba(201,168,76,0.04); border-left:1px solid rgba(201,168,76,0.12); border-right:1px solid rgba(201,168,76,0.12); }

.yes    { color:#5dbd7a; font-size:1rem; font-weight:700; }
.no     { color:rgba(247,244,239,0.25); font-size:1rem; }
.maybe  { color:rgba(201,168,76,0.6); font-size:1rem; }

/* =============================================================
   REVIEWS SECTION
   Currently shows a "See our Google Reviews" CTA.
   Once you have real Google reviews, you can add review cards
   back in index.html using the .review-card structure below.
   TO EDIT: find class="reviews" in index.html.
   ============================================================= */
/* =============================================================
   PHOTO GALLERY SECTION
   ============================================================= */
.gallery { background:var(--obsidian); padding-bottom:5rem; }
.gallery .section-header h2 { color:var(--ivory); }
.gallery .eyebrow { color:var(--champagne); }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 260px;
    gap: 6px;
    margin: 3rem 0 3.5rem;
}

.gallery-item { overflow:hidden; position:relative; background:var(--smoke); }
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.6s ease; }
.gallery-item:hover img { transform:scale(1.05); }

.gallery-item--tall { grid-row: span 2; }
.gallery-item--wide { grid-column: span 2; }

.gallery-cta { text-align:center; margin-top:1rem; }

/* =============================================================
   FOUNDER SECTION
   Centered luxury layout — ornament, quote, signature, CTA.
   ============================================================= */
.founder {
    background: linear-gradient(160deg, #0f0f0f 0%, var(--smoke) 50%, #0f0f0f 100%);
    position: relative;
    overflow: hidden;
}
.founder-bg-accent {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(201,168,76,0.055) 0%, transparent 70%);
    pointer-events: none;
}

.founder-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
    gap: 0;
}

.founder-ornament { margin-bottom: 2rem; opacity: 0.9; }

.founder-eyebrow { color: var(--champagne); margin-bottom: 2.5rem; display: block; }

.founder-quote-wrap {
    position: relative;
    padding: 0 1rem;
    margin-bottom: 3rem;
}
.founder-quote-text {
    font-family: var(--serif);
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    font-style: italic;
    font-weight: 400;
    color: rgba(247,244,239,0.82);
    line-height: 1.9;
    letter-spacing: 0.01em;
}

.founder-sig {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    width: 100%;
    margin-bottom: 1.5rem;
}
.founder-sig-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,0.35), transparent);
}
.founder-sig-info { flex-shrink: 0; text-align: center; }
.founder-name {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 700;
    color: var(--champagne);
    letter-spacing: 0.04em;
    margin: 0 0 0.3rem;
    line-height: 1.2;
}
.founder-title {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(247,244,239,0.38);
    margin: 0;
}

.founder-meta {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(247,244,239,0.3);
    margin: 0 0 2rem;
}

.founder-contact {
    display: inline-block;
    padding: 0.75rem 2.25rem;
    border: 1px solid rgba(201,168,76,0.4);
    border-radius: 2px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--champagne);
    text-decoration: none;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.founder-contact:hover {
    background: rgba(201,168,76,0.1);
    border-color: rgba(201,168,76,0.7);
    color: var(--ivory);
}


/* =============================================================
   CORPORATE ACCOUNTS SECTION
   Two columns: text + benefits list on left, area tags on right.
   TO EDIT: find class="corporate" in index.html.
   ============================================================= */
.corporate { background:var(--smoke); }
.corporate-inner { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; }
.corporate-text h2 { font-family:var(--serif); font-size:clamp(2rem,3vw,2.6rem); font-weight:700; color:var(--ivory); line-height:1.12; margin-bottom:1.4rem; }
.corporate-text .body-copy { color:rgba(247,244,239,0.55); margin-bottom:2rem; }
.corporate-perks { list-style:none; display:flex; flex-direction:column; gap:0.9rem; margin-bottom:2.5rem; }
.corporate-perks li { display:flex; align-items:center; gap:0.75rem; font-size:0.9rem; color:rgba(247,244,239,0.7); }
.corporate-perks li svg { color:var(--champagne); flex-shrink:0; }

.corporate-card { background:rgba(255,255,255,0.04); border:1px solid rgba(201,168,76,0.15); border-radius:8px; padding:2.5rem; }
.corporate-card-label { font-size:0.68rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:rgba(247,244,239,0.35); margin-bottom:1.5rem; }
.corporate-areas { display:flex; flex-wrap:wrap; gap:0.6rem; }
.corporate-areas span { display:inline-block; padding:0.45rem 1rem; background:rgba(201,168,76,0.07); border:1px solid rgba(201,168,76,0.18); border-radius:50px; font-size:0.75rem; font-weight:600; letter-spacing:0.08em; color:rgba(247,244,239,0.6); }

/* =============================================================
   SERVICE AREA SECTION
   4-column grid of city/area lists showing where you operate.
   Collapses to 2 columns on tablet and 1 column on phone.
   TO EDIT: find class="service-area" in index.html.
   TO ADD AREAS: copy an .area-group block and update the title
   and list items.
   ============================================================= */
.service-area { background:var(--ivory); }
.service-area .section-header h2 { color:var(--obsidian); }
.service-area .section-header { text-align:center; }

.area-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-bottom:2.5rem; }
.area-group-title { font-size:0.7rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--champagne); margin-bottom:1rem; }
.area-group ul { list-style:none; display:flex; flex-direction:column; gap:0.5rem; }
.area-group ul li { font-size:0.9rem; color:var(--mid); padding-left:1rem; position:relative; }
.area-group ul li::before { content:'—'; position:absolute; left:0; color:rgba(201,168,76,0.4); font-size:0.75rem; }

.area-note { text-align:center; font-size:0.85rem; color:var(--mid); }
.area-note a { color:var(--champagne); text-decoration:none; font-weight:600; }
.area-note a:hover { text-decoration:underline; }

/* =============================================================
   CTA STRIP  (the big italic "Call us now" banner)
   Full-width dark band with a large angled headline and phone
   number, used to prompt a call before the visitor leaves.
   TO CHANGE THE TEXT OR NUMBER: find class="cta-strip" in index.html.
   ============================================================= */
.cta-strip { background:var(--obsidian); padding:7rem 0; position:relative; overflow:hidden; }
.cta-strip::before { content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); background-size:200px; opacity:0.5; pointer-events:none; }
.cta-strip-inner { display:flex; flex-direction:column; align-items:center; gap:1.4rem; text-align:center; position:relative; z-index:1; }
.cta-strip-line { font-family:var(--serif); font-size:clamp(2.6rem,6vw,5.2rem); font-weight:700; font-style:italic; color:var(--ivory); line-height:1.0; transform:rotate(-1.5deg); display:inline-block; }
.cta-strip-number { font-size:clamp(1.1rem,2vw,1.6rem); font-weight:300; letter-spacing:0.22em; text-transform:uppercase; color:var(--champagne); text-decoration:none; transition:opacity 0.2s; }
.cta-strip-number:hover { opacity:0.75; }

/* =============================================================
   PHOTO GRID SECTION
   A 3-column mosaic grid of car/lifestyle photos.
   The left cell is tall (spans 2 rows), the bottom-right cell
   is wide (spans 2 columns). On small screens it simplifies.
   TO CHANGE PHOTOS: find class="photo-grid" in index.html and
   update the <img> src paths for each photo-cell.
   ============================================================= */
.photo-grid-section { background:var(--ivory); padding:7rem 0; }
.photo-grid { display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:300px 300px; gap:5px; border-radius:3px; overflow:hidden; }
.photo-cell { overflow:hidden; }
.photo-cell img { width:100%; height:100%; object-fit:cover; transition:transform 0.75s ease; }
.photo-cell:hover img { transform:scale(1.05); }
.photo-cell-tall { grid-column:1; grid-row:1/3; }
.photo-cell-wide { grid-column:2/4; grid-row:2; }
.photo-grid-cta { display:flex; align-items:center; justify-content:center; gap:1.25rem; margin-top:2rem; }
.photo-grid-cta p { font-size:0.75rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--mid); }
.photo-grid-cta a { font-size:0.85rem; font-weight:600; color:var(--obsidian); text-decoration:none; border-bottom:1.5px solid var(--champagne); padding-bottom:1px; transition:color 0.2s; }
.photo-grid-cta a:hover { color:var(--champagne); }

/* =============================================================
   FAQ SECTION  (Frequently Asked Questions accordion)
   Click a question to expand the answer; click again to close.
   The + icon rotates to × when a question is open.
   JavaScript (script.js section 14) handles the open/close logic.
   TO ADD A QUESTION: copy a .faq-item block in index.html and
   update the question text and answer paragraph.
   ============================================================= */
.faq { background:var(--ivory); }
.faq .section-header h2 { color:var(--obsidian); }

.faq-list { max-width:780px; display:flex; flex-direction:column; }

.faq-item { border-bottom:1px solid var(--border-light); }
.faq-item:first-child { border-top:1px solid var(--border-light); }

.faq-q {
    width:100%; display:flex; justify-content:space-between; align-items:center;
    padding:1.4rem 0; background:none; border:none; cursor:pointer; text-align:left;
    font-family:var(--sans); font-size:0.98rem; font-weight:600; color:var(--obsidian);
    line-height:1.4; gap:1rem; transition:color 0.2s ease;
}
.faq-q:hover { color:var(--champagne); }
.faq-q[aria-expanded="true"] { color:var(--champagne); }

.faq-icon { font-size:1.4rem; font-weight:300; color:var(--champagne); flex-shrink:0; transition:transform 0.3s ease; line-height:1; }
.faq-q[aria-expanded="true"] .faq-icon { transform:rotate(45deg); }

.faq-a { overflow:hidden; max-height:0; transition:max-height 0.4s ease; }
.faq-a p { padding-bottom:1.4rem; font-size:0.92rem; color:var(--mid); line-height:1.85; }

/* =============================================================
   CONTACT SECTION  (booking request form)
   Two columns: contact info (phone, email, location) on the left,
   booking form on the right.
   The form uses Netlify Forms — it works automatically when the
   site is hosted on Netlify (no backend code needed).
   TO CHANGE PHONE/EMAIL: update the contact-row links in index.html
   (search for "contact-row" in index.html).
   TO CHANGE FORM FIELDS: add/remove .form-group blocks in the
   form inside the "contact" section of index.html.
   ============================================================= */
.contact { background:var(--smoke); position:relative; }
.contact::before { content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); background-size:200px; opacity:0.4; pointer-events:none; }
.contact .container { position:relative; z-index:1; }
.contact-inner { display:grid; grid-template-columns:1fr 1.3fr; gap:7rem; align-items:start; }
.contact-info h2 { font-family:var(--serif); font-size:clamp(2rem,3vw,2.8rem); font-weight:700; line-height:1.12; color:var(--ivory); margin-bottom:1.25rem; }
.contact-info .eyebrow { color:var(--champagne); }
.contact-info .body-copy { color:rgba(247,244,239,.55); margin-bottom:2.5rem; }
.contact-details { display:flex; flex-direction:column; }
.contact-row { display:flex; justify-content:space-between; align-items:center; padding:1.1rem 0; border-bottom:1px solid var(--border-dark); text-decoration:none; color:var(--ivory); transition:color 0.2s ease; }
.contact-row:first-child { border-top:1px solid var(--border-dark); }
a.contact-row:hover { color:var(--champagne); }
.contact-label { font-size:0.68rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:rgba(247,244,239,.38); }
.contact-value { font-size:0.88rem; font-weight:500; }

.contact-form { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); border-radius:6px; padding:3rem; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.contact-form h3 { font-family:var(--serif); font-size:1.6rem; font-weight:700; color:var(--ivory); margin-bottom:2rem; }
.form-group { margin-bottom:1.6rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.6rem; }
.form-row .form-group { margin-bottom:0; }
.form-group label { display:block; font-size:0.68rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:rgba(247,244,239,.4); margin-bottom:0; transition:color 0.2s ease; }
.form-group:focus-within label { color:var(--champagne); }
.form-group input, .form-group select { width:100%; padding:0.9rem 0; border:none; border-bottom:1px solid rgba(255,255,255,.15); border-radius:0; font-family:var(--sans); font-size:0.95rem; color:var(--ivory); background:transparent; appearance:none; -webkit-appearance:none; transition:border-color 0.25s ease; }
.form-group input:focus, .form-group select:focus { outline:none; border-bottom-color:var(--champagne); }
.form-group input::placeholder { color:rgba(255,255,255,.2); }
.form-group select option { background:var(--smoke); color:var(--ivory); }
.form-group input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(0.6); }
.form-guarantee-note { margin-top:1rem; font-size:0.7rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:rgba(247,244,239,0.28); text-align:center; line-height:1.6; }

/* =============================================================
   FOOTER
   Dark background with the logo, nav links, and legal/copyright line.
   The gold rule at the top is a decorative gradient line.
   On mobile, the footer content stacks vertically and the nav
   links wrap to center.
   TO EDIT: find class="footer" in index.html.
   TO CHANGE COPYRIGHT YEAR: update the © line in index.html.
   ============================================================= */
.footer { background:var(--obsidian); color:rgba(255,255,255,.5); padding:5rem 0 2.5rem; }
.footer-rule { width:100%; height:1px; background:linear-gradient(to right,transparent 0%,var(--champagne) 20%,var(--champagne) 80%,transparent 100%); margin-bottom:4rem; opacity:0.55; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; padding-bottom:3rem; margin-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.07); }
.footer-logo { width:clamp(130px,13vw,185px); height:auto; margin-bottom:0.75rem; }
.footer-brand p { font-size:0.82rem; color:rgba(255,255,255,.3); }
.footer-nav { display:flex; gap:1.75rem; flex-wrap:wrap; align-items:center; }
.footer-nav a { color:rgba(255,255,255,.45); text-decoration:none; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:500; transition:color 0.2s ease; }
.footer-nav a:hover { color:var(--champagne); }
.footer-bottom p { font-size:0.72rem; color:rgba(255,255,255,.2); text-align:center; letter-spacing:0.04em; }
.footer-bottom a { color:rgba(255,255,255,.35); text-decoration:none; transition:color 0.2s; }
.footer-bottom a:hover { color:var(--champagne); }

/* =============================================================
   RESPONSIVE — 1200px  (large tablet / small laptop)
   Tightens horizontal gaps between two-column layouts so they
   don't feel too spread out on slightly smaller screens.
   You generally do not need to edit this block.
   ============================================================= */
@media (max-width:1200px) {
    .about-inner      { gap:5rem; }

    .corporate-inner  { gap:4rem; }
    .contact-inner    { gap:5rem; }
    .founder-quote-wrap { padding:0; }
}

/* =============================================================
   RESPONSIVE — 1024px  (tablets, iPad landscape)
   Two-column layouts collapse to single column. Sections get
   less top/bottom padding. The How It Works connector lines
   become vertical instead of horizontal. Fleet panels get wider.
   ============================================================= */
@media (max-width:1024px) {
    section           { padding:6rem 0; }

    /* About */
    .about-inner      { grid-template-columns:1fr; gap:3.5rem; }
    .about-stats      { flex-direction:row; border-left:none; border-top:1px solid var(--border-light); padding-left:0; padding-top:2.5rem; gap:3rem; }

    /* Promise */
    .promise-grid     { grid-template-columns:1fr 1fr; }

    /* How It Works */
    .hiw-grid         { grid-template-columns:1fr; }
    .hiw-connector    { width:1px; height:36px; background:linear-gradient(to bottom,rgba(201,168,76,.35),rgba(201,168,76,.05)); margin:0 auto; }
    .hiw-connector::after { right:auto; left:50%; top:auto; bottom:-4px; transform:rotate(135deg) translateX(-50%); }

    /* Services — 2 columns on tablet */
    .services-grid    { grid-template-columns:1fr 1fr; }

    /* Fleet */
    .fleet-panel      { width:85vw; }
    .fleet-custom-note { padding:2rem 2rem; }

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

    /* Founder */
    .founder-quote-text { font-size:1rem; }
    .founder-sig { gap:1rem; }

    /* Corporate */
    .corporate-inner  { grid-template-columns:1fr; gap:3.5rem; }

    /* Service Area */
    .area-grid        { grid-template-columns:repeat(2,1fr); }

    /* Contact */
    .contact-inner    { grid-template-columns:1fr; gap:4rem; }

    /* Comparison table — shrink padding */
    .comparison-table th,
    .comparison-table td { padding:0.9rem 1rem; }
}

/* =============================================================
   RESPONSIVE — 768px  (phones and small tablets)
   This is the main mobile breakpoint. Key changes:
   - Sticky "Call Now / Book a Ride" bar appears at the bottom
   - WhatsApp button moves up so it clears the sticky bar
   - Most multi-column grids collapse to a single column
   - Services become vertical cards
   - Estimator swap arrow is hidden (not needed on stacked layout)
   - Footer stacks vertically and centers its content
   ============================================================= */
@media (max-width:768px) {
    section           { padding:4.5rem 0; }
    .container        { padding:0 6%; }

    /* Gallery */
    .gallery-grid         { grid-template-columns:repeat(2,1fr); grid-auto-rows:200px; }
    .gallery-item--tall   { grid-row:span 1; }
    .gallery-item--wide   { grid-column:span 2; }

    /* Mobile sticky bar */
    .mobile-bar       { display:flex; }
    .whatsapp-btn     { bottom:5.5rem; right:1rem; }
    section.contact   { padding-bottom:7rem; }
    footer.footer     { padding-bottom:7rem; }

    /* Hero */
    .hero-content     { padding:0 1.25rem; }
    .hero-value-props { gap:0.35rem; }

    /* Promise */
    .promise-grid     { grid-template-columns:1fr; gap:2px; }

    /* About */
    .about-stats      { flex-direction:row; gap:2rem; flex-wrap:wrap; }

    /* How It Works */
    .hiw-step         { padding:2rem 1rem; }

    /* Services */
    .services-grid    { grid-template-columns:1fr; }
    .service-card     { height:360px; }
    .service-link     { opacity:1; transform:translateY(0); }

    /* Fleet */
    .fleet-panel      { width:88vw; grid-template-columns:1fr; }
    .fleet-panel-img  { height:220px; }
    .fleet-panel-info { height:auto; padding:1.75rem; }
    .fleet-panel-info ul { grid-template-columns:1fr 1fr; }

    /* Comparison table */
    .comparison-table { min-width:480px; }
    .comparison-table th,
    .comparison-table td { padding:0.75rem 0.75rem; font-size:0.82rem; }

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

    /* Corporate */
    .corporate-card   { padding:1.75rem; }
    .corporate-areas  { gap:0.5rem; }

    /* Service Area */
    .area-grid        { grid-template-columns:1fr 1fr; }

    /* Photo Grid */
    .photo-grid       { grid-template-columns:1fr 1fr; grid-template-rows:180px 180px 180px; }
    .photo-cell-tall  { grid-column:1; grid-row:1/3; }
    .photo-cell-wide  { grid-column:1/3; grid-row:3; }

    /* Fleet custom note */
    .fleet-custom-note { padding:1.75rem 1.5rem; margin-top:2rem; }

    /* Scene filter */
    .scene-filter     { gap:0.5rem; flex-wrap:wrap; }
    .scene-btn        { padding:0.5rem 1rem; font-size:0.68rem; }

    /* Service area */
    .area-group-title { font-size:0.65rem; }

    /* Contact form */
    .contact-form     { padding:2rem 1.5rem; }
    .form-row         { grid-template-columns:1fr; }

    /* Time inputs */
    .form-group input[type="time"] { color-scheme:dark; padding:0.9rem 0; font-size:0.95rem; }

    /* Footer */
    .footer-inner     { flex-direction:column; gap:2rem; text-align:center; }
    .footer-nav       { justify-content:center; gap:1.25rem; flex-wrap:wrap; }
    .footer-bottom p  { font-size:0.68rem; line-height:1.8; }

    /* CTA strip */
    .cta-strip        { padding:5rem 0; }
    .cta-strip-line   { transform:none; }

    /* Exit overlay */
    .exit-card        { padding:2.5rem 1.75rem; }
    .exit-headline    { font-size:1.75rem; }

    /* Touch targets — minimum 44px height for all tappable elements */
    .btn-primary, .btn-outline, .scene-btn, .mobile-bar-btn { min-height:44px; }
    .nav-link         { min-height:44px; display:flex; align-items:center; color:#f5f5f5 !important; text-shadow:0 0 8px rgba(255,255,255,0.4) !important; }
}

/* =============================================================
   RESPONSIVE — 480px  (standard smartphones)
   Further reduces font sizes and padding for a comfortable
   reading experience on a typical phone screen.
   Service cards become shorter. Estimator fields stack vertically.
   Area grid drops to 1 column. Photo grid simplifies.
   ============================================================= */
@media (max-width:480px) {
    section           { padding:3.5rem 0; }
    .container        { padding:0 5%; }

    /* Gallery */
    .gallery-grid         { grid-template-columns:1fr 1fr; grid-auto-rows:160px; gap:4px; }
    .gallery-item--wide   { grid-column:span 2; }

    /* Hero */
    .hero-title       { font-size:2.2rem; }
    .hero-sub         { font-size:0.72rem; letter-spacing:0.15em; }
    .hero-value-props span { font-size:0.68rem; }
    .hero-phone       { font-size:0.75rem; }

    /* About */
    .about-stats      { flex-direction:column; gap:2rem; }
    .stat-number      { font-size:2.6rem; }

    /* How It Works */
    .hiw-icon         { width:60px; height:60px; }

    /* Services */
    .service-card     { height:320px; }
    .scene-btn        { padding:0.45rem 1rem; font-size:0.66rem; }
    .scene-filter     { gap:0.5rem; }

    /* Fleet */
    .fleet-panel      { width:92vw; }
    .fleet-panel-info ul { grid-template-columns:1fr; }

    /* Comparison table */
    .comparison-table { min-width:420px; }
    .comparison-table th,
    .comparison-table td { padding:0.65rem 0.6rem; font-size:0.78rem; }

    /* Reviews */
    .reviews-score    { font-size:2.8rem; }

    /* Corporate */
    .corporate-areas span { font-size:0.7rem; padding:0.4rem 0.75rem; }

    /* Service Area */
    .area-grid        { grid-template-columns:1fr; }

    /* Photo Grid */
    .photo-grid       { grid-template-columns:1fr; grid-template-rows:repeat(4,200px); }
    .photo-cell-tall, .photo-cell-wide { grid-column:1; grid-row:auto; }

    /* FAQ */
    .faq-q            { font-size:0.9rem; padding:1.2rem 0; }

    /* Fleet custom note */
    .fleet-custom-note { padding:1.5rem 1.25rem; }
    .fleet-custom-note p { font-size:0.88rem; }

    /* Service area — single column, smaller title */
    .area-group       { padding:1.25rem 0; }
    .area-group-title { font-size:0.62rem; letter-spacing:0.12em; }
    .area-group ul li { font-size:0.85rem; }

    /* Services heading */
    .services .section-header h2 { font-size:clamp(1.8rem,6vw,2.5rem); }

    /* Contact form */
    .contact-form     { padding:1.75rem 1.25rem; }
    .contact-form h3  { font-size:1.35rem; }

    /* Time inputs */
    .form-group input[type="time"] { font-size:0.9rem; }

    /* Footer */
    .footer           { padding:3.5rem 0 2rem; }
    .footer-rule      { margin-bottom:2.5rem; }
    .footer-nav       { gap:1rem; }
    .footer-nav a     { font-size:0.72rem; }

    /* CTA Strip */
    .cta-strip        { padding:4rem 0; }
    .cta-strip-line   { font-size:2.2rem; }

    /* Buttons */
    .btn-primary      { padding:0.85rem 1.75rem; font-size:0.78rem; }
    .btn-outline      { padding:0.75rem 1.5rem; font-size:0.78rem; }
}

/* =============================================================
   RESPONSIVE — 360px  (very small / older phones)
   Final size reductions for the smallest phones (e.g. Galaxy S5,
   iPhone SE 1st gen). Hero title shrinks further, logo shrinks,
   mobile bar text stays legible. You rarely need to edit this.
   ============================================================= */
@media (max-width:360px) {
    .hero-title       { font-size:1.95rem; }
    .nav-logo         { width:130px; }
    .mobile-bar-btn   { font-size:0.72rem; padding:0.75rem 0.5rem; }

    .contact-form     { padding:1.5rem 1rem; }
    .exit-card        { padding:2rem 1.25rem; }
    .exit-headline    { font-size:1.5rem; }
    .exit-number      { font-size:1.2rem; }
    .reviews-aggregate { flex-direction:column; gap:0.75rem; align-items:center; }
}

/* =============================================================
   REDUCED MOTION  (accessibility)
   Some users have "Reduce Motion" turned on in their OS settings
   (Settings → Accessibility → Motion on iPhone/Mac).
   This block disables all animations and transitions for those
   users so nothing flashes or moves unexpectedly.
   You do not need to edit this block.
   ============================================================= */
@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { transition:none!important; animation:none!important; }
    .fade-up, .scale-in { opacity:1; transform:none; }
    .hero-title .word, .hero-sub, .hero-cta-wrap, .hero-live-time, .hero-value-props { opacity:1; transform:none; }
}

/* =============================================================
   COOKIE CONSENT BANNER
   ============================================================= */
.cookie-banner { position:fixed; bottom:-120px; left:0; right:0; z-index:9999; background:var(--obsidian); border-top:1px solid rgba(201,168,76,0.25); padding:1.1rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; transition:bottom 0.4s ease; }
.cookie-banner.show { bottom:0; }
.cookie-banner p { font-size:0.82rem; color:rgba(247,244,239,0.65); line-height:1.6; margin:0; flex:1; min-width:200px; }
.cookie-banner p a { color:var(--champagne); text-decoration:underline; }
.cookie-banner-btns { display:flex; gap:0.75rem; flex-shrink:0; }
.cookie-accept { background:var(--champagne); color:var(--obsidian); border:none; padding:0.55rem 1.4rem; font-family:var(--sans); font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; border-radius:2px; transition:opacity 0.2s; }
.cookie-accept:hover { opacity:0.85; }
.cookie-decline { background:transparent; color:rgba(247,244,239,0.4); border:1px solid rgba(247,244,239,0.2); padding:0.55rem 1.2rem; font-family:var(--sans); font-size:0.78rem; font-weight:500; letter-spacing:0.08em; cursor:pointer; border-radius:2px; transition:all 0.2s; }
.cookie-decline:hover { color:rgba(247,244,239,0.7); border-color:rgba(247,244,239,0.4); }