/* =========================================================
   ENHANCE MY RIDE
   AUTO SPA & MOBILE DETAILING
   PREMIUM WEBSITE DESIGN SYSTEM
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root {
    --black: #050505;
    --black-soft: #090909;
    --black-light: #111111;
    --charcoal: #181818;

    --gold: #c9a227;
    --gold-light: #e2c45a;
    --gold-dark: #927316;

    --white: #ffffff;
    --white-soft: #f2f2f2;
    --gray: #a4a4a4;
    --gray-dark: #666666;

    --border: rgba(201, 162, 39, 0.25);

    --max-width: 1200px;

    --transition: 0.3s ease;
}


/* =========================================================
   RESET
   ========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: var(--black);

    color: var(--white);

    line-height: 1.6;

    overflow-x: hidden;
}


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


a {
    color: inherit;
    text-decoration: none;
}


button,
input,
textarea,
select {
    font: inherit;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {
    width: min(
        calc(100% - 40px),
        var(--max-width)
    );

    margin-inline: auto;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4 {
    line-height: 1.1;
    font-weight: 700;
}


h1 {
    font-size: clamp(3.5rem, 8vw, 7rem);
    letter-spacing: -0.045em;
}


h2 {
    font-size: clamp(2.3rem, 5vw, 4.5rem);
    letter-spacing: -0.035em;
}


h3 {
    font-size: 1.5rem;
}


p {
    color: var(--gray);
}


.eyebrow {
    color: var(--gold-light);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    margin-bottom: 18px;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.65),
            transparent
        );
}


.nav-container {
    min-height: 92px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}


/* =========================================================
   LOGO
   ========================================================= */

.logo {
    display: inline-flex;

    flex-direction: column;

    gap: 3px;

    flex-shrink: 0;
}


.logo-main {
    color: var(--white);

    font-size: 1rem;

    font-weight: 800;

    letter-spacing: 0.18em;

    line-height: 1;
}


.logo-sub {
    color: var(--gold-light);

    font-size: 0.5rem;

    font-weight: 600;

    letter-spacing: 0.22em;

    line-height: 1.2;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.main-nav {
    display: flex;

    align-items: center;

    gap: 30px;
}


.main-nav > a {
    position: relative;

    color: var(--white-soft);

    font-size: 0.8rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition: var(--transition);
}


.main-nav > a:not(.nav-cta)::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 1px;

    background: var(--gold-light);

    transition: var(--transition);
}


.main-nav > a:not(.nav-cta):hover,
.main-nav > a.active {
    color: var(--gold-light);
}


.main-nav > a:not(.nav-cta):hover::after,
.main-nav > a.active::after {
    width: 100%;
}


/* =========================================================
   NAV CTA
   ========================================================= */

.nav-cta {
    padding: 12px 20px;

    border: 1px solid var(--gold);

    color: var(--gold-light) !important;

    transition: var(--transition);
}


.nav-cta:hover {
    background: var(--gold);

    color: var(--black) !important;
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    background: rgba(0, 0, 0, 0.4);

    cursor: pointer;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;
}


.menu-toggle span {
    width: 20px;
    height: 2px;

    background: var(--white);

    transition: var(--transition);
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 70% 40%,
            rgba(201, 162, 39, 0.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #050505 0%,
            #111111 50%,
            #050505 100%
        );
}


.hero::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 5, 5, 0.98) 0%,
            rgba(5, 5, 5, 0.85) 45%,
            rgba(5, 5, 5, 0.35) 100%
        );

    z-index: 1;
}


.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.015) 0px,
            rgba(255, 255, 255, 0.015) 1px,
            transparent 1px,
            transparent 8px
        );

    pointer-events: none;
}


.hero-content {
    position: relative;

    z-index: 2;

    padding-top: 100px;

    max-width: 850px;
}


.hero h1 {
    margin-bottom: 25px;
}


.hero h1 span {
    color: var(--gold-light);
}


.hero-text {
    max-width: 650px;

    font-size: clamp(1rem, 2vw, 1.25rem);

    line-height: 1.8;

    margin-bottom: 35px;
}


.hero-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 28px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 52px;

    padding: 0 28px;

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    border: 1px solid transparent;

    transition: var(--transition);

    cursor: pointer;
}


.btn-primary {
    background: var(--gold);

    color: var(--black);

    border-color: var(--gold);
}


.btn-primary:hover {
    background: var(--gold-light);

    border-color: var(--gold-light);

    transform: translateY(-2px);
}


.btn-secondary {
    background: transparent;

    color: var(--white);

    border-color: rgba(255, 255, 255, 0.3);
}


.btn-secondary:hover {
    border-color: var(--gold);

    color: var(--gold-light);

    transform: translateY(-2px);
}


.hero-tagline {
    color: var(--white-soft);

    font-size: 0.8rem;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section {
    padding: 120px 0;
}


.section-dark {
    background: var(--black-soft);
}


/* =========================================================
   INTRO
   ========================================================= */

.intro {
    background: var(--black);
}


.intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 80px;

    align-items: start;
}


.intro-copy {
    max-width: 600px;
}


.intro-copy p {
    font-size: 1.05rem;

    line-height: 1.9;

    margin-bottom: 22px;
}


/* =========================================================
   TEXT LINK
   ========================================================= */

.text-link {
    display: inline-flex;

    color: var(--gold-light);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    transition: var(--transition);
}


.text-link:hover {
    color: var(--white);

    transform: translateX(5px);
}


/* =========================================================
   CENTER HEADINGS
   ========================================================= */

.center-heading {
    max-width: 750px;

    margin: 0 auto 65px;

    text-align: center;
}


.center-heading > p:not(.eyebrow) {
    max-width: 620px;

    margin: 20px auto 0;

    font-size: 1rem;

    line-height: 1.8;
}


/* =========================================================
   PACKAGE GRID
   ========================================================= */

.package-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
}


.package-card {
    position: relative;

    padding: 42px 34px;

    min-height: 390px;

    border: 1px solid rgba(255, 255, 255, 0.09);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.01)
        );

    transition: var(--transition);
}


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

    border-color: var(--border);
}


.package-card.featured {
    border-color: var(--gold);
}


.package-number {
    color: var(--gold);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.15em;

    margin-bottom: 50px;
}


.package-card h3 {
    margin-bottom: 10px;
}


.package-price {
    margin-bottom: 25px;

    font-size: 0.85rem;
}


.package-price strong {
    color: var(--gold-light);

    font-size: 1.25rem;
}


.package-card > p:not(.package-price) {
    margin-bottom: 30px;

    line-height: 1.8;
}


.package-badge {
    position: absolute;

    top: 0;
    right: 0;

    padding: 8px 14px;

    background: var(--gold);

    color: var(--black);

    font-size: 0.6rem;

    font-weight: 800;

    letter-spacing: 0.12em;
}


/* =========================================================
   FEATURES
   ========================================================= */

.features-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 35px;
}


.feature {
    padding-top: 10px;
}


.feature-icon {
    display: inline-flex;

    color: var(--gold-light);

    font-size: 1.3rem;

    margin-bottom: 22px;
}


.feature h3 {
    font-size: 1.15rem;

    margin-bottom: 14px;
}


.feature p {
    font-size: 0.9rem;

    line-height: 1.8;
}


/* =========================================================
   CTA
   ========================================================= */

.cta-section {
    position: relative;

    padding: 130px 0;

    background:
        radial-gradient(
            circle at center,
            rgba(201, 162, 39, 0.13),
            transparent 35%
        ),
        var(--black-light);

    text-align: center;

    border-top: 1px solid rgba(255, 255, 255, 0.06);

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}


.cta-content {
    max-width: 800px;
}


.cta-section h2 {
    margin-bottom: 22px;
}


.cta-section p:not(.eyebrow) {
    max-width: 600px;

    margin: 0 auto 30px;

    font-size: 1rem;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    background: #030303;

    padding-top: 80px;
}


.footer-grid {
    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr;

    gap: 60px;

    padding-bottom: 60px;
}


.footer-brand p {
    max-width: 420px;

    margin-top: 25px;

    font-size: 0.85rem;

    line-height: 1.8;
}


.footer-links {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
}


.footer-links h4 {
    color: var(--white);

    font-size: 0.8rem;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    margin-bottom: 10px;
}


.footer-links a {
    color: var(--gray);

    font-size: 0.8rem;

    transition: var(--transition);
}


.footer-links a:hover {
    color: var(--gold-light);
}


.footer-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 25px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.07);
}


.footer-bottom p {
    font-size: 0.7rem;

    color: var(--gray-dark);
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 950px) {

    .main-nav {
        gap: 18px;
    }


    .main-nav > a {
        font-size: 0.7rem;
    }


    .intro-grid {
        gap: 45px;
    }


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


    .package-card:last-child {
        grid-column: 1 / -1;
    }


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

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .container {
        width: min(
            calc(100% - 30px),
            var(--max-width)
        );
    }


    .site-header {
        background: rgba(5, 5, 5, 0.92);
    }


    .nav-container {
        min-height: 76px;
    }


    .menu-toggle {
        display: flex;
    }


    .main-nav {
        position: absolute;

        top: 76px;
        left: 0;

        width: 100%;

        padding: 20px 15px 25px;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        background: rgba(5, 5, 5, 0.98);

        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }


    .main-nav.open {
        display: flex;
    }


    .main-nav > a {
        padding: 15px;

        font-size: 0.75rem;
    }


    .main-nav > a:not(.nav-cta)::after {
        display: none;
    }


    .nav-cta {
        margin-top: 8px;

        text-align: center;
    }


    .hero {
        min-height: 850px;
    }


    .hero-content {
        padding-top: 120px;
    }


    .hero h1 {
        font-size: clamp(
            3.2rem,
            15vw,
            5rem
        );
    }


    .hero-text {
        font-size: 0.95rem;

        line-height: 1.7;
    }


    .hero-buttons {
        flex-direction: column;

        align-items: stretch;

        max-width: 350px;
    }


    .btn {
        width: 100%;
    }


    .section {
        padding: 85px 0;
    }


    .intro-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }


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


    .package-card:last-child {
        grid-column: auto;
    }


    .features-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .cta-section {
        padding: 90px 0;
    }


    .footer-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .logo-main {
        font-size: 0.85rem;
    }


    .logo-sub {
        font-size: 0.42rem;
    }


    .hero {
        min-height: 800px;
    }


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


    .package-card {
        padding: 32px 25px;
    }

}
```css
/* =========================================================
   SERVICES PAGE
   ========================================================= */


/* =========================================================
   PAGE HERO
   ========================================================= */

.page-hero {
    position: relative;

    min-height: 620px;

    display: flex;

    align-items: center;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(201, 162, 39, 0.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #050505 0%,
            #101010 50%,
            #050505 100%
        );

    overflow: hidden;
}


.page-hero::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 5, 5, 0.98),
            rgba(5, 5, 5, 0.70),
            rgba(5, 5, 5, 0.35)
        );
}


.page-hero-content {
    position: relative;

    z-index: 2;

    padding-top: 100px;
}


.page-hero h1 {
    margin-bottom: 25px;
}


.page-hero h1 span {
    color: var(--gold-light);
}


.page-hero-content > p:last-child {
    max-width: 600px;

    font-size: 1.1rem;

    line-height: 1.8;
}


/* =========================================================
   SERVICE PACKAGES
   ========================================================= */

.packages-section {
    background: var(--black);
}


.service-packages {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;

    align-items: stretch;
}


.service-package {
    position: relative;

    display: flex;

    flex-direction: column;

    padding: 42px 32px;

    border: 1px solid rgba(255, 255, 255, 0.09);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.008)
        );

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}


.service-package:hover {
    transform: translateY(-7px);

    border-color: rgba(201, 162, 39, 0.5);

    background:
        linear-gradient(
            145deg,
            rgba(201, 162, 39, 0.055),
            rgba(255, 255, 255, 0.01)
        );
}


.featured-package {
    border-color: var(--gold);

    box-shadow:
        0 0 0 1px rgba(201, 162, 39, 0.08);
}


.service-package-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 45px;
}


.service-number {
    color: var(--gold);

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 0.15em;
}


.service-level {
    color: var(--gray-dark);

    font-size: 0.6rem;

    font-weight: 700;

    letter-spacing: 0.16em;
}


.service-package h3 {
    font-size: 1.7rem;

    margin-bottom: 15px;
}


.service-price {
    display: flex;

    flex-direction: column;

    color: var(--gold-light);

    font-size: 2.5rem;

    font-weight: 700;

    line-height: 1;

    margin-bottom: 22px;
}


.service-price span {
    margin-top: 8px;

    color: var(--gray-dark);

    font-size: 0.65rem;

    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.service-description {
    min-height: 95px;

    color: var(--gray);

    font-size: 0.9rem;

    line-height: 1.8;
}


.service-divider {
    width: 100%;

    height: 1px;

    background:
        rgba(255, 255, 255, 0.08);

    margin: 25px 0 28px;
}


.service-package h4 {
    color: var(--white);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    margin-bottom: 15px;
}


.service-list {
    display: flex;

    flex-direction: column;

    gap: 11px;

    margin-bottom: 28px;

    list-style: none;
}


.service-list li {
    position: relative;

    padding-left: 20px;

    color: var(--gray);

    font-size: 0.82rem;

    line-height: 1.5;
}


.service-list li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 0;

    color: var(--gold-light);

    font-weight: 700;
}


.service-button {
    width: 100%;

    margin-top: auto;
}


.service-note {
    margin-top: auto;

    margin-bottom: 28px;

    padding: 15px;

    border-left: 2px solid var(--gold);

    background:
        rgba(201, 162, 39, 0.045);

    color: var(--gray);

    font-size: 0.76rem;

    line-height: 1.7;
}


.service-package-badge {
    position: absolute;

    top: 0;
    right: 0;

    padding: 9px 15px;

    background: var(--gold);

    color: var(--black);

    font-size: 0.58rem;

    font-weight: 800;

    letter-spacing: 0.13em;
}


/* =========================================================
   ADD-ONS
   ========================================================= */

.addons-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


.addon-card {
    position: relative;

    min-height: 260px;

    padding: 32px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    background:
        rgba(255, 255, 255, 0.015);

    transition: var(--transition);
}


.addon-card:hover {
    border-color: var(--border);

    transform: translateY(-5px);
}


.addon-price {
    color: var(--gold-light);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.13em;

    margin-bottom: 22px;
}


.addon-card h3 {
    font-size: 1.25rem;

    margin-bottom: 14px;
}


.addon-card p {
    font-size: 0.83rem;

    line-height: 1.8;

    margin-bottom: 25px;
}


.addon-label {
    position: absolute;

    left: 32px;
    bottom: 28px;

    color: var(--gray-dark);

    font-size: 0.58rem;

    font-weight: 700;

    letter-spacing: 0.14em;
}


/* =========================================================
   SERVICE NOTE
   ========================================================= */

.service-note-section {
    padding: 100px 0;

    background: var(--black);
}


.service-note-box {
    max-width: 900px;

    margin: auto;

    padding: 60px;

    border: 1px solid rgba(201, 162, 39, 0.3);

    background:
        linear-gradient(
            145deg,
            rgba(201, 162, 39, 0.055),
            rgba(255, 255, 255, 0.012)
        );

    text-align: center;
}


.service-note-box h2 {
    max-width: 700px;

    margin: 0 auto 25px;
}


.service-note-box > p:not(.eyebrow) {
    max-width: 700px;

    margin: 0 auto 32px;

    font-size: 0.95rem;

    line-height: 1.9;
}


/* =========================================================
   SERVICES RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .service-packages {
        grid-template-columns:
            1fr 1fr;
    }


    .service-package:last-child {
        grid-column: 1 / -1;

        max-width: 600px;

        width: 100%;

        margin-inline: auto;
    }


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

}


@media (max-width: 760px) {

    .page-hero {
        min-height: 550px;
    }


    .page-hero-content {
        padding-top: 100px;
    }


    .page-hero h1 {
        font-size: clamp(
            3.2rem,
            15vw,
            5rem
        );
    }


    .service-packages {
        grid-template-columns: 1fr;
    }


    .service-package:last-child {
        grid-column: auto;

        max-width: none;
    }


    .service-description {
        min-height: auto;
    }


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


    .addon-card {
        min-height: 240px;
    }


    .service-note-box {
        padding: 40px 25px;
    }

}


@media (max-width: 420px) {

    .service-package {
        padding: 32px 24px;
    }


    .service-price {
        font-size: 2.2rem;
    }


    .service-note-box {
        padding: 35px 20px;
    }

}
```css
/* =========================================================
   GALLERY PAGE
   ========================================================= */


/* =========================================================
   GALLERY HERO
   ========================================================= */

.gallery-hero {
    background:
        radial-gradient(
            circle at 70% 40%,
            rgba(201, 162, 39, 0.13),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #050505 0%,
            #111111 50%,
            #050505 100%
        );
}


/* =========================================================
   GALLERY SECTION
   ========================================================= */

.gallery-section {
    background: var(--black);
}


/* =========================================================
   FEATURED DETAIL
   ========================================================= */

.featured-detail {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(0, 0.75fr);

    min-height: 560px;

    margin-bottom: 70px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.008)
        );
}


.featured-detail-image {
    min-height: 560px;

    background: #0b0b0b;
}


.featured-detail-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 55px;
}


.featured-detail-content h2 {
    margin-bottom: 12px;
}


.detail-location {
    color: var(--gold-light);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    margin-bottom: 25px;
}


.featured-detail-content > p:not(.eyebrow):not(.detail-location) {
    font-size: 0.95rem;

    line-height: 1.9;

    margin-bottom: 28px;
}


/* =========================================================
   DETAIL HIGHLIGHTS
   ========================================================= */

.detail-highlights {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-bottom: 35px;
}


.detail-highlights span {
    color: var(--gray);

    font-size: 0.75rem;

    line-height: 1.5;
}


.detail-highlights span::first-letter {
    color: var(--gold-light);
}


/* =========================================================
   PHOTO PLACEHOLDERS
   ========================================================= */

.photo-placeholder {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 260px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 10px;

    text-align: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(201, 162, 39, 0.10),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #0c0c0c,
            #171717
        );
}


.photo-placeholder::before {
    content: "";

    position: absolute;

    inset: 15px;

    border: 1px dashed rgba(201, 162, 39, 0.3);

    pointer-events: none;
}


.photo-placeholder span {
    position: relative;

    z-index: 1;

    color: var(--gold-light);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.photo-placeholder small {
    position: relative;

    z-index: 1;

    color: var(--gray-dark);

    font-size: 0.65rem;

    letter-spacing: 0.08em;
}


/* =========================================================
   GALLERY GRID
   ========================================================= */

.gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.gallery-card {
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);

    background: var(--black-soft);

    transition: var(--transition);
}


.gallery-card:hover {
    transform: translateY(-6px);

    border-color: rgba(201, 162, 39, 0.35);
}


.gallery-image {
    height: 390px;

    overflow: hidden;
}


.gallery-image .photo-placeholder {
    min-height: 390px;
}


.gallery-card-content {
    padding: 27px 30px 30px;
}


.gallery-category {
    display: block;

    color: var(--gold-light);

    font-size: 0.6rem;

    font-weight: 800;

    letter-spacing: 0.15em;

    margin-bottom: 10px;
}


.gallery-card-content h3 {
    margin-bottom: 8px;
}


.gallery-card-content p {
    font-size: 0.82rem;
}


/* =========================================================
   TRANSFORMATION
   ========================================================= */

.transformation-grid {
    display: grid;

    grid-template-columns:
        1fr
        70px
        1fr;

    align-items: center;

    gap: 20px;

    max-width: 1050px;

    margin: auto;
}


.transformation-card {
    border: 1px solid rgba(255, 255, 255, 0.08);

    background: var(--black);
}


.transformation-card .photo-placeholder {
    height: 430px;

    min-height: 430px;
}


.transformation-card h3 {
    padding: 18px 22px;

    font-size: 0.8rem;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.transformation-arrow {
    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--gold-light);

    font-size: 2rem;
}


/* =========================================================
   GALLERY RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .featured-detail {
        grid-template-columns: 1fr;
    }


    .featured-detail-image {
        min-height: 450px;
    }


    .featured-detail-content {
        padding: 45px;
    }


    .transformation-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .transformation-arrow {
        transform: rotate(90deg);

        height: 40px;
    }

}


@media (max-width: 760px) {

    .featured-detail {
        margin-bottom: 50px;
    }


    .featured-detail-image {
        min-height: 350px;
    }


    .featured-detail-content {
        padding: 35px 25px;
    }


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


    .gallery-image,
    .gallery-image .photo-placeholder {
        height: 320px;

        min-height: 320px;
    }


    .transformation-card .photo-placeholder {
        height: 330px;

        min-height: 330px;
    }

}


@media (max-width: 420px) {

    .featured-detail-content {
        padding: 30px 20px;
    }


    .detail-highlights {
        grid-template-columns: 1fr;
    }


    .gallery-card-content {
        padding: 23px;
    }

}
```css id="2x7x9v"
/* =========================================================
   SERVICE AREA PAGE
   ========================================================= */


/* =========================================================
   SERVICE AREA HERO
   ========================================================= */

.service-area-hero {
    background:
        radial-gradient(
            circle at 72% 45%,
            rgba(201, 162, 39, 0.12),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #050505 0%,
            #111111 50%,
            #050505 100%
        );
}


/* =========================================================
   SERVICE AREA INTRO
   ========================================================= */

.service-area-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 80px;

    align-items: start;
}


.service-area-intro > div:last-child {
    padding-top: 8px;
}


.service-area-intro > div:last-child p {
    margin-bottom: 22px;

    font-size: 0.98rem;

    line-height: 1.9;
}


/* =========================================================
   AREA GRID
   ========================================================= */

.area-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


.area-card {
    position: relative;

    min-height: 285px;

    padding: 32px;

    display: flex;

    flex-direction: column;

    border: 1px solid rgba(255, 255, 255, 0.08);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.008)
        );

    transition: var(--transition);
}


.area-card:hover {
    transform: translateY(-6px);

    border-color: rgba(201, 162, 39, 0.45);
}


.area-number {
    color: var(--gold);

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.15em;

    margin-bottom: 45px;
}


.area-card h3 {
    font-size: 1.45rem;

    margin-bottom: 14px;
}


.area-card p {
    font-size: 0.82rem;

    line-height: 1.8;

    margin-bottom: 25px;
}


.area-label {
    margin-top: auto;

    color: var(--gray-dark);

    font-size: 0.57rem;

    font-weight: 800;

    letter-spacing: 0.13em;
}


.area-card-cta {
    border-color: rgba(201, 162, 39, 0.3);

    background:
        linear-gradient(
            145deg,
            rgba(201, 162, 39, 0.07),
            rgba(255, 255, 255, 0.01)
        );
}


.area-card-cta .text-link {
    margin-top: auto;
}


/* =========================================================
   MOBILE PROCESS
   ========================================================= */

.mobile-process {
    display: grid;

    grid-template-columns:
        1fr
        45px
        1fr
        45px
        1fr
        45px
        1fr;

    align-items: center;

    gap: 10px;
}


.process-step {
    text-align: center;
}


.process-step > span {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom: 22px;

    border: 1px solid var(--gold);

    color: var(--gold-light);

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.08em;
}


.process-step h3 {
    font-size: 1rem;

    margin-bottom: 12px;
}


.process-step p {
    font-size: 0.78rem;

    line-height: 1.8;
}


.process-line {
    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(201, 162, 39, 0.5),
            transparent
        );
}


/* =========================================================
   REQUIREMENTS
   ========================================================= */

.requirements-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);

    gap: 90px;

    align-items: start;
}


.requirements-list {
    display: flex;

    flex-direction: column;

    gap: 30px;
}


.requirement {
    display: grid;

    grid-template-columns: 45px 1fr;

    gap: 20px;

    padding-bottom: 30px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}


.requirement:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}


.requirement > span {
    color: var(--gold);

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.12em;
}


.requirement h3 {
    font-size: 1rem;

    margin-bottom: 10px;
}


.requirement p {
    font-size: 0.8rem;

    line-height: 1.8;
}


/* =========================================================
   SERVICE AREA RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

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


    .mobile-process {
        grid-template-columns:
            1fr 40px 1fr;

        row-gap: 45px;
    }


    .mobile-process .process-step:nth-of-type(3) {
        grid-column: 1;
    }


    .mobile-process .process-step:nth-of-type(5) {
        grid-column: 3;
    }

}


@media (max-width: 800px) {

    .service-area-intro {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .requirements-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

}


@media (max-width: 760px) {

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


    .area-card {
        min-height: 250px;
    }


    .mobile-process {
        display: flex;

        flex-direction: column;

        gap: 0;
    }


    .process-step {
        max-width: 450px;

        margin-inline: auto;
    }


    .process-line {
        width: 1px;

        height: 45px;

        background:
            linear-gradient(
                to bottom,
                transparent,
                rgba(201, 162, 39, 0.5),
                transparent
            );
    }


    .requirements-grid {
        gap: 45px;
    }

}


@media (max-width: 420px) {

    .area-card {
        padding: 27px 23px;
    }


    .requirement {
        grid-template-columns:
            35px 1fr;

        gap: 15px;
    }

}
/* =========================================================
   ABOUT PAGE
   ========================================================= */


/* =========================================================
   ABOUT HERO
   ========================================================= */

.about-hero {
    background:
        radial-gradient(
            circle at 70% 42%,
            rgba(201, 162, 39, 0.12),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #050505 0%,
            #111111 50%,
            #050505 100%
        );
}


/* =========================================================
   ABOUT STORY
   ========================================================= */

.about-story {
    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);

    gap: 90px;

    align-items: start;
}


.about-story-content {
    padding-top: 8px;
}


.about-story-content p {
    margin-bottom: 24px;

    font-size: 0.98rem;

    line-height: 1.95;
}


.about-story-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   VALUES
   ========================================================= */

.values-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;
}


.value-card {
    min-height: 300px;

    padding: 32px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.008)
        );

    transition: var(--transition);
}


.value-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(201, 162, 39, 0.45);
}


.value-number {
    display: block;

    color: var(--gold);

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.15em;

    margin-bottom: 55px;
}


.value-card h3 {
    font-size: 1.3rem;

    margin-bottom: 15px;
}


.value-card p {
    font-size: 0.8rem;

    line-height: 1.8;
}


/* =========================================================
   WHY MOBILE
   ========================================================= */

.why-mobile-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 80px;

    align-items: stretch;
}


.why-mobile-content {
    display: flex;

    flex-direction: column;

    justify-content: center;
}


.why-mobile-content > p:not(.eyebrow) {
    max-width: 620px;

    margin-bottom: 22px;

    font-size: 0.95rem;

    line-height: 1.9;
}


.why-mobile-content .text-link {
    margin-top: 10px;
}


.why-mobile-feature {
    min-height: 480px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 35px;

    border: 1px solid rgba(201, 162, 39, 0.25);

    background:
        radial-gradient(
            circle at center,
            rgba(201, 162, 39, 0.12),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #0b0b0b,
            #151515
        );
}


.why-mobile-box {
    width: 100%;

    padding: 65px 35px;

    border: 1px solid rgba(255, 255, 255, 0.09);

    text-align: center;

    background:
        rgba(5, 5, 5, 0.6);
}


.why-mobile-box span {
    display: block;

    color: var(--gold-light);

    font-size: 0.62rem;

    font-weight: 800;

    letter-spacing: 0.17em;

    margin-bottom: 25px;
}


.why-mobile-box strong {
    display: block;

    color: var(--white);

    font-family: var(--font-heading);

    font-size: clamp(
        2rem,
        4vw,
        3.2rem
    );

    line-height: 1.1;

    margin-bottom: 20px;
}


.why-mobile-box p {
    color: var(--gold-light);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


/* =========================================================
   VEHICLE TYPES
   ========================================================= */

.vehicle-types {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 15px;

    max-width: 1000px;

    margin: auto;
}


.vehicle-type {
    min-height: 170px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 27px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    background:
        rgba(255, 255, 255, 0.015);

    transition: var(--transition);
}


.vehicle-type:hover {
    border-color:
        rgba(201, 162, 39, 0.4);

    transform: translateY(-4px);
}


.vehicle-type span {
    color: var(--gold);

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 0.15em;
}


.vehicle-type h3 {
    margin: 0;

    font-size: 1.05rem;
}


/* =========================================================
   ABOUT RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

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


    .about-story,
    .why-mobile-grid {
        gap: 55px;
    }

}


@media (max-width: 800px) {

    .about-story {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .why-mobile-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .why-mobile-feature {
        min-height: 400px;
    }


    .vehicle-types {
        grid-template-columns:
            1fr 1fr;
    }

}


@media (max-width: 600px) {

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


    .value-card {
        min-height: 250px;
    }


    .value-number {
        margin-bottom: 40px;
    }


    .vehicle-types {
        grid-template-columns: 1fr;
    }


    .vehicle-type {
        min-height: 145px;
    }


    .why-mobile-feature {
        min-height: 350px;

        padding: 20px;
    }


    .why-mobile-box {
        padding: 50px 25px;
    }

}


@media (max-width: 420px) {

    .about-story-content p,
    .why-mobile-content > p:not(.eyebrow) {
        font-size: 0.88rem;
    }


    .why-mobile-box {
        padding: 45px 20px;
    }
}
/* =========================================================
   QUOTE PAGE
   ========================================================= */


/* =========================================================
   QUOTE HERO
   ========================================================= */

.quote-hero {
    background:
        radial-gradient(
            circle at 70% 42%,
            rgba(201, 162, 39, 0.14),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #050505 0%,
            #111111 50%,
            #050505 100%
        );
}


/* =========================================================
   QUOTE LAYOUT
   ========================================================= */

.quote-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    gap: 80px;

    align-items: start;
}


.quote-info {
    position: sticky;

    top: 120px;
}


.quote-info > p:not(.eyebrow) {
    max-width: 600px;

    margin-top: 25px;

    margin-bottom: 40px;

    font-size: 0.95rem;

    line-height: 1.9;
}


/* =========================================================
   QUOTE POINTS
   ========================================================= */

.quote-points {
    display: flex;

    flex-direction: column;

    gap: 25px;
}


.quote-point {
    display: grid;

    grid-template-columns: 40px 1fr;

    gap: 18px;

    padding-bottom: 25px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}


.quote-point:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}


.quote-point > span {
    color: var(--gold);

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 0.12em;
}


.quote-point h3 {
    font-size: 0.9rem;

    margin-bottom: 7px;
}


.quote-point p {
    font-size: 0.76rem;

    line-height: 1.7;
}


/* =========================================================
   FORM CONTAINER
   ========================================================= */

.quote-form-container {
    border: 1px solid rgba(201, 162, 39, 0.22);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.008)
        );
}


.quote-form-header {
    padding: 38px 40px 30px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}


.quote-form-header h2 {
    margin-bottom: 10px;
}


.quote-form-header p:last-child {
    font-size: 0.78rem;
}


/* =========================================================
   TALLY PLACEHOLDER
   ========================================================= */

.tally-container {
    min-height: 600px;

    padding: 25px;
}


.tally-placeholder {
    min-height: 550px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 12px;

    text-align: center;

    border: 1px dashed rgba(201, 162, 39, 0.3);

    background:
        radial-gradient(
            circle at center,
            rgba(201, 162, 39, 0.07),
            transparent 45%
        );
}


.tally-placeholder span {
    color: var(--gold-light);

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.17em;
}


.tally-placeholder p {
    color: var(--white);

    font-size: 1rem;
}


.tally-placeholder small {
    max-width: 300px;

    color: var(--gray-dark);

    font-size: 0.68rem;

    line-height: 1.7;
}


/* =========================================================
   QUOTE PACKAGES
   ========================================================= */

.quote-packages {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 50px;

    align-items: center;

    padding: 50px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    background:
        rgba(255, 255, 255, 0.015);
}


.quote-packages h2 {
    color: var(--gold-light);

    font-size: 3.5rem;

    margin-bottom: 10px;
}


.quote-packages p:not(.eyebrow) {
    max-width: 400px;

    font-size: 0.85rem;

    line-height: 1.8;
}


.quote-package-links {
    display: flex;

    flex-direction: column;

    gap: 15px;
}


.quote-package-links a {
    display: block;

    padding: 18px 20px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    color: var(--gray);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.05em;

    transition: var(--transition);
}


.quote-package-links a:hover {
    color: var(--gold-light);

    border-color:
        rgba(201, 162, 39, 0.45);

    transform: translateX(5px);
}


/* =========================================================
   QUOTE RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .quote-layout {
        gap: 50px;
    }

}


@media (max-width: 800px) {

    .quote-layout {
        grid-template-columns: 1fr;
    }


    .quote-info {
        position: static;
    }


    .quote-info > p:not(.eyebrow) {
        margin-bottom: 35px;
    }


    .quote-packages {
        grid-template-columns: 1fr;

        padding: 35px;
    }

}


@media (max-width: 600px) {

    .quote-form-header {
        padding: 30px 25px 25px;
    }


    .tally-container {
        min-height: 500px;

        padding: 15px;
    }


    .tally-placeholder {
        min-height: 470px;

        padding: 25px;
    }


    .quote-packages {
        padding: 30px 25px;
    }


    .quote-packages h2 {
        font-size: 3rem;
    }

}


@media (max-width: 420px) {

    .quote-point {
        grid-template-columns:
            30px 1fr;

        gap: 12px;
    }


    .quote-form-header {
        padding: 27px 20px 22px;
    }


    .tally-container {
        padding: 10px;
    }
}
/* =========================================================
   GLOBAL NAVIGATION FUNCTIONALITY
   ========================================================= */


/* =========================================================
   HEADER SCROLL STATE
   ========================================================= */

.site-header.scrolled {
    background:
        rgba(5, 5, 5, 0.96);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.35);
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

@media (max-width: 800px) {

    .main-nav {
        position: fixed;

        top: 0;
        right: 0;

        width: min(360px, 88vw);

        height: 100vh;

        padding:
            110px
            30px
            40px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 24px;

        background:
            rgba(5, 5, 5, 0.98);

        border-left:
            1px solid rgba(201, 162, 39, 0.2);

        box-shadow:
            -20px 0 60px rgba(0, 0, 0, 0.45);

        transform:
            translateX(100%);

        visibility: hidden;

        transition:
            transform 0.35s ease,
            visibility 0.35s ease;

        z-index: 1000;
    }


    .main-nav.is-open {
        transform:
            translateX(0);

        visibility: visible;
    }


    .main-nav a {
        width: 100%;

        padding:
            8px
            0;

        font-size: 0.85rem;
    }


    .main-nav .nav-cta {
        width: auto;

        margin-top: 10px;
    }


    /* =============================================
       MENU BUTTON
       ============================================= */

    .menu-toggle {
        position: relative;

        z-index: 1100;

        width: 45px;
        height: 45px;

        display: flex;

        align-items: center;

        justify-content: center;

        flex-direction: column;

        gap: 6px;

        border: 1px solid
            rgba(201, 162, 39, 0.25);

        background: transparent;

        cursor: pointer;
    }


    .menu-toggle span {
        display: block;

        width: 19px;
        height: 1px;

        background:
            var(--white);

        transition:
            transform 0.3s ease,
            opacity 0.3s ease;
    }


    .menu-toggle.is-open span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }


    .menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }


    .menu-toggle.is-open span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }


    body.menu-open {
        overflow: hidden;
    }

}


/* =========================================================
   DESKTOP MENU BUTTON
   ========================================================= */

@media (min-width: 801px) {

    .menu-toggle {
        display: none;
    }
}
/* =========================================================
   FLOATING MOBILE CALL BUTTON
   ========================================================= */

.mobile-call-button {
    position: fixed;

    right: 18px;
    bottom: 18px;

    z-index: 900;

    width: 62px;
    height: 62px;

    display: none;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 3px;

    border: 1px solid rgba(255, 255, 255, 0.25);

    background: var(--gold);

    color: #050505;

    text-decoration: none;

    border-radius: 50%;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.45);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.mobile-call-button:hover {
    transform: translateY(-4px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.55);
}


.mobile-call-button .call-icon {
    font-size: 1.15rem;

    line-height: 1;
}


.mobile-call-button > span:last-child {
    font-size: 0.5rem;

    font-weight: 900;

    letter-spacing: 0.1em;
}


/* =========================================================
   SHOW ON MOBILE ONLY
   ========================================================= */

@media (max-width: 800px) {

    .mobile-call-button {
        display: flex;
    }

}


/* =========================================================
   EXTRA SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .mobile-call-button {
        right: 14px;
        bottom: 14px;

        width: 56px;
        height: 56px;
    }
}
/* =========================================================
   ENHANCE MY RIDE
   HOMEPAGE DESIGN SYSTEM
   ========================================================= */


/* =========================================================
   HOME HERO
   ========================================================= */

.home-hero {
    position: relative;

    min-height: calc(100vh - 82px);

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(201, 162, 39, 0.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(255, 255, 255, 0.035),
            transparent 28%
        ),
        #050505;
}


.hero-background {
    position: absolute;

    inset: 0;

    pointer-events: none;
}


.hero-glow {
    position: absolute;

    width: 650px;
    height: 650px;

    right: -180px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(201, 162, 39, 0.12),
            transparent 65%
        );

    filter: blur(10px);
}


.hero-grid {
    position: absolute;

    inset: 0;

    opacity: 0.15;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to right,
            black,
            transparent 75%
        );
}


.home-hero-content {
    position: relative;

    z-index: 2;

    width: 100%;

    padding-top: 80px;

    padding-bottom: 110px;
}


.hero-copy {
    max-width: 760px;
}


.hero-copy h1 {
    max-width: 800px;

    margin: 18px 0 25px;

    font-size:
        clamp(
            4rem,
            9vw,
            8.5rem
        );

    line-height: 0.88;

    letter-spacing: -0.055em;
}


.hero-copy h1 span {
    display: block;

    color: var(--gold-light);
}


.hero-description {
    max-width: 600px;

    color: var(--gray);

    font-size:
        clamp(
            0.95rem,
            1.4vw,
            1.1rem
        );

    line-height: 1.8;

    margin-bottom: 35px;
}


.hero-actions {
    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;
}


.hero-trust {
    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 45px;
}


.hero-trust span {
    color: var(--gray-dark);

    font-size: 0.58rem;

    font-weight: 800;

    letter-spacing: 0.16em;
}


.hero-trust span::before {
    content: "•";

    margin-right: 9px;

    color: var(--gold);
}


.hero-trust span:first-child::before {
    display: none;
}


.hero-scroll {
    position: absolute;

    z-index: 3;

    left: 50%;

    bottom: 30px;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;
}


.hero-scroll span {
    color: var(--gray-dark);

    font-size: 0.55rem;

    font-weight: 800;

    letter-spacing: 0.2em;
}


.hero-scroll div {
    width: 1px;

    height: 45px;

    background:
        linear-gradient(
            to bottom,
            var(--gold),
            transparent
        );
}


/* =========================================================
   HOME INTRO
   ========================================================= */

.home-intro {
    background: #080808;
}


.home-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 100px;

    align-items: start;
}


.home-intro-grid h2 {
    max-width: 600px;

    font-size:
        clamp(
            2.7rem,
            5vw,
            5rem
        );

    line-height: 0.98;

    letter-spacing: -0.04em;
}


.home-intro-grid > div:last-child {
    padding-top: 15px;
}


.intro-large {
    color: var(--white);

    font-family: var(--font-heading);

    font-size:
        clamp(
            1.3rem,
            2.2vw,
            1.8rem
        );

    line-height: 1.35;

    margin-bottom: 22px;
}


.home-intro-grid > div:last-child p:not(.intro-large) {
    max-width: 600px;

    margin-bottom: 25px;

    line-height: 1.9;
}


/* =========================================================
   PACKAGE SECTION
   ========================================================= */

.center-heading {
    max-width: 700px;

    margin:
        0 auto 55px;

    text-align: center;
}


.center-heading h2 {
    margin:
        12px 0 18px;

    font-size:
        clamp(
            2.4rem,
            5vw,
            4.5rem
        );

    line-height: 1;

    letter-spacing: -0.04em;
}


.center-heading > p:last-child {
    max-width: 550px;

    margin: auto;

    font-size: 0.9rem;

    line-height: 1.8;
}


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


.home-package-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


.home-package {
    position: relative;

    padding: 35px;

    min-height: 600px;

    display: flex;

    flex-direction: column;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.008)
        );

    transition:
        transform 0.35s ease,
        border-color 0.35s ease;
}


.home-package:hover {
    transform: translateY(-8px);

    border-color:
        rgba(201, 162, 39, 0.4);
}


.featured-package {
    border-color:
        rgba(201, 162, 39, 0.35);

    background:
        linear-gradient(
            145deg,
            rgba(201, 162, 39, 0.08),
            rgba(255, 255, 255, 0.012)
        );
}


.package-top {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 50px;
}


.package-number {
    color: var(--gold);

    font-size: 0.65rem;

    font-weight: 900;

    letter-spacing: 0.12em;
}


.package-label {
    color: var(--gray-dark);

    font-size: 0.55rem;

    font-weight: 900;

    letter-spacing: 0.14em;
}


.featured-package .package-label {
    color: var(--gold-light);
}


.home-package h3 {
    font-size: 1.55rem;

    margin-bottom: 12px;
}


.package-price {
    color: var(--gold-light);

    font-family: var(--font-heading);

    font-size: 4rem;

    line-height: 1;

    margin-bottom: 22px;
}


.package-price sup {
    font-family: var(--font-body);

    font-size: 1.1rem;

    vertical-align: top;

    position: relative;

    top: 10px;
}


.home-package > p {
    min-height: 95px;

    font-size: 0.78rem;

    line-height: 1.8;
}


.home-package ul {
    display: flex;

    flex-direction: column;

    gap: 13px;

    margin:
        10px 0 35px;

    padding: 0;

    list-style: none;
}


.home-package li {
    position: relative;

    padding-left: 20px;

    color: var(--gray);

    font-size: 0.72rem;

    line-height: 1.5;
}


.home-package li::before {
    content: "✓";

    position: absolute;

    left: 0;

    color: var(--gold);

    font-weight: 900;
}


.package-link {
    margin-top: auto;

    padding-top: 20px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);

    color: var(--gold-light);

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.packages-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 25px;
}


.packages-bottom p {
    color: var(--gray-dark);

    font-size: 0.65rem;
}


/* =========================================================
   TRANSFORMATIONS
   ========================================================= */

.transformation-preview-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


.transformation-preview {
    border:
        1px solid rgba(255, 255, 255, 0.08);

    background: #0b0b0b;

    overflow: hidden;
}


.home-photo-placeholder {
    aspect-ratio: 4 / 3;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 8px;

    background:
        radial-gradient(
            circle at center,
            rgba(201, 162, 39, 0.1),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            #111111,
            #050505
        );

    border-bottom:
        1px solid rgba(201, 162, 39, 0.15);
}


.home-photo-placeholder span {
    color: var(--gold-light);

    font-family: var(--font-heading);

    font-size: 1.1rem;

    letter-spacing: 0.06em;
}


.home-photo-placeholder small {
    color: var(--gray-dark);

    font-size: 0.52rem;

    font-weight: 800;

    letter-spacing: 0.15em;
}


.transformation-preview-content {
    padding: 25px;
}


.transformation-preview-content > span {
    color: var(--gold);

    font-size: 0.55rem;

    font-weight: 900;

    letter-spacing: 0.14em;
}


.transformation-preview-content h3 {
    margin:
        10px 0 5px;

    font-size: 1.15rem;
}


.transformation-preview-content p {
    color: var(--gray-dark);

    font-size: 0.7rem;
}


.center-link {
    display: flex;

    justify-content: center;

    margin-top: 45px;
}


/* =========================================================
   ADD-ON SECTION
   ========================================================= */

.addon-grid {
    display: grid;

    grid-template-columns:
        1fr 0.8fr;

    gap: 100px;

    align-items: center;
}


.addon-grid > div:first-child h2 {
    margin:
        12px 0 20px;

    font-size:
        clamp(
            2.7rem,
            5vw,
            5rem
        );

    line-height: 0.98;

    letter-spacing: -0.04em;
}


.addon-grid > div:first-child > p:not(.eyebrow) {
    max-width: 570px;

    margin-bottom: 25px;

    font-size: 0.9rem;

    line-height: 1.9;
}


.addon-card {
    padding: 45px;

    border:
        1px solid rgba(201, 162, 39, 0.3);

    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(201, 162, 39, 0.12),
            transparent 45%
        ),
        #0a0a0a;
}


.addon-card > span {
    color: var(--gold);

    font-size: 0.55rem;

    font-weight: 900;

    letter-spacing: 0.16em;
}


.addon-card h3 {
    margin:
        22px 0 12px;

    font-size: 1.6rem;
}


.addon-card strong {
    display: block;

    color: var(--gold-light);

    font-family: var(--font-heading);

    font-size: 3rem;

    line-height: 1;

    margin-bottom: 5px;
}


.addon-card > p {
    font-size: 0.72rem;

    line-height: 1.8;
}


.addon-divider {
    width: 100%;

    height: 1px;

    margin: 30px 0;

    background:
        rgba(255, 255, 255, 0.08);
}


/* =========================================================
   HOME VALUES
   ========================================================= */

.home-values {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


.home-value {
    padding: 35px;

    border:
        1px solid rgba(255, 255, 255, 0.08);
}


.home-value > span {
    color: var(--gold);

    font-size: 0.6rem;

    font-weight: 900;

    letter-spacing: 0.14em;
}


.home-value h3 {
    margin:
        45px 0 14px;

    font-size: 1.15rem;
}


.home-value p {
    font-size: 0.75rem;

    line-height: 1.8;
}


/* =========================================================
   SERVICE AREA
   ========================================================= */

.service-area-home-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    align-items: center;
}


.service-area-home-grid h2 {
    margin:
        12px 0 20px;

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.5rem
        );

    line-height: 1;

    letter-spacing: -0.04em;
}


.service-area-home-grid > div:first-child > p:not(.eyebrow) {
    max-width: 550px;

    margin-bottom: 25px;

    font-size: 0.9rem;

    line-height: 1.9;
}


.area-highlight {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    border:
        1px solid rgba(201, 162, 39, 0.22);
}


.area-highlight div {
    min-height: 150px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    text-align: center;

    color: var(--gray);

    font-size: 0.65rem;

    font-weight: 900;

    letter-spacing: 0.12em;

    border:
        1px solid rgba(255, 255, 255, 0.06);

    transition:
        color 0.25s ease,
        background 0.25s ease;
}


.area-highlight div:hover {
    color: var(--gold-light);

    background:
        rgba(201, 162, 39, 0.05);
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.home-final-cta {
    position: relative;

    padding:
        130px 0;

    text-align: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(201, 162, 39, 0.14),
            transparent 40%
        ),
        #050505;

    border-top:
        1px solid rgba(201, 162, 39, 0.15);
}


.home-final-cta h2 {
    max-width: 900px;

    margin:
        15px auto 25px;

    font-size:
        clamp(
            3rem,
            7vw,
            7rem
        );

    line-height: 0.92;

    letter-spacing: -0.055em;
}


.home-final-cta h2 span {
    display: block;

    color: var(--gold-light);
}


.home-final-cta > .container > p:not(.eyebrow) {
    max-width: 550px;

    margin:
        0 auto 30px;

    color: var(--gray);

    font-size: 0.9rem;

    line-height: 1.8;
}


.home-final-cta .hero-actions {
    justify-content: center;
}


.cta-tagline {
    margin-top: 45px;

    color: var(--gray-dark);

    font-size: 0.58rem;

    font-weight: 900;

    letter-spacing: 0.18em;
}


/* =========================================================
   HOMEPAGE RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .home-package-grid {
        gap: 12px;
    }


    .home-package {
        padding: 28px;
    }


    .addon-grid {
        gap: 55px;
    }


    .home-intro-grid {
        gap: 55px;
    }

}


@media (max-width: 850px) {

    .home-hero {
        min-height: 700px;
    }


    .home-package-grid {
        grid-template-columns: 1fr;
    }


    .home-package {
        min-height: auto;
    }


    .home-package > p {
        min-height: auto;
    }


    .transformation-preview-grid {
        grid-template-columns: 1fr 1fr;
    }


    .transformation-preview:last-child {
        grid-column:
            1 / -1;
    }


    .addon-grid,
    .service-area-home-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .home-values {
        grid-template-columns: 1fr;
    }


    .home-value {
        min-height: 220px;
    }

}


@media (max-width: 700px) {

    .home-hero-content {
        padding-top: 65px;

        padding-bottom: 100px;
    }


    .hero-copy h1 {
        font-size:
            clamp(
                3.8rem,
                17vw,
                6rem
            );
    }


    .hero-description {
        font-size: 0.9rem;
    }


    .hero-trust {
        flex-wrap: wrap;

        gap: 12px 20px;

        margin-top: 35px;
    }


    .hero-scroll {
        display: none;
    }


    .home-intro-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .home-intro-grid > div:last-child {
        padding-top: 0;
    }


    .packages-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }


    .transformation-preview-grid {
        grid-template-columns: 1fr;
    }


    .transformation-preview:last-child {
        grid-column: auto;
    }


    .addon-card {
        padding: 35px;
    }


    .area-highlight div {
        min-height: 120px;
    }


    .home-final-cta {
        padding:
            100px 0;
    }

}


@media (max-width: 480px) {

    .hero-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .hero-actions .btn {
        width: 100%;

        text-align: center;
    }


    .hero-trust {
        display: grid;

        grid-template-columns: 1fr 1fr;
    }


    .hero-trust span {
        font-size: 0.5rem;
    }


    .home-package {
        padding: 25px;
    }


    .package-price {
        font-size: 3.5rem;
    }


    .addon-card {
        padding: 28px;
    }


    .area-highlight {
        grid-template-columns: 1fr;
    }


    .area-highlight div {
        min-height: 90px;
    }


    .home-final-cta h2 {
        font-size:
            clamp(
                2.8rem,
                14vw,
                4.5rem
            );
    }


    .cta-tagline {
        font-size: 0.48rem;

        line-height: 1.7;
    }

}
/* =========================================================
   SERVICES PAGE
   ========================================================= */

.page-hero {
    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(201, 162, 39, 0.13),
            transparent 32%
        ),
        #050505;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);
}


.page-hero::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.13;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        );

    background-size: 70px 70px;
}


.page-hero-content {
    position: relative;

    z-index: 2;

    max-width: 800px;

    padding-top: 80px;

    padding-bottom: 80px;
}


.page-hero h1 {
    margin:
        15px 0 25px;

    font-size:
        clamp(
            4rem,
            9vw,
            8rem
        );

    line-height: 0.9;

    letter-spacing: -0.055em;
}


.page-hero h1 span {
    display: block;

    color: var(--gold-light);
}


.page-hero-content > p:last-child {
    max-width: 600px;

    color: var(--gray);

    font-size: 1rem;

    line-height: 1.8;
}


/* =========================================================
   SERVICE PACKAGE GRID
   ========================================================= */

.service-package-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

    align-items: stretch;
}


.service-package-card {
    position: relative;

    display: flex;

    flex-direction: column;

    padding: 38px;

    min-height: 720px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.008)
        );

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}


.service-package-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(201, 162, 39, 0.4);
}


.featured-service {
    border-color:
        rgba(201, 162, 39, 0.38);

    background:
        linear-gradient(
            145deg,
            rgba(201, 162, 39, 0.09),
            rgba(255, 255, 255, 0.01)
        );
}


.featured-badge {
    position: absolute;

    top: 0;
    right: 0;

    padding:
        9px 15px;

    color: #050505;

    background: var(--gold);

    font-size: 0.5rem;

    font-weight: 900;

    letter-spacing: 0.14em;
}


.service-package-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 50px;
}


.service-package-top span {
    color: var(--gold);

    font-size: 0.65rem;

    font-weight: 900;

    letter-spacing: 0.12em;
}


.service-package-top small {
    color: var(--gray-dark);

    font-size: 0.52rem;

    font-weight: 900;

    letter-spacing: 0.14em;
}


.featured-service .service-package-top small {
    color: var(--gold-light);
}


.service-package-card h3 {
    margin-bottom: 15px;

    font-size: 1.7rem;
}


.service-price {
    color: var(--gold-light);

    font-family: var(--font-heading);

    font-size: 4.2rem;

    line-height: 1;

    margin-bottom: 22px;
}


.service-price sup {
    position: relative;

    top: 10px;

    font-family: var(--font-body);

    font-size: 1.1rem;

    vertical-align: top;
}


.service-package-description {
    min-height: 105px;

    color: var(--gray);

    font-size: 0.76rem;

    line-height: 1.8;
}


.service-divider {
    width: 100%;

    height: 1px;

    margin:
        10px 0 28px;

    background:
        rgba(255, 255, 255, 0.08);
}


.service-package-card h4 {
    margin-bottom: 20px;

    color: var(--gray-dark);

    font-size: 0.55rem;

    font-weight: 900;

    letter-spacing: 0.16em;
}


.service-list {
    display: flex;

    flex-direction: column;

    gap: 13px;

    margin: 0 0 30px;

    padding: 0;

    list-style: none;
}


.service-list li {
    position: relative;

    padding-left: 21px;

    color: var(--gray);

    font-size: 0.72rem;

    line-height: 1.45;
}


.service-list li::before {
    content: "✓";

    position: absolute;

    left: 0;

    color: var(--gold);

    font-weight: 900;
}


.service-package-button {
    width: 100%;

    margin-top: auto;

    text-align: center;
}


/* =========================================================
   PRICING NOTE
   ========================================================= */

.service-pricing-note {
    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 20px;

    align-items: start;

    max-width: 900px;

    margin:
        30px auto 0;

    padding: 22px 25px;

    border:
        1px solid rgba(255, 255, 255, 0.06);

    background:
        rgba(255, 255, 255, 0.02);
}


.service-pricing-note span {
    color: var(--gold);

    font-size: 0.55rem;

    font-weight: 900;

    letter-spacing: 0.14em;
}


.service-pricing-note p {
    color: var(--gray-dark);

    font-size: 0.65rem;

    line-height: 1.7;
}


/* =========================================================
   ADD-ON SERVICE GRID
   ========================================================= */

.addon-service-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 15px;
}


.addon-service-card {
    padding: 30px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    background:
        rgba(255, 255, 255, 0.015);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}


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

    border-color:
        rgba(201, 162, 39, 0.35);
}


.addon-service-card > span {
    color: var(--gold);

    font-size: 0.52rem;

    font-weight: 900;

    letter-spacing: 0.14em;
}


.addon-service-card h3 {
    margin:
        25px 0 12px;

    font-size: 1.15rem;
}


.addon-service-card strong {
    display: block;

    color: var(--gold-light);

    font-family: var(--font-heading);

    font-size: 2.2rem;

    line-height: 1;

    margin-bottom: 6px;
}


.addon-service-card > p {
    color: var(--gray);

    font-size: 0.68rem;

    line-height: 1.75;
}


.addon-service-card > div {
    width: 100%;

    height: 1px;

    margin:
        24px 0;

    background:
        rgba(255, 255, 255, 0.07);
}


/* =========================================================
   VEHICLE TYPES
   ========================================================= */

.vehicle-types {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border:
        1px solid rgba(255, 255, 255, 0.08);
}


.vehicle-type {
    min-height: 190px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 30px;

    border:
        1px solid rgba(255, 255, 255, 0.06);

    transition:
        background 0.3s ease,
        border-color 0.3s ease;
}


.vehicle-type:hover {
    background:
        rgba(201, 162, 39, 0.045);

    border-color:
        rgba(201, 162, 39, 0.25);
}


.vehicle-type span {
    color: var(--gold);

    font-size: 0.55rem;

    font-weight: 900;

    letter-spacing: 0.12em;
}


.vehicle-type h3 {
    font-size: 1.15rem;
}


/* =========================================================
   SERVICES CTA
   ========================================================= */

.cta-section {
    position: relative;

    padding:
        130px 0;

    overflow: hidden;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(201, 162, 39, 0.14),
            transparent 42%
        ),
        #050505;

    border-top:
        1px solid rgba(201, 162, 39, 0.15);
}


.cta-content {
    max-width: 850px;

    margin: auto;
}


.cta-content h2 {
    margin:
        15px 0 25px;

    font-size:
        clamp(
            3rem,
            7vw,
            7rem
        );

    line-height: 0.92;

    letter-spacing: -0.055em;
}


.cta-content > p:not(.eyebrow) {
    max-width: 550px;

    margin:
        0 auto 30px;

    color: var(--gray);

    font-size: 0.9rem;

    line-height: 1.8;
}


/* =========================================================
   SERVICES RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .service-package-card {
        padding: 30px;
    }


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

}


@media (max-width: 850px) {

    .service-package-grid {
        grid-template-columns: 1fr;
    }


    .service-package-card {
        min-height: auto;
    }


    .service-package-description {
        min-height: auto;
    }


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

}


@media (max-width: 600px) {

    .page-hero {
        min-height: 430px;
    }


    .page-hero-content {
        padding-top: 60px;

        padding-bottom: 60px;
    }


    .page-hero h1 {
        font-size:
            clamp(
                3.8rem,
                18vw,
                6rem
            );
    }


    .service-package-card {
        padding: 27px;
    }


    .service-price {
        font-size: 3.6rem;
    }


    .addon-service-grid {
        grid-template-columns: 1fr;
    }


    .vehicle-types {
        grid-template-columns: 1fr;
    }


    .vehicle-type {
        min-height: 145px;
    }


    .service-pricing-note {
        grid-template-columns: 1fr;

        gap: 8px;
    }


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

}
/* =========================================================
   SPECIALTY SERVICE LINKS
   ========================================================= */

.addon-service-card {
    display: flex;

    flex-direction: column;
}


.addon-service-card .addon-link {
    display: inline-block;

    margin-top: auto;

    padding-top: 22px;

    color: var(--gold-light);

    font-size: 0.58rem;

    font-weight: 900;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    text-decoration: none;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.addon-service-card .addon-link:hover {
    color: #ffffff;

    transform: translateX(4px);
}
/* =========================================================
   GALLERY PAGE
   ========================================================= */

.gallery-hero {
    min-height: 520px;
}


.gallery-intro {
    max-width: 760px;

    margin-bottom: 90px;
}


.gallery-intro h2 {
    margin:
        15px 0 25px;

    font-size:
        clamp(
            3rem,
            6vw,
            6rem
        );

    line-height: 0.95;

    letter-spacing: -0.05em;
}


.gallery-intro > p:last-child {
    max-width: 620px;

    color: var(--gray);

    font-size: 0.9rem;

    line-height: 1.8;
}


/* =========================================================
   GALLERY PROJECT
   ========================================================= */

.gallery-project {
    margin-bottom: 120px;
}


.gallery-project-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;
}


.project-number {
    display: block;

    margin-bottom: 18px;

    color: var(--gold);

    font-size: 0.55rem;

    font-weight: 900;

    letter-spacing: 0.14em;
}


.gallery-project-heading h3 {
    margin-top: 10px;

    font-size:
        clamp(
            2rem,
            4vw,
            4rem
        );

    line-height: 1;

    letter-spacing: -0.04em;
}


.project-meta {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 7px;
}


.project-meta span {
    color: var(--gray-dark);

    font-size: 0.52rem;

    font-weight: 900;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


/* =========================================================
   PHOTO GRID
   ========================================================= */

.gallery-photo-grid {
    display: grid;

    grid-template-columns:
        1.7fr 1fr;

    grid-template-rows:
        260px 260px;

    gap: 12px;
}


.gallery-photo {
    position: relative;

    min-height: 260px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #111111,
            #080808
        );

    border:
        1px solid rgba(255, 255, 255, 0.08);
}


.gallery-photo-large {
    grid-row:
        1 / 3;
}


.gallery-placeholder {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    background:
        radial-gradient(
            circle at center,
            rgba(201, 162, 39, 0.08),
            transparent 55%
        );
}


.gallery-placeholder span {
    color: rgba(255, 255, 255, 0.35);

    font-family: var(--font-heading);

    font-size:
        clamp(
            1.5rem,
            3vw,
            3rem
        );

    letter-spacing: -0.03em;
}


.gallery-placeholder small {
    color: var(--gold);

    font-size: 0.48rem;

    font-weight: 900;

    letter-spacing: 0.15em;
}


/* =========================================================
   PROJECT FOOTER
   ========================================================= */

.gallery-project-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 22px;

    padding-top: 22px;

    border-top:
        1px solid rgba(255, 255, 255, 0.07);
}


.gallery-project-footer p {
    max-width: 650px;

    margin: 0;

    color: var(--gray-dark);

    font-size: 0.68rem;

    line-height: 1.7;
}


.text-link {
    flex-shrink: 0;

    color: var(--gold-light);

    font-size: 0.55rem;

    font-weight: 900;

    letter-spacing: 0.12em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.text-link:hover {
    color: #ffffff;

    transform: translateX(5px);
}


/* =========================================================
   COMING SOON
   ========================================================= */

.gallery-coming-soon {
    position: relative;

    max-width: 900px;

    margin:
        40px auto 0;

    padding:
        90px 40px;

    text-align: center;

    border:
        1px solid rgba(201, 162, 39, 0.2);

    background:
        radial-gradient(
            circle at center,
            rgba(201, 162, 39, 0.08),
            transparent 60%
        );
}


.gallery-coming-soon h2 {
    margin:
        15px 0 22px;

    font-size:
        clamp(
            2.8rem,
            6vw,
            5.5rem
        );

    line-height: 0.95;

    letter-spacing: -0.05em;
}


.gallery-coming-soon > p:not(.eyebrow) {
    max-width: 560px;

    margin:
        0 auto 30px;

    color: var(--gray);

    font-size: 0.8rem;

    line-height: 1.8;
}


/* =========================================================
   GALLERY RESPONSIVE
   ========================================================= */

@media (max-width: 750px) {

    .gallery-intro {
        margin-bottom: 60px;
    }


    .gallery-project-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }


    .project-meta {
        align-items: flex-start;
    }


    .gallery-photo-grid {
        grid-template-columns: 1fr;

        grid-template-rows:
            300px 220px 220px;
    }


    .gallery-photo-large {
        grid-row: auto;
    }


    .gallery-project-footer {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }


    .gallery-coming-soon {
        padding:
            70px 25px;
    }

}


@media (max-width: 480px) {

    .gallery-photo-grid {
        grid-template-rows:
            240px 190px 190px;
    }


    .gallery-project {
        margin-bottom: 85px;
    }

}
/* =========================================================
   GALLERY PHOTO INTERACTION
   ========================================================= */

.gallery-photo,
.gallery-wheel-image {
    cursor: zoom-in;
}

.gallery-photo img,
.gallery-wheel-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.6s ease,
        filter 0.6s ease;
}

.gallery-photo:hover img,
.gallery-wheel-image:hover img {
    transform: scale(1.045);

    filter:
        brightness(0.72);
}


.photo-label {
    position: absolute;

    left: 18px;
    bottom: 18px;

    z-index: 3;

    padding:
        8px 12px;

    color: #ffffff;

    background:
        rgba(5, 5, 5, 0.78);

    border:
        1px solid rgba(201, 162, 39, 0.35);

    backdrop-filter:
        blur(8px);

    font-size: 0.48rem;

    font-weight: 900;

    letter-spacing: 0.14em;
}


/* =========================================================
   WHEEL FEATURE
   ========================================================= */

.gallery-wheel-feature {
    display: grid;

    grid-template-columns:
        1.25fr 1fr;

    gap: 30px;

    margin-top: 30px;

    padding-top: 30px;

    border-top:
        1px solid rgba(255, 255, 255, 0.07);
}


.gallery-wheel-image {
    position: relative;

    height: 360px;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.08);
}


.gallery-wheel-copy {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 20px 0;
}


.gallery-wheel-copy h4 {
    margin:
        12px 0 18px;

    font-size: 2.5rem;

    line-height: 1;

    letter-spacing: -0.04em;
}


.gallery-wheel-copy p:not(.eyebrow) {
    max-width: 500px;

    color: var(--gray);

    font-size: 0.75rem;

    line-height: 1.8;
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.lightbox {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        rgba(0, 0, 0, 0.94);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


.lightbox.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


.lightbox-image {
    display: block;

    max-width: 92vw;

    max-height: 86vh;

    object-fit: contain;

    box-shadow:
        0 30px 100px rgba(0, 0, 0, 0.7);

    transform: scale(0.96);

    transition:
        transform 0.3s ease;
}


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


/* CLOSE */

.lightbox-close {
    position: absolute;

    top: 22px;
    right: 28px;

    z-index: 5;

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(255, 255, 255, 0.2);

    background:
        rgba(255, 255, 255, 0.05);

    color: #ffffff;

    font-size: 1.5rem;

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}


.lightbox-close:hover {
    background:
        rgba(201, 162, 39, 0.15);

    border-color:
        rgba(201, 162, 39, 0.5);
}


/* ARROWS */

.lightbox-arrow {
    position: absolute;

    top: 50%;

    z-index: 5;

    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform:
        translateY(-50%);

    border:
        1px solid rgba(255, 255, 255, 0.18);

    background:
        rgba(5, 5, 5, 0.65);

    color: #ffffff;

    font-size: 1.5rem;

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}


.lightbox-arrow:hover {
    background:
        rgba(201, 162, 39, 0.15);

    border-color:
        rgba(201, 162, 39, 0.5);
}


.lightbox-prev {
    left: 24px;
}


.lightbox-next {
    right: 24px;
}


/* IMAGE COUNTER */

.lightbox-counter {
    position: absolute;

    bottom: 24px;
    left: 50%;

    transform:
        translateX(-50%);

    color:
        rgba(255, 255, 255, 0.65);

    font-size: 0.55rem;

    font-weight: 900;

    letter-spacing: 0.14em;
}


/* =========================================================
   LIGHTBOX MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .gallery-wheel-feature {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .gallery-wheel-image {
        height: 280px;
    }


    .lightbox {
        padding: 15px;
    }


    .lightbox-image {
        max-width: 96vw;

        max-height: 80vh;
    }


    .lightbox-close {
        top: 15px;
        right: 15px;

        width: 42px;
        height: 42px;
    }


    .lightbox-arrow {
        width: 42px;
        height: 42px;

        font-size: 1.1rem;
    }


    .lightbox-prev {
        left: 10px;
    }


    .lightbox-next {
        right: 10px;
    }

}
/* =========================================================
   DESKTOP GALLERY IMAGE FIX
   ========================================================= */

/* Make the gallery feel obviously clickable */
.gallery-photo,
.gallery-wheel-image {
    position: relative;
    cursor: zoom-in;
    overflow: hidden;
}

/* Keep the entire photo visible in the gallery */
.gallery-photo img,
.gallery-wheel-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    background: #080808;

    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}

/* Stronger desktop hover effect */
.gallery-photo::after,
.gallery-wheel-image::after {
    content: "CLICK TO ENLARGE";

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(0.92);

    padding:
        12px 18px;

    color: #ffffff;

    background:
        rgba(5, 5, 5, 0.78);

    border:
        1px solid rgba(201, 162, 39, 0.65);

    backdrop-filter:
        blur(8px);

    font-size: 0.52rem;

    font-weight: 900;

    letter-spacing: 0.16em;

    white-space: nowrap;

    opacity: 0;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;

    pointer-events: none;

    z-index: 2;
}


.gallery-photo:hover img,
.gallery-wheel-image:hover img {
    transform: scale(1.025);

    filter:
        brightness(0.58);
}


.gallery-photo:hover::after,
.gallery-wheel-image:hover::after {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}


/* Keep the BEFORE / AFTER labels above everything */
.photo-label {
    z-index: 4;
}


/* =========================================================
   MOBILE — KEEP PHOTOS CLEAN
   ========================================================= */

@media (max-width: 700px) {

    .gallery-photo::after,
    .gallery-wheel-image::after {
        display: none;
    }


    .gallery-photo img,
    .gallery-wheel-image img {
        object-fit: contain;
    }

}
/* =========================================================
   SERVICE AREA PAGE
   ========================================================= */

.service-area-hero {
    min-height: 520px;
}


.service-area-intro {
    display: grid;

    grid-template-columns:
        1.1fr 0.9fr;

    gap: 80px;

    align-items: end;

    margin-bottom: 90px;
}


.service-area-intro h2 {
    max-width: 750px;

    margin-top: 15px;

    font-size:
        clamp(
            2.8rem,
            5.5vw,
            5.5rem
        );

    line-height: 0.95;

    letter-spacing: -0.05em;
}


.service-area-intro > div:last-child {
    max-width: 520px;
}


.service-area-intro > div:last-child p {
    color: var(--gray);

    font-size: 0.82rem;

    line-height: 1.85;
}


.service-area-intro > div:last-child p + p {
    margin-top: 20px;
}


/* =========================================================
   SERVICE AREA CARDS
   ========================================================= */

.service-area-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 12px;

    margin-bottom: 120px;
}


.service-area-card {
    position: relative;

    min-height: 340px;

    padding: 32px 28px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #151515,
            #080808
        );

    border:
        1px solid rgba(255, 255, 255, 0.07);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease;
}


.service-area-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

    opacity: 0.6;
}


.service-area-card:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(201, 162, 39, 0.35);
}


.service-area-card > span {
    position: absolute;

    top: 28px;
    left: 28px;

    color: var(--gold);

    font-size: 0.52rem;

    font-weight: 900;

    letter-spacing: 0.15em;
}


.service-area-card h3 {
    margin-bottom: 15px;

    font-size: 2rem;

    letter-spacing: -0.04em;
}


.service-area-card p {
    margin: 0;

    color: var(--gray-dark);

    font-size: 0.68rem;

    line-height: 1.75;
}


/* =========================================================
   SECONDARY SERVICE AREA
   ========================================================= */

.service-area-secondary {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    align-items: center;

    padding:
        90px 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.07);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);

    margin-bottom: 120px;
}


.service-area-secondary h2 {
    margin-top: 15px;

    font-size:
        clamp(
            2.5rem,
            5vw,
            5rem
        );

    line-height: 0.95;

    letter-spacing: -0.05em;
}


.service-area-secondary > div:last-child {
    max-width: 550px;
}


.service-area-secondary > div:last-child p {
    color: var(--gray);

    font-size: 0.78rem;

    line-height: 1.8;
}


.service-area-secondary > div:last-child p + p {
    margin-top: 18px;

    margin-bottom: 30px;
}


/* =========================================================
   MOBILE DETAILING BENEFITS
   ========================================================= */

.mobile-detailing-benefits {
    margin-bottom: 120px;
}


.benefit-heading {
    max-width: 750px;

    margin-bottom: 55px;
}


.benefit-heading h2 {
    margin-top: 15px;

    font-size:
        clamp(
            2.8rem,
            5vw,
            5rem
        );

    line-height: 0.95;

    letter-spacing: -0.05em;
}


.benefit-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;
}


.benefit-item {
    padding:
        40px 30px;

    border-top:
        1px solid rgba(201, 162, 39, 0.35);
}


.benefit-item > span {
    display: block;

    margin-bottom: 28px;

    color: var(--gold);

    font-size: 0.5rem;

    font-weight: 900;

    letter-spacing: 0.15em;
}


.benefit-item h3 {
    margin-bottom: 15px;

    font-size: 1.35rem;

    letter-spacing: -0.03em;
}


.benefit-item p {
    margin: 0;

    color: var(--gray-dark);

    font-size: 0.68rem;

    line-height: 1.8;
}


/* =========================================================
   SERVICE AREA CTA
   ========================================================= */

.service-area-cta {
    position: relative;

    max-width: 950px;

    margin:
        0 auto;

    padding:
        100px 50px;

    text-align: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(201, 162, 39, 0.09),
            transparent 65%
        );

    border:
        1px solid rgba(201, 162, 39, 0.2);
}


.service-area-cta::before {
    content: "";

    position: absolute;

    inset: 15px;

    border:
        1px solid rgba(255, 255, 255, 0.04);

    pointer-events: none;
}


.service-area-cta h2 {
    position: relative;

    margin:
        15px 0 22px;

    font-size:
        clamp(
            2.8rem,
            6vw,
            6rem
        );

    line-height: 0.92;

    letter-spacing: -0.05em;
}


.service-area-cta > p:not(.eyebrow) {
    position: relative;

    max-width: 580px;

    margin:
        0 auto 32px;

    color: var(--gray);

    font-size: 0.8rem;

    line-height: 1.8;
}


.service-area-cta .btn {
    position: relative;
}


/* =========================================================
   SERVICE AREA RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .service-area-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .service-area-intro {
        grid-template-columns: 1fr;

        gap: 35px;
    }

}


@media (max-width: 750px) {

    .service-area-intro {
        margin-bottom: 60px;
    }


    .service-area-grid {
        grid-template-columns: 1fr;

        margin-bottom: 80px;
    }


    .service-area-card {
        min-height: 280px;
    }


    .service-area-secondary {
        grid-template-columns: 1fr;

        gap: 35px;

        padding:
            65px 0;

        margin-bottom: 80px;
    }


    .mobile-detailing-benefits {
        margin-bottom: 80px;
    }


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


    .benefit-item {
        padding:
            30px 0;
    }


    .service-area-cta {
        padding:
            70px 25px;
    }

}


@media (max-width: 480px) {

    .service-area-card {
        min-height: 260px;

        padding:
            30px 24px;
    }


    .service-area-cta {
        padding:
            65px 20px;
    }
}
/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-hero {
    min-height: 520px;
}


/* =========================================================
   BRAND STORY
   ========================================================= */

.about-story {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 90px;

    align-items: start;

    margin-bottom: 130px;
}


.about-story-heading h2 {
    max-width: 650px;

    margin-top: 15px;

    font-size:
        clamp(
            2.8rem,
            5.5vw,
            5.5rem
        );

    line-height: 0.94;

    letter-spacing: -0.05em;
}


.about-story-copy {
    max-width: 620px;
}


.about-story-copy p {
    color: var(--gray);

    font-size: 0.82rem;

    line-height: 1.9;
}


.about-story-copy p + p {
    margin-top: 22px;
}


.about-story-copy .about-lead {
    color: #ffffff;

    font-size: 1.15rem;

    line-height: 1.65;
}


/* =========================================================
   PHILOSOPHY
   ========================================================= */

.about-philosophy {
    margin-bottom: 130px;
}


.about-philosophy-heading {
    max-width: 800px;

    margin-bottom: 60px;
}


.about-philosophy-heading h2 {
    margin-top: 15px;

    font-size:
        clamp(
            2.8rem,
            5vw,
            5rem
        );

    line-height: 0.95;

    letter-spacing: -0.05em;
}


.about-principles {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 12px;
}


.about-principles article {
    min-height: 300px;

    padding:
        35px 28px;

    border-top:
        1px solid rgba(201, 162, 39, 0.35);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.025),
            transparent
        );
}


.about-principles article > span {
    display: block;

    margin-bottom: 55px;

    color: var(--gold);

    font-size: 0.5rem;

    font-weight: 900;

    letter-spacing: 0.15em;
}


.about-principles h3 {
    margin-bottom: 16px;

    font-size: 1.25rem;

    line-height: 1.1;

    letter-spacing: -0.03em;
}


.about-principles p {
    margin: 0;

    color: var(--gray-dark);

    font-size: 0.67rem;

    line-height: 1.8;
}


/* =========================================================
   BRAND STATEMENT
   ========================================================= */

.about-statement {
    max-width: 1100px;

    margin:
        0 auto 130px;

    padding:
        100px 40px;

    text-align: center;

    border-top:
        1px solid rgba(201, 162, 39, 0.3);

    border-bottom:
        1px solid rgba(201, 162, 39, 0.3);

    background:
        radial-gradient(
            circle at center,
            rgba(201, 162, 39, 0.07),
            transparent 65%
        );
}


.about-statement blockquote {
    max-width: 950px;

    margin:
        20px auto 30px;

    font-family: var(--font-heading);

    font-size:
        clamp(
            2.5rem,
            5.5vw,
            5.5rem
        );

    line-height: 0.98;

    letter-spacing: -0.05em;
}


.about-statement blockquote span {
    color: var(--gold);
}


.about-statement > p:last-child {
    max-width: 600px;

    margin: 0 auto;

    color: var(--gray);

    font-size: 0.75rem;

    line-height: 1.8;
}


/* =========================================================
   EXPERIENCE
   ========================================================= */

.about-experience {
    display: grid;

    grid-template-columns:
        1fr 0.8fr;

    gap: 100px;

    align-items: center;

    margin-bottom: 130px;
}


.about-experience-copy {
    max-width: 650px;
}


.about-experience-copy h2 {
    margin:
        15px 0 25px;

    font-size:
        clamp(
            2.8rem,
            5vw,
            5rem
        );

    line-height: 0.95;

    letter-spacing: -0.05em;
}


.about-experience-copy > p:not(.eyebrow) {
    margin-bottom: 28px;

    color: var(--gray);

    font-size: 0.8rem;

    line-height: 1.85;
}


/* BRAND CARD */

.about-experience-card {
    position: relative;

    min-height: 430px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #161616,
            #070707
        );

    border:
        1px solid rgba(201, 162, 39, 0.25);

    box-shadow:
        0 30px 80px rgba(0,0,0,0.35);
}


.about-experience-card::before {
    content: "";

    position: absolute;

    inset: 18px;

    border:
        1px solid rgba(255,255,255,0.05);
}


.about-experience-card span {
    position: relative;

    color: var(--gold);

    font-size: 0.55rem;

    font-weight: 900;

    letter-spacing: 0.2em;
}


.about-experience-card strong {
    position: relative;

    margin:
        20px 0 10px;

    font-family: var(--font-heading);

    font-size:
        clamp(
            3rem,
            6vw,
            5.5rem
        );

    line-height: 0.9;

    letter-spacing: -0.05em;
}


.about-experience-card small {
    position: relative;

    color: var(--gray-dark);

    font-size: 0.5rem;

    font-weight: 900;

    letter-spacing: 0.18em;
}


/* =========================================================
   ABOUT CTA
   ========================================================= */

.about-cta {
    max-width: 1000px;

    margin:
        0 auto;

    padding:
        100px 40px;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(201,162,39,0.09),
            transparent 65%
        );

    border:
        1px solid rgba(201,162,39,0.2);
}


.about-cta h2 {
    margin:
        15px 0 22px;

    font-size:
        clamp(
            2.8rem,
            6vw,
            6rem
        );

    line-height: 0.93;

    letter-spacing: -0.05em;
}


.about-cta > p:not(.eyebrow) {
    max-width: 580px;

    margin:
        0 auto 32px;

    color: var(--gray);

    font-size: 0.8rem;

    line-height: 1.8;
}


/* =========================================================
   ABOUT RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .about-story {
        grid-template-columns: 1fr;

        gap: 40px;
    }


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


    .about-experience {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .about-experience-card {
        max-width: 600px;
    }

}


@media (max-width: 700px) {

    .about-story {
        margin-bottom: 90px;
    }


    .about-philosophy {
        margin-bottom: 90px;
    }


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


    .about-principles article {
        min-height: auto;

        padding:
            30px 0;
    }


    .about-principles article > span {
        margin-bottom: 30px;
    }


    .about-statement {
        margin-bottom: 90px;

        padding:
            70px 20px;
    }


    .about-experience {
        margin-bottom: 90px;
    }


    .about-experience-card {
        min-height: 340px;
    }


    .about-cta {
        padding:
            70px 20px;
    }

}
/* =========================================================
   QUOTE PAGE
   ========================================================= */

.quote-hero {
    min-height: 500px;
}


/* =========================================================
   QUOTE LAYOUT
   ========================================================= */

.quote-section {
    padding-top: 80px;
}


.quote-layout {
    display: grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap: 70px;

    align-items: start;

    margin-bottom: 130px;
}


/* =========================================================
   QUOTE INTRO
   ========================================================= */

.quote-intro {
    position: sticky;

    top: 120px;

    max-width: 500px;
}


.quote-intro h2 {
    margin:
        15px 0 25px;

    font-size:
        clamp(
            2.8rem,
            5vw,
            5rem
        );

    line-height: 0.95;

    letter-spacing: -0.05em;
}


.quote-intro > p:not(.eyebrow) {
    color: var(--gray);

    font-size: 0.78rem;

    line-height: 1.85;
}


.quote-intro > p + p {
    margin-top: 18px;
}


/* =========================================================
   QUOTE CONTACT
   ========================================================= */

.quote-contact {
    display: grid;

    grid-template-columns: 1fr;

    gap: 20px;

    margin:
        40px 0;
}


.quote-contact > div {
    padding:
        18px 0;

    border-top:
        1px solid rgba(255,255,255,0.08);
}


.quote-contact > div:last-child {
    border-bottom:
        1px solid rgba(255,255,255,0.08);
}


.quote-contact span {
    display: block;

    margin-bottom: 8px;

    color: var(--gold);

    font-size: 0.48rem;

    font-weight: 900;

    letter-spacing: 0.15em;
}


.quote-contact a {
    color: #ffffff;

    font-size: 0.78rem;

    font-weight: 600;

    transition:
        color 0.25s ease;
}


.quote-contact a:hover {
    color: var(--gold);
}


/* =========================================================
   QUOTE NOTE
   ========================================================= */

.quote-note {
    display: flex;

    gap: 14px;

    padding:
        18px;

    background:
        rgba(201,162,39,0.05);

    border:
        1px solid rgba(201,162,39,0.12);
}


.quote-note > span {
    flex-shrink: 0;

    color: var(--gold);

    font-size: 0.85rem;
}


.quote-note p {
    margin: 0;

    color: var(--gray-dark);

    font-size: 0.62rem;

    line-height: 1.7;
}


/* =========================================================
   FORM CARD
   ========================================================= */

.quote-form-card {
    position: relative;

    padding:
        35px;

    background:
        #0b0b0b;

    border:
        1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 30px 90px rgba(0,0,0,0.35);
}


.quote-form-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );
}


.quote-form-heading {
    padding:
        10px 5px 30px;

    border-bottom:
        1px solid rgba(255,255,255,0.07);
}


.quote-form-heading h3 {
    margin:
        10px 0 8px;

    font-size: 2rem;

    letter-spacing: -0.04em;
}


.quote-form-heading p:last-child {
    margin: 0;

    color: var(--gray-dark);

    font-size: 0.65rem;
}


.quote-form-frame {
    margin-top: 20px;

    overflow: hidden;
}


.quote-form-frame iframe {
    display: block;

    width: 100%;

    min-height: 900px;

    border: none;
}


/* =========================================================
   QUOTE PROCESS
   ========================================================= */

.quote-process {
    margin-bottom: 130px;
}


.quote-process-heading {
    max-width: 700px;

    margin-bottom: 55px;
}


.quote-process-heading h2 {
    margin-top: 15px;

    font-size:
        clamp(
            2.8rem,
            5vw,
            5rem
        );

    line-height: 0.95;

    letter-spacing: -0.05em;
}


.quote-process-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 12px;
}


.quote-process-grid article {
    min-height: 270px;

    padding:
        32px 26px;

    border-top:
        1px solid rgba(201,162,39,0.35);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.025),
            transparent
        );
}


.quote-process-grid article > span {
    display: block;

    margin-bottom: 50px;

    color: var(--gold);

    font-size: 0.5rem;

    font-weight: 900;

    letter-spacing: 0.15em;
}


.quote-process-grid h3 {
    margin-bottom: 14px;

    font-size: 1.1rem;

    line-height: 1.15;

    letter-spacing: -0.03em;
}


.quote-process-grid p {
    margin: 0;

    color: var(--gray-dark);

    font-size: 0.65rem;

    line-height: 1.8;
}


/* =========================================================
   ADD-ON CTA
   ========================================================= */

.quote-addon {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    align-items: center;

    padding:
        80px 0;

    margin-bottom: 100px;

    border-top:
        1px solid rgba(255,255,255,0.07);

    border-bottom:
        1px solid rgba(255,255,255,0.07);
}


.quote-addon h2 {
    margin-top: 15px;

    font-size:
        clamp(
            2.5rem,
            5vw,
            5rem
        );

    line-height: 0.95;

    letter-spacing: -0.05em;
}


.quote-addon > div:last-child {
    max-width: 550px;
}


.quote-addon > div:last-child p {
    color: var(--gray);

    font-size: 0.78rem;

    line-height: 1.8;
}


.quote-addon > div:last-child p + p {
    margin-top: 18px;

    margin-bottom: 30px;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.quote-final-cta {
    max-width: 1000px;

    margin:
        0 auto;

    padding:
        100px 30px;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(201,162,39,0.08),
            transparent 65%
        );

    border:
        1px solid rgba(201,162,39,0.18);
}


.quote-final-cta h2 {
    margin:
        15px 0 20px;

    font-size:
        clamp(
            2.8rem,
            6vw,
            6rem
        );

    line-height: 0.92;

    letter-spacing: -0.05em;
}


.quote-final-cta > p:last-child {
    margin: 0;

    color: var(--gray);

    font-size: 0.75rem;
}


/* =========================================================
   QUOTE RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .quote-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .quote-intro {
        position: static;

        max-width: 700px;
    }


    .quote-process-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .quote-addon {
        grid-template-columns: 1fr;

        gap: 35px;
    }

}


@media (max-width: 700px) {

    .quote-section {
        padding-top: 50px;
    }


    .quote-layout {
        margin-bottom: 80px;
    }


    .quote-form-card {
        padding:
            20px;
    }


    .quote-form-frame iframe {
        min-height: 1000px;
    }


    .quote-process {
        margin-bottom: 80px;
    }


    .quote-process-grid {
        grid-template-columns: 1fr;
    }


    .quote-process-grid article {
        min-height: auto;

        padding:
            30px 0;
    }


    .quote-process-grid article > span {
        margin-bottom: 28px;
    }


    .quote-addon {
        padding:
            60px 0;

        margin-bottom: 70px;
    }


    .quote-final-cta {
        padding:
            70px 20px;
    }

}
/* =========================================================
   ENHANCE MY RIDE — CINEMATIC HERO
========================================================= */

.home-hero {
    position: relative;
    min-height: 92vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #050505;
}


/* HERO SLIDESHOW */

.hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #050505;
}


.hero-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    opacity: 0;

    transform: scale(1.08);

    transition:
        opacity 1.5s ease,
        transform 7s ease;
}


.hero-slide.active {
    opacity: 1;
    transform: scale(1);
}


/* LUXURY CINEMATIC OVERLAY */

.hero-cinematic-overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.94) 0%,
            rgba(0,0,0,0.78) 28%,
            rgba(0,0,0,0.48) 58%,
            rgba(0,0,0,0.35) 100%
        );

    pointer-events: none;
}


/* SUBTLE BOTTOM FADE */

.hero-cinematic-overlay::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 35%;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.72),
            transparent
        );
}


/* HERO CONTENT */

.home-hero-content {
    position: relative;
    z-index: 5;

    padding-top: 100px;
    padding-bottom: 100px;
}


.hero-copy {
    max-width: 760px;
}


/* BRAND LABEL */

.hero-owner-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 20px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.28em;
    text-transform: uppercase;

    color: rgba(255,255,255,0.72);
}


.hero-owner-label::before {
    content: "";

    width: 34px;
    height: 1px;

    background: #d4af37;
}


/* HERO HEADLINE */

.home-hero h1 {
    margin: 0;

    max-width: 850px;

    font-size: clamp(3.5rem, 7vw, 7.5rem);

    line-height: 0.92;

    letter-spacing: -0.045em;

    font-weight: 700;

    color: #ffffff;
}


.home-hero h1 span {
    display: block;

    color: #ffffff;
}


.home-hero h1 strong {
    display: block;

    font-weight: 700;

    color: #d4af37;
}


/* DESCRIPTION */

.home-hero .hero-description {
    max-width: 620px;

    margin-top: 30px;

    font-size: 18px;

    line-height: 1.7;

    color: rgba(255,255,255,0.82);
}


/* BUTTONS */

.home-hero .hero-actions {
    margin-top: 34px;

    display: flex;
    flex-wrap: wrap;

    gap: 14px;
}


/* TRUST ROW */

.home-hero .hero-trust {
    margin-top: 38px;

    display: flex;
    flex-wrap: wrap;

    gap: 0;
}


.home-hero .hero-trust span {
    position: relative;

    padding: 0 18px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.18em;

    color: rgba(255,255,255,0.72);
}


.home-hero .hero-trust span:first-child {
    padding-left: 0;
}


.home-hero .hero-trust span:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    width: 1px;
    height: 12px;

    transform: translateY(-50%);

    background: rgba(255,255,255,0.3);
}


/* SLIDESHOW DOTS */

.hero-slide-controls {
    position: absolute;

    left: 50%;
    bottom: 42px;

    transform: translateX(-50%);

    z-index: 10;

    display: flex;
    align-items: center;

    gap: 9px;
}


.hero-slide-dot {
    width: 7px;
    height: 7px;

    padding: 0;

    border: 1px solid rgba(255,255,255,0.7);

    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    transition:
        width 0.3s ease,
        background 0.3s ease;
}


.hero-slide-dot.active {
    width: 30px;

    border-radius: 20px;

    background: #d4af37;

    border-color: #d4af37;
}


/* SCROLL INDICATOR */

.hero-scroll {
    position: absolute;

    right: 40px;
    bottom: 38px;

    z-index: 10;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 10px;
}


.hero-scroll span {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.22em;

    writing-mode: vertical-rl;

    color: rgba(255,255,255,0.6);
}


.hero-scroll div {
    width: 1px;
    height: 42px;

    background:
        linear-gradient(
            to bottom,
            #d4af37,
            transparent
        );
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .home-hero {
        min-height: 88vh;
    }


    .hero-slide {
        background-position: center center;
    }


    .hero-cinematic-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,0.58) 0%,
                rgba(0,0,0,0.60) 40%,
                rgba(0,0,0,0.90) 100%
            );
    }


    .home-hero-content {
        padding-top: 90px;
        padding-bottom: 110px;
    }


    .home-hero h1 {
        font-size: clamp(3.1rem, 14vw, 5rem);

        line-height: 0.94;
    }


    .home-hero .hero-description {
        font-size: 16px;

        line-height: 1.6;
    }


    .home-hero .hero-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .home-hero .hero-actions .btn {
        width: 100%;

        text-align: center;
    }


    .home-hero .hero-trust {
        flex-direction: column;

        gap: 12px;
    }


    .home-hero .hero-trust span {
        padding: 0;
    }


    .home-hero .hero-trust span:not(:last-child)::after {
        display: none;
    }


    .hero-scroll {
        display: none;
    }


    .hero-slide-controls {
        bottom: 30px;
    }

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-slide {
        transition: opacity 0.5s ease;
        transform: none;
    }

    .hero-slide.active {
        transform: none;
    }

}
/* =========================================================
   GOOGLE REVIEWS
========================================================= */

.home-reviews {
    position: relative;
}


.review-featured {
    max-width: 900px;

    margin: 50px auto 35px;

    padding: 55px 60px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #111111,
            #080808
        );

    border: 1px solid rgba(212,175,55,0.25);

    box-shadow:
        0 25px 70px rgba(0,0,0,0.35);

    position: relative;
}


.review-featured::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 90px;
    height: 2px;

    transform: translateX(-50%);

    background: #d4af37;
}


.review-stars {
    margin-bottom: 25px;

    font-size: 20px;

    letter-spacing: 5px;

    color: #d4af37;
}


.review-featured blockquote {
    margin: 0 auto;

    max-width: 760px;

    font-size: clamp(20px, 3vw, 30px);

    line-height: 1.55;

    font-weight: 400;

    font-style: italic;

    color: #ffffff;
}


.review-author {
    display: flex;

    flex-direction: column;

    gap: 6px;

    margin-top: 30px;
}


.review-author strong {
    font-size: 16px;

    color: #ffffff;
}


.review-author span {
    font-size: 11px;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color: rgba(255,255,255,0.5);
}


.review-google-badge {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 35px;

    padding: 12px 18px;

    border: 1px solid rgba(255,255,255,0.12);

    background: rgba(255,255,255,0.03);

    text-align: left;
}


.review-google-badge > span {
    font-size: 24px;

    color: #d4af37;
}


.review-google-badge strong {
    display: block;

    font-size: 12px;

    color: #ffffff;
}


.review-google-badge small {
    display: block;

    margin-top: 3px;

    font-size: 10px;

    color: rgba(255,255,255,0.45);
}


@media (max-width: 768px) {

    .review-featured {
        padding: 40px 22px;

        margin-top: 35px;
    }


    .review-stars {
        font-size: 17px;

        letter-spacing: 4px;
    }


    .review-featured blockquote {
        font-size: 19px;

        line-height: 1.55;
    }

}
/* =========================================================
   GALLERY PHOTO LABEL FIX
========================================================= */

.gallery-photo,
.gallery-wheel-image {
    position: relative;
    overflow: hidden;
}


/* Make every label stay attached
   to its own image */

.gallery-photo .photo-label,
.gallery-wheel-image .photo-label {
    position: absolute;

    left: 16px;
    bottom: 16px;

    z-index: 5;

    display: inline-block;

    padding: 8px 12px;

    font-size: 10px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color: #ffffff;

    background: rgba(0, 0, 0, 0.78);

    border: 1px solid rgba(212, 175, 55, 0.45);

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

    pointer-events: none;
}


/* Make sure the image itself fills
   the photo container */

.gallery-photo img,
.gallery-wheel-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   MOBILE GALLERY LABEL FIX
========================================================= */

@media (max-width: 768px) {

    .gallery-photo,
    .gallery-wheel-image {
        position: relative !important;
        overflow: hidden !important;
    }


    .gallery-photo .photo-label,
    .gallery-wheel-image .photo-label {
        position: absolute !important;

        left: 10px !important;
        bottom: 10px !important;

        top: auto !important;
        right: auto !important;

        z-index: 20 !important;

        display: block !important;

        width: max-content !important;

        padding: 7px 10px !important;

        margin: 0 !important;

        font-size: 9px !important;
        line-height: 1 !important;

        letter-spacing: 0.12em !important;

        transform: none !important;

        pointer-events: none !important;
    }

}
/* =========================================================
   REMOVE GALLERY PHOTO LABELS
========================================================= */

.gallery-photo .photo-label,
.gallery-wheel-image .photo-label {
    display: none !important;
}
/* =========================================================
   GALLERY PHOTO CAPTIONS
========================================================= */

.gallery-photo-caption {
    display: flex;
    flex-direction: column;
    gap: 4px;

    padding: 14px 2px 4px;

    text-align: left;
}


.gallery-photo-caption strong {
    font-size: 11px;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: #d4af37;
}


.gallery-photo-caption span {
    font-size: 12px;

    color: rgba(255,255,255,0.5);
}


@media (max-width: 768px) {

    .gallery-photo-caption {
        padding-top: 12px;
    }

    .gallery-photo-caption strong {
        font-size: 10px;
    }

    .gallery-photo-caption span {
        font-size: 11px;
    }

}
/* =========================================================
   MOBILE GALLERY PROJECT SPACING FIX
========================================================= */

@media (max-width: 768px) {

    .gallery-project-footer {
        position: relative !important;
        z-index: 5 !important;

        clear: both !important;

        margin-top: 35px !important;
        padding-top: 10px !important;
    }


    .gallery-project {
        overflow: visible !important;
    }


    .gallery-photo-grid {
        margin-bottom: 10px !important;
    }

}
/* =========================================================
   GALLERY PHOTO CAPTION FIX
   FINAL DESKTOP + MOBILE VERSION
========================================================= */


/* ---------------------------------------------------------
   PHOTO CONTAINER
--------------------------------------------------------- */

.gallery-photo,
.gallery-wheel-image {
    position: relative;
    overflow: hidden;
}


/* ---------------------------------------------------------
   IMAGE
--------------------------------------------------------- */

.gallery-photo img,
.gallery-wheel-image img {
    display: block;
    width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   CAPTION
   IMPORTANT:
   Captions are now BELOW the image instead of sitting
   over the image.
--------------------------------------------------------- */

.gallery-photo-caption {
    position: static !important;

    width: 100%;

    box-sizing: border-box;

    padding: 12px 14px;

    background: #111111;

    border-top: 1px solid rgba(212, 175, 55, 0.25);

    display: flex;

    flex-direction: column;

    gap: 3px;

    text-align: left;
}


/* ---------------------------------------------------------
   CAPTION TITLE
--------------------------------------------------------- */

.gallery-photo-caption strong {
    display: block;

    font-size: 0.75rem;

    line-height: 1.2;

    letter-spacing: 0.14em;

    font-weight: 700;

    color: #d4af37;
}


/* ---------------------------------------------------------
   CAPTION SUBTITLE
--------------------------------------------------------- */

.gallery-photo-caption span {
    display: block;

    font-size: 0.72rem;

    line-height: 1.4;

    letter-spacing: 0.04em;

    color: #aaaaaa;
}


/* ---------------------------------------------------------
   PHOTO GRID SPACING
--------------------------------------------------------- */

.gallery-photo-grid {
    gap: 18px;
}


/* ---------------------------------------------------------
   MAKE SURE THE PHOTO CARDS DON'T COLLAPSE
--------------------------------------------------------- */

.gallery-photo {
    display: flex;

    flex-direction: column;

    align-self: start;
}


/* ---------------------------------------------------------
   WHEEL IMAGE
--------------------------------------------------------- */

.gallery-wheel-image {
    display: flex;

    flex-direction: column;

    align-self: start;
}


/* ---------------------------------------------------------
   WHEEL FEATURE SPACING
--------------------------------------------------------- */

.gallery-wheel-feature {
    margin-top: 22px;

    gap: 28px;
}


/* ---------------------------------------------------------
   PROJECT FOOTER
   Gives the Lexus description room on mobile.
--------------------------------------------------------- */

.gallery-project-footer {
    position: relative;

    z-index: 2;

    clear: both;

    margin-top: 28px;

    padding-top: 24px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* ---------------------------------------------------------
   MOBILE GALLERY FIX
--------------------------------------------------------- */

@media (max-width: 768px) {


    /* Photo grid becomes one clean column */

    .gallery-photo-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 20px;

        width: 100%;
    }


    /* Every photo gets its own complete card */

    .gallery-photo {
        width: 100%;

        height: auto;

        margin: 0;

        overflow: hidden;
    }


    /* Keep images inside their cards */

    .gallery-photo img {
        width: 100%;

        height: auto;

        display: block;

        object-fit: cover;
    }


    /* Caption stays underneath image */

    .gallery-photo-caption {
        position: static !important;

        width: 100%;

        padding: 11px 13px;

        box-sizing: border-box;

        background: #111111;

        text-align: left;
    }


    /* Wheel section stacks properly */

    .gallery-wheel-feature {
        display: flex;

        flex-direction: column;

        gap: 22px;

        margin-top: 24px;

        width: 100%;
    }


    .gallery-wheel-image {
        width: 100%;

        height: auto;
    }


    .gallery-wheel-image img {
        width: 100%;

        height: auto;

        display: block;
    }


    /* Wheel caption */

    .gallery-wheel-image .gallery-photo-caption {
        position: static !important;
    }


    /* Wheel description */

    .gallery-wheel-copy {
        width: 100%;

        margin: 0;

        padding: 0;
    }


    /* Project footer cannot get covered */

    .gallery-project-footer {
        display: block;

        width: 100%;

        clear: both;

        position: relative;

        margin-top: 30px;

        padding-top: 24px;

        z-index: 5;
    }


    .gallery-project-footer p {
        margin-bottom: 20px;
    }


    /* Extra separation between Mercedes and Lexus */

    .gallery-project + .gallery-project {
        margin-top: 60px;
    }


    /* Make sure the coming-soon section has room */

    .gallery-coming-soon {
        margin-top: 60px;

        position: relative;

        z-index: 2;
    }

}


/* ---------------------------------------------------------
   VERY SMALL PHONES
--------------------------------------------------------- */

@media (max-width: 480px) {


    .gallery-photo-grid {
        gap: 18px;
    }


    .gallery-photo-caption {
        padding: 10px 12px;
    }


    .gallery-photo-caption strong {
        font-size: 0.7rem;
    }


    .gallery-photo-caption span {
        font-size: 0.68rem;
    }


    .gallery-project-footer {
        margin-top: 26px;

        padding-top: 22px;
    }


    .gallery-project + .gallery-project {
        margin-top: 50px;
    }

}
/* =========================================================
   LEXUS GALLERY MOBILE DESCRIPTION FIX
========================================================= */

@media (max-width: 768px) {

    /* Keep the Lexus photo grid completely separate
       from the description below it */

    .gallery-project:nth-of-type(2) {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    .gallery-project:nth-of-type(2) .gallery-photo-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .gallery-project:nth-of-type(2) .gallery-photo {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        margin: 0 0 20px 0 !important;
    }

    .gallery-project:nth-of-type(2) .gallery-photo img {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    .gallery-project:nth-of-type(2) .gallery-photo-caption {
        position: static !important;
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    .gallery-project:nth-of-type(2) .gallery-project-footer {
        display: block !important;
        position: relative !important;
        clear: both !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 35px !important;
        padding-top: 25px !important;
        overflow: visible !important;
        z-index: 20 !important;
    }

    .gallery-project:nth-of-type(2) .gallery-project-footer p {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 20px 0 !important;
        padding: 0 !important;
    }

}
/* =========================================================
   LEXUS PROJECT — MOBILE LAYOUT FIX
========================================================= */

.gallery-project-lexus {
    position: relative !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.gallery-project-lexus .gallery-photo-grid {
    position: relative !important;
    display: grid !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.gallery-project-lexus .gallery-photo {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.gallery-project-lexus .gallery-photo img {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
}

.gallery-project-lexus .gallery-photo-caption {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
}

.gallery-project-lexus .gallery-project-footer {
    position: relative !important;
    display: block !important;
    clear: both !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 40px !important;
    padding-top: 25px !important;
    transform: none !important;
    overflow: visible !important;
    z-index: 100 !important;
}

.gallery-project-lexus .gallery-project-footer p {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    transform: none !important;
}


/* MOBILE */

@media (max-width: 768px) {

    .gallery-project-lexus {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    .gallery-project-lexus .gallery-photo-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        gap: 20px !important;
    }

    .gallery-project-lexus .gallery-photo {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    .gallery-project-lexus .gallery-photo img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
    }

    .gallery-project-lexus .gallery-photo-caption {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    .gallery-project-lexus .gallery-project-footer {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 40px !important;
        padding-top: 25px !important;
        clear: both !important;
    }

}
/* =========================================================
   LEXUS PROJECT — MOBILE LAYOUT FIX
========================================================= */

.gallery-project-lexus {
    position: relative !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.gallery-project-lexus .gallery-photo-grid {
    position: relative !important;
    display: grid !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.gallery-project-lexus .gallery-photo {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.gallery-project-lexus .gallery-photo img {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
}

.gallery-project-lexus .gallery-photo-caption {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
}

.gallery-project-lexus .gallery-project-footer {
    position: relative !important;
    display: block !important;
    clear: both !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 40px !important;
    padding-top: 25px !important;
    transform: none !important;
    overflow: visible !important;
    z-index: 100 !important;
}

.gallery-project-lexus .gallery-project-footer p {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    transform: none !important;
}


/* MOBILE */

/* =========================================================
   FINAL MOBILE GALLERY LAYOUT FIX
========================================================= */

@media screen and (max-width: 768px) {

    /* Keep each project in normal document flow */
    .gallery-project {
        display: block !important;
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* Stack gallery photos vertically */
    .gallery-photo-grid {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* Each photo gets its own space */
    .gallery-photo-grid .gallery-photo {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 18px 0 !important;
        overflow: hidden !important;
    }

    /* Images stay inside their photo */
    .gallery-photo-grid .gallery-photo img {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* FORCE project description below photos */
    .gallery-project > .gallery-project-footer {
        display: block !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 35px !important;
        margin-bottom: 40px !important;
        padding-top: 25px !important;
        clear: both !important;
        float: none !important;
        transform: none !important;
        z-index: 10 !important;
        overflow: visible !important;
    }

    /* Description itself */
    .gallery-project > .gallery-project-footer p {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 20px 0 !important;
        padding: 0 !important;
        clear: both !important;
    }

    /* Quote link */
    .gallery-project > .gallery-project-footer .text-link {
        display: inline-block !important;
        position: relative !important;
        width: auto !important;
        height: auto !important;
        clear: both !important;
    }

    /* Mercedes wheel section */
    .gallery-wheel-feature {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 25px !important;
        overflow: visible !important;
    }

    .gallery-wheel-image {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .gallery-wheel-image img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

}
/* =========================================================
   GALLERY — FINAL LAYOUT FIX
   Desktop + Mobile
========================================================= */

/* Gallery project spacing */
.gallery-project {
    position: relative;
    margin-bottom: 100px;
    overflow: visible;
}

/* Project heading */
.gallery-project-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 35px;
}

.gallery-project-heading h3 {
    margin: 8px 0 0;
}

.project-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    text-align: right;
}

/* Photo grid */
.gallery-photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 35px;
}

/* Large featured image */
.gallery-photo-large {
    grid-column: 1 / -1;
}

/* Photo container */
.gallery-photo,
.gallery-wheel-image {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #111;
}

/* Images */
.gallery-photo img,
.gallery-wheel-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Featured image */
.gallery-photo-large img {
    width: 100%;
    max-height: 650px;
    object-fit: cover;
}

/* Photo captions */
.gallery-photo-caption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 5;

    display: flex;
    flex-direction: column;
    gap: 4px;

    padding: 12px 15px;

    background: rgba(0, 0, 0, 0.78);
    border-left: 2px solid #c9a227;
    border-radius: 6px;

    color: #fff;
}

.gallery-photo-caption strong {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
}

.gallery-photo-caption span {
    font-size: 0.72rem;
    opacity: 0.75;
}

/* Wheel feature */
.gallery-wheel-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 45px;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 45px;
}

.gallery-wheel-image {
    width: 100%;
}

.gallery-wheel-image img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}

.gallery-wheel-copy {
    min-width: 0;
}

.gallery-wheel-copy h4 {
    margin: 10px 0 15px;
}

.gallery-wheel-copy p {
    margin-bottom: 15px;
}

/* Project footer */
.gallery-project-footer {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px;

    padding-top: 30px;
    margin-top: 10px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.gallery-project-footer p {
    max-width: 700px;
    margin: 0;
}

.gallery-project-footer .text-link {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Coming soon section */
.gallery-coming-soon {
    position: relative;
    clear: both;
    margin-top: 40px;
    padding: 80px 30px;
    text-align: center;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.gallery-coming-soon p {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   MOBILE GALLERY
========================================================= */

@media (max-width: 768px) {

    /* Project spacing */
    .gallery-project {
        margin-bottom: 70px;
    }

    /* Heading becomes vertical */
    .gallery-project-heading {
        display: block;
        margin-bottom: 25px;
    }

    .project-meta {
        display: flex;
        align-items: flex-start;
        text-align: left;
        margin-top: 15px;
    }

    /* Photos become single column */
    .gallery-photo-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 25px;
    }

    .gallery-photo-large {
        grid-column: auto;
    }

    /* Prevent captions from affecting layout */
    .gallery-photo-caption {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 10px 12px;
    }

    .gallery-photo-caption strong {
        font-size: 0.7rem;
    }

    .gallery-photo-caption span {
        font-size: 0.65rem;
    }

    /* Wheel section stacks */
    .gallery-wheel-feature {
        display: flex;
        flex-direction: column;
        gap: 25px;
        margin-top: 25px;
        margin-bottom: 35px;
    }

    .gallery-wheel-image {
        width: 100%;
    }

    .gallery-wheel-image img {
        width: 100%;
        height: auto;
        max-height: none;
    }

    .gallery-wheel-copy {
        width: 100%;
    }

    /* IMPORTANT:
       Keeps descriptions below photos */
    .gallery-project-footer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;

        clear: both;

        padding-top: 25px;
        margin-top: 10px;
    }

    .gallery-project-footer p {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .gallery-project-footer .text-link {
        white-space: normal;
    }

    /* Coming soon */
    .gallery-coming-soon {
        margin-top: 30px;
        padding: 60px 20px;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 480px) {

    .gallery-project {
        margin-bottom: 55px;
    }

    .gallery-photo-grid {
        gap: 12px;
    }

    .gallery-photo-caption {
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    .gallery-wheel-feature {
        gap: 20px;
    }

    .gallery-project-footer {
        gap: 18px;
    }

    .gallery-coming-soon {
        padding: 50px 15px;
    }

}
/* =========================================================
   SERVICES — PREMIUM PACKAGE PRESENTATION
========================================================= */

.service-package-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

.service-package-description {
    min-height: 90px;
}

.service-list {
    flex: 1;
}

.service-package-button {
    margin-top: auto;
}


/* =========================================================
   FEATURED BLACK LABEL
========================================================= */

.featured-service {
    transform: translateY(-8px);
}

.featured-service .featured-badge {
    z-index: 5;
}


/* =========================================================
   SPECIALTY SERVICES
========================================================= */

.addon-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.addon-service-card p:last-of-type {
    flex: 1;
}

.addon-link {
    margin-top: auto;
}


/* =========================================================
   HEADLIGHT RESTORATION — FEATURED SPECIALTY
========================================================= */

.addon-service-card.headlight-specialty {
    border-color: rgba(201, 162, 39, 0.7);
    box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.15);
}

.addon-service-card.headlight-specialty::before {
    content: "FEATURED SPECIALTY";
    position: absolute;
    top: 0;
    right: 0;

    padding: 7px 12px;

    background: #c9a227;
    color: #050505;

    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;

    border-radius: 0 0 0 8px;
}


/* =========================================================
   PRICING NOTE
========================================================= */

.service-pricing-note {
    margin-top: 35px;
}


/* =========================================================
   MOBILE SERVICES
========================================================= */

@media (max-width: 768px) {

    .featured-service {
        transform: none;
    }

    .service-package-description {
        min-height: auto;
    }

    .addon-service-card.headlight-specialty {
        margin-top: 5px;
    }

}
/* =====================================================
   MOBILE HEADER SPACING FIX
   Prevent header from overlapping page content
===================================================== */

@media (max-width: 700px) {

    .site-header {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        z-index: 1000;
    }

    .site-header .nav-container {
        min-height: 120px;
    }

    main {
        position: relative;
        padding-top: 0;
    }

    .home-transformations {
        position: relative;
        z-index: 1;
    }

}
@media (max-width: 700px) {

    .site-header {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
    }

    .site-header .nav-container {
        height: auto !important;
        min-height: 110px !important;
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

}
/* =====================================================
   MOBILE LAYOUT / OVERLAP FIXES
   Enhance My Ride
===================================================== */

@media (max-width: 700px) {

    /* -------------------------------------------------
       GENERAL MOBILE FLOW
    ------------------------------------------------- */

    html,
    body {
        overflow-x: hidden;
    }

    main {
        overflow-x: hidden;
    }


    /* -------------------------------------------------
       ADD-ON / SPECIALTY CARDS
       Prevent badge + specialty label overlap
    ------------------------------------------------- */

    .addon-card,
    .specialty-card,
    .service-card,
    .enhancement-card {
        position: relative;
        overflow: hidden;
    }

    .addon-card .featured-badge,
    .specialty-card .featured-badge,
    .service-card .featured-badge,
    .enhancement-card .featured-badge {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 5;
    }

    .addon-card .specialty-number,
    .specialty-card .specialty-number,
    .service-card .specialty-number,
    .enhancement-card .specialty-number {
        display: block;
        margin-bottom: 42px;
    }

    .addon-card h2,
    .addon-card h3,
    .specialty-card h2,
    .specialty-card h3,
    .service-card h2,
    .service-card h3,
    .enhancement-card h2,
    .enhancement-card h3 {
        position: relative;
        z-index: 2;
    }


    /* -------------------------------------------------
       COMMON CARD LABEL → TITLE SPACING
       Stops small gold labels from touching headings
    ------------------------------------------------- */

    .eyebrow {
        position: relative;
        z-index: 2;
    }

    .eyebrow + h1,
    .eyebrow + h2,
    .eyebrow + h3 {
        margin-top: 18px;
    }


    /* -------------------------------------------------
       SERVICE AREA CARDS
       Fix:
       "01 • PRIMARY"
       overlapping
       "Alameda"
    ------------------------------------------------- */

    .area-card,
    .service-area-card,
    .location-card,
    .service-location-card {
        position: relative;
        overflow: hidden;
    }

    .area-card .card-number,
    .service-area-card .card-number,
    .location-card .card-number,
    .service-location-card .card-number {
        display: block;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        margin-bottom: 14px;
        line-height: 1.2;
    }

    .area-card h2,
    .area-card h3,
    .service-area-card h2,
    .service-area-card h3,
    .location-card h2,
    .location-card h3,
    .service-location-card h2,
    .service-location-card h3 {
        position: relative;
        top: auto;
        margin-top: 0;
        line-height: 1.05;
    }


    /* -------------------------------------------------
       LOCATION META LABELS
       Covers classes commonly used for:
       PRIMARY / EAST BAY / etc.
    ------------------------------------------------- */

    .location-meta,
    .area-meta,
    .service-area-meta,
    .location-label,
    .area-label {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        display: block !important;
        margin-bottom: 12px !important;
        line-height: 1.2 !important;
    }


    /* -------------------------------------------------
       ABOUT / EXPERIENCE FEATURE BLOCK
       Let the graphic/card flow naturally
    ------------------------------------------------- */

    .about-image,
    .about-visual,
    .experience-image,
    .experience-visual,
    .about-feature-image,
    .experience-card {
        position: relative;
        height: auto;
        min-height: 0;
    }

    .about-image img,
    .about-visual img,
    .experience-image img,
    .experience-visual img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }


    /* -------------------------------------------------
       MOBILE SECTION HEADINGS
    ------------------------------------------------- */

    .center-heading {
        position: relative;
        z-index: 2;
    }

    .center-heading h1,
    .center-heading h2 {
        position: relative;
        margin-top: 14px;
    }


    /* -------------------------------------------------
       PREVENT LARGE DESKTOP SPACING FROM
       CARRYING INTO MOBILE
    ------------------------------------------------- */

    .section {
        overflow: hidden;
    }


    /* -------------------------------------------------
       FLOATING CALL BUTTON
       Keep it above page content but away from
       text/card positioning
    ------------------------------------------------- */

    .floating-call-button,
    .call-button,
    .floating-action-button {
        z-index: 9998;
    }

}