/*
|--------------------------------------------------------------------------
| Royal Servicess LLC
| Public Fleet + Vehicle Detail Pages
|--------------------------------------------------------------------------
|
| ONYX-FLEET-2026
|
| Designed specifically for transparent vehicle PNG artwork.
|
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   01. FLEET HERO
   ========================================================================== */

.fleet-hero {
    position: relative;

    overflow: hidden;

    padding:
        clamp(72px, 8vw, 118px)
        0
        clamp(64px, 7vw, 96px);

    border-bottom:
        1px solid
        var(--public-line);

    background:
        radial-gradient(
            circle at 80% 18%,
            rgba(200, 165, 91, 0.09),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #09090a,
            #0b0b0c
        );
}

.fleet-hero::before {
    content: "FLEET";

    position: absolute;

    right: -0.05em;
    bottom: -0.26em;

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

    font-family:
        var(--public-serif);

    font-size:
        clamp(
            10rem,
            24vw,
            22rem
        );

    line-height: 1;

    pointer-events: none;
}

.fleet-hero__grid {
    position: relative;
    z-index: 2;

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

    align-items: end;

    gap:
        clamp(
            55px,
            8vw,
            120px
        );
}

.fleet-hero__content {
    max-width: 770px;
}

.fleet-hero__title {
    margin:
        19px
        0
        0;

    color:
        var(--public-text);

    font-family:
        var(--public-serif);

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

    font-weight: 400;
    line-height: 0.92;

    letter-spacing: -0.055em;
}

.fleet-hero__title span {
    display: block;

    color:
        var(--public-gold-soft);

    font-style: italic;
}

.fleet-hero__lead {
    max-width: 660px;

    margin:
        28px
        0
        0;

    color: #a19d95;

    font-size: 0.92rem;
    line-height: 1.8;
}

.fleet-hero__actions {
    margin-top: 30px;

    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}

.fleet-hero__summary {
    overflow: hidden;

    border:
        1px solid
        var(--public-line);

    border-radius: 18px;

    background:
        rgba(16, 16, 17, 0.82);

    box-shadow:
        var(--public-shadow);

    backdrop-filter: blur(12px);
}

.fleet-hero__summary-item {
    padding:
        20px
        22px;

    display: flex;
    flex-direction: column;
    gap: 6px;

    border-bottom:
        1px solid
        var(--public-line);
}

.fleet-hero__summary-item:last-child {
    border-bottom: 0;
}

.fleet-hero__summary-item span {
    color:
        var(--public-muted-dark);

    font-size: 0.53rem;
    font-weight: 900;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fleet-hero__summary-item strong {
    color: #d8d3c9;

    font-family:
        var(--public-serif);

    font-size: 1.12rem;
    font-weight: 400;
}


/* ==========================================================================
   02. FLEET SECTION
   ========================================================================== */

.fleet-section {
    position: relative;

    padding:
        clamp(74px, 8vw, 118px)
        0;

    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(200, 165, 91, 0.028),
            transparent 26%
        ),
        #09090a;
}

.fleet-section__heading {
    margin-bottom:
        clamp(40px, 5vw, 64px);

    display: grid;
    grid-template-columns:
        minmax(0, 0.72fr)
        minmax(310px, 0.48fr);

    align-items: end;

    gap:
        clamp(
            40px,
            7vw,
            90px
        );
}

.fleet-section__heading h2 {
    max-width: 620px;

    margin:
        14px
        0
        0;

    font-family:
        var(--public-serif);

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

    font-weight: 400;
    line-height: 0.98;

    letter-spacing: -0.04em;
}

.fleet-section__heading > p {
    margin: 0;

    color: #858179;

    font-size: 0.8rem;
    line-height: 1.75;
}


/* ==========================================================================
   03. FLEET GRID
   ========================================================================== */

.fleet-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.fleet-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        var(--public-line);

    border-radius: 21px;

    background:
        linear-gradient(
            150deg,
            #121213,
            #0d0d0e
        );

    box-shadow:
        0 18px 48px
        rgba(0, 0, 0, 0.18);

    transition:
        transform
        var(--public-transition),

        border-color
        var(--public-transition),

        box-shadow
        var(--public-transition);
}

.fleet-card:hover {
    border-color:
        rgba(200, 165, 91, 0.27);

    box-shadow:
        0 28px 68px
        rgba(0, 0, 0, 0.3);

    transform:
        translateY(-4px);
}

.fleet-card__media {
    position: relative;

    height: 310px;

    overflow: hidden;

    border-bottom:
        1px solid
        var(--public-line);

    background:
        radial-gradient(
            ellipse at 50% 76%,
            rgba(200, 165, 91, 0.12),
            transparent 44%
        ),
        linear-gradient(
            180deg,
            #171718,
            #101011
        );
}

.fleet-card__media::after {
    content: "";

    position: absolute;
    z-index: 1;

    left: 20%;
    right: 20%;
    bottom: 28px;

    height: 25px;

    border-radius: 50%;

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

    filter: blur(14px);

    pointer-events: none;
}

.fleet-card__badges {
    position: absolute;
    z-index: 5;

    top: 17px;
    left: 17px;
    right: 17px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    pointer-events: none;
}

.fleet-card__badges span {
    padding:
        6px
        10px;

    color: #b8b4ab;

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

    border-radius: 999px;

    background:
        rgba(7, 7, 8, 0.65);

    font-size: 0.49rem;
    font-weight: 900;

    letter-spacing: 0.11em;
    text-transform: uppercase;

    backdrop-filter: blur(10px);
}

.vehicle-media--fleet {
    width: 100% !important;
    height: 310px !important;
    min-height: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        transparent !important;
}

.vehicle-media--fleet
.vehicle-media__image {
    position: relative;
    z-index: 2;

    width: 100% !important;
    height: 100% !important;

    padding:
        31px
        39px
        20px;

    object-fit:
        contain !important;

    object-position:
        center !important;

    filter:
        drop-shadow(
            0 20px 18px
            rgba(0, 0, 0, 0.4)
        );

    transition:
        transform
        650ms
        cubic-bezier(.2, .7, .3, 1);
}

.fleet-card:hover
.vehicle-media--fleet
.vehicle-media__image {
    transform:
        scale(1.045);
}

.fleet-card__image-link {
    position: absolute;
    z-index: 7;

    right: 17px;
    bottom: 17px;

    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    color: #080808;

    border-radius: 50%;

    background:
        var(--public-gold-soft);

    font-size: 1rem;

    text-decoration: none;

    transition:
        transform
        var(--public-transition),

        background
        var(--public-transition);
}

.fleet-card__image-link:hover {
    background:
        var(--public-gold-pale);

    transform:
        rotate(7deg)
        scale(1.04);
}

.fleet-card__body {
    padding:
        26px
        27px
        28px;
}

.fleet-card__title-row h2 {
    margin:
        8px
        0
        0;

    font-family:
        var(--public-serif);

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

    font-weight: 400;
    line-height: 1.08;
}

.fleet-card__description {
    min-height: 50px;

    margin:
        14px
        0
        22px;

    color: #827e77;

    font-size: 0.76rem;
    line-height: 1.7;
}

.fleet-card__pricing {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    overflow: hidden;

    margin-bottom: 15px;

    border:
        1px solid
        var(--public-line);

    border-radius: 13px;

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

.fleet-card__pricing > div {
    padding:
        15px
        17px;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fleet-card__pricing > div:first-child {
    border-right:
        1px solid
        var(--public-line);
}

.fleet-card__pricing span {
    color: #65615b;

    font-size: 0.51rem;
    font-weight: 900;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.fleet-card__pricing strong {
    color:
        var(--public-gold-soft);

    font-family:
        var(--public-serif);

    font-size: 1.2rem;
    font-weight: 400;
}

.fleet-card__pricing-unavailable {
    margin-bottom: 15px;

    padding:
        15px
        17px;

    color: #8b877f;

    border:
        1px solid
        var(--public-line);

    border-radius: 13px;

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

    font-size: 0.7rem;
}

.fleet-card__note {
    margin-bottom: 18px;

    padding:
        13px
        15px;

    color: #76726c;

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

    background:
        rgba(200, 165, 91, 0.03);

    font-size: 0.66rem;
    line-height: 1.6;
}

.fleet-card__actions {
    padding-top: 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    border-top:
        1px solid
        var(--public-line);
}

.fleet-card__details {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color:
        var(--public-gold-soft);

    font-size: 0.61rem;
    font-weight: 900;

    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.fleet-card__details span {
    transition:
        transform
        var(--public-transition);
}

.fleet-card__details:hover span {
    transform:
        translateX(4px);
}

.fleet-card__actions
.public-button {
    min-height: 40px;

    padding-inline: 17px;
}


/* ==========================================================================
   04. EMPTY FLEET
   ========================================================================== */

.fleet-empty {
    padding:
        clamp(
            35px,
            6vw,
            65px
        );

    border:
        1px solid
        var(--public-line);

    border-radius: 20px;

    background:
        #101011;
}

.fleet-empty h2 {
    margin:
        13px
        0;

    font-family:
        var(--public-serif);

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

    font-weight: 400;
}

.fleet-empty p {
    margin: 0;

    color:
        var(--public-muted);
}


/* ==========================================================================
   05. INVENTORY EXPLAINER
   ========================================================================== */

.fleet-explainer {
    padding:
        clamp(74px, 8vw, 112px)
        0;

    border-top:
        1px solid
        var(--public-line);

    border-bottom:
        1px solid
        var(--public-line);

    background:
        #0b0b0c;
}

.fleet-explainer__grid {
    display: grid;
    grid-template-columns:
        minmax(280px, 0.7fr)
        minmax(0, 1fr);

    align-items: start;

    gap:
        clamp(
            50px,
            8vw,
            110px
        );
}

.fleet-explainer__grid h2 {
    max-width: 520px;

    margin:
        14px
        0
        0;

    font-family:
        var(--public-serif);

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

    font-weight: 400;
    line-height: 1;

    letter-spacing: -0.04em;
}

.fleet-explainer__steps {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 11px;
}

.fleet-explainer__steps article {
    min-height: 210px;

    padding:
        23px
        22px;

    border:
        1px solid
        var(--public-line);

    border-radius: 15px;

    background:
        #111112;
}

.fleet-explainer__steps
article > span {
    color:
        var(--public-gold);

    font-family:
        var(--public-serif);

    font-size: 0.7rem;
}

.fleet-explainer__steps h3 {
    margin:
        52px
        0
        9px;

    font-family:
        var(--public-serif);

    font-size: 1.45rem;
    font-weight: 400;
}

.fleet-explainer__steps p {
    margin: 0;

    color: #77736d;

    font-size: 0.7rem;
    line-height: 1.65;
}


/* ==========================================================================
   06. FLEET FINAL CTA
   ========================================================================== */

.fleet-final,
.vehicle-detail-final {
    padding:
        22px
        0
        clamp(78px, 8vw, 110px);

    background:
        #09090a;
}

.fleet-final__panel,
.vehicle-detail-final__panel {
    position: relative;

    overflow: hidden;

    padding:
        clamp(
            40px,
            6vw,
            68px
        );

    border:
        1px solid
        rgba(200, 165, 91, 0.2);

    border-radius: 23px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(200, 165, 91, 0.12),
            transparent 34%
        ),
        linear-gradient(
            130deg,
            #171511,
            #0d0d0e 67%
        );

    box-shadow:
        var(--public-shadow);
}

.fleet-final__panel::after,
.vehicle-detail-final__panel::after {
    content: "RS";

    position: absolute;

    right: 20px;
    bottom: -62px;

    color:
        rgba(200, 165, 91, 0.035);

    font-family:
        var(--public-serif);

    font-size: 12rem;

    pointer-events: none;
}

.fleet-final__panel > *,
.vehicle-detail-final__panel > * {
    position: relative;
    z-index: 2;
}

.fleet-final__panel h2,
.vehicle-detail-final__panel h2 {
    max-width: 760px;

    margin:
        14px
        0
        18px;

    font-family:
        var(--public-serif);

    font-size:
        clamp(
            2.6rem,
            4.8vw,
            4.6rem
        );

    font-weight: 400;
    line-height: 1;

    letter-spacing: -0.04em;
}

.fleet-final__panel p,
.vehicle-detail-final__panel p {
    max-width: 620px;

    margin:
        0
        0
        26px;

    color: #8b877f;

    font-size: 0.8rem;
    line-height: 1.75;
}


/* ==========================================================================
   07. VEHICLE DETAIL HERO
   ========================================================================== */

.vehicle-detail-hero {
    position: relative;

    overflow: hidden;

    padding:
        31px
        0
        clamp(64px, 7vw, 96px);

    border-bottom:
        1px solid
        var(--public-line);

    background:
        radial-gradient(
            circle at 80% 35%,
            rgba(200, 165, 91, 0.08),
            transparent 30%
        ),
        #0a0a0b;
}

.vehicle-detail-hero__breadcrumb {
    min-width: 0;

    margin-bottom:
        clamp(
            40px,
            6vw,
            68px
        );

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;

    color: #68645e;

    font-size: 0.59rem;
    font-weight: 800;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.vehicle-detail-hero__breadcrumb a {
    color: #858179;

    text-decoration: none;

    transition:
        color
        var(--public-transition);
}

.vehicle-detail-hero__breadcrumb a:hover {
    color:
        var(--public-gold-soft);
}

.vehicle-detail-hero__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.78fr)
        minmax(430px, 0.9fr);

    align-items: center;

    gap:
        clamp(
            50px,
            8vw,
            110px
        );
}

.vehicle-detail-hero__content h1 {
    max-width: 650px;

    margin:
        16px
        0
        0;

    font-family:
        var(--public-serif);

    font-size:
        clamp(
            3.8rem,
            6.5vw,
            6.6rem
        );

    font-weight: 400;
    line-height: 0.94;

    letter-spacing: -0.05em;
}

.vehicle-detail-hero__descriptor {
    max-width: 560px;

    margin:
        23px
        0
        0;

    color: #96928a;

    font-size: 0.88rem;
    line-height: 1.75;
}

.vehicle-detail-hero__tags {
    margin-top: 25px;

    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.vehicle-detail-hero__tags span {
    padding:
        7px
        10px;

    color: #96928a;

    border:
        1px solid
        var(--public-line);

    border-radius: 999px;

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

    font-size: 0.53rem;
    font-weight: 850;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.vehicle-detail-hero__actions {
    margin-top: 28px;

    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vehicle-detail-hero__visual {
    min-width: 0;
}

.vehicle-detail-hero__media {
    position: relative;

    height: 410px;

    overflow: hidden;

    border:
        1px solid
        var(--public-line-strong);

    border-radius: 23px;

    background:
        radial-gradient(
            ellipse at 50% 72%,
            rgba(200, 165, 91, 0.13),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #171718,
            #0d0d0e
        );

    box-shadow:
        var(--public-shadow);
}

.vehicle-detail-hero__media::after {
    content: "";

    position: absolute;
    z-index: 1;

    left: 18%;
    right: 18%;
    bottom: 32px;

    height: 27px;

    border-radius: 50%;

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

    filter: blur(15px);

    pointer-events: none;
}

.vehicle-detail-hero__media-label {
    position: absolute;
    z-index: 5;

    top: 18px;
    left: 18px;

    padding:
        7px
        10px;

    color: #b3afa6;

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

    border-radius: 999px;

    background:
        rgba(7, 7, 8, 0.62);

    font-size: 0.51rem;
    font-weight: 900;

    letter-spacing: 0.11em;
    text-transform: uppercase;

    backdrop-filter: blur(10px);
}

.vehicle-media--detail {
    width: 100% !important;
    height: 410px !important;
    min-height: 0 !important;

    border: 0 !important;

    background:
        transparent !important;
}

.vehicle-media--detail
.vehicle-media__image {
    position: relative;
    z-index: 2;

    width: 100% !important;
    height: 100% !important;

    padding:
        46px
        40px
        25px;

    object-fit:
        contain !important;

    object-position:
        center !important;

    filter:
        drop-shadow(
            0 22px 20px
            rgba(0, 0, 0, 0.4)
        );

    transition:
        transform
        650ms
        cubic-bezier(.2, .7, .3, 1);
}

.vehicle-detail-hero__media:hover
.vehicle-media--detail
.vehicle-media__image {
    transform:
        scale(1.035);
}


/* ==========================================================================
   08. VEHICLE DETAIL BODY
   ========================================================================== */

.vehicle-detail-section {
    padding:
        clamp(76px, 8vw, 120px)
        0;

    background:
        #09090a;
}

.vehicle-detail-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        335px;

    align-items: start;

    gap:
        clamp(
            55px,
            8vw,
            110px
        );
}

.vehicle-detail-main {
    min-width: 0;
}

.vehicle-detail-block {
    padding-bottom: 51px;
    margin-bottom: 51px;

    border-bottom:
        1px solid
        var(--public-line);
}

.vehicle-detail-block:last-child {
    margin-bottom: 0;
}

.vehicle-detail-block h2 {
    max-width: 680px;

    margin:
        13px
        0
        24px;

    font-family:
        var(--public-serif);

    font-size:
        clamp(
            2.2rem,
            3.8vw,
            3.5rem
        );

    font-weight: 400;
    line-height: 1.06;

    letter-spacing: -0.03em;
}

.vehicle-detail-copy {
    max-width: 730px;

    margin:
        0
        0
        22px;

    color: #918d85;

    font-size: 0.82rem;
    line-height: 1.82;
}

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

    gap: 10px;

    margin-bottom: 25px;
}

.vehicle-fact {
    min-width: 0;

    padding:
        18px
        20px;

    display: flex;
    flex-direction: column;
    gap: 6px;

    border:
        1px solid
        var(--public-line);

    border-radius: 13px;

    background:
        #111112;
}

.vehicle-fact span {
    color: #64615b;

    font-size: 0.51rem;
    font-weight: 900;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.vehicle-fact strong {
    overflow-wrap: anywhere;

    color: #d7d2c8;

    font-family:
        var(--public-serif);

    font-size: 1.17rem;
    font-weight: 400;
}


/* ==========================================================================
   09. AVAILABILITY FLOW
   ========================================================================== */

.vehicle-flow {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    margin-top: 29px;
}

.vehicle-flow article {
    min-height: 207px;

    padding:
        22px
        21px;

    border:
        1px solid
        var(--public-line);

    border-radius: 14px;

    background:
        #111112;
}

.vehicle-flow article > span {
    color:
        var(--public-gold);

    font-family:
        var(--public-serif);

    font-size: 0.69rem;
}

.vehicle-flow h3 {
    margin:
        48px
        0
        9px;

    font-family:
        var(--public-serif);

    font-size: 1.35rem;
    font-weight: 400;
}

.vehicle-flow p {
    margin: 0;

    color: #77736d;

    font-size: 0.69rem;
    line-height: 1.65;
}


/* ==========================================================================
   10. RELEASE READINESS
   ========================================================================== */

.vehicle-release-points {
    margin-top: 27px;

    border-top:
        1px solid
        var(--public-line);
}

.vehicle-release-points > div {
    padding:
        15px
        2px;

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

    align-items: start;
    gap: 13px;

    border-bottom:
        1px solid
        var(--public-line);
}

.vehicle-release-points span {
    width: 24px;
    height: 24px;

    display: grid;
    place-items: center;

    color: #080808;

    border-radius: 50%;

    background:
        var(--public-gold);

    font-size: 0.62rem;
    font-weight: 900;
}

.vehicle-release-points p {
    margin: 1px 0 0;

    color: #8d8981;

    font-size: 0.76rem;
    line-height: 1.65;
}


/* ==========================================================================
   11. BOOKING CARD
   ========================================================================== */

.vehicle-booking-card__inner {
    position: sticky;

    top: 102px;

    padding:
        27px;

    border:
        1px solid
        rgba(200, 165, 91, 0.2);

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            #151411,
            #0e0e0f
        );

    box-shadow:
        0 22px 55px
        rgba(0, 0, 0, 0.24);
}

.vehicle-booking-card h2 {
    margin:
        12px
        0
        22px;

    font-family:
        var(--public-serif);

    font-size: 2rem;
    font-weight: 400;
    line-height: 1.1;
}

.vehicle-booking-card__rates {
    overflow: hidden;

    margin-bottom: 17px;

    border:
        1px solid
        var(--public-line);

    border-radius: 13px;
}

.vehicle-booking-card__rates > div {
    padding:
        15px
        17px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;

    border-bottom:
        1px solid
        var(--public-line);
}

.vehicle-booking-card__rates > div:last-child {
    border-bottom: 0;
}

.vehicle-booking-card__rates span {
    color: #716d67;

    font-size: 0.55rem;
    font-weight: 850;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.vehicle-booking-card__rates strong {
    color:
        var(--public-gold-soft);

    font-family:
        var(--public-serif);

    font-size: 1.08rem;
    font-weight: 400;
}

.vehicle-booking-card__note {
    margin:
        0
        0
        20px;

    color: #78746e;

    font-size: 0.68rem;
    line-height: 1.7;
}

.vehicle-booking-card__unavailable {
    margin-bottom: 20px;

    padding:
        15px;

    color: #89857d;

    border:
        1px solid
        var(--public-line);

    border-radius: 12px;

    font-size: 0.69rem;
}

.vehicle-booking-card
.public-button {
    width: 100%;
}

.vehicle-booking-card__reserve-link {
    margin-top: 16px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    color:
        var(--public-gold-soft);

    font-size: 0.59rem;
    font-weight: 900;

    letter-spacing: 0.07em;
    text-decoration: none;
    text-transform: uppercase;
}

.vehicle-booking-card__reserve-link span {
    transition:
        transform
        var(--public-transition);
}

.vehicle-booking-card__reserve-link:hover span {
    transform:
        translateX(4px);
}


/* ==========================================================================
   12. RELATED VEHICLES
   ========================================================================== */

.vehicle-related {
    padding:
        clamp(72px, 8vw, 108px)
        0;

    border-top:
        1px solid
        var(--public-line);

    background:
        #0b0b0c;
}

.vehicle-related__heading {
    margin-bottom: 36px;

    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
}

.vehicle-related__heading h2 {
    margin:
        12px
        0
        0;

    font-family:
        var(--public-serif);

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

    font-weight: 400;
    line-height: 1;
}

.vehicle-related__all {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color:
        var(--public-gold-soft);

    font-size: 0.61rem;
    font-weight: 900;

    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.vehicle-related__grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;
}

.vehicle-related-card {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        var(--public-line);

    border-radius: 16px;

    background:
        #111112;
}

.vehicle-related-card__media {
    height: 205px;

    overflow: hidden;

    border-bottom:
        1px solid
        var(--public-line);

    background:
        radial-gradient(
            ellipse at 50% 75%,
            rgba(200, 165, 91, 0.09),
            transparent 46%
        ),
        #151516;
}

.vehicle-media--related {
    width: 100% !important;
    height: 205px !important;

    border: 0 !important;

    background:
        transparent !important;
}

.vehicle-media--related
.vehicle-media__image {
    width: 100% !important;
    height: 100% !important;

    padding:
        25px
        25px
        13px;

    object-fit:
        contain !important;

    filter:
        drop-shadow(
            0 14px 14px
            rgba(0, 0, 0, 0.35)
        );

    transition:
        transform
        500ms ease;
}

.vehicle-related-card:hover
.vehicle-media--related
.vehicle-media__image {
    transform:
        scale(1.04);
}

.vehicle-related-card__body {
    padding:
        20px
        21px
        22px;
}

.vehicle-related-card h3 {
    margin:
        7px
        0
        15px;

    font-family:
        var(--public-serif);

    font-size: 1.48rem;
    font-weight: 400;
}

.vehicle-related-card__body a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color:
        var(--public-gold-soft);

    font-size: 0.58rem;
    font-weight: 900;

    letter-spacing: 0.07em;
    text-decoration: none;
    text-transform: uppercase;
}


/* ==========================================================================
   13. VEHICLE PLACEHOLDER SUPPORT
   ========================================================================== */

.vehicle-media--fleet
.vehicle-media__placeholder,
.vehicle-media--detail
.vehicle-media__placeholder,
.vehicle-media--related
.vehicle-media__placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background:
        transparent !important;

    color:
        var(--public-muted);
}

.vehicle-media--fleet
.vehicle-media__placeholder-mark,
.vehicle-media--detail
.vehicle-media__placeholder-mark,
.vehicle-media--related
.vehicle-media__placeholder-mark {
    width: 52px;
    height: 52px;

    margin-bottom: 10px;

    display: grid;
    place-items: center;

    color:
        var(--public-gold-soft);

    border:
        1px solid
        rgba(200, 165, 91, 0.28);

    border-radius: 50%;

    font-family:
        var(--public-serif);
}

.vehicle-media--fleet
.vehicle-media__placeholder-name,
.vehicle-media--detail
.vehicle-media__placeholder-name,
.vehicle-media--related
.vehicle-media__placeholder-name {
    color: #b8b4ab;

    font-family:
        var(--public-serif);

    font-size: 1rem;
}

.vehicle-media--fleet
.vehicle-media__placeholder-copy,
.vehicle-media--detail
.vehicle-media__placeholder-copy,
.vehicle-media--related
.vehicle-media__placeholder-copy {
    margin-top: 5px;

    color: #625f59;

    font-size: 0.52rem;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* ==========================================================================
   14. TABLET
   ========================================================================== */

@media (max-width: 980px) {

    .fleet-hero__grid {
        grid-template-columns: 1fr;

        gap: 39px;
    }

    .fleet-hero__summary {
        max-width: 700px;

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

    .fleet-hero__summary-item {
        border-bottom: 0;

        border-right:
            1px solid
            var(--public-line);
    }

    .fleet-hero__summary-item:last-child {
        border-right: 0;
    }

    .fleet-section__heading {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .fleet-explainer__grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .vehicle-detail-hero__grid {
        grid-template-columns: 1fr;

        gap: 43px;
    }

    .vehicle-detail-hero__visual {
        max-width: 760px;
    }

    .vehicle-detail-hero__media,
    .vehicle-media--detail {
        height: 390px !important;
    }

    .vehicle-detail-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .vehicle-booking-card {
        max-width: 620px;
    }

    .vehicle-booking-card__inner {
        position: static;
    }
}


/* ==========================================================================
   15. MOBILE
   ========================================================================== */

@media (max-width: 720px) {

    .fleet-hero {
        padding:
            58px
            0
            52px;
    }

    .fleet-hero__title {
        font-size:
            clamp(
                3rem,
                14vw,
                4.7rem
            );
    }

    .fleet-hero__lead {
        font-size: 0.82rem;
    }

    .fleet-hero__actions {
        flex-direction: column;
    }

    .fleet-hero__actions
    .public-button {
        width: 100%;
    }

    .fleet-hero__summary {
        grid-template-columns: 1fr;
    }

    .fleet-hero__summary-item {
        border-right: 0;

        border-bottom:
            1px solid
            var(--public-line);
    }

    .fleet-hero__summary-item:last-child {
        border-bottom: 0;
    }

    .fleet-section {
        padding:
            62px
            0;
    }

    .fleet-section__heading h2 {
        font-size:
            clamp(
                2.4rem,
                11vw,
                3.5rem
            );
    }

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

        gap: 14px;
    }

    .fleet-card__media,
    .vehicle-media--fleet {
        height: 245px !important;
    }

    .vehicle-media--fleet
    .vehicle-media__image {
        padding:
            25px
            24px
            15px;
    }

    .fleet-card__body {
        padding:
            22px
            21px
            23px;
    }

    .fleet-card__description {
        min-height: 0;
    }

    .fleet-card__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .fleet-card__actions
    .public-button {
        width: 100%;
    }

    .fleet-explainer {
        padding:
            62px
            0;
    }

    .fleet-explainer__grid h2 {
        font-size:
            clamp(
                2.4rem,
                11vw,
                3.5rem
            );
    }

    .fleet-explainer__steps {
        grid-template-columns: 1fr;
    }

    .fleet-explainer__steps article {
        min-height: 175px;
    }

    .fleet-explainer__steps h3 {
        margin-top: 35px;
    }

    .fleet-final__panel,
    .vehicle-detail-final__panel {
        padding:
            34px
            23px;
    }

    .fleet-final__panel h2,
    .vehicle-detail-final__panel h2 {
        font-size:
            clamp(
                2.5rem,
                11.5vw,
                3.8rem
            );
    }

    .fleet-final__panel
    .public-button,
    .vehicle-detail-final__panel
    .public-button {
        width: 100%;
    }

    .vehicle-detail-hero {
        padding:
            24px
            0
            55px;
    }

    .vehicle-detail-hero__breadcrumb {
        margin-bottom: 36px;
    }

    .vehicle-detail-hero__content h1 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );
    }

    .vehicle-detail-hero__descriptor {
        font-size: 0.81rem;
    }

    .vehicle-detail-hero__actions {
        flex-direction: column;
    }

    .vehicle-detail-hero__actions
    .public-button {
        width: 100%;
    }

    .vehicle-detail-hero__media,
    .vehicle-media--detail {
        height: 270px !important;
    }

    .vehicle-media--detail
    .vehicle-media__image {
        padding:
            33px
            20px
            18px;
    }

    .vehicle-detail-section {
        padding:
            63px
            0;
    }

    .vehicle-detail-block {
        padding-bottom: 39px;
        margin-bottom: 39px;
    }

    .vehicle-detail-block h2 {
        font-size:
            clamp(
                2rem,
                9vw,
                2.8rem
            );
    }

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

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

    .vehicle-flow article {
        min-height: 165px;
    }

    .vehicle-flow h3 {
        margin-top: 34px;
    }

    .vehicle-booking-card__inner {
        padding:
            23px
            21px;
    }

    .vehicle-related {
        padding:
            62px
            0;
    }

    .vehicle-related__heading {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .vehicle-related-card__media,
    .vehicle-media--related {
        height: 225px !important;
    }
}


/* ==========================================================================
   16. SMALL PHONE
   ========================================================================== */

@media (max-width: 430px) {

    .fleet-card__pricing {
        grid-template-columns: 1fr;
    }

    .fleet-card__pricing > div:first-child {
        border-right: 0;

        border-bottom:
            1px solid
            var(--public-line);
    }

    .fleet-card__media,
    .vehicle-media--fleet {
        height: 220px !important;
    }

    .vehicle-detail-hero__media,
    .vehicle-media--detail {
        height: 235px !important;
    }

    .vehicle-detail-hero__media-label {
        top: 12px;
        left: 12px;
    }
}


/* ==========================================================================
   17. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .fleet-card,
    .fleet-card *,
    .vehicle-detail-hero *,
    .vehicle-related-card * {
        transition-duration:
            0.001ms !important;
    }
}