/* =========================================================
   SUZUKI KALIMALANG — PREMIUM SHOWROOM
   Main stylesheet
   ========================================================= */

:root {
    --red: var(--primary-color, #e31837);
    --red-dark: var(--accent-color, #ba102c);
    --black: #111217;
    --black-soft: #1b1c22;
    --white: #ffffff;
    --paper: #f5f6f8;
    --muted: #747985;
    --line: #e6e7eb;
    --radius: 16px;
    --shadow: 0 12px 38px rgba(16, 18, 25, .07);
    --container: 1200px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 95px;
}

body {
    margin: 0;
    color: var(--black);
    background: var(--white);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

body,
button,
input,
textarea,
select {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

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

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

button {
    cursor: pointer;
}

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

.auto-home {
    overflow: clip;
}

.auto-container,
.header-container {
    width: min(var(--container), calc(100% - 48px));
    margin-inline: auto;
}

/* HEADER */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: rgba(255, 255, 255, .95);
    border-bottom: 1px solid rgba(18, 20, 27, .08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.header-container {
    display: flex;
    min-height: 78px;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.site-brand {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
}

.brand-symbol {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border-radius: 12px;
    background: var(--red);
    color: #fff;
    font-size: 25px;
    font-weight: 950;
    font-style: italic;
    box-shadow: 0 6px 16px rgba(227, 24, 55, .22);
}

.brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.brand-copy strong {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: -.5px;
    line-height: 1.3;
    white-space: nowrap;
}

.brand-copy strong span {
    margin-left: 0;
    color: var(--red);
}

.brand-copy small {
    color: var(--muted);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1.25;
}

.site-header .brand-copy .brand-company {
    color: var(--muted);
    font-size: .59rem;
    font-weight: 700;
}

.site-header .brand-copy .brand-tagline {
    color: var(--red);
    font-size: .59rem;
    font-weight: 750;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.site-nav > a {
    color: #424650;
    font-size: .84rem;
    font-weight: 700;
    transition: color .2s ease;
}

.site-nav > a:hover {
    color: var(--red);
}

.site-nav > .nav-contact {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--red);
    color: #fff;
}

.site-nav > .nav-contact:hover {
    background: var(--red-dark);
    color: #fff;
}

.sales-whatsapp-button {
    text-decoration: none;
    white-space: nowrap;
}

.site-nav > .nav-contact--icon-only {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    justify-content: center;
    padding: 0;
}

.sales-whatsapp-button {
    width: 44px;
    height: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    justify-content: center;
    padding: 0;
}

.hero-sales-whatsapp {
    border-color: rgba(255, 255, 255, .55) !important;
    background: rgba(18, 20, 27, .58) !important;
}

.hero-sales-whatsapp:hover {
    background: rgba(18, 20, 27, .86) !important;
}

.mobile-menu-toggle {
    display: none;
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.mobile-menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--black);
}

/* HERO */

.auto-hero {
    position: relative;
    isolation: isolate;
    min-height: 570px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 78% 42%, #393a42 0%, transparent 43%),
        linear-gradient(115deg, #101116, #24252c);
    color: #fff;
}

.auto-hero .hero-slide {
    position: absolute;
    inset: 0;
    isolation: isolate;
    display: none;
    align-items: center;
    min-height: 570px;
    padding: 70px max(24px, calc((100% - var(--container)) / 2));
    overflow: hidden;
    color: #fff;
    background-color: #16171c;
    background-size: cover;
    background-position: center;
}

.auto-hero .hero-slide.active {
    display: flex;
    animation: heroEnter .65s ease both;
}

.auto-hero .hero-slide > img,
.auto-hero .hero-slide picture img,
.auto-hero .hero-slide img.slide-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.auto-hero .hero-slide::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        90deg,
        rgba(10, 11, 15, .91) 0%,
        rgba(10, 11, 15, .75) 40%,
        rgba(10, 11, 15, .22) 78%,
        rgba(10, 11, 15, .08) 100%
    );
    content: "";
    pointer-events: none;
}

.auto-hero .hero-slide :is(
    .hero-content,
    .slide-content,
    .slider-content,
    .banner-content,
    .container
) {
    position: relative;
    z-index: 2;
    width: min(100%, var(--container));
}

.auto-hero .hero-slide :is(h1, h2, .hero-title, .slide-title) {
    max-width: 780px;
    margin: 0 0 23px;
    color: #fff;
    font-size: clamp(2.25rem, 4.8vw, 4.25rem);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.065em;
    text-wrap: balance;
}

.auto-hero .hero-slide :is(p, .hero-description, .slide-description) {
    max-width: 610px;
    color: rgba(255, 255, 255, .8);
    font-size: clamp(.93rem, 1.4vw, 1.1rem);
    line-height: 1.85;
}

.auto-hero .hero-slide :is(a.button, a.btn, .hero-button, .slide-button, .btn) {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 15px;
    padding: 13px 20px;
    border: 1px solid var(--red);
    border-radius: 8px;
    background: var(--red);
    color: #fff;
    font-size: .85rem;
    font-weight: 850;
    transition: transform .2s ease, background .2s ease;
}

.auto-hero .hero-slide :is(a.button, a.btn, .hero-button, .slide-button, .btn):hover {
    transform: translateY(-2px);
    background: var(--red-dark);
}

.auto-hero [data-slide] {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: rgba(255, 255, 255, .48);
    transition: width .25s ease, background .25s ease;
}

.auto-hero [data-slide].active {
    width: 30px;
    background: var(--red);
}

.auto-hero :is(.hero-slider-dots, .slider-dots, .hero-dots, .slider-indicators) {
    position: absolute;
    bottom: 45px;
    left: 50%;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 9px;
    transform: translateX(-50%);
}

.hero-bottom-label {
    position: absolute;
    right: max(24px, calc((100% - var(--container)) / 2));
    bottom: 23px;
    left: max(24px, calc((100% - var(--container)) / 2));
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .65);
    font-size: .6rem;
    font-weight: 850;
    letter-spacing: 1.6px;
    pointer-events: none;
}

.hero-bottom-line {
    width: 35px;
    height: 2px;
    flex-shrink: 0;
    background: var(--red);
}

.hero-bottom-location {
    margin-left: auto;
}

/* QUICK NAVIGATION */

.auto-shortcuts {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 21px max(24px, calc((100% - var(--container)) / 2));
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.auto-shortcut {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
    padding: 13px 19px;
    border-right: 1px solid var(--line);
    transition: background .2s ease;
}

.auto-shortcut:first-child {
    padding-left: 0;
}

.auto-shortcut:last-child {
    border-right: 0;
}

.auto-shortcut:hover {
    background: #f8f8fa;
}

.shortcut-index {
    align-self: flex-start;
    padding-top: 3px;
    color: var(--red);
    font-size: .7rem;
    font-weight: 950;
    letter-spacing: 1px;
}

.shortcut-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.shortcut-copy strong {
    font-size: .82rem;
    font-weight: 850;
}

.shortcut-copy small {
    color: var(--muted);
    font-size: .68rem;
}

.shortcut-arrow {
    margin-left: auto;
    color: var(--red);
    transition: transform .2s ease;
}

.auto-shortcut:hover .shortcut-arrow {
    transform: translate(3px, -3px);
}

/* COMMON SECTION STYLE */

.auto-module {
    position: relative;
    padding-block: 84px;
    scroll-margin-top: 90px;
}

.vehicle-section,
.testimonial-section {
    background: #fff;
}

.promo-section,
.contact-section {
    background: var(--paper);
}

.auto-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 34px;
}

.auto-eyebrow {
    display: inline-block;
    color: var(--red);
    font-size: .69rem;
    font-weight: 950;
    letter-spacing: 2px;
}

.auto-section-heading h2 {
    margin: 13px 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 950;
    line-height: 1.08;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.auto-section-heading h2 span {
    color: var(--red);
}

.auto-section-heading p {
    max-width: 660px;
    margin: 0;
    color: var(--muted);
    line-height: 1.85;
}

.auto-heading-link {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
    padding-bottom: 7px;
    color: var(--red);
    font-size: .83rem;
    font-weight: 850;
}

/* EXISTING PHP MODULES */

.auto-module :is(
    .vehicle-grid,
    .vehicles-grid,
    .car-grid,
    .featured-vehicles-grid,
    .vehicle-list,
    .promo-grid,
    .promos-grid,
    .testimonial-grid,
    .testimonials-grid,
    .card-grid
) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 23px;
}

.auto-module :is(
    .vehicle-card,
    .car-card,
    .vehicle-item,
    .product-card,
    .promo-card,
    .promotion-card,
    .testimonial-card,
    .testimonial-item,
    .unit-card
) {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e7e8ed;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 4px 18px rgba(18, 20, 28, .035);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.auto-module :is(
    .vehicle-card,
    .car-card,
    .vehicle-item,
    .product-card,
    .promo-card,
    .promotion-card,
    .testimonial-card,
    .testimonial-item,
    .unit-card
):hover {
    transform: translateY(-5px);
    border-color: rgba(227, 24, 55, .35);
    box-shadow: 0 18px 44px rgba(18, 20, 28, .09);
}

.auto-module :is(
    .vehicle-card img,
    .car-card img,
    .vehicle-item img,
    .product-card img,
    .promo-card img,
    .promotion-card img
) {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #eef0f3;
}

.auto-module :is(
    .vehicle-card-body,
    .car-card-body,
    .vehicle-info,
    .product-card-body,
    .promo-card-body,
    .testimonial-content
) {
    padding: 20px;
}

.auto-module :is(
    .vehicle-card h3,
    .car-card h3,
    .vehicle-item h3,
    .product-card h3,
    .promo-card h3,
    .promotion-card h3
) {
    margin: 0 0 8px;
    color: var(--black);
    font-size: 1.13rem;
    font-weight: 850;
    line-height: 1.35;
}

.auto-module :is(
    .vehicle-card p,
    .car-card p,
    .vehicle-item p,
    .promo-card p,
    .testimonial-card p
) {
    color: var(--muted);
    line-height: 1.75;
}

.auto-module :is(.price, .vehicle-price, .starting-price) {
    color: var(--red);
    font-weight: 950;
}

.auto-module :is(.badge, .promo-badge, .vehicle-badge) {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 50px;
    background: #fff0f2;
    color: var(--red);
    font-size: .72rem;
    font-weight: 850;
}

.auto-module :is(a.btn, a.button, button.btn, .btn-primary) {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 15px;
    border: 1px solid var(--red);
    border-radius: 8px;
    background: var(--red);
    color: #fff;
    font-size: .82rem;
    font-weight: 850;
    transition: transform .2s ease, background .2s ease;
}

.auto-module :is(a.btn, a.button, button.btn, .btn-primary):hover {
    transform: translateY(-2px);
    background: var(--red-dark);
}

/* GENERIC MODULE HEADINGS */

.auto-module > .auto-container > section,
.auto-module > .auto-container > div > section {
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;
}

.auto-module :is(.section-heading, .section-header, .section-intro) {
    margin-bottom: 30px;
}

.auto-module :is(.section-heading h2, .section-header h2, .section-title) {
    font-size: clamp(1.9rem, 4vw, 3.2rem);
    font-weight: 950;
    line-height: 1.12;
    letter-spacing: -.05em;
}

.auto-module :is(.section-heading p, .section-header p, .section-intro p) {
    max-width: 660px;
    color: var(--muted);
    line-height: 1.8;
}

/* CONTACT FORMS */

.contact-section :is(input, textarea, select) {
    width: 100%;
    max-width: 100%;
    padding: 13px 15px;
    border: 1px solid #dfe1e7;
    border-radius: 9px;
    background: #fff;
    color: var(--black);
    outline: none;
}

.contact-section :is(input, textarea, select):focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(227,24,55,.1);
}

.contact-section :is(label, .form-label) {
    display: block;
    margin-bottom: 6px;
    font-weight: 750;
}

.contact-section :is(textarea) {
    min-height: 120px;
    resize: vertical;
}

/* FOOTER */

.site-footer {
    padding: 48px 24px 25px;
    background: #111217;
    color: #fff;
}

.site-footer a {
    transition: color .2s ease;
}

.site-footer a:hover {
    color: #ff526c;
}

/* SCROLL ANIMATIONS */

.auto-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: calc(var(--reveal-order, 0) * 60ms);
    will-change: opacity, transform;
}

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

@keyframes heroEnter {
    from {
        opacity: 0;
        transform: scale(1.012);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* TABLET */

@media (max-width: 980px) {
    .header-container {
        min-height: 72px;
    }

    .site-nav {
        gap: 17px;
    }

    .site-nav > a {
        font-size: .78rem;
    }

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

    .auto-shortcut:nth-child(2) {
        border-right: 0;
    }

    .auto-shortcut:nth-child(-n+2) {
        border-bottom: 1px solid var(--line);
    }

    .auto-module :is(
        .vehicle-grid,
        .vehicles-grid,
        .car-grid,
        .featured-vehicles-grid,
        .vehicle-list,
        .promo-grid,
        .promos-grid,
        .testimonial-grid,
        .testimonials-grid,
        .card-grid
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (min-width: 681px) and (max-width: 900px) {
    .header-container {
        position: relative;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .site-nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: 10px 20px 18px;
        border: 1px solid var(--line);
        border-top: 0;
        background: #fff;
        box-shadow: 0 15px 25px rgba(0, 0, 0, .07);
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav > a {
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f2;
        font-size: .89rem;
    }

    .site-nav > .nav-contact {
        justify-content: center;
        margin-top: 12px;
        padding: 13px;
        border-bottom: 0;
    }
}

/* MOBILE */

@media (max-width: 680px) {
    .auto-container,
    .header-container {
        width: calc(100% - 32px);
    }

    .header-container {
        min-height: 68px;
    }

    .brand-symbol {
        width: 39px;
        height: 39px;
        font-size: 22px;
    }

    .brand-copy strong {
        font-size: .91rem;
    }

    .brand-copy small {
        font-size: .5rem;
        letter-spacing: 1px;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .site-nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: 10px 20px 18px;
        border-bottom: 1px solid var(--line);
        background: #fff;
        box-shadow: 0 15px 25px rgba(0,0,0,.07);
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav > a {
        padding: 13px 0;
        border-bottom: 1px solid #f0f0f2;
        font-size: .89rem;
    }

    .site-nav > .nav-contact {
        justify-content: center;
        margin-top: 12px;
        padding: 13px;
        border-bottom: 0;
    }

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

    .auto-hero .hero-slide {
        min-height: 520px;
        padding: 52px 22px 75px;
        background-position: 60% center;
    }

    .auto-hero .hero-slide::before {
        background: linear-gradient(
            90deg,
            rgba(10,11,15,.91),
            rgba(10,11,15,.58)
        );
    }

    .auto-hero .hero-slide :is(h1, h2, .hero-title, .slide-title) {
        font-size: clamp(2.55rem, 11vw, 4rem);
        letter-spacing: -.06em;
    }

    .auto-hero .hero-slide :is(p, .hero-description, .slide-description) {
        font-size: .91rem;
    }

    .auto-hero :is(.hero-slider-dots, .slider-dots, .hero-dots, .slider-indicators) {
        bottom: 45px;
    }

    .hero-bottom-label {
        right: 16px;
        bottom: 18px;
        left: 16px;
        gap: 8px;
        font-size: .48rem;
        letter-spacing: .8px;
    }

    .hero-bottom-line {
        width: 20px;
    }

    .hero-bottom-location {
        display: none;
    }

    .auto-shortcuts {
        grid-template-columns: 1fr;
        padding: 9px 20px;
    }

    .auto-shortcut,
    .auto-shortcut:first-child {
        padding: 13px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .auto-shortcut:last-child {
        border-bottom: 0;
    }

    .auto-module {
        padding-block: 52px;
    }

    .auto-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 25px;
    }

    .auto-section-heading h2 {
        font-size: clamp(2rem, 9vw, 2.7rem);
    }

    .auto-module :is(
        .vehicle-grid,
        .vehicles-grid,
        .car-grid,
        .featured-vehicles-grid,
        .vehicle-list,
        .promo-grid,
        .promos-grid,
        .testimonial-grid,
        .testimonials-grid,
        .card-grid
    ) {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .site-footer {
        padding: 36px 18px 22px;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    .auto-reveal {
        opacity: 1;
        transform: none;
    }
}

/* PUBLIC PRICELIST */

.pricelist-intro {
    padding: clamp(42px, 6vw, 78px) 0 clamp(28px, 4vw, 46px);
    background: linear-gradient(135deg, #f7f8fa 0%, #fff 72%);
}

.pricelist-intro h1 {
    max-width: 760px;
    margin: 8px 0 12px;
    font-size: clamp(1.85rem, 3.4vw, 2.8rem);
    line-height: 1.16;
    letter-spacing: -.04em;
}

.pricelist-intro .section-description {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
}

.pricelist-content {
    padding-top: clamp(26px, 4vw, 42px);
    padding-bottom: clamp(48px, 7vw, 80px);
}

.pricelist-filters {
    display: grid;
    grid-template-columns: minmax(150px, .8fr) minmax(140px, .65fr) minmax(220px, 1.2fr) auto;
    align-items: end;
    gap: 14px;
    margin-bottom: 22px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
}

.pricelist-filters label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: #444854;
    font-size: .82rem;
    font-weight: 700;
}

.pricelist-filters input,
.pricelist-filters select {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--black);
}

.pricelist-search-field {
    position: relative;
    display: flex;
    align-items: center;
}

.pricelist-search-field .ui-icon {
    position: absolute;
    left: 13px;
    width: 17px;
    height: 17px;
    color: var(--muted);
    pointer-events: none;
}

.pricelist-search-field input {
    padding-left: 40px;
}

.pricelist-filters .btn {
    min-height: 44px;
    white-space: nowrap;
}

.pricelist-results [hidden] {
    display: none !important;
}

.pricelist-results-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.pricelist-results-grid.is-single-result {
    grid-template-columns: minmax(0, 1fr);
}

.pricelist-model-card {
    display: grid;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.55fr);
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(16, 18, 25, .055);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.pricelist-model-card:hover {
    transform: translateY(-2px);
    border-color: rgba(227, 24, 55, .22);
    box-shadow: 0 14px 32px rgba(16, 18, 25, .09);
}

.pricelist-model-media {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    min-width: 0;
    padding: 16px;
    border-right: 1px solid var(--line);
    background: #fff;
}

.pricelist-model-media img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: contain;
}

.pricelist-model-media:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: -3px;
}

.pricelist-model-content {
    display: grid;
    align-content: start;
    min-width: 0;
}

.pricelist-model-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 17px 19px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(115deg, #f7f8fa, #fff 76%);
}

.pricelist-model-link {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: var(--black);
}

.pricelist-model-link:hover {
    color: var(--red);
}

.pricelist-model-label,
.pricelist-variant-label,
.pricelist-variant-price > span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .075em;
    line-height: 1.35;
    text-transform: uppercase;
}

.pricelist-model-link h2 {
    overflow-wrap: anywhere;
    margin: 0;
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.025em;
}

.pricelist-year-badge {
    display: grid;
    flex: 0 0 auto;
    gap: 2px;
    min-width: 80px;
    padding: 8px 10px;
    border: 1px solid rgba(23, 54, 93, .1);
    border-radius: 10px;
    background: #fff;
    text-align: center;
}

.pricelist-year-badge span {
    color: var(--muted);
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.3;
}

.pricelist-year-badge strong {
    color: var(--black);
    font-size: .9rem;
    line-height: 1.3;
}

.pricelist-variant-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pricelist-variant-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 15px 19px;
    border-bottom: 1px solid var(--line);
}

.pricelist-variant-row:last-child {
    border-bottom: 0;
}

.pricelist-variant-info {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.pricelist-variant-info h3 {
    overflow-wrap: anywhere;
    margin: 0;
    color: var(--black);
    font-size: .92rem;
    font-weight: 750;
    line-height: 1.35;
}

.pricelist-variant-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.4;
}

.pricelist-variant-price {
    display: grid;
    justify-items: end;
    gap: 4px;
    min-width: 0;
    text-align: right;
}

.pricelist-variant-price strong {
    color: var(--red);
    font-size: clamp(.88rem, 1.4vw, 1rem);
    font-weight: 850;
    line-height: 1.25;
    white-space: nowrap;
}

.pricelist-note {
    max-width: 920px;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: .78rem;
}

.pricelist-contact {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 8px;
    background: var(--red);
    color: #fff;
    margin-top: 22px;
}

.pricelist-empty {
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.pricelist-empty p {
    margin: 0 0 5px;
    font-weight: 800;
}

.home-article-card-media {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #fff;
}

.home-article-card-image,
.promo-list-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #fff;
}

.home-articles .article-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.home-articles .article-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 24px rgba(16, 18, 25, .05);
    transition: transform .22s ease, box-shadow .22s ease;
}

.home-articles .article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 13px 30px rgba(16, 18, 25, .09);
}

.home-articles .article-card .card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px;
}

.home-articles .article-card .card-body > .eyebrow,
.home-articles .article-card .card-body h3,
.home-articles .article-card .card-body > p {
    margin: 0;
}

.home-articles .article-card .card-body h3 {
    font-size: 1rem;
    line-height: 1.4;
}

.home-articles .article-card .card-body h3 a {
    color: inherit;
    text-decoration: none;
}

.home-articles .article-card .card-body > p:not(.eyebrow) {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.home-articles .article-card .card-body .section-link {
    margin-top: auto;
    padding-top: 4px;
}

.home-article-card-media .home-article-card-image {
    height: 100%;
    transition: transform .4s ease;
}

.home-articles .content-card:hover .home-article-card-image {
    transform: scale(1.04);
}

.promo-detail-cover {
    display: block;
    width: 100%;
    max-height: 580px;
    margin: 0 0 30px;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    object-fit: cover;
    background: #fff;
}

@media (max-width: 820px) {
    .pricelist-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricelist-filters .pricelist-search {
        grid-column: 1 / -1;
    }

    .pricelist-results-grid {
        grid-template-columns: 1fr;
    }

    .home-articles .article-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .pricelist-filters {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .pricelist-filters .pricelist-search {
        grid-column: auto;
    }

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

    .pricelist-model-heading,
    .pricelist-variant-row {
        padding-inline: 15px;
    }

    .pricelist-model-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .pricelist-model-media {
        aspect-ratio: 16 / 9;
        padding: 10px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .pricelist-model-media img {
        height: 100%;
        max-height: none;
    }

    .pricelist-variant-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .pricelist-variant-price {
        justify-items: start;
        text-align: left;
    }

}

/* =========================================
   HOMEPAGE PROMOS — PREMIUM OFFER CARDS
   ========================================= */

.home-promos {
    position: relative;
    overflow: hidden;
}

.home-promos .section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 30px;
}

.home-promos .section-heading-actions,
.home-articles .section-heading-actions,
.customer-stories .section-heading-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.home-promos .section-description {
    max-width: 560px;
    margin-top: 12px;
    color: var(--muted);
    line-height: 1.75;
}

.home-promos .section-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--red);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: gap 0.2s ease;
}

.home-promos .section-link:hover {
    gap: 15px;
}

.home-promos .promo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.home-promos .promo-card {
    min-width: 0;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 5px 22px rgb(17 18 23 / 4%);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.home-promos .promo-card:hover {
    transform: translateY(-5px);
    border-color: rgb(227 24 55 / 28%);
    box-shadow: 0 16px 38px rgb(17 18 23 / 10%);
}

.home-promos .promo-image-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.home-promos .promo-image-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--paper);
}

.home-promos .promo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.home-promos .promo-card:hover .promo-image {
    transform: scale(1.045);
}

.home-promos .promo-image-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 7px 10px;
    color: var(--white);
    background: var(--red);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.home-promos .card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    height: 100%;
    padding: 23px;
}

.home-promos .promo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--red);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.home-promos .promo-kicker-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    background: var(--red);
    border-radius: 50%;
}

.home-promos .promo-card h3 {
    margin: 0;
    color: var(--black);
    font-size: clamp(18px, 1.7vw, 23px);
    line-height: 1.4;
}

.home-promos .promo-description {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.home-promos .promo-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding-top: 7px;
    color: var(--red);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.home-promos .promo-detail-link:hover {
    gap: 14px;
}

.home-promos .promo-empty {
    padding: 36px 20px;
    text-align: center;
    background: var(--white);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}

.home-promos .promo-empty p {
    margin: 0 0 8px;
    color: var(--black);
    font-weight: 700;
}

.home-promos .promo-empty span {
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 900px) {
    .home-promos .promo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .home-promos .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-promos .promo-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .home-promos .card-body {
        padding: 19px;
    }

    .home-promos .promo-card h3 {
        font-size: 20px;
    }
}

/* FUTURE MOBILITY HOMEPAGE */
.auto-hero:has(.hero-fallback) {
    min-height: 0;
    background: #07101d;
}

.hero-fallback {
    position: relative;
    display: grid;
    min-height: min(760px, calc(100svh - 78px));
    min-height: max(620px, min(760px, calc(100vh - 78px)));
    align-items: center;
    overflow: hidden;
    padding: 82px max(24px, calc((100% - var(--container)) / 2)) 92px;
    isolation: isolate;
    color: #fff;
    background:
        radial-gradient(ellipse at 76% 51%, rgba(30, 62, 97, .66), transparent 37%),
        radial-gradient(ellipse at 90% 90%, rgba(227, 24, 55, .2), transparent 33%),
        linear-gradient(116deg, #07101d 4%, #0b1728 53%, #101722 100%);
}

.hero-fallback::before,
.hero-fallback::after {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
}

.hero-fallback::before {
    inset: 0;
    opacity: .23;
    background-image: linear-gradient(rgba(163, 187, 216, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(163, 187, 216, .12) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(90deg, transparent, #000 58%, #000);
}

.hero-fallback::after {
    top: -34%;
    right: -16%;
    width: min(70vw, 870px);
    aspect-ratio: 1;
    border: 1px solid rgba(202, 221, 243, .1);
    border-radius: 50%;
    box-shadow: 0 0 0 38px rgba(202, 221, 243, .025), 0 0 0 76px rgba(202, 221, 243, .02);
}

.hero-layout {
    display: grid;
    width: min(var(--container), 100%);
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    align-items: center;
    gap: 18px;
    margin: 0 auto;
}

.hero-fallback .hero-copy {
    position: relative;
    z-index: 3;
    max-width: 575px;
}

.hero-fallback .hero-copy .eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 25px;
    color: #d0d8e4;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hero-fallback .hero-copy .eyebrow > span,
.hero-fallback .hero-meta i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #f22d49;
    box-shadow: 0 0 14px rgba(242, 45, 73, .85);
}

.hero-fallback .hero-copy .eyebrow b {
    color: #f22d49;
}

.hero-fallback .hero-copy h1 {
    max-width: 620px;
    margin: 0;
    color: #fff;
    font-size: clamp(2.25rem, 4.8vw, 4.25rem);
    font-weight: 900;
    line-height: .99;
    letter-spacing: -.075em;
    text-wrap: balance;
}

.hero-fallback .hero-description {
    max-width: 500px;
    margin: 24px 0 0;
    color: #bac6d5;
    font-size: 1rem;
    line-height: 1.8;
}

.hero-fallback .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 29px;
}

.hero-fallback .hero-actions .btn {
    display: inline-flex;
    min-height: 51px;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 13px 19px;
    border: 1px solid #e31837;
    border-radius: 7px;
    background: #e31837;
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.hero-fallback .hero-actions .btn:hover {
    transform: translateY(-2px);
    background: #c8122c;
    box-shadow: 0 10px 30px rgba(227, 24, 55, .3);
}

.hero-fallback .hero-actions .hero-outline {
    border-color: rgba(218, 229, 243, .35);
    background: rgba(11, 23, 40, .4);
}

.hero-fallback .hero-actions .hero-outline:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .08);
}

.hero-fallback .hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 33px;
    color: #9aa9bc;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.hero-fallback .hero-meta span {
    color: #e31837;
}

.hero-visual {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 425px;
    place-items: center;
    isolation: isolate;
}

.hero-visual-grid {
    position: absolute;
    inset: 8% -9% 3% 2%;
    z-index: -1;
    border: 1px solid rgba(184, 208, 235, .16);
    border-radius: 50%;
    transform: rotate(-14deg) scaleY(.48);
    box-shadow: 0 0 0 30px rgba(184, 208, 235, .025), 0 0 0 60px rgba(184, 208, 235, .02);
}

.hero-orbit {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(206, 223, 244, .11);
    border-radius: 50%;
    transform: rotate(-19deg) scaleY(.56);
}

.orbit-a { inset: 10% 2% 8% 1%; }
.orbit-b { inset: 17% 9% 15% 8%; border-color: rgba(227, 24, 55, .24); }
.orbit-c { inset: 23% 16% 22% 16%; border-style: dashed; border-color: rgba(206, 223, 244, .12); }

.hero-car-art {
    width: min(116%, 780px);
    overflow: visible;
    filter: drop-shadow(0 30px 28px rgba(0, 0, 0, .4));
    animation: heroCarFloat 6s ease-in-out infinite;
}

.hero-visual-label {
    position: absolute;
    top: 10%;
    right: 4%;
    color: #d5deea;
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.hero-visual-label span {
    margin-right: 9px;
    color: #f13a52;
}

.hero-visual-caption {
    position: absolute;
    right: 5%;
    bottom: 4%;
    display: grid;
    gap: 2px;
    text-align: right;
}

.hero-visual-caption strong {
    color: rgba(255, 255, 255, .15);
    font-size: clamp(2rem, 4vw, 3.8rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .9;
}

.hero-visual-caption span {
    color: #b2c0d0;
    font-size: .57rem;
    font-weight: 800;
    letter-spacing: .2em;
}

.hero-fallback .hero-bottom-label {
    right: max(24px, calc((100% - var(--container)) / 2));
    left: max(24px, calc((100% - var(--container)) / 2));
    bottom: 27px;
}

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

.auto-home .auto-module :is(.vehicle-section, .promo-section) {
    scroll-margin-top: 90px;
}

.auto-home .auto-section-heading h2 {
    letter-spacing: -.06em;
}

.auto-home .empty {
    position: relative;
    display: flex;
    min-height: 132px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    overflow: hidden;
    padding: 25px 28px;
    border: 1px solid rgba(27, 47, 75, .1);
    border-radius: 13px;
    background: linear-gradient(110deg, #fff, #f5f7fa);
    box-shadow: 0 12px 35px rgba(16, 32, 55, .045);
}

.auto-home .empty::after {
    position: absolute;
    top: -55px;
    right: -8px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(227, 24, 55, .1);
    border-radius: 50%;
    box-shadow: 0 0 0 19px rgba(227, 24, 55, .025), 0 0 0 38px rgba(227, 24, 55, .02);
    content: "";
    pointer-events: none;
}

.auto-home .empty > div {
    flex: 1;
}

.auto-home .empty p {
    margin: 0 0 5px;
    color: #151b27;
    font-size: 1rem;
    font-weight: 850;
}

.auto-home .empty > span:not(.empty-index) {
    display: block;
    color: #717b8a;
    font-size: .86rem;
}

.auto-home .empty .empty-index {
    flex: 0 0 auto;
    color: #e31837;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .16em;
}

.auto-home .empty a {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    color: #17365d;
    font-size: .8rem;
    font-weight: 850;
}

.auto-home .empty a span {
    margin-left: 7px;
    color: #e31837;
}

.auto-home .empty-testimonials {
    min-height: 150px;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}

.auto-home .empty-testimonials::after {
    top: -85px;
    right: 12%;
    width: 240px;
    height: 240px;
}

.auto-home .empty-testimonials a {
    margin-top: 4px;
}

.vehicle-section .auto-container > .auto-section-heading + .section,
.promo-section .auto-container > .section {
    padding-top: 0;
}

.vehicle-section .featured-vehicles .section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.vehicle-section .section-heading-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 18px;
}

.vehicle-section .featured-vehicles .section-heading h2 {
    max-width: 690px;
    margin: 10px 0 9px;
    color: #111217;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: -.06em;
}

.vehicle-section .featured-vehicles .section-heading .eyebrow {
    margin: 0;
    color: #e31837;
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .16em;
}

.vehicle-section .featured-vehicles .section-heading .section-description {
    margin: 0;
    color: #747985;
    line-height: 1.7;
}

.vehicle-section .featured-vehicles .section-heading-actions .section-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    color: #17365d;
    font-size: .8rem;
    font-weight: 850;
}

.home-promos .promo-empty {
    text-align: left;
    border-style: solid;
}

.home-promos .promo-empty p {
    text-align: left;
}

@media (max-width: 760px) {
    .hero-fallback {
        min-height: 0;
        padding: 64px 20px 72px;
    }

    .hero-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .hero-fallback .hero-copy .eyebrow {
        margin-bottom: 18px;
        font-size: .57rem;
        letter-spacing: .12em;
    }

    .hero-fallback .hero-copy h1 {
        max-width: 550px;
        font-size: clamp(3rem, 11vw, 5rem);
    }

    .hero-fallback .hero-description {
        max-width: 480px;
        margin-top: 17px;
        font-size: .91rem;
    }

    .hero-fallback .hero-actions {
        margin-top: 22px;
    }

    .hero-fallback .hero-actions .btn {
        min-height: 46px;
        padding: 11px 14px;
        font-size: .74rem;
    }

    .hero-fallback .hero-meta {
        margin-top: 24px;
        font-size: .48rem;
        letter-spacing: .1em;
    }

    .hero-visual {
        min-height: 285px;
        margin: 6px -18px -10px;
    }

    .hero-car-art {
        width: 111%;
        max-width: 650px;
    }

    .hero-visual-label {
        top: 2%;
        right: 9%;
        font-size: .5rem;
    }

    .hero-visual-caption {
        right: 9%;
        bottom: 1%;
    }

    .hero-visual-caption strong {
        font-size: 2.5rem;
    }

    .hero-fallback .hero-bottom-label {
        right: 20px;
        bottom: 20px;
        left: 20px;
        font-size: .48rem;
    }

    .auto-home .empty {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 22px;
    }

    .auto-home .empty > div { flex: auto; }

    .vehicle-section .featured-vehicles .section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .vehicle-section .section-heading-actions {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-car-art { animation: none; }
    html { scroll-behavior: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .home-promos .promo-card,
    .home-promos .promo-image,
    .home-promos .section-link,
    .home-promos .promo-detail-link {
        transition: none;
    }
}

/* SUZUKI VEHICLE CARDS POLISH */
.vehicle-section > .auto-container > .featured-vehicles {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.vehicle-section .featured-vehicles .section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.vehicle-section .vehicle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.vehicle-section .vehicle-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e8e9ed;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(20, 25, 35, .07);
    transition: transform .25s ease, box-shadow .25s ease;
}

.vehicle-section .vehicle-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(20, 25, 35, .12);
}

.vehicle-section .vehicle-image-link {
    display: block;
    overflow: hidden;
}

.vehicle-section .vehicle-image-wrap {
    position: relative;
    display: grid;
    width: 100%;
    height: clamp(220px, 22vw, 260px);
    aspect-ratio: auto;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(145deg, #f8f9fb, #eceef2);
}

.vehicle-section .vehicle-image-wrap .vehicle-image {
    display: block;
    width: 100%;
    height: 100%;
    padding: 12px;
    object-fit: contain;
    object-position: center;
    background: transparent;
}

.vehicle-section .vehicle-image-label {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 10px;
    border-radius: 5px;
    background: #e31837;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.vehicle-section .vehicle-card .card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 22px;
}

.vehicle-section .vehicle-card .pill {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 30px;
    background: #f2f3f5;
    color: #565b65;
    font-size: .72rem;
    font-weight: 700;
}

.vehicle-section .vehicle-card h3 {
    margin: 0;
    color: #17191e;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.4;
}

.vehicle-section .vehicle-card .vehicle-description {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #686d77;
    font-size: .92rem;
    line-height: 1.7;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.vehicle-section .vehicle-card .vehicle-starting-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.vehicle-section .vehicle-card .vehicle-starting-price strong {
    color: var(--black);
    font-size: 16px;
    font-weight: 850;
}

.vehicle-section .vehicle-card .vehicle-starting-price small {
    width: 100%;
    color: var(--muted);
    font-size: 10px;
}

.vehicle-section .vehicle-card .vehicle-detail-link {
    margin-top: 6px;
}

@media (max-width: 900px) {
    .vehicle-section .vehicle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 580px) {
    .vehicle-section .vehicle-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .vehicle-section .vehicle-card .card-body {
        padding: 18px;
    }

    .vehicle-section .vehicle-image-wrap {
        height: 220px;
        aspect-ratio: auto;
    }
}

/* PETA LOKASI DEALER */
.contact-map {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: 8px;
}

.contact-map h3 {
    margin: 0 0 14px;
}

.contact-map iframe {
    display: block;
    width: 100%;
    min-height: 320px;
    border: 0;
    border-radius: 16px;
    background: #f1f2f4;
}

.contact-map > a {
    display: inline-block;
    margin-top: 12px;
    font-weight: 700;
}

@media (max-width: 580px) {
    .contact-map iframe {
        min-height: 260px;
    }
}

/* SUZUKI KALIMALANG — PREMIUM FOOTER */
.site-footer {
    padding: 62px 24px 22px;
    background: #14151a;
    color: #f6f7f9;
}

.site-footer .footer-container {
    display: grid;
    grid-template-columns: minmax(260px, 1.1fr) minmax(280px, .9fr);
    gap: 38px;
    width: min(1180px, 100%);
    margin: 0 auto;
}

.site-footer .footer-brand,
.site-footer .footer-contact {
    min-width: 0;
}

.site-footer .footer-brand .site-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.site-footer .footer-brand .brand-symbol {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border-radius: 12px;
    background: #e31837;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
}

.site-footer .footer-brand .brand-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.site-footer .footer-brand .brand-copy strong {
    color: #fff;
    font-size: .98rem;
    letter-spacing: .035em;
}

.site-footer .footer-brand .brand-copy strong span {
    margin-left: 4px;
    color: #ff526c;
}

.site-footer .footer-brand .brand-copy small {
    color: #aeb1bc;
    font-size: .75rem;
}

.site-footer .footer-description,
.site-footer .footer-contact p {
    margin: 0 0 17px;
    color: #b8bbc5;
    font-size: .88rem;
    line-height: 1.85;
}

.site-footer .footer-whatsapp {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    padding: 12px 15px;
    border: 1px solid #393b44;
    border-radius: 12px;
    background: #1c1e25;
}

.site-footer .footer-whatsapp-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    background: #e31837;
    color: #fff;
    font-size: 1.1rem;
}

.site-footer .footer-whatsapp > span:last-child {
    display: flex;
    min-width: 0;
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3px 12px;
}

.site-footer .footer-whatsapp small {
    color: #b8bbc5;
    font-size: .72rem;
}

.site-footer .footer-whatsapp strong {
    color: #fff;
    font-size: .91rem;
}

.site-footer .footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}

.site-footer .footer-heading {
    margin-bottom: 7px;
    color: #fff;
    font-size: .94rem;
    font-weight: 800;
}

.site-footer .footer-contact-name {
    margin-bottom: -5px !important;
    color: #fff !important;
    font-weight: 750;
}

.site-footer .footer-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    color: #ff526c !important;
    font-weight: 750;
}

.site-footer .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: min(1180px, 100%);
    margin: 46px auto 0;
    padding-top: 20px;
    border-top: 1px solid #34363e;
    color: #969aa6;
    font-size: .76rem;
    line-height: 1.7;
}

.site-footer .footer-sitemap-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.site-footer .footer-sitemap-link:hover {
    color: #fff;
}

.html-sitemap-page {
    padding-bottom: clamp(44px, 7vw, 88px);
}

.html-sitemap-intro {
    padding: clamp(44px, 7vw, 84px) 0 34px;
    background: var(--surface-soft, #f5f7fa);
}

.html-sitemap-intro h1 {
    margin: 8px 0 12px;
    color: var(--text-primary, #172033);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.12;
}

.html-sitemap-intro p:last-child {
    max-width: 760px;
    margin: 0;
    color: var(--text-secondary, #5c6678);
    line-height: 1.7;
}

.html-sitemap-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 18px;
    padding-top: 30px;
}

.html-sitemap-group {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--border-color, #e3e8ef);
    border-radius: 16px;
    background: var(--surface, #fff);
}

.html-sitemap-group h2 {
    margin: 0 0 14px;
    color: var(--text-primary, #172033);
    font-size: 1.1rem;
}

.html-sitemap-group ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.html-sitemap-group a {
    color: var(--text-secondary, #465166);
    line-height: 1.5;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.html-sitemap-group a:hover,
.html-sitemap-group a:focus-visible {
    color: var(--primary-color, #17365d);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 1000px) {
    .site-footer .footer-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 28px;
    }
}

@media (max-width: 580px) {
    .site-footer {
        padding: 42px 20px 20px;
    }

    .site-footer .footer-container {
        grid-template-columns: 1fr;
        gap: 32px 20px;
    }

    .site-footer .footer-brand {
        grid-column: 1 / -1;
    }

    .site-footer .footer-contact {
        grid-column: 1 / -1;
    }

    .site-footer .footer-bottom {
        flex-direction: column;
        gap: 7px;
        margin-top: 32px;
        font-size: .73rem;
    }
}

@media (max-width: 360px) {
    .site-footer .footer-container {
        grid-template-columns: 1fr;
    }

    .site-footer .footer-brand,
    .site-footer .footer-contact {
        grid-column: auto;
    }
}


/* Logo resmi dari Pengaturan Website */
.brand-logo {
    display: block;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    object-fit: contain;
    border-radius: 8px;
}

@media (max-width: 760px) {
    .brand-logo {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }
}

/* NOVA_SLIDER_CLEAN_LAYOUT_V1 */
.auto-hero .hero-slide::before {
    background: transparent !important;
}

.auto-hero .hero-slide {
    align-items: flex-end;
}

.auto-hero .hero-slide .hero-copy {
    align-self: flex-end;
    margin-top: auto;
    padding-top: 0;
    padding-bottom: clamp(82px, 10vh, 120px);
}

.auto-hero .hero-slide .hero-copy .eyebrow {
    margin-bottom: 8px;
    font-size: 12px;
    letter-spacing: .04em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}

.auto-hero .hero-slide :is(h1, h2, .hero-title, .slide-title) {
    max-width: 560px;
    margin: 0 0 10px;
    font-size: clamp(26px, 2.5vw, 36px);
    line-height: 1.12;
    letter-spacing: -.035em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .65);
}

.auto-hero .hero-slide :is(p, .hero-description, .slide-description) {
    max-width: 460px;
    margin-top: 4px;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.5;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .65);
}

.auto-hero .hero-slide :is(a.button, a.btn, .hero-button, .slide-button, .btn) {
    min-height: 38px;
    margin-top: 8px;
    padding: 9px 15px;
    font-size: 12px;
}

@media (max-width: 600px) {
    .auto-hero .hero-slide {
        align-items: flex-end;
    }

    .auto-hero .hero-slide .hero-copy {
        padding-bottom: 85px;
    }

    .auto-hero .hero-slide :is(h1, h2, .hero-title, .slide-title) {
        font-size: clamp(24px, 7vw, 32px);
    }

    .auto-hero .hero-slide :is(p, .hero-description, .slide-description) {
        font-size: 12px;
    }
}

/* HOMEPAGE SCALE AND SPACING REFINEMENT */
.hero-fallback {
    min-height: min(680px, calc(100svh - 78px));
    min-height: max(560px, min(680px, calc(100vh - 78px)));
    padding-top: 62px;
    padding-bottom: 72px;
}

.hero-fallback .hero-copy .eyebrow { margin-bottom: 20px; font-size: .62rem; }
.hero-fallback .hero-copy h1 {
    max-width: 570px;
    font-size: clamp(2.25rem, 4.8vw, 4.2rem);
    line-height: 1.02;
}
.hero-fallback .hero-description {
    max-width: 470px;
    margin-top: 18px;
    font-size: .94rem;
    line-height: 1.7;
}
.hero-fallback .hero-actions { margin-top: 23px; }
.hero-fallback .hero-meta { margin-top: 24px; }
.hero-visual { min-height: 370px; }
.auto-module { padding-block: 62px; }

.vehicle-section .featured-vehicles .section-heading h2,
.home-promos .section-heading h2,
.testimonial-section .section-heading h2,
.home-articles .section-heading h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    line-height: 1.12;
    letter-spacing: -.045em;
}
.vehicle-section .featured-vehicles .section-heading,
.home-promos .section-heading,
.testimonial-section .section-heading,
.home-articles .section-heading { margin-bottom: 22px; }
.contact-section { padding-block: 56px; }

.delivery-gallery {
    padding-block: 30px 12px;
}

.delivery-gallery .section-heading {
    margin-bottom: 22px;
}

.delivery-gallery .section-heading h2 {
    margin: 0;
    color: var(--black);
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -.035em;
}

.delivery-gallery .section-description {
    max-width: 680px;
    margin: 9px 0 0;
    color: var(--muted);
}

.delivery-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.delivery-gallery-card {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
}

.delivery-gallery-card > a {
    display: block;
    overflow: hidden;
    background: var(--paper);
}

.delivery-gallery-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .3s ease;
}

.delivery-gallery-card > a:hover img,
.delivery-gallery-card > a:focus-visible img {
    transform: scale(1.035);
}

.delivery-gallery-card figcaption {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
}

.delivery-gallery-card figcaption strong {
    color: var(--black);
    font-size: 13px;
    line-height: 1.45;
}

.delivery-gallery-card time {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .hero-fallback { min-height: 0; padding: 43px 20px 58px; }
    .hero-fallback .hero-copy .eyebrow { margin-bottom: 15px; font-size: .54rem; }
    .hero-fallback .hero-copy h1 {
        font-size: clamp(2.25rem, 8vw, 3.15rem);
        line-height: 1.04;
    }
    .hero-fallback .hero-description {
        margin-top: 14px;
        font-size: .86rem;
        line-height: 1.65;
    }
    .hero-fallback .hero-actions { gap: 9px; margin-top: 18px; }
    .hero-fallback .hero-actions .btn {
        min-height: 42px;
        padding: 10px 12px;
        font-size: .7rem;
    }
    .hero-fallback .hero-meta { gap: 7px; margin-top: 18px; font-size: .43rem; }
    .hero-visual { min-height: 220px; margin: 0 -12px -4px; }
    .hero-visual-caption strong { font-size: 2.6rem; }
    .auto-module { padding-block: 38px; }
    .vehicle-section .featured-vehicles .section-heading h2,
    .home-promos .section-heading h2,
    .testimonial-section .section-heading h2,
    .home-articles .section-heading h2 {
        font-size: clamp(1.65rem, 7vw, 2.15rem);
    }
    .delivery-gallery { padding-block: 18px 8px; }
    .delivery-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .delivery-gallery-card figcaption { flex-direction: column; gap: 4px; padding: 11px 12px; }
    .contact-section { padding-block: 38px; }
}

@media (max-width: 440px) {
    .delivery-gallery-grid { grid-template-columns: 1fr; }
}

/* Keep the promotional slider framed instead of stretching edge to edge. */
.auto-hero:has(.hero-slider) {
    display: grid;
    align-items: center;
    padding-block: 24px;
    background: transparent;
}

.auto-hero .hero-slider {
    position: relative;
    width: min(1440px, calc(100% - 64px));
    height: auto;
    aspect-ratio: 12 / 5;
    min-height: 0;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .26);
}

.auto-hero .hero-slide {
    inset: 0;
    min-height: 0;
    border-radius: inherit;
    background-color: transparent;
    background-size: 100% 100%, contain;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

@media (max-width: 680px) {
    .auto-hero:has(.hero-slider) {
        min-height: 0;
        padding-block: 14px;
    }

    .auto-hero .hero-slider {
        width: calc(100% - 28px);
        height: auto;
        aspect-ratio: 12 / 5;
        border-radius: 14px;
    }

    .auto-hero .hero-slide {
        min-height: 0;
        padding: 18px 18px 48px;
        background-position: center, center;
    }

    .auto-hero .hero-slide .hero-copy {
        width: 100%;
        max-width: 34rem;
        padding-bottom: 0;
    }

    .auto-hero .hero-slide .hero-copy .eyebrow {
        margin-bottom: 6px;
        font-size: clamp(.48rem, 1.8vw, .68rem);
    }

    .auto-hero .hero-slide :is(h1, h2, .hero-title, .slide-title) {
        max-width: 19ch;
        margin-bottom: 5px;
        font-size: clamp(1rem, 4.7vw, 1.85rem);
        line-height: 1.08;
    }

    .auto-hero .hero-slide :is(p, .hero-description, .slide-description) {
        max-width: 34ch;
        margin-block: 3px;
        font-size: clamp(.56rem, 2vw, .76rem);
        line-height: 1.4;
    }

    .auto-hero .hero-slide :is(a.button, a.btn, .hero-button, .slide-button, .btn) {
        min-height: 32px;
        margin-top: 5px;
        padding: 7px 10px;
        font-size: .62rem;
    }

    .auto-hero :is(.hero-slider-dots, .slider-dots, .hero-dots, .slider-indicators) {
        bottom: 12px;
    }
}


/* FILE-BACKED UI ICONS */
.ui-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    vertical-align: -.15em;
    color: currentColor;
    overflow: visible;
}

.download-card-icon {
    width: 26px;
    height: 26px;
    color: var(--red);
}

.stars {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #e6a817;
}

.rating-star {
    display: block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

/* Page spacing */
.testimonials-grid-spaced,
.promo-grid-spaced {
    margin-top: 28px;
}

.promo-page {
    padding-block: clamp(38px, 6vw, 72px);
}

.promo-page > p:not(.eyebrow) {
    max-width: 760px;
    color: var(--muted);
    line-height: 1.75;
}

.promo-page .promo-grid-spaced {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.promo-page .content-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 24px rgba(16, 18, 25, .05);
}

.promo-page .content-card .card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    padding: 19px;
}

.promo-page .content-card h2 {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.4;
}

.promo-page .content-card p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.7;
}

.promo-page .content-card .card-body > a {
    margin-top: auto;
    padding-top: 4px;
    color: var(--primary, var(--red));
    font-weight: 750;
}

@media (max-width: 820px) {
    .promo-page .promo-grid-spaced {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .promo-page .promo-grid-spaced {
        grid-template-columns: 1fr;
    }
}

.testimonials-contact-cta {
    margin-top: 32px;
}

/* CONTACT CHANNELS WITH FIRST-PARTY SVG ICONS */
.contact-band > .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
    gap: clamp(22px, 4vw, 48px);
    align-items: start;
}

.contact-info {
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
}

.contact-sales-identity {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 12px;
    margin: 14px 0 2px;
    padding: 11px 15px 11px 11px;
    border: 1px solid var(--line, #e7e8ed);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(18, 20, 28, .05);
}

.contact-sales-identity-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 12px;
    background: #fff0f2;
    color: var(--red, #e31837);
}

.contact-sales-identity-icon .ui-icon {
    width: 21px;
    height: 21px;
}

.contact-sales-identity-copy {
    display: flex;
    min-width: 0;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
}

.contact-sales-identity-copy > span {
    color: var(--muted, #6b7280);
    font-size: .72rem;
    line-height: 1.3;
}

.contact-sales-identity-copy > strong {
    overflow-wrap: anywhere;
    color: var(--black, #16171b);
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.35;
}

.contact-address {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 15px 0 4px;
}

.contact-address-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 11px;
    background: #f4f5f7;
    color: var(--red, #e31837);
}

.contact-address-icon .ui-icon {
    width: 19px;
    height: 19px;
}

.contact-address p {
    min-width: 0;
    margin: 2px 0 0;
    color: var(--muted, #6b7280);
    font-size: .88rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.contact-channels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 24px;
}

.contact-channel {
    display: flex;
    min-width: 0;
    min-height: 64px;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line, #e7e8ed);
    border-radius: 13px;
    background: #fff;
    color: var(--black, #16171b);
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.contact-channel:hover,
.contact-channel:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(227, 24, 55, .35);
    box-shadow: 0 10px 26px rgba(18, 20, 28, .08);
}

.contact-channel-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 11px;
    background: #f1f3f6;
    color: #333944;
}

.contact-channel-icon .ui-icon {
    width: 20px;
    height: 20px;
}

.contact-channel--phone .contact-channel-icon { background: #edf3ff; color: #2458a6; }
.contact-channel--whatsapp .contact-channel-icon { background: #e9f8ef; color: #13834a; }
.contact-channel--facebook .contact-channel-icon { background: #eaf1ff; color: #1877f2; }
.contact-channel--instagram .contact-channel-icon { background: #fff0f5; color: #c13584; }
.contact-channel--tiktok .contact-channel-icon { background: #e9f4f5; color: #111; }

.contact-channel--icon-only {
    width: 48px;
    min-height: 48px;
    aspect-ratio: 1;
    justify-content: center;
    padding: 0;
}

.contact-channel-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.contact-channel-copy strong {
    font-size: .82rem;
    line-height: 1.3;
}

.contact-channel-copy > span {
    overflow: hidden;
    color: var(--muted, #6b7280);
    font-size: .73rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-grid .lead-form {
    display: grid;
    gap: 10px;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid var(--line, #e7e8ed);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 38px rgba(18, 20, 28, .06);
    grid-column: 2;
    grid-row: 1;
}

.contact-grid .lead-form h3 { margin: 0 0 4px; }
.contact-grid .lead-form label { margin-top: 4px; }
.contact-grid .lead-form :is(input, select, textarea) { width: 100%; }

.contact-map {
    grid-column: 1 / -1;
    grid-row: 2;
}

@media (max-width: 760px) {
    .contact-band > .contact-grid { grid-template-columns: 1fr; }
    .contact-info,
    .contact-grid .lead-form,
    .contact-map { grid-column: auto; grid-row: auto; }
}

@media (max-width: 460px) {
    .contact-channels { justify-content: flex-start; gap: 8px; }
}

/* TESTIMONIALS AND VEHICLE HANDOVERS SHARE ONE STORY GRID */
.customer-stories .section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 22px;
}

.customer-stories .section-heading-actions .customer-stories-link,
.home-articles .section-heading-actions .section-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.site-footer .footer-brand .brand-copy .brand-identity {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.site-footer .footer-brand .brand-copy .brand-identity .brand-branch {
    color: #ff526c;
}

.site-footer .footer-brand .brand-copy .brand-company {
    color: #aeb1bc;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 0;
}

.site-footer .footer-brand .brand-copy .brand-tagline {
    color: #ff526c;
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: 0;
}

.customer-stories .section-heading h1,
.customer-stories .section-heading h2 {
    margin: 0;
    color: var(--black, #16171b);
    font-size: clamp(1.7rem, 3vw, 2.45rem);
    line-height: 1.15;
    letter-spacing: -.035em;
}

.customer-stories .section-description,
.customer-stories-intro {
    max-width: 700px;
    margin: 9px 0 0;
    color: var(--muted, #6b7280);
    line-height: 1.7;
}

.customer-stories-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    color: var(--red, #e31837);
    font-size: .84rem;
    font-weight: 800;
}

.customer-stories-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.customer-story-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line, #e7e8ed);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 22px rgba(18, 20, 28, .045);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.customer-story-card:hover {
    transform: translateY(-3px);
    border-color: rgba(227, 24, 55, .28);
    box-shadow: 0 14px 34px rgba(18, 20, 28, .09);
}

.customer-story-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #eef0f3;
}

.customer-story-body {
    display: grid;
    gap: 11px;
    padding: 17px 18px 19px;
}

.customer-story-body h3 {
    margin: 0;
    color: var(--black, #16171b);
    font-size: 1rem;
    line-height: 1.45;
}

.customer-story-card blockquote {
    margin: 0;
    color: #424956;
    font-size: .9rem;
    line-height: 1.7;
}

.customer-story-card blockquote :first-child { margin-top: 0; }
.customer-story-card blockquote :last-child { margin-bottom: 0; }

.customer-story-card strong {
    color: var(--black, #16171b);
    font-size: .91rem;
    line-height: 1.45;
}

.customer-story-date {
    color: var(--muted, #6b7280);
    font-size: .75rem;
}

.customer-stories-page > h1 {
    margin: 0;
    color: var(--black, #16171b);
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.1;
}

.customer-stories-page .customer-stories-grid { margin-top: 26px; }

@media (max-width: 850px) {
    .customer-stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .customer-stories .section-heading { align-items: flex-start; flex-direction: column; }
    .customer-stories-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* FOOTER CHANNEL ICONS */
.site-footer .footer-channel-link,
.site-footer .footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #b8bbc5;
    font-size: .84rem;
    line-height: 1.5;
}

.site-footer .footer-channel-link > span:first-child,
.site-footer .footer-social-link > .ui-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 9px;
    background: #24262e;
    color: #fff;
}

.site-footer .footer-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.site-footer .footer-social-link {
    min-width: 0;
    padding: 3px 7px 3px 3px;
    border: 1px solid #343640;
    border-radius: 11px;
}

.site-footer .footer-social-link--icon-only {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    justify-content: center;
    padding: 0;
}

.site-footer .footer-social-link--facebook > .ui-icon { color: #1877f2; }
.site-footer .footer-social-link--instagram > .ui-icon { color: #e7569e; }
.site-footer .footer-social-link--tiktok > .ui-icon { color: #a9ffff; }
.site-footer .footer-whatsapp-icon { background: #168b50; }

.footer-visitor-counter {
    width: min(1180px, 100%);
    margin: 28px auto 0;
    padding-top: 22px;
    border-top: 1px solid #34363e;
}

.footer-visitor-counter .footer-heading {
    margin: 0 0 14px;
}

.visitor-counter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.visitor-counter-item {
    display: grid;
    min-width: 0;
    gap: 2px;
    padding: 13px 15px;
    border: 1px solid #34363e;
    border-radius: 12px;
    background: #1b1c22;
}

.visitor-counter-item dt {
    color: #b8bbc5;
    font-size: .75rem;
    font-weight: 700;
}

.visitor-counter-item .visitor-counter-value {
    margin: 2px 0 0;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 850;
    line-height: 1.2;
}

.visitor-counter-item .visitor-counter-unit {
    margin: 0;
    color: #969aa6;
    font-size: .7rem;
    font-weight: 400;
}

.floating-contact-actions {
    position: fixed;
    z-index: 1100;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    display: flex;
    align-items: center;
    gap: 10px;
}

.floating-contact-button {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.floating-whatsapp { background: #18a957; }
.floating-phone { background: var(--primary-color, #17365d); }

.floating-contact-button:hover,
.floating-contact-button:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .3);
}

.floating-whatsapp:hover,
.floating-whatsapp:focus-visible { background: #128c46; }

.floating-phone:hover,
.floating-phone:focus-visible { background: #102849; }

.floating-contact-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.floating-contact-button .ui-icon {
    width: 28px;
    height: 28px;
}

@media (prefers-reduced-motion: reduce) {
    .floating-contact-button {
        transition: none;
    }
}

@media (max-width: 680px) {
    .visitor-counter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .visitor-counter-item {
        padding: 12px;
    }

    .floating-contact-actions {
        right: 16px;
        bottom: 16px;
        gap: 8px;
    }

    .floating-contact-button {
        width: 54px;
        height: 54px;
    }
}

/* Mobile homepage: readable slider, compact sections, and comfortable tap targets. */
@media (max-width: 680px) {
    .auto-module {
        padding-block: 42px;
    }

    .auto-section-heading {
        gap: 12px;
        margin-bottom: 20px;
    }

    .auto-section-heading h2 {
        margin: 8px 0;
        font-size: clamp(1.7rem, 7.4vw, 2.2rem);
    }

    .auto-section-heading p {
        font-size: .9rem;
        line-height: 1.65;
    }

    .auto-shortcuts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 8px 16px;
    }

    .auto-shortcut,
    .auto-shortcut:first-child {
        min-height: 58px;
        padding: 10px 8px;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }

    .auto-shortcut:nth-child(even) {
        border-right: 0;
    }

    .auto-shortcut:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .site-nav > a,
    .site-nav > .nav-contact,
    .auto-module :is(a.btn, a.button, button.btn, .btn-primary) {
        min-height: 44px;
    }

    .contact-grid .lead-form :is(input, select, textarea) {
        min-height: 44px;
        font-size: 16px;
    }

    .contact-grid .lead-form textarea {
        min-height: 120px;
    }
}

@media (max-width: 480px) {
    .auto-hero .hero-slider {
        aspect-ratio: 4 / 3;
        border-radius: 12px;
    }

    .auto-hero .hero-slide {
        padding: 14px 15px 46px;
    }

    .auto-hero .hero-slide .hero-copy .eyebrow {
        margin-bottom: 7px;
        font-size: .62rem;
    }

    .auto-hero .hero-slide :is(h1, h2, .hero-title, .slide-title) {
        max-width: 20ch;
        margin-bottom: 7px;
        font-size: clamp(1.15rem, 5.8vw, 1.65rem);
        line-height: 1.12;
    }

    .auto-hero .hero-slide :is(p, .hero-description, .slide-description) {
        max-width: 35ch;
        margin-block: 4px;
        font-size: clamp(.75rem, 3vw, .88rem);
        line-height: 1.45;
    }

    .auto-hero .hero-slide :is(a.button, a.btn, .hero-button, .slide-button, .btn) {
        min-height: 44px;
        margin-top: 8px;
        padding: 10px 13px;
        font-size: .75rem;
    }

    .auto-hero :is(.hero-slider-dots, .slider-dots, .hero-dots, .slider-indicators) {
        bottom: 6px;
    }

    .auto-hero [data-slide],
    .auto-hero [data-slide].active {
        display: grid;
        width: 32px;
        height: 32px;
        place-items: center;
        background: transparent;
    }

    .auto-hero [data-slide]::before {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .65);
        content: "";
    }

    .auto-hero [data-slide].active::before {
        width: 20px;
        height: 8px;
        background: var(--red);
    }
}

.site-nav > .nav-contact--icon-only {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    justify-content: center;
    padding: 0;
}

.auto-module a.sales-whatsapp-button,
.auto-hero .hero-slide a.sales-whatsapp-button,
.hero-fallback .hero-actions a.sales-whatsapp-button {
    width: 44px;
    height: 44px;
    min-height: 44px;
    justify-content: center;
    gap: 0;
    padding: 0;
}

/* Dealer identity and salesperson contact blocks */
.site-header .brand-copy .brand-identity .brand-name {
    color: var(--black);
}

.site-header .brand-copy .brand-identity .brand-branch {
    color: var(--red);
}

.site-footer .footer-brand .brand-copy .brand-identity .brand-name {
    color: #fff;
}

.home-articles .section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
}

.sales-whatsapp-button .ui-icon {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
}

@media (max-width: 680px) {
    .site-header .brand-copy strong {
        gap: 5px;
        font-size: .78rem;
    }

    .site-header .brand-copy .brand-company,
    .site-header .brand-copy .brand-tagline {
        font-size: .58rem;
    }

    .home-promos .section-heading,
    .home-articles .section-heading,
    .customer-stories .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-promos .section-heading-actions,
    .home-articles .section-heading-actions,
    .customer-stories .section-heading-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .site-header .brand-copy strong {
        gap: 4px;
        font-size: .75rem;
    }

    .site-header .brand-copy .brand-company,
    .site-header .brand-copy .brand-tagline {
        font-size: .56rem;
    }
}
.lead-form-trap {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}