@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Oswald:wght@400;500;600;700&display=swap');

:root {
    --color-black: #070707;
    --color-dark: #121212;
    --color-dark-soft: #1a1a1a;
    --color-red: #9d0019;
    --color-red-light: #c31822;
    --color-red-dark: #7a0014;
    --color-white: #ffffff;
    --color-muted: #777777;
    --color-text: #111111;
    --color-line: rgba(0, 0, 0, 0.12);
    --color-light: #f4f4f4;
    --color-header: #f2f2f2;

    --container: 1180px;
    --radius: 18px;
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.18);

    --page-padding: clamp(18px, 5vw, 96px);
    --section-x: clamp(18px, 5vw, 96px);
    --section-y: clamp(48px, 6vw, 86px);
    --transition-fast: 0.18s ease;
}

/* =========================================================
   2. BASE / RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--color-black);
    background: var(--color-white);
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

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

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

.container {
    width: min(var(--container), calc(100% - 40px));
    margin: 0 auto;
}

h1,
h2,
h3 {
    margin: 0;
    line-height: 1.02;
    letter-spacing: -0.055em;
}

h1,
h2,
h3,
.main-nav,
.btn,
.header-phone {
    font-family: 'Oswald', Arial, sans-serif;
    text-transform: uppercase;
}

h1 {
    font-size: clamp(46px, 8vw, 96px);
    font-weight: 700;
}

h2 {
    font-size: clamp(36px, 5vw, 64px);
}

h3 {
    font-size: 26px;
}

p {
    line-height: 1.65;
    color: var(--color-muted);
}

/* Header - full width */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(180deg, #f7f7f7 0%, #eeeeee 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.08);
}

.site-header .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-inline: clamp(18px, 4vw, 72px);
}

.header-inner {
    height: 96px;
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
}

.site-logo {
    flex: 0 0 auto;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    display: block;
    height: 66px;
    width: auto;
}

.main-nav {
    flex: 1 1 auto;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 4vw, 72px);
    font-size: clamp(18px, 1.3vw, 22px);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.main-nav a {
    position: relative;
    padding: 38px 0 35px;
    color: var(--color-black);
    opacity: 0.95;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 28px;
    width: 0;
    height: 3px;
    background: var(--color-red);
    transition: width 0.22s ease;
}

.main-nav a:hover,
.main-nav a.active,
.main-nav a.selected {
    color: var(--color-black);
    opacity: 1;
}

.main-nav a:hover::after,
.main-nav a.active::after,
.main-nav a.selected::after {
    width: 100%;
}

.header-phone {
    flex: 0 0 auto;
}

.header-phone a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 26px;
    background: var(--color-red);
    color: var(--color-white);
    border-radius: 2px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    transition: background 0.2s ease;
}

.header-phone a[href^="tel:"]::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    background-color: currentColor;
    -webkit-mask: url("../content/files/icons/phone-icon.svg") center / contain no-repeat;
    mask: url("../content/files/icons/phone-icon.svg") center / contain no-repeat;
    transform: translateY(2px);
}

.header-phone a:hover {
    background: var(--color-red-light);
    color: var(--color-white);
}

.nav-toggle {
    display: none;
}

.nav-toggle-button {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}

.nav-toggle-button span {
    display: block;
    width: 26px;
    height: 3px;
    background: var(--color-black);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}


/* =========================================================
   4. SHARED COMPONENTS
   ========================================================= */

.page-section {
    padding: var(--section-y) var(--section-x);
}

.page-section--light {
    background: var(--color-white);
    color: var(--color-text);
}

.page-section--soft {
    background:
        radial-gradient(circle at 45% 35%, rgba(0, 0, 0, .06), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f7f7f7 44%, #ffffff 100%);
    color: var(--color-text);
}

.page-section--dark {
    background: var(--color-black);
    color: var(--color-white);
}

.section-title {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.02;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.04em;
}

.section-description {
    max-width: 620px;
    margin: 10px 0 0;
    color: var(--color-muted);
    font-size: 16px;
    line-height: 1.6;
}

.button-red {
    min-height: 48px;
    padding: 0 24px;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--color-red-light), var(--color-red));
    color: var(--color-white);
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--transition-fast), filter var(--transition-fast), box-shadow var(--transition-fast);
}

.button-red:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 16px 30px rgba(157, 0, 25, 0.28);
}

.button-red--wide {
    width: 100%;
}

.button-red--angular {
    clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
}

.breadcrumbs,
.car-detail__breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: clamp(32px, 4vw, 56px);
    font-size: 15px;
    color: var(--color-muted);
}

.breadcrumbs a,
.car-detail__breadcrumbs a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumbs a:hover,
.car-detail__breadcrumbs a:hover {
    color: var(--color-red);
}

.breadcrumbs strong,
.car-detail__breadcrumbs strong {
    color: var(--color-red);
    font-weight: 700;
}

.breadcrumbs span,
.car-detail__breadcrumbs span {
    color: #9a9a9a;
    font-size: 22px;
    line-height: 1;
}

.price-badge {
    width: 190px;
    min-height: 116px;
    padding: 24px 28px 22px;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-red-light), var(--color-red-dark));
    clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
    box-shadow: 0 16px 35px rgba(157, 0, 25, 0.28);
}

.price-badge span,
.price-badge em {
    display: block;
    font-style: normal;
    font-size: 17px;
    line-height: 1.1;
    font-weight: 600;
}

.price-badge strong {
    display: block;
    margin: 6px 0 4px;
    font-size: 36px;
    line-height: .95;
    font-weight: 950;
    letter-spacing: -.045em;
}

.dark-panel {
    position: relative;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .07), transparent 35%),
        linear-gradient(180deg, #060606 0%, #0d0d0d 100%);
    color: var(--color-white);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), calc(100% - 46px) 100%, 0 100%);
}

.dark-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(157, 0, 25, .18), transparent 34%),
        linear-gradient(90deg, rgba(255, 255, 255, .04), transparent);
    pointer-events: none;
}

.dark-panel > * {
    position: relative;
    z-index: 1;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    margin-bottom: 9px;
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 750;
    text-transform: uppercase;
}

.field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 122px;
    gap: 12px;
}

.field-dark {
    height: 55px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 16px;
    background: linear-gradient(135deg, #1b1b1b, #141414);
    border: 1px solid rgba(255, 255, 255, .04);
    color: var(--color-white);
}

.field-dark input,
.field-dark select {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-white);
    font: inherit;
    font-size: 15px;
    line-height: 1;
    appearance: none;
}

.field-dark select option {
    color: var(--color-text);
}

/* =========================================================
   5. HOMEPAGE
   ========================================================= */

/* Hero - full width */

.hero-banner {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            #050505 0%,
            #050505 22%,
            rgba(5, 5, 5, 0.92) 36%,
            rgba(5, 5, 5, 0.62) 52%,
            rgba(5, 5, 5, 0.18) 72%,
            rgba(5, 5, 5, 0) 100%
        ),
        url("../content/design/assets/images/banner-bg.jpg");
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    color: #ffffff;
}

.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 72% 45%, rgba(150, 0, 0, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.54) 100%);
    z-index: 1;
}

.hero-banner__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(110deg, rgba(120, 0, 0, 0.24) 0%, transparent 28%);
}

.hero-banner__content {
    position: relative;
    z-index: 3;
    width: 100%;
    min-height: 720px;
    margin: 0;
    padding-inline: clamp(18px, 5vw, 96px);
    display: flex;
    align-items: center;
}

.hero-banner__text {
    max-width: 650px;
    padding: 96px 0;
}

.hero-banner__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.hero-banner__eyebrow::before {
    content: "";
    width: 44px;
    height: 3px;
    background: var(--color-red);
}

.hero-banner__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(3.2rem, 6.2vw, 7.2rem);
    line-height: 0.92;
    font-weight: 900;
    letter-spacing: -0.065em;
    text-transform: uppercase;
}

.hero-banner__description {
    max-width: 520px;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.08rem;
    line-height: 1.7;
}

.hero-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 38px;
}

.hero-banner__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 28px;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.hero-banner__button:hover {
    transform: translateY(-2px);
}

.hero-banner__button--primary {
    background: var(--color-red);
    color: #ffffff;
    border: 2px solid var(--color-red);
}

.hero-banner__button--primary:hover {
    background: var(--color-red-light);
    border-color: var(--color-red-light);
}

.hero-banner__button--secondary {
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.04);
}

.hero-banner__button--secondary:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

/* Car highlight - full width */

.car-highlight-section {
    position: relative;
    background: #ffffff;
    color: #111111;
    padding: 48px clamp(18px, 5vw, 96px) 54px;
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.car-highlight-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

.car-highlight-intro h2 {
    max-width: 560px;
    margin: 0 0 8px;
    color: #111111;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.02;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.04em;
}

.car-highlight-intro p {
    max-width: 620px;
    margin: 0;
    color: #555555;
    font-size: 16px;
    line-height: 1.6;
}

.car-highlight-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: clamp(14px, 1.6vw, 28px);
}

.car-highlight-card {
    --card-cut: 18px;
    --card-cut-inner: 16px;
    position: relative;
    min-height: 166px;
    padding: 26px 18px;
    background: transparent;
    border: 0;
    box-shadow: none;
    clip-path: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    isolation: isolate;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.08));
}

.car-highlight-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(
            to top,
            var(--color-red-light) 0,
            var(--color-red-light) 3px,
            rgba(0, 0, 0, 0.14) 3px,
            rgba(0, 0, 0, 0.14) 100%
        );
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--card-cut)),
        calc(100% - var(--card-cut)) 100%,
        0 100%
    );
}

.car-highlight-card::after {
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 3px;
    z-index: -1;
    background: #ffffff;
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--card-cut-inner)),
        calc(100% - var(--card-cut-inner)) 100%,
        0 100%
    );
}

.car-highlight-card > svg {
    display: block;
    align-self: center;
    justify-self: center;
    margin: 0;
}


.car-highlight-card > * {
    position: relative;
    z-index: 1;
}

.car-highlight-value {
    display: block;
    margin-bottom: 7px;
    color: #111111;
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 30px;
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    text-align: center;
}

.car-highlight-label {
    color: #555555;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

.spec-icon {
    width: 58px;
    height: 58px;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f4;
    color: #111111;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 13px;
    box-shadow: inset 0 -4px 0 var(--color-red-light);
}

.spec-icon svg {
    display: block;
    width: 31px;
    height: 31px;
}

.spec-icon [fill="currentColor"] {
    fill: currentColor;
}

.spec-icon [stroke="currentColor"] {
    stroke: currentColor;
    stroke-width: 3;
}

/* Quick reservation - full width */

.quick-reservation {
    position: relative;
    padding:
        clamp(64px, 7vw, 112px)
        clamp(18px, 5vw, 96px);
    background:
        radial-gradient(circle at 82% 42%, rgba(181, 18, 27, 0.85) 0%, rgba(181, 18, 27, 0.35) 34%, rgba(0, 0, 0, 0) 58%),
        linear-gradient(135deg, #050505 0%, #111 48%, var(--color-red-dark) 100%);
    color: #fff;
    overflow: hidden;
}

.quick-reservation::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 0 38%, rgba(255, 255, 255, 0.04) 38.2%, transparent 38.6%),
        linear-gradient(120deg, transparent 0 70%, rgba(255, 255, 255, 0.06) 70.2%, transparent 70.6%);
    pointer-events: none;
}

.quick-reservation::after {
    content: "";
    position: absolute;
    right: -180px;
    bottom: -220px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transform: rotate(45deg);
    pointer-events: none;
}

.quick-reservation__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 42vw);
    gap: 42px clamp(28px, 4vw, 72px);
    align-items: start;
}

.quick-reservation__content {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}


.quick-reservation__label {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 26px;
    color: var(--color-red-light);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.quick-reservation__label span {
    display: block;
    width: 48px;
    height: 2px;
    background: currentColor;
}

.quick-reservation h2 {
    margin: 0;
    max-width: 720px;
    color: #fff;
    font-size: clamp(42px, 5.4vw, 82px);
    line-height: 1.03;
    font-weight: 900;
    letter-spacing: -0.055em;
}

.quick-reservation h2 strong {
    color: var(--color-red-light);
    font-weight: inherit;
}

.quick-reservation__content > p {
    position: relative;
    max-width: 620px;
    margin: 34px 0 0;
    padding-top: 28px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 20px;
    line-height: 1.7;
}

.quick-reservation__content > p::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 2px;
    background: var(--color-red-light);
}

.quick-reservation__features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2vw, 34px);
    margin-top: 46px;
    max-width: 900px;
}

.quick-reservation__feature {
    text-align: center;
}

.quick-reservation__icon,
.quick-reservation__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.quick-reservation svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.quick-reservation__icon {
    width: 78px;
    height: 78px;
    margin-bottom: 18px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
    color: var(--color-red-light);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.quick-reservation__feature h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.quick-reservation__feature p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 1.45;
}

/* Reservation card */

.quick-reservation__card {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    position: relative;
    padding: clamp(28px, 2.8vw, 42px);
    background: #fff;
    color: #111;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 76px),
        calc(100% - 76px) 100%,
        0 100%
    );
}

.quick-reservation__card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 76px;
    bottom: 0;
    height: 5px;
    background: var(--color-red-light);
}

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

.quick-reservation__card-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-height: 128px;
    padding: 18px 26px 26px 0;
    border-bottom: 1px solid #e7e7e7;
}

.quick-reservation__card-item:nth-child(2),
.quick-reservation__card-item:nth-child(4) {
    padding-left: 26px;
    border-left: 1px solid #e7e7e7;
}

.quick-reservation__card-item:nth-child(3),
.quick-reservation__card-item:nth-child(4) {
    border-bottom: 0;
    padding-top: 28px;
}

.quick-reservation__card-icon {
    width: clamp(58px, 4vw, 72px);
    height: clamp(58px, 4vw, 72px);
    border-radius: 50%;
    background: #f1f1f1;
    color: #111;
}

.quick-reservation__card-icon svg {
    width: 30px;
    height: 30px;
}

.quick-reservation__card-item span {
    display: block;
    margin: 5px 0 10px;
    color: #444;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quick-reservation__card-item strong {
    display: block;
    color: #0b0b0b;
    font-size: clamp(19px, 1.5vw, 22px);
    line-height: 1.18;
    font-weight: 900;
}

.quick-reservation__card-item small {
    display: block;
    margin-top: 10px;
    color: #555;
    font-size: 15px;
    line-height: 1.35;
}

.quick-reservation__notice {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 32px;
    padding: 20px 24px;
    background: #f4f4f4;
    color: #333;
    font-size: 15px;
    line-height: 1.45;
}

.quick-reservation__notice svg {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    stroke: var(--color-red-light);
}

.quick-reservation__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    min-height: 66px;
    margin-top: 18px;
    padding: 0 30px;
    background: linear-gradient(135deg, var(--color-red-light) 0%, var(--color-red) 100%);
    color: #fff;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-reservation__button::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: 0;
    width: 58px;
    height: 100%;
    background: rgba(255, 255, 255, 0.16);
    transform: skewX(-40deg);
}

.quick-reservation__button svg {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
    transition: transform 0.2s ease;
}

.quick-reservation__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(181, 18, 27, 0.34);
}

.quick-reservation__button:hover svg {
    transform: translateX(5px);
}

.quick-reservation__button:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: 4px;
}

/* Benefits */
.reservation-benefits-strip {
    position: relative;
    padding:
        clamp(34px, 4vw, 58px)
        clamp(18px, 5vw, 96px);
    background: #ffffff;
    color: #111111;
    overflow: hidden;
}

.reservation-benefits-strip::before,
.reservation-benefits-strip::after {
    display: none;
}

.reservation-benefits-strip__header {
    position: relative;
    z-index: 1;

    max-width: 760px;
    margin: 0 auto clamp(24px, 3vw, 38px);

    text-align: center;
}

.reservation-benefits-strip__header h2 {
    margin: 0;

    color: #111111;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.reservation-benefits-strip__inner {
    width: min(100%, 980px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 30px);

    background: transparent;
    border: 0;
    box-shadow: none;
}

.reservation-benefits-strip__item {
    position: relative;

    min-height: 158px;
    padding: 30px 26px;

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

    text-align: center;

    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.07);
}

.reservation-benefits-strip__item::after {
    display: none;
}

.reservation-benefits-strip__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    background: #f4f4f4;
    color: #111111;

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    box-shadow: inset 0 -4px 0 var(--color-red);
}

.reservation-benefits-strip__icon svg {
    width: 26px;
    height: 26px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reservation-benefits-strip__content {
    max-width: 240px;
    margin: 0 auto;
    text-align: center;
}

.reservation-benefits-strip__content strong,
.reservation-benefits-strip__description {
    display: block;
}

.reservation-benefits-strip__content strong {
    margin: 0 0 7px;

    color: #111111;
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 21px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.025em;
    text-transform: uppercase;
}

.reservation-benefits-strip__description {
    margin: 0;

    color: #666666;
    font-size: 15px;
    line-height: 1.4;
}

/* Responsive */

@media (max-width: 980px) {
    .reservation-benefits-strip__inner {
        width: min(100%, 680px);
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .reservation-benefits-strip__item {
        min-height: auto;
        padding: 28px 22px;
    }
}

@media (max-width: 560px) {
    .reservation-benefits-strip {
        padding:
            28px
            16px;
    }
    
    .reservation-benefits-strip__header {
        margin-bottom: 24px;
    }

    .reservation-benefits-strip__item {
        padding: 26px 20px;
    }

    .reservation-benefits-strip__icon {
        width: 56px;
        height: 56px;
    }

    .reservation-benefits-strip__icon svg {
        width: 24px;
        height: 24px;
    }

    .reservation-benefits-strip__content strong {
        font-size: 19px;
    }

    .reservation-benefits-strip__description {
        font-size: 14px;
    }
}

/* Responsive */

@media (max-width: 1180px) {
    .main-nav {
        gap: 28px;
    }

    .quick-reservation__inner {
        grid-template-columns: minmax(0, 1fr) minmax(330px, 40vw);
        gap: 38px 30px;
    }

    .quick-reservation__card-item {
        gap: 14px;
        padding-right: 18px;
    }

    .quick-reservation__card-item:nth-child(2),
    .quick-reservation__card-item:nth-child(4) {
        padding-left: 18px;
    }
}

@media (max-width: 980px) {
    .header-inner {
        height: 78px;
        gap: 18px;
    }

    .logo img {
        height: 50px;
    }

    .nav-toggle-button {
        display: inline-flex;
        margin-left: auto;
    }

    .main-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 78px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        margin-left: 0;
        background: #f2f2f2;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14);
    }

    .main-nav a {
        padding: 16px 24px;
        text-align: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .main-nav a::after {
        display: none;
    }

    .nav-toggle:checked ~ .main-nav {
        display: flex;
    }

    .nav-toggle:checked + .nav-toggle-button span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .nav-toggle:checked + .nav-toggle-button span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle:checked + .nav-toggle-button span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .header-phone a {
        min-height: 42px;
        padding: 0 18px;
        font-size: 13px;
    }

    .car-highlight-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .car-highlight-grid {
        grid-template-columns: repeat(4, minmax(120px, 1fr));
    }
}

@media (max-width: 820px) {
    .hero-banner {
        min-height: 680px;
        background:
            linear-gradient(
                180deg,
                rgba(5, 5, 5, 0.94) 0%,
                rgba(5, 5, 5, 0.82) 38%,
                rgba(5, 5, 5, 0.4) 68%,
                rgba(5, 5, 5, 0.78) 100%
            ),
            url("../content/design/assets/images/banner-bg.jpg");
        background-size: cover;
        background-position: 68% center;
    }

    .hero-banner__content {
        min-height: 680px;
        align-items: flex-start;
        padding-inline: 18px;
    }

    .hero-banner__text {
        padding: 80px 0 0;
        max-width: 100%;
    }

    .hero-banner__title {
        font-size: clamp(2.6rem, 13vw, 4.8rem);
    }

    .hero-banner__description {
        font-size: 1rem;
    }

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

    .quick-reservation__inner {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .quick-reservation__content,
    .quick-reservation__card {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        max-width: none;
    }

    .quick-reservation__features {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .quick-reservation__feature {
        display: grid;
        grid-template-columns: 72px 1fr;
        column-gap: 18px;
        align-items: center;
        text-align: left;
    }

    .quick-reservation__icon {
        grid-row: span 2;
        width: 64px;
        height: 64px;
        margin-bottom: 0;
    }

    .quick-reservation__feature h3 {
        margin-bottom: 5px;
    }
}

@media (max-width: 760px) {
    .quick-reservation__card {
        padding: 26px;
        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 48px),
            calc(100% - 48px) 100%,
            0 100%
        );
    }

    .quick-reservation__card::before {
        right: 48px;
    }

    .quick-reservation__card-grid {
        grid-template-columns: 1fr;
    }

    .quick-reservation__card-item,
    .quick-reservation__card-item:nth-child(2),
    .quick-reservation__card-item:nth-child(3),
    .quick-reservation__card-item:nth-child(4) {
        min-height: auto;
        padding: 20px 0;
        border-left: 0;
        border-bottom: 1px solid #e7e7e7;
    }

    .quick-reservation__card-item:last-child {
        border-bottom: 0;
    }

    .quick-reservation__card-icon {
        width: 60px;
        height: 60px;
    }

    .quick-reservation__card-icon svg {
        width: 28px;
        height: 28px;
    }

    .quick-reservation__card-item strong {
        font-size: 20px;
    }

    .quick-reservation__notice {
        align-items: flex-start;
        margin-top: 24px;
        padding: 18px;
    }

    .quick-reservation__button {
        min-height: 62px;
        padding: 0 22px;
        font-size: 14px;
    }
}

@media (max-width: 560px) {
    .container {
        width: min(100% - 28px, var(--container));
    }

    .site-header .container {
        padding-inline: 14px;
    }

    .header-inner {
        height: 70px;
    }

    .logo img {
        height: 44px;
    }

    .main-nav {
        top: 70px;
    }

    .header-phone {
        display: none;
    }

    .hero-banner {
        min-height: 620px;
        background-position: 72% center;
    }

    .hero-banner__content {
        min-height: 620px;
    }

    .hero-banner__text {
        padding-top: 64px;
    }

    .hero-banner__eyebrow {
        font-size: 0.72rem;
        letter-spacing: 0.14em;
    }

    .hero-banner__title {
        letter-spacing: -0.05em;
    }

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

    .hero-banner__button {
        width: 100%;
    }

    .car-highlight-section {
        padding: 36px 16px 42px;
    }

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

    .car-highlight-card {
        min-height: 132px;
    }
}

@media (max-width: 420px) {
    .quick-reservation {
        padding-left: 14px;
        padding-right: 14px;
    }

    .quick-reservation__card {
        padding: 22px;
    }

    .quick-reservation__card-item {
        gap: 14px;
    }

    .quick-reservation__card-icon {
        width: 54px;
        height: 54px;
    }

    .quick-reservation__card-icon svg {
        width: 26px;
        height: 26px;
    }
}

/* =========================================================
   8. FOOTER
   ========================================================= */
.site-footer {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, #050505 0%, #101010 56%, #1a1a1a 100%);
    color: #ffffff;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer::before {
    content: "";
    position: absolute;
    left: -80px;
    top: 0;
    bottom: 0;
    width: min(42vw, 520px);
    background: var(--color-red);
    transform: skewX(32deg);
    transform-origin: top left;
    z-index: 0;
}

.site-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 0 48%, rgba(255, 255, 255, 0.045) 48.2%, transparent 48.7%),
        radial-gradient(circle at 76% 30%, rgba(157, 0, 25, 0.22), transparent 32%);
    pointer-events: none;
    z-index: 0;
}

.site-footer__inner {
    position: relative;
    z-index: 1;

    min-height: 122px;
    width: 100%;
    padding:
        18px
        clamp(18px, 5vw, 96px);

    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 86px);
}

.site-footer__left,
.site-footer__right {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.site-footer__left {
    align-items: flex-start;
}

.site-footer__right {
    align-items: flex-start;
    justify-self: end;
}

.site-footer__item {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: rgba(255, 255, 255, 0.88);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

a.site-footer__item {
    transition: color 0.2s ease, transform 0.2s ease;
}

a.site-footer__item:hover {
    color: #ffffff;
    transform: translateX(2px);
}

.site-footer__item svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-footer__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
}

.site-footer__logo img {
    display: block;
    width: clamp(220px, 22vw, 360px);
    height: auto;
    max-height: 76px;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.42));
}

/* If old footer elements still exist, hide them safely */
.footer-shape,
.footer-inner,
.footer-bottom,
.footer-brand,
.footer-nav,
.footer-contact {
    display: none;
}

/* Responsive */

@media (max-width: 980px) {
    .site-footer::before {
        width: 55vw;
    }

    .site-footer__inner {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "logo logo"
            "left right";
        gap: 22px 36px;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .site-footer__logo {
        grid-area: logo;
    }

    .site-footer__left {
        grid-area: left;
    }

    .site-footer__right {
        grid-area: right;
        justify-self: end;
    }

    .site-footer__logo img {
        width: clamp(220px, 42vw, 340px);
    }
}

@media (max-width: 640px) {
    .site-footer::before {
        left: -180px;
        width: 420px;
        opacity: 0.72;
    }

    .site-footer__inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "logo"
            "left"
            "right";
        gap: 22px;
        min-height: auto;
        padding:
            28px
            16px;
    }

    .site-footer__left,
    .site-footer__right {
        align-items: flex-start;
        justify-self: stretch;
    }

    .site-footer__item {
        font-size: 14px;
    }

    .site-footer__logo {
        justify-self: start;
    }

    .site-footer__logo img {
        width: min(280px, 82vw);
        max-height: none;
    }
}

/* =========================================================
   6. CARS LIST PAGE
   ========================================================= */

/* Cars list PAGE */

.cars-list-page {
    background: var(--color-white);
    color: var(--color-text);
}

.cars-list {
     width: 100%;
    min-height: calc(100vh - 96px);

    padding:
        24px
        var(--section-x)
        clamp(64px, 7vw, 104px);

    background:
        radial-gradient(
            circle at 8% 0%,
            color-mix(
                in srgb,
                var(--color-red) 6%,
                transparent
            ),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 5%,
            color-mix(
                in srgb,
                var(--color-red-light) 7%,
                transparent
            ),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            var(--color-white) 0%,
            var(--color-light) 100%
        );
}

/* Page intro — same structure as price list and booking calendar */

.cars-list__intro,
.cars-list__header {
    max-width: 820px;
    margin: 0 0 clamp(28px, 3.5vw, 46px);
}

.cars-list__kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 12px;

    color: var(--color-red);

    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cars-list__kicker::before {
    content: "";

    width: 42px;
    height: 3px;

    background: currentColor;
}

.cars-list__intro h1,
.cars-list__header h1 {
    margin: 0;

    color: var(--color-text);

    font-family: "Oswald", Arial, sans-serif;
    font-size: clamp(38px, 4.8vw, 68px);
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.cars-list__intro p,
.cars-list__header p {
    max-width: 720px;
    margin: 14px 0 0;

    color: var(--color-muted);

    font-size: 16px;
    line-height: 1.6;
}
/* Grid optimized for 2 offered vehicles */
.cars-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 48px);
    align-items: stretch;
}

/* Premium large vehicle card */
.car-list-card,
.card-item {
    width: 100%;
    min-width: 0;
    min-height: 560px;

    display: flex;
    flex-direction: column;
    overflow: hidden;

    background: var(--color-white);
    color: var(--color-text);

    border: 1px solid var(--color-line);
    border-radius: 0;

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

/* Image area */
.car-list-card__image,
.card-item__image,
.card-image {
    width: 100%;
    height: clamp(280px, 24vw, 390px);
    min-height: clamp(280px, 24vw, 390px);

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

    padding: clamp(30px, 3vw, 52px);

    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--color-white) 86%, transparent),
            color-mix(in srgb, var(--color-light) 96%, var(--color-white))
        ),
        radial-gradient(
            circle at 50% 45%,
            rgba(0, 0, 0, .08),
            transparent 46%
        );
}

.car-list-card__image img,
.card-item__image img,
.card-image img {
    display: block;

    width: 100%;
    max-width: min(560px, 92%);
    height: clamp(220px, 18vw, 320px);

    object-fit: contain;
    filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .16));
}

/* Body */
.car-list-card__body,
.card-item__body,
.card-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: clamp(26px, 2.6vw, 40px);
}

.car-list-card__body h2 {
    margin: 0 0 22px;

    color: var(--color-text);
    font-size: clamp(30px, 2.8vw, 44px);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: -.035em;
    text-transform: uppercase;
}

/* Specs */
.car-list-card__specs,
.card-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 22px;

    margin: 22px 0 36px;

    color: var(--color-text);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.car-list-card__specs span,
.card-specs span {
    min-width: 0;

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

    overflow: hidden;
}

.car-list-card__specs svg,
.card-specs svg,
.car-list-card__specs i,
.card-specs i {
    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    padding: 5px;
    border-radius: 4px;

    background: color-mix(in srgb, var(--color-red) 8%, transparent);
    color: var(--color-red);

    font-size: 15px;
    line-height: 1;
}

.car-spec__text {
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Card footer */
.car-list-card__footer,
.card-item__footer,
.card-footer {
    margin-top: auto;

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

.car-list-card__price {
    width: 100%;

    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;

    gap: 4px 7px;
    white-space: normal;
}

.car-list-card__price span {
    color: var(--color-text);
    font-size: 12px;
    line-height: 1.15;
}

.car-list-card__price strong {
    color: var(--color-red);
    font-size: clamp(28px, 2.35vw, 36px);
    line-height: 1;
    letter-spacing: -0.035em;
}

.car-list-card__price > strong small {
    font-size: 13px;
    font-weight: 500;
}

/* If suffix text is after the price, keep it visible */
.car-list-card__price strong + span {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.car-list-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 0 28px;

    border: 1px solid var(--color-line);
    border-radius: 0;

    background: var(--color-white);
    color: var(--color-text);

    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.car-list-card__button:hover {
    border-color: var(--color-red);
    background: var(--color-red);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* Placeholder fallback if no image exists */
.car-list-card__image:empty,
.card-item__image:empty,
.card-image:empty {
    position: relative;
}

.car-list-card__image:empty::after,
.card-item__image:empty::after,
.card-image:empty::after {
    content: "";
    position: absolute;

    width: 140px;
    height: 140px;

    border-radius: 50%;
    background: color-mix(in srgb, var(--color-red) 7%, transparent);
    z-index: 0;
}

.car-list-card__image:empty::before,
.card-item__image:empty::before,
.card-image:empty::before {
    content: "";
    position: relative;
    z-index: 1;

    width: 86px;
    height: 86px;

    display: block;

    color: var(--color-red);
    opacity: .55;
    background: currentColor;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.4 15.7A2.4 2.4 0 0 1 2 13.3v-1.8c0-.6.4-1.1 1-1.3l1.8-.6 1.9-3.1A3 3 0 0 1 9.2 5h5.6a3 3 0 0 1 2.5 1.5l1.9 3.1 1.8.6c.6.2 1 .7 1 1.3v1.8a2.4 2.4 0 0 1-2.4 2.4H19a2.7 2.7 0 0 1-5.2 0H10.2a2.7 2.7 0 0 1-5.2 0h-.6Zm3.2-7.9-1.3 2.1h11.4l-1.3-2.1a1.8 1.8 0 0 0-1.6-.9H9.2a1.8 1.8 0 0 0-1.6.9ZM7.6 16.9a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Zm8.8 0a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.4 15.7A2.4 2.4 0 0 1 2 13.3v-1.8c0-.6.4-1.1 1-1.3l1.8-.6 1.9-3.1A3 3 0 0 1 9.2 5h5.6a3 3 0 0 1 2.5 1.5l1.9 3.1 1.8.6c.6.2 1 .7 1 1.3v1.8a2.4 2.4 0 0 1-2.4 2.4H19a2.7 2.7 0 0 1-5.2 0H10.2a2.7 2.7 0 0 1-5.2 0h-.6Zm3.2-7.9-1.3 2.1h11.4l-1.3-2.1a1.8 1.8 0 0 0-1.6-.9H9.2a1.8 1.8 0 0 0-1.6.9ZM7.6 16.9a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Zm8.8 0a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Z'/%3E%3C/svg%3E");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Cars list - horizontal premium layout on large screens */

@media (min-width: 1501px) {
    .car-list-card,
    .card-item {
        min-height: 430px;

        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
        align-items: stretch;
    }

    .car-list-card__image,
    .card-item__image,
    .card-image {
        height: 100%;
        min-height: 430px;

        padding: clamp(34px, 3.4vw, 64px);

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

    .car-list-card__image img,
    .card-item__image img,
    .card-image img {
        max-width: min(620px, 96%);
        height: clamp(250px, 20vw, 340px);
    }

    .car-list-card__body,
    .card-item__body,
    .card-body {
        padding: clamp(30px, 3vw, 46px);

        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .car-list-card__body h2 {
        margin-bottom: 26px;
        font-size: clamp(32px, 2.7vw, 46px);
    }

    .car-list-card__specs,
    .card-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px 18px;

        margin: 0 0 34px;

        font-size: 13px;
    }

    .car-list-card__specs span,
    .card-specs span {
        align-items: center;
    }

    .car-spec__text {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .car-list-card__footer,
    .card-item__footer,
    .card-footer {
        padding-top: 24px;
        border-top: 1px solid var(--color-line);
    
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 14px;
    }
    
    .car-list-card__price {
        width: 100%;
    
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        gap: 6px;
    }

    .car-list-card__button {
        width: 100%;
        min-height: 48px;
    
        background: var(--color-red);
        color: var(--color-white);
        border-color: var(--color-red);
    }
    
    .car-list-card__button:hover {
        background: var(--color-red-light);
        border-color: var(--color-red-light);
        color: var(--color-white);
    }
}

/* Cars list - keep 2 cards per row, but stack image/info inside card */
@media (max-width: 1500px) and (min-width: 921px) {
    .cars-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .car-list-card,
    .card-item {
        display: flex;
        flex-direction: column;
        min-height: 560px;
    }

    .car-list-card__image,
    .card-item__image,
    .card-image {
        height: clamp(300px, 24vw, 390px);
        min-height: clamp(300px, 24vw, 390px);
        border-right: 0;
        border-bottom: 1px solid var(--color-line);
    }

    .car-list-card__image img,
    .card-item__image img,
    .card-image img {
        max-width: min(560px, 92%);
        height: clamp(230px, 18vw, 320px);
    }

    .car-list-card__body,
    .card-item__body,
    .card-body {
        flex: 1;
        justify-content: flex-start;
    }

    .car-list-card__specs,
    .card-specs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .car-list-card__footer,
    .card-item__footer,
    .card-footer {
        margin-top: auto;
        padding-top: 24px;
        border-top: 1px solid var(--color-line);

        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .car-list-card__button {
        width: 100%;
    }
}

/* Responsive */
@media (max-width: 920px) {
    .cars-grid {
        grid-template-columns: 1fr;
    }

    .car-list-card,
    .card-item {
        min-height: auto;
    }

    .car-list-card__image,
    .card-item__image,
    .card-image {
        height: 280px;
        min-height: 280px;
    }

    .car-list-card__image img,
    .card-item__image img,
    .card-image img {
        height: 230px;
    }
}

@media (max-width: 560px) {
    .cars-list {
         min-height: calc(100vh - 70px);

        padding:
            18px
            16px
            56px;
    }

    .cars-list__intro,
    .cars-list__header {
        margin-bottom: 28px;
    }

    .cars-list__intro h1,
    .cars-list__header h1 {
        font-size: 38px;
    }

    .cars-list__intro p,
    .cars-list__header p {
        margin-top: 12px;
        font-size: 15px;
    }

    .cars-list__kicker {
        font-size: 11px;
    }

    .car-list-card__image,
    .card-item__image,
    .card-image {
        height: 230px;
        min-height: 230px;
        padding: 22px;
    }

    .car-list-card__image img,
    .card-item__image img,
    .card-image img {
        height: 185px;
    }

    .car-list-card__body,
    .card-item__body,
    .card-body {
        padding: 22px;
    }

    .car-list-card__body h2 {
        font-size: 30px;
    }

    .car-list-card__specs,
    .card-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        font-size: 12px;
    }

    .car-list-card__footer,
    .card-item__footer,
    .card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .car-list-card__button {
        width: 100%;
    }
}

/* =========================================================
   7. PRICE LIST PAGE
   ========================================================= */

.price-list-page {
    color: var(--color-text);
    background: var(--color-white);
}

.price-list {
    width: 100%;
    min-height: calc(100vh - 96px);

    padding:
        24px
        var(--section-x)
        clamp(56px, 6vw, 86px);

    background:
        radial-gradient(
            circle at 8% 0%,
            color-mix(in srgb, var(--color-red) 6%, transparent),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 5%,
            color-mix(in srgb, var(--color-red-light) 7%, transparent),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            var(--color-white) 0%,
            var(--color-light) 100%
        );
}

/* =========================================================
   PAGE INTRO
   Same visual hierarchy as booking calendar
   ========================================================= */

.price-list__intro {
    margin: 0 0 clamp(26px, 3vw, 38px);
}

.price-list__kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 12px;

    color: var(--color-red);

    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.price-list__kicker::before {
    content: "";

    width: 42px;
    height: 3px;

    background: currentColor;
}

.price-list__intro h1 {
    margin: 0;

    color: var(--color-text);

    font-family: "Oswald", Arial, sans-serif;
    font-size: clamp(38px, 4.8vw, 68px);
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.price-list__intro p {
    max-width: 720px;
    margin: 14px 0 0;

    color: var(--color-muted);

    font-size: 16px;
    line-height: 1.6;
}

/* =========================================================
   CARDS
   ========================================================= */

.price-list__cards {
    display: grid;
    gap: 18px;
}

.price-list-card {
    width: 100%;
    min-width: 0;

    overflow: hidden;

    background: var(--color-white);

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

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.08);

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.price-list-card:hover {
    border-color:
        color-mix(
            in srgb,
            var(--color-red) 18%,
            var(--color-line)
        );

    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.11);

    transform: translateY(-2px);
}

/*
 * Actual HTML structure:
 *
 * .price-list-card
 *   .price-list-card__vehicle
 *     .price-list-card__image
 *     .price-list-card__info
 *     .price-list-card__prices
 */

.price-list-card__vehicle {
    min-width: 0;

    display: grid;
    grid-template-columns:
        minmax(270px, 0.88fr)
        minmax(350px, 1.08fr)
        minmax(570px, 1.72fr);

    align-items: stretch;
}

/* =========================================================
   VEHICLE IMAGE
   ========================================================= */

.price-list-card__image {
    min-width: 0;
    min-height: 270px;

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

    padding: clamp(24px, 2.4vw, 40px);

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--color-white) 84%,
                transparent
            ),
            color-mix(
                in srgb,
                var(--color-light) 96%,
                var(--color-white)
            )
        ),
        radial-gradient(
            circle at 50% 48%,
            rgba(0, 0, 0, 0.09),
            transparent 48%
        );

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

.price-list-card__image img {
    display: block;

    width: 100%;
    max-width: 340px;
    height: 205px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 17px 18px rgba(0, 0, 0, 0.17)
        );

    transition:
        transform var(--transition-fast);
}

.price-list-card__image:hover img {
    transform: scale(1.025);
}

/* =========================================================
   VEHICLE INFORMATION
   ========================================================= */

.price-list-card__info {
    min-width: 0;

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

    padding:
        26px
        clamp(22px, 2.2vw, 36px);

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

.price-list-card__info h2 {
    margin: 0 0 22px;

    color: var(--color-text);

    font-family: "Oswald", Arial, sans-serif;
    font-size: clamp(27px, 2.1vw, 36px);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.price-list-card__info h2 a {
    color: inherit;

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

.price-list-card__info h2 a:hover {
    color: var(--color-red);
}

/* =========================================================
   VEHICLE SPECIFICATIONS
   ========================================================= */

.price-list-card__specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 18px;
}

.price-list-card__spec {
    min-width: 0;

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

    grid-template-rows:
        auto
        auto;

    column-gap: 10px;
    align-items: center;
}

.price-list-card__spec-icon {
    grid-column: 1;
    grid-row: 1 / 3;

    width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

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

.price-list-card__spec-icon svg {
    display: block;

    width: 27px;
    height: 27px;
    max-width: 100%;
    max-height: 100%;
}

.price-list-card__spec > span:not(
    .price-list-card__spec-icon
) {
    grid-column: 2;
    grid-row: 1;

    display: block;
    min-width: 0;

    margin-bottom: 2px;

    color: var(--color-muted);

    font-size: 10px;
    line-height: 1.15;
    font-weight: 600;
}

.price-list-card__spec > strong {
    grid-column: 2;
    grid-row: 2;

    display: block;
    min-width: 0;

    color: var(--color-text);

    font-size: 13px;
    line-height: 1.15;
    font-weight: 800;

    overflow-wrap: anywhere;
}

/* Hide specifications without a value, e.g. empty consumption */

.price-list-card__spec:has(> strong:empty) {
    display: none;
}

/* =========================================================
   PRICES
   ========================================================= */

.price-list-card__prices {
    min-width: 0;
    min-height: 270px;

    margin: 0;

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

.price-list-card__price {
    position: relative;
    min-width: 0;
    min-height: 270px;

    padding:
        28px
        clamp(12px, 1.35vw, 22px);

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

    background: var(--color-white);

    text-align: center;
}

.price-list-card__price + .price-list-card__price {
    border-left: 1px solid var(--color-line);
}

/* Default price */

.price-list-card__price[data-price-type-id="1"] {
    background: var(--color-white);
}

/* Second price */

.price-list-card__price[data-price-type-id="2"] {
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--color-light) 82%,
                var(--color-white)
            ),
            var(--color-white)
        );
}

/* Third price */

.price-list-card__price[data-price-type-id]:not(:has(~ .price-list-card__price[data-price-type-id])) {
    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--color-red) 8%,
                var(--color-white)
            ),
            color-mix(
                in srgb,
                var(--color-red) 3%,
                var(--color-white)
            )
        );

    box-shadow:
        inset 5px 0 0 var(--color-red);
}


/* 15+ days */

.price-list-card__price:not([data-price-type-id]) {
    background:
        color-mix(
            in srgb,
            var(--color-light) 42%,
            var(--color-white)
        );
}

/* Period title */

.price-list-card__price dt {
    margin: 0 0 27px;

    color: var(--color-text);

    font-family: "Oswald", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.18;
    font-weight: 700;
    text-transform: none;
}

.price-list-card__price[data-price-type-id]:not(
    :has(~ .price-list-card__price[data-price-type-id])
) dt {
    color: var(--color-red);
}

/* Price body */

.price-list-card__price dd {
    margin: 0;
}

.price-list-card__price dd strong {
    display: block;

    color: var(--color-text);

    font-family: "Oswald", Arial, sans-serif;
    font-size: clamp(27px, 2.05vw, 38px);
    line-height: 0.95;
    font-style: italic;
    font-weight: 900;
    letter-spacing: -0.035em;
    white-space: nowrap;
}

.price-list-card__price[data-price-type-id]:not(
    :has(~ .price-list-card__price[data-price-type-id])
) dd strong {
    color: var(--color-red);
}

.price-list-card__price dd small {
    display: block;

    margin-top: 12px;

    color: var(--color-muted);

    font-size: 11px;
    line-height: 1.25;
    font-weight: 550;
}

.price-list-card__on-request {
    font-size: clamp(22px, 1.75vw, 30px) !important;
    white-space: normal !important;
}

/* =========================================================
   MEDIUM DESKTOP
   Prices move below image and information
   ========================================================= */

@media (max-width: 1380px) {
    .price-list-card__vehicle {
        grid-template-columns:
            minmax(280px, 0.86fr)
            minmax(0, 1.14fr);
    }

    .price-list-card__image {
        grid-column: 1;
        grid-row: 1;

        min-height: 250px;
    }

    .price-list-card__info {
        grid-column: 2;
        grid-row: 1;

        min-height: 250px;

        border-right: 0;
    }

    .price-list-card__prices {
        grid-column: 1 / -1;
        grid-row: 2;

        min-height: 190px;

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

    .price-list-card__price {
        min-height: 190px;
    }
    
    .price-list-card__price[data-price-type-id]:not(
        :has(~ .price-list-card__price[data-price-type-id])
    ) {
        box-shadow:
            inset 0 4px 0 var(--color-red);
    }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 920px) {
    .price-list {
        padding-left: 18px;
        padding-right: 18px;
    }

    .price-list-card__vehicle {
        grid-template-columns:
            minmax(220px, 38%)
            minmax(0, 62%);
    }

    .price-list-card__image {
        min-height: 230px;

        padding: 22px;
    }

    .price-list-card__image img {
        height: 170px;
    }

    .price-list-card__info {
        min-height: 230px;

        padding:
            23px
            20px;
    }

    .price-list-card__info h2 {
        margin-bottom: 18px;

        font-size: 27px;
    }

    .price-list-card__specs {
        gap: 12px 14px;
    }

    .price-list-card__prices {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .price-list-card__price {
        min-height: 155px;
    }

    .price-list-card__price:nth-child(3) {
        border-top: 1px solid var(--color-line);
        border-left: 0;
    }

    .price-list-card__price:nth-child(4) {
        border-top: 1px solid var(--color-line);
    }

    .price-list-card__price dt {
        margin-bottom: 17px;
    }
}

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

@media (max-width: 640px) {
    .price-list {
        min-height: calc(100vh - 70px);

        padding:
            18px
            16px
            52px;
    }

    .price-list__intro {
        margin-bottom: 26px;
    }

    .price-list__intro h1 {
        font-size: 38px;
    }

    .price-list__intro p {
        font-size: 15px;
    }

    .price-list__kicker {
        font-size: 11px;
    }
    
    .price-list-card__vehicle {
        grid-template-columns: 1fr;
    }

    .price-list-card__image {
        grid-column: 1;
        grid-row: auto;

        min-height: 210px;

        border-right: 0;
        border-bottom: 1px solid var(--color-line);
    }

    .price-list-card__image img {
        max-width: 310px;
        height: 165px;
    }

    .price-list-card__info {
        grid-column: 1;
        grid-row: auto;

        min-height: auto;

        padding: 24px 20px;

        border-right: 0;
    }

    .price-list-card__info h2 {
        font-size: 28px;
    }

    .price-list-card__specs {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .price-list-card__prices {
        grid-column: 1;
        grid-row: auto;

        grid-template-columns: 1fr;

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

    .price-list-card__price {
        min-height: 86px;

        padding: 15px 18px;

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

        align-items: center;
        column-gap: 18px;

        text-align: right;
    }

    .price-list-card__price + .price-list-card__price {
        border-top: 1px solid var(--color-line);
        border-left: 0;
    }

    .price-list-card__price:nth-child(3),
    .price-list-card__price:nth-child(4) {
        border-top: 1px solid var(--color-line);
    }

    .price-list-card__price dt {
        margin: 0;

        text-align: left;
    }

    .price-list-card__price dd {
        text-align: right;
    }

    .price-list-card__price dd strong {
        font-size: 25px;
    }

    .price-list-card__price dd small {
        margin-top: 5px;
    }
    
    .price-list-card__price[data-price-type-id]:not(
        :has(~ .price-list-card__price[data-price-type-id])
    ) {
        box-shadow:
            inset 4px 0 0 var(--color-red);
    }
}

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

@media (max-width: 420px) {
    .price-list-card__specs {
        grid-template-columns: 1fr;
    }

    .price-list-card__image {
        min-height: 190px;
    }

    .price-list-card__image img {
        height: 150px;
    }

    .price-list-card__price {
        grid-template-columns:
            minmax(0, 0.85fr)
            minmax(120px, 1.15fr);
    }

    .price-list-card__price dt {
        font-size: 13px;
    }

    .price-list-card__price dd strong {
        font-size: 23px;
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .price-list-page *,
    .price-list-page *::before,
    .price-list-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =========================================================
   6.1. CAR DETAIL PAGE
   ========================================================= */

.car-detail-page {
    --car-detail-radius: 14px;
    --car-detail-radius-small: 10px;
    --car-detail-dark: var(--color-text);
    --car-detail-surface: var(--color-white);
    --car-detail-surface-soft: color-mix(
        in srgb,
        var(--color-white) 95%,
        var(--color-text)
    );

    color: var(--color-text);
    background:
        radial-gradient(
            circle at 72% 18%,
            color-mix(in srgb, var(--color-red) 5%, transparent),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--color-white) 0%,
            var(--car-detail-surface-soft) 52%,
            var(--color-white) 100%
        );
    overflow: hidden;
}

.car-detail {
    width: 100%;
    min-height: calc(100vh - 90px);
    padding:
        clamp(26px, 3vw, 44px)
        var(--page-padding)
        clamp(52px, 6vw, 90px);
}

/* breadcrumbs */

.car-detail__breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: clamp(28px, 3.4vw, 46px);

    color: var(--color-red);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
}

.car-detail__breadcrumbs a {
    color: var(--color-muted);
    text-decoration: none;
    font-weight: 600;
    transition: color .18s ease;
}

.car-detail__breadcrumbs a:hover {
    color: var(--color-red);
}

.car-detail__breadcrumbs::before {
    content: "";
    width: 38px;
    height: 2px;
    margin-right: 3px;
    background: var(--color-red);
    flex: 0 0 auto;
}

/* page layout */

.car-detail__layout {
    display: block;
}

.car-detail__content {
    display: grid;
    grid-template-columns:
        minmax(360px, .78fr)
        minmax(580px, 1.34fr);
    grid-template-areas:
        "intro vehicle"
        "info  vehicle";
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: clamp(42px, 5vw, 82px);
    row-gap: clamp(28px, 3vw, 42px);
    min-width: 0;
}

.car-detail__intro {
    grid-area: intro;
    min-width: 0;
}

.car-detail__info-panel {
    grid-area: info;
    min-width: 0;
}

.car-detail__vehicle-area {
    grid-area: vehicle;
    min-width: 0;
}

.car-detail__booking:empty {
    display: none;
}

/* title */

.car-detail__intro h1 {
    margin: 0;
    max-width: 720px;

    color: var(--color-text);
    font-family: "Oswald", Arial, sans-serif;
    font-size: clamp(54px, 5.4vw, 92px);
    line-height: 1;
    font-style: italic;
    font-weight: 900;
    letter-spacing: -.045em;
    text-transform: uppercase;
}

.car-detail__title-main,
.car-detail__title-variant {
    display: block;
}

.car-detail__title-main {
    line-height: .95;
}

.car-detail__title-variant {
    margin-top: .14em;
    color: var(--color-muted);
    font-size: .78em;
    line-height: 1.08;
}

.car-detail__subtitle {
    max-width: 560px;
    margin: clamp(22px, 2.4vw, 34px) 0 0;

    color: var(--color-text);
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.65;
    font-weight: 500;
}

.car-detail__subtitle:empty {
    display: none;
}

.car-detail__subtitle p {
    margin: 0;
}

/* specifications */

.car-detail__specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 clamp(30px, 3vw, 42px);
}

.car-detail__spec {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 13px;
    align-items: center;
    min-width: 0;
    padding: 18px clamp(14px, 1.5vw, 24px);
}

.car-detail__spec:not(:nth-child(3n)) {
    border-right: 1px solid var(--color-line);
}

.car-detail__spec:not(:nth-last-child(-n + 3)) {
    border-bottom: 1px solid var(--color-line);
}

.car-detail__spec:nth-child(3n + 1) {
    padding-left: 0;
}

.car-detail__spec:nth-child(3n) {
    padding-right: 0;
}

.car-detail__spec-icon {
    grid-column: 1;
    grid-row: 1 / 3;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;

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

.car-detail__spec-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.car-detail__spec > span:not(.car-detail__spec-icon) {
    grid-column: 2;
    grid-row: 1;

    display: block;
    min-width: 0;
    margin: 0 0 3px;

    color: var(--color-text);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 500;
}

.car-detail__spec strong {
    grid-column: 2;
    grid-row: 2;

    display: block;
    min-width: 0;

    color: var(--color-text);
    font-size: clamp(15px, 1.12vw, 18px);
    line-height: 1.15;
    font-weight: 800;
}

/* price tabs */

.car-detail__price-tabs {
    display: grid;
    grid-template-columns: minmax(210px, 43%) minmax(0, 1fr);
    width: 100%;
    max-width: 570px;
    min-height: 242px;

    border: 1px solid var(--color-line);
    border-radius: var(--car-detail-radius);
    background: var(--car-detail-surface);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .09);
    overflow: hidden;
}

.car-detail__price-tab-list {
    display: flex;
    flex-direction: column;
    min-width: 0;

    background: var(--car-detail-dark);
}

.car-detail__price-tab {
    position: relative;
    z-index: 1;

    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    min-height: 74px;
    padding: 17px 22px;

    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: transparent;
    color: var(--color-white);

    font: inherit;
    text-align: left;
    cursor: pointer;

    transition:
        background-color .18s ease,
        color .18s ease;
}

.car-detail__price-tab:last-child {
    border-bottom: 0;
}

.car-detail__price-tab:hover {
    background: rgba(255, 255, 255, .07);
}

.car-detail__price-tab.is-active {
    z-index: 2;
    background:
        linear-gradient(
            135deg,
            var(--color-red-light),
            var(--color-red-dark)
        );
}

.car-detail__price-tab.is-active::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -18px;
    width: 0;
    height: 0;

    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 18px solid var(--color-red);

    transform: translateY(-50%);
}

.car-detail__price-tab:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: -5px;
}

.car-detail__price-tab-title {
    display: block;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 750;
}

.car-detail__price-tab-description {
    display: block;
    margin-top: 5px;

    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 500;
}

.car-detail__price-panels {
    min-width: 0;
    background:
        linear-gradient(
            135deg,
            var(--color-white),
            var(--car-detail-surface-soft)
        );
}

.car-detail__price-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: clamp(24px, 3vw, 38px);
}

.car-detail__price-panel[hidden] {
    display: none;
}

.car-detail__price-panel-value {
    display: grid;
    grid-template-columns: auto auto;
    align-items: end;
    justify-content: start;
    column-gap: 8px;
    width: 100%;
}

.car-detail__price-panel-label {
    grid-column: 1 / -1;
    display: block;
    margin-bottom: 12px;

    color: var(--color-text);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
}

.car-detail__price-panel-value strong {
    grid-column: 1;
    display: block;

    color: var(--color-red);
    font-family: "Oswald", Arial, sans-serif;
    font-size: clamp(44px, 4.2vw, 66px);
    line-height: .88;
    font-style: italic;
    font-weight: 900;
    letter-spacing: -.035em;
    white-space: nowrap;
}

.car-detail__price-panel-value em {
    grid-column: 2;
    display: block;
    margin-bottom: 5px;

    color: var(--color-red);
    font-size: 15px;
    line-height: 1;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

.car-detail__price-panel-vat {
    grid-column: 1 / -1;
    display: block;
    margin-top: 13px;

    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 500;
}

/* vehicle image */

.car-detail__vehicle-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;

    border-radius: var(--car-detail-radius);
    background: var(--car-detail-surface-soft);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .10);
    overflow: hidden;
    touch-action: pan-y;
}

.car-detail__vehicle-image img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 1;
    transition:
        opacity .18s ease,
        transform .35s ease;
}

.car-detail__vehicle-image img.is-loading {
    opacity: .42;
    transform: scale(1.008);
}

/* gallery controls */

.car-detail__vehicle-image > .car-detail__gallery-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;

    border: 1px solid color-mix(
        in srgb,
        var(--color-text) 10%,
        transparent
    );
    border-radius: 50%;
    background: color-mix(
        in srgb,
        var(--color-white) 90%,
        transparent
    );
    color: var(--color-text);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);

    cursor: pointer;
    transform: translateY(-50%);
    transition:
        color .18s ease,
        background-color .18s ease,
        transform .18s ease;
}

.car-detail__gallery-arrow--previous {
    left: 16px;
}

.car-detail__gallery-arrow--next {
    right: 16px;
}

.car-detail__vehicle-image > .car-detail__gallery-arrow:hover {
    color: var(--color-red);
    background: var(--color-white);
    transform: translateY(-50%) scale(1.05);
}

.car-detail__vehicle-image > .car-detail__gallery-arrow:focus-visible {
    outline: 2px solid var(--color-red);
    outline-offset: 3px;
}

.car-detail__gallery-arrow svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.car-detail__gallery > .car-detail__gallery-arrow {
    display: none;
}

.car-detail__gallery-counter {
    position: absolute;
    z-index: 3;
    left: 16px;
    bottom: 16px;

    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;

    border-radius: 7px;
    background: rgba(0, 0, 0, .68);
    color: var(--color-white);

    font-size: 13px;
    line-height: 1;
    font-weight: 700;
}

/* thumbnails */

.car-detail__gallery {
    margin-top: clamp(16px, 1.8vw, 24px);
}

.car-detail__thumbs {
    display: flex;
    gap: clamp(10px, 1.2vw, 16px);
    width: 100%;
    padding: 2px;

    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-red) transparent;
}

.car-detail__thumb {
    flex: 1 0 clamp(100px, 17%, 150px);
    aspect-ratio: 1.3 / 1;

    border: 2px solid transparent;
    border-radius: var(--car-detail-radius-small);
    background: var(--car-detail-surface-soft);
    overflow: hidden;

    cursor: pointer;
    text-decoration: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.car-detail__thumb:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
}

.car-detail__thumb.is-active {
    border-color: var(--color-red);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

.car-detail__thumb:focus-visible {
    outline: 2px solid var(--color-red);
    outline-offset: 3px;
}

.car-detail__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* responsive */

@media (max-width: 1180px) {
    .car-detail__content {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "intro"
            "vehicle"
            "info";
        grid-template-rows: auto;
        row-gap: clamp(28px, 4vw, 48px);
    }

    .car-detail__intro {
        max-width: 780px;
    }

    .car-detail__vehicle-area {
        width: 100%;
        max-width: 960px;
    }

    .car-detail__info-panel {
        width: 100%;
        max-width: 720px;
    }

    .car-detail__price-tabs {
        max-width: 620px;
    }
}

@media (max-width: 760px) {
    .car-detail {
        padding-top: 24px;
    }

    .car-detail__breadcrumbs {
        margin-bottom: 28px;
        font-size: 14px;
    }

    .car-detail__intro h1 {
        font-size: clamp(48px, 12vw, 68px);
    }

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

    .car-detail__spec {
        padding: 16px;
    }

    .car-detail__spec:not(:nth-child(3n)) {
        border-right: 0;
    }

    .car-detail__spec:not(:nth-last-child(-n + 3)) {
        border-bottom: 0;
    }

    .car-detail__spec:not(:nth-child(2n)) {
        border-right: 1px solid var(--color-line);
    }

    .car-detail__spec:not(:nth-last-child(-n + 2)) {
        border-bottom: 1px solid var(--color-line);
    }

    .car-detail__spec:nth-child(3n + 1),
    .car-detail__spec:nth-child(3n) {
        padding-left: 16px;
        padding-right: 16px;
    }

    .car-detail__spec:nth-child(2n + 1) {
        padding-left: 0;
    }

    .car-detail__spec:nth-child(2n) {
        padding-right: 0;
    }

    .car-detail__price-tabs {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
        min-height: 0;
    }

    .car-detail__price-tab-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .car-detail__price-tab {
        min-height: 74px;
        padding: 14px 12px;
        border-right: 1px solid rgba(255, 255, 255, .12);
        border-bottom: 0;
        text-align: center;
        align-items: center;
    }

    .car-detail__price-tab:last-child {
        border-right: 0;
    }

    .car-detail__price-tab.is-active::after {
        display: none;
    }

    .car-detail__price-tab-title {
        font-size: 13px;
    }

    .car-detail__price-tab-description {
        display: none;
    }

    .car-detail__price-panel {
        min-height: 180px;
    }

    .car-detail__price-panel-value {
        justify-content: center;
        width: auto;
    }

    .car-detail__vehicle-image {
        aspect-ratio: 16 / 11;
    }

    .car-detail__thumb {
        flex-basis: clamp(108px, 31vw, 150px);
    }
}

@media (max-width: 520px) {
    .car-detail {
        padding-left: 16px;
        padding-right: 16px;
    }

    .car-detail__breadcrumbs::before {
        width: 28px;
    }

    .car-detail__spec {
        grid-template-columns: 32px minmax(0, 1fr);
        column-gap: 10px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .car-detail__spec-icon {
        width: 31px;
        height: 31px;
    }

    .car-detail__spec > span:not(.car-detail__spec-icon) {
        font-size: 12px;
    }

    .car-detail__spec strong {
        font-size: 15px;
    }

    .car-detail__price-tab {
        min-height: 68px;
        padding: 12px 8px;
    }

    .car-detail__price-tab-title {
        font-size: 12px;
    }

    .car-detail__price-panel {
        min-height: 164px;
        padding: 24px 18px;
    }

    .car-detail__price-panel-value strong {
        font-size: clamp(42px, 13vw, 56px);
    }

    .car-detail__vehicle-image > .car-detail__gallery-arrow {
        width: 38px;
        height: 38px;
    }

    .car-detail__gallery-arrow--previous {
        left: 10px;
    }

    .car-detail__gallery-arrow--next {
        right: 10px;
    }

    .car-detail__gallery-counter {
        left: 10px;
        bottom: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .car-detail-page *,
    .car-detail-page *::before,
    .car-detail-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =========================================================
   8. BOOKING CALENDAR PAGE
   ========================================================= */

.booking-calendar-page {
    background: var(--color-white);
    color: var(--color-text);
}

/* Hidden empty CMS wrappers */

.booking-calendar-hero {
    display: none;
}

/* Main spacing */

.booking-calendar-section {
    padding: 24px var(--section-x) 34px;
    background:
        radial-gradient(
            circle at 8% 0%,
            color-mix(in srgb, var(--color-red) 6%, transparent),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            var(--color-white) 0%,
            var(--color-light) 100%
        );
}

.booking-calendar-layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 30px);
    align-items: start;
}

/* Inro header */
.booking-calendar-section__intro {
    margin: 0 0 clamp(22px, 3vw, 34px);
}

.booking-calendar-section__kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 12px;

    color: var(--color-red);
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.booking-calendar-section__kicker::before {
    content: "";
    width: 42px;
    height: 3px;
    background: currentColor;
}

.booking-calendar-section__intro h1 {
    margin: 0;

    color: var(--color-text);
    font-family: 'Oswald', Arial, sans-serif;
    font-size: clamp(38px, 4.8vw, 68px);
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.booking-calendar-section__intro p {
    margin: 14px 0 0;

    color: var(--color-muted);
    font-size: 16px;
    line-height: 1.6;
}

/* HTML renders calendar first, sidebar second.
   CSS places sidebar visually on the left. */


/* Sidebar panel */

.booking-calendar-sidebar {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    min-width: 0;
    overflow: hidden;

    background:
        radial-gradient(
            circle at top right,
            color-mix(in srgb, var(--color-red-light) 28%, transparent),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            var(--color-black) 0%,
            var(--color-dark) 100%
        );

    color: var(--color-white);
    border: 1px solid color-mix(in srgb, var(--color-white) 8%, transparent);
    box-shadow: 0 18px 46px color-mix(in srgb, var(--color-black) 22%, transparent);
}

.booking-calendar-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            120deg,
            transparent 0 58%,
            color-mix(in srgb, var(--color-white) 4.5%, transparent) 58.2%,
            transparent 58.8%
        ),
        linear-gradient(
            120deg,
            transparent 0 82%,
            color-mix(in srgb, var(--color-white) 3.5%, transparent) 82.2%,
            transparent 82.7%
        );
}

.booking-calendar-sidebar__notice,
.booking-calendar-sidebar__form,
.booking-calendar-sidebar__contact {
    position: relative;
    z-index: 1;
}

/* Sidebar title */

.booking-calendar-sidebar__panel-title {
    position: relative;
    z-index: 1;

    padding: 15px 20px;

    background: linear-gradient(
        135deg,
        var(--color-red-light) 0%,
        var(--color-red-dark) 100%
    );

    color: var(--color-white);
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.booking-calendar-sidebar__kicker {
    display: block;
    margin-bottom: 9px;

    color: color-mix(in srgb, var(--color-white) 80%, transparent);
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Form wrapper */

.booking-calendar-sidebar__form {
    padding: 20px 20px 16px;
}


/* Notice */

.booking-calendar-sidebar__notice {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 11px;

    margin: 0 20px 14px;
    padding: 13px 14px;

    background: color-mix(in srgb, var(--color-white) 4.5%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-white) 7%, transparent);
    border-left: 2px solid var(--color-red);
}

.booking-calendar-sidebar__notice-icon {
    width: 24px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: color-mix(in srgb, var(--color-white) 72%, transparent);
}

.booking-calendar-sidebar__notice-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.booking-calendar-sidebar__notice strong {
    display: block;
    margin-bottom: 3px;

    color: color-mix(in srgb, var(--color-white) 88%, transparent);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
}

.booking-calendar-sidebar__notice span {
    display: block;

    color: color-mix(in srgb, var(--color-white) 62%, transparent);
    font-size: 12px;
    line-height: 1.35;
}


/* Contact block */

.booking-calendar-sidebar__contact {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    align-items: center;

    margin: 0 20px 20px;
    padding: 14px;

    background: linear-gradient(
        135deg,
        var(--color-dark-soft) 0%,
        var(--color-dark) 100%
    );
    border: 1px solid color-mix(in srgb, var(--color-white) 7%, transparent);
}

.booking-calendar-sidebar__contact-icon {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

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

.booking-calendar-sidebar__contact-icon svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.booking-calendar-sidebar__contact strong {
    display: block;
    margin-bottom: 3px;

    color: var(--color-white);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 900;
}

.booking-calendar-sidebar__contact a {
    color: var(--color-white);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 900;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.booking-calendar-sidebar__contact a:hover {
    color: color-mix(in srgb, var(--color-red-light) 18%, var(--color-white));
}

/* Booking order form */

.booking-order-form {
    width: 100%;
    margin: 0;
    padding: 0;
}


.booking-order-form__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.booking-order-form__group {
    margin: 0;
}

.booking-order-form__label {
    display: block;
    margin-bottom: 7px;

    color: color-mix(in srgb, var(--color-white) 84%, transparent);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.booking-order-form__required {
    color: var(--color-red-light);
}

.booking-order-form__field {
    position: relative;

    min-height: 46px;

    display: flex;
    align-items: center;

    background: linear-gradient(
        135deg,
        var(--color-dark-soft) 0%,
        var(--color-dark) 100%
    );
    border: 1px solid color-mix(in srgb, var(--color-white) 9%, transparent);

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}

.booking-order-form__field:focus-within {
    border-color: color-mix(in srgb, var(--color-red-light) 85%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-red-light) 18%, transparent);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-dark-soft) 90%, var(--color-white)) 0%,
        color-mix(in srgb, var(--color-dark) 94%, var(--color-white)) 100%
    );
}

.booking-order-form__input,
.booking-order-form input[type="text"],
.booking-order-form input[type="email"],
.booking-order-form input[type="tel"],
.booking-order-form textarea,
.booking-order-form select {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;

    border: 0;
    outline: 0;
    background: transparent;

    color: var(--color-white);
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 13px;
    line-height: 1.2;
}

.booking-order-form textarea {
    min-height: 100px;
    padding-top: 13px;
    padding-bottom: 13px;
    resize: vertical;
}

.booking-order-form select {
    appearance: none;
    cursor: pointer;
}

.booking-order-form__input::placeholder,
.booking-order-form input::placeholder,
.booking-order-form textarea::placeholder {
    color: color-mix(in srgb, var(--color-white) 38%, transparent);
}

.booking-order-form__select {
    width: 100%;
    height: 54px;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    appearance: none;
}

.booking-order-form__field--select {
    position: relative;
}

.booking-order-form__field--select::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

.booking-order-form__select option {
    color: #111;
    background: #fff;
}

.booking-order-form .datetimepicker {
    cursor: pointer;
}

/* Compact booking datetime picker */

#ui-datepicker-div.booking-datepicker {
    z-index: 3000 !important;

    width: 282px;
    padding: 0;

    background: var(--color-dark);
    color: var(--color-white);

    border: 1px solid color-mix(in srgb, var(--color-white) 9%, transparent);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--color-black) 34%, transparent);

    font-family: 'Montserrat', Arial, sans-serif;
    border-radius: 0;
}

#ui-datepicker-div.booking-datepicker,
#ui-datepicker-div.booking-datepicker * {
    box-sizing: border-box;
}

/* Header */

#ui-datepicker-div.booking-datepicker .ui-datepicker-header {
    position: relative;

    min-height: 42px;
    padding: 11px 42px;

    background: var(--color-red);
    border: 0;
    border-radius: 0;

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

#ui-datepicker-div.booking-datepicker .ui-datepicker-title {
    margin: 0;

    color: var(--color-white);
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

#ui-datepicker-div.booking-datepicker .ui-datepicker-prev,
#ui-datepicker-div.booking-datepicker .ui-datepicker-next {
    top: 5px;

    width: 32px;
    height: 32px;

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

    background: transparent !important;
    cursor: pointer;
}

#ui-datepicker-div.booking-datepicker .ui-datepicker-prev {
    left: 5px;
}

#ui-datepicker-div.booking-datepicker .ui-datepicker-next {
    right: 5px;
}

#ui-datepicker-div.booking-datepicker .ui-datepicker-prev:hover,
#ui-datepicker-div.booking-datepicker .ui-datepicker-next:hover {
    background: color-mix(in srgb, var(--color-white) 13%, transparent) !important;
}

#ui-datepicker-div.booking-datepicker .ui-icon {
    display: none !important;
}

#ui-datepicker-div.booking-datepicker .ui-datepicker-prev::before,
#ui-datepicker-div.booking-datepicker .ui-datepicker-next::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 8px;
    height: 8px;

    border-top: 2px solid var(--color-white);
    border-left: 2px solid var(--color-white);
}

#ui-datepicker-div.booking-datepicker .ui-datepicker-prev::before {
    transform: translate(-35%, -50%) rotate(-45deg);
}

#ui-datepicker-div.booking-datepicker .ui-datepicker-next::before {
    transform: translate(-65%, -50%) rotate(135deg);
}

/* Calendar */

#ui-datepicker-div.booking-datepicker table {
    width: 100%;
    margin: 0;
    padding: 9px;

    background: var(--color-dark);
    border-collapse: separate;
    border-spacing: 3px;
}

#ui-datepicker-div.booking-datepicker th {
    padding: 5px 0 6px;

    color: color-mix(in srgb, var(--color-white) 62%, transparent);
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
}

#ui-datepicker-div.booking-datepicker td {
    padding: 0;
    border: 0;
}

#ui-datepicker-div.booking-datepicker td span,
#ui-datepicker-div.booking-datepicker td a {
    min-height: 28px;
    padding: 7px 0;

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

    border: 1px solid color-mix(in srgb, var(--color-white) 6%, transparent) !important;
    border-radius: 0;

    background: color-mix(in srgb, var(--color-dark-soft) 82%, var(--color-dark)) !important;
    color: var(--color-white) !important;

    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    text-align: center;
}

#ui-datepicker-div.booking-datepicker td a:hover {
    border-color: var(--color-red-light) !important;
    background: color-mix(in srgb, var(--color-red) 30%, var(--color-dark-soft)) !important;
}

#ui-datepicker-div.booking-datepicker .ui-datepicker-today a {
    border-color: var(--color-red-light) !important;
}

#ui-datepicker-div.booking-datepicker .ui-datepicker-current-day a,
#ui-datepicker-div.booking-datepicker .ui-state-active {
    background: var(--color-red) !important;
    border-color: var(--color-red) !important;
    color: var(--color-white) !important;
}

/* Disabled / expired days */

#ui-datepicker-div.booking-datepicker .ui-datepicker-unselectable,
#ui-datepicker-div.booking-datepicker .ui-state-disabled {
    opacity: 1 !important;
}

#ui-datepicker-div.booking-datepicker .ui-datepicker-unselectable span,
#ui-datepicker-div.booking-datepicker .ui-state-disabled span {
    background: color-mix(in srgb, var(--color-dark) 88%, var(--color-white)) !important;
    border-color: color-mix(in srgb, var(--color-white) 5%, transparent) !important;
    color: color-mix(in srgb, var(--color-white) 38%, transparent) !important;
}

#ui-datepicker-div.booking-datepicker .ui-datepicker-other-month span,
#ui-datepicker-div.booking-datepicker .ui-datepicker-other-month a {
    background: color-mix(in srgb, var(--color-dark) 92%, var(--color-white)) !important;
    border-color: color-mix(in srgb, var(--color-white) 4%, transparent) !important;
    color: color-mix(in srgb, var(--color-white) 30%, transparent) !important;
}

/* Keep disabled today visible but not active-looking */

#ui-datepicker-div.booking-datepicker .ui-datepicker-today.ui-state-disabled span,
#ui-datepicker-div.booking-datepicker .ui-datepicker-today span {
    border-color: color-mix(in srgb, var(--color-red-light) 42%, transparent) !important;
    color: color-mix(in srgb, var(--color-white) 54%, transparent) !important;
}

/* Compact time section */

#ui-datepicker-div.booking-datepicker .ui-timepicker-div {
    padding: 9px 12px 10px;

    background: var(--color-dark);
    color: var(--color-white);

    border-top: 1px solid color-mix(in srgb, var(--color-white) 8%, transparent);
}

#ui-datepicker-div.booking-datepicker .ui-timepicker-div dl {
    margin: 0;
    display: flex;
    align-items: end;
    gap: 8px;
}

/* Hide large time preview and labels */

#ui-datepicker-div.booking-datepicker .ui_tpicker_time_label,
#ui-datepicker-div.booking-datepicker .ui_tpicker_time,
#ui-datepicker-div.booking-datepicker .ui_tpicker_hour_label,
#ui-datepicker-div.booking-datepicker .ui_tpicker_minute_label {
    display: none !important;
}

#ui-datepicker-div.booking-datepicker .ui-timepicker-div dd {
    margin: 0 !important;
    flex: 1 1 0;
}

/* Select controls instead of sliders */

#ui-datepicker-div.booking-datepicker .ui-timepicker-div select {
    width: 100%;
    height: 30px;
    padding: 0 8px;

    border: 1px solid color-mix(in srgb, var(--color-white) 10%, transparent);
    border-radius: 0;

    background: var(--color-dark-soft);
    color: var(--color-white);

    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;

    outline: 0;
}

#ui-datepicker-div.booking-datepicker .ui-timepicker-div select:focus {
    border-color: var(--color-red-light);
}

/* Fallback: if old addon still renders sliders */

#ui-datepicker-div.booking-datepicker .ui-slider {
    height: 4px;
    margin-top: 7px;

    background: color-mix(in srgb, var(--color-white) 12%, transparent);
    border: 0;
    border-radius: 0;
}

#ui-datepicker-div.booking-datepicker .ui-slider-handle {
    top: -6px;

    width: 16px;
    height: 16px;
    margin-left: -8px;

    background: var(--color-red-light) !important;
    border: 2px solid var(--color-white) !important;
    border-radius: 50%;
}

/* Buttons */

#ui-datepicker-div.booking-datepicker .ui-datepicker-buttonpane {
    margin: 0;
    padding: 9px 12px;

    display: flex;
    justify-content: flex-end;
    gap: 8px;

    background: var(--color-black);
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-white) 8%, transparent);
}

#ui-datepicker-div.booking-datepicker .ui-datepicker-buttonpane button {
    margin: 0;
    min-height: 30px;
    padding: 0 12px;

    border: 0;
    border-radius: 0;

    background: var(--color-dark-soft);
    color: var(--color-white);

    font-family: 'Oswald', Arial, sans-serif;
    font-size: 12px;
    line-height: 30px;
    font-weight: 900;
    text-transform: uppercase;

    cursor: pointer;
}

#ui-datepicker-div.booking-datepicker .ui-datepicker-buttonpane button:hover {
    background: var(--color-red);
}

#ui-datepicker-div.booking-datepicker .ui-datepicker-close {
    background: var(--color-red) !important;
}

#ui-datepicker-div.booking-datepicker .ui-datepicker-current {
    opacity: 1;
}

/* Field cursor */

form .datetimepicker {
    cursor: pointer;
}

form .datetimepicker:focus {
    cursor: text;
}

@media (max-width: 420px) {
    #ui-datepicker-div.booking-datepicker {
        width: min(282px, calc(100vw - 24px));
    }
}

/* Form errors */

.booking-order-form__errors {
    margin: 7px 0 0;
    padding: 0;

    list-style: none;

    color: color-mix(in srgb, var(--color-red-light) 58%, var(--color-white));
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
}

.booking-order-form__group.has-error .booking-order-form__field {
    border-color: color-mix(in srgb, var(--color-red-light) 75%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-red-light) 18%, transparent);
}

/* Submit */

.booking-order-form__submit-wrap {
    margin-top: 2px;
}

.booking-order-form__submit {
    width: 100%;
    min-height: 52px;
    padding: 0 20px;

    border: 0;
    border-radius: 0;

    background: linear-gradient(
        135deg,
        var(--color-red-light) 0%,
        var(--color-red) 100%
    );
    color: var(--color-white);

    font-family: 'Oswald', Arial, sans-serif;
    font-size: 15px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.055em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        filter var(--transition-fast),
        box-shadow var(--transition-fast);
}

.booking-order-form__submit:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 16px 30px color-mix(in srgb, var(--color-red) 32%, transparent);
}

.booking-order-form__submit:active {
    transform: translateY(0);
}

.booking-order-form__submit:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-red-light) 45%, transparent);
    outline-offset: 3px;
}

/* Honeypot */

.form-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Calendar card */

.booking-calendar-card {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    box-shadow: 0 16px 38px color-mix(in srgb, var(--color-black) 8%, transparent);
    overflow: hidden;
}

.booking-calendar-widget {
    width: 100%;
    min-width: 0;
    padding: 0;
}

/* FullCalendar v1.5.4 */

.booking-calendar-widget .fc {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 13px;
}

.booking-calendar-widget .fc-header {
    margin: 0;
    background: var(--color-text);
    color: var(--color-white);
}

.booking-calendar-widget .fc-header td {
    padding: 12px 14px;
    vertical-align: middle;
}

.booking-calendar-widget .fc-header-title h2 {
    margin: 0;

    color: var(--color-white);
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.01em;
    text-transform: none;
}

.booking-calendar-widget .fc-button {
    height: 32px;
    min-width: 38px;
    padding: 0 12px;

    border: 0;
    border-radius: 2px;
    box-shadow: none;

    background: var(--color-dark-soft);
    color: var(--color-white);

    font-family: 'Oswald', Arial, sans-serif;
    font-size: 13px;
    line-height: 32px;
    font-weight: 800;
    text-transform: lowercase;
}

/* Override jQuery UI theme gradients */

.booking-calendar-widget .fc-button,
.booking-calendar-widget .ui-state-default,
.booking-calendar-widget .ui-widget-content .ui-state-default,
.booking-calendar-widget .ui-widget-header .ui-state-default {
    background: var(--color-dark-soft) !important;
    background-image: none !important;
    border: 0 !important;
    color: var(--color-white) !important;
    box-shadow: none !important;
}

.booking-calendar-widget .fc-button.ui-state-hover,
.booking-calendar-widget .fc-button.ui-state-active,
.booking-calendar-widget .ui-state-hover,
.booking-calendar-widget .ui-state-active {
    background: var(--color-red) !important;
    color: var(--color-white) !important;
}

.booking-calendar-widget .fc-button.ui-state-disabled {
    opacity: 0.45;
}

/* Calendar table */

.booking-calendar-widget .fc-content,
.booking-calendar-widget .fc-view,
.booking-calendar-widget .fc-view table,
.booking-calendar-widget .fc-widget-content,
.booking-calendar-widget .ui-widget-content {
    background: var(--color-white) !important;
    color: var(--color-text);
}

.booking-calendar-widget .fc-widget-header,
.booking-calendar-widget .ui-widget-header {
    background: var(--color-light) !important;
    background-image: none !important;
    border-color: var(--color-line) !important;
    color: var(--color-text) !important;
}

.booking-calendar-widget .fc-widget-header {
    padding: 0;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.booking-calendar-widget .fc-widget-header th {
    height: 34px;
    vertical-align: middle;
}

.booking-calendar-widget .fc-widget-content,
.booking-calendar-widget .fc-widget-header,
.booking-calendar-widget .fc-agenda-slots td,
.booking-calendar-widget .fc-border-separate th,
.booking-calendar-widget .fc-border-separate td {
    border-color: var(--color-line) !important;
}

.booking-calendar-widget .fc-day {
    background: var(--color-white) !important;
}

.booking-calendar-widget .fc-other-month {
    background: var(--color-light) !important;
}

.booking-calendar-widget .fc-other-month .fc-day-number {
    color: var(--color-muted);
}

.booking-calendar-widget .fc-state-highlight,
.booking-calendar-widget .fc-today {
    background: color-mix(in srgb, var(--color-red) 8%, transparent) !important;
}

.booking-calendar-widget .fc-day-number {
    padding: 7px 9px;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 800;
}

.booking-calendar-widget .fc-day-content {
    min-height: 46px;
}

/* Events */

.booking-calendar-widget .fc-event {
    margin-inline: 2px;

    border: 0;
    border-radius: 0;

    background: var(--color-text);
    color: var(--color-white);

    font-size: 11px;
    line-height: 1.25;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;

    cursor: pointer;
}

.booking-calendar-widget .fc-event:hover {
    background: var(--color-red);
}

.booking-calendar-widget .fc-event-time,
.booking-calendar-widget .fc-event-title {
    color: var(--color-white);
}

/* Optional dynamic event classes from backend */

.booking-calendar-widget .fc-event.reserved,
.booking-calendar-widget .fc-event.is-reserved,
.booking-calendar-widget .fc-event.calendar-event--reserved {
    background: var(--color-text);
}

.booking-calendar-widget .fc-event.available,
.booking-calendar-widget .fc-event.is-available,
.booking-calendar-widget .fc-event.calendar-event--available {
    background: var(--color-red);
}

.booking-calendar-widget .fc-event.selected,
.booking-calendar-widget .fc-event.is-selected,
.booking-calendar-widget .fc-event.calendar-event--selected {
    background: var(--color-muted);
}

/* Agenda views, in case backend enables them later */

.booking-calendar-widget .fc-agenda-slots tr,
.booking-calendar-widget .fc-agenda-slots td,
.booking-calendar-widget .fc-agenda-days td {
    background: var(--color-white) !important;
    background-image: none !important;
}

.booking-calendar-widget .fc-agenda-slots tr:nth-child(even) td {
    background: color-mix(in srgb, var(--color-light) 55%, var(--color-white)) !important;
}

.booking-calendar-widget .fc-agenda-slots td {
    height: 36px;
}

.booking-calendar-widget .fc-agenda-axis {
    background: var(--color-light) !important;
    color: var(--color-muted) !important;
    font-size: 12px;
    font-weight: 800;
}

/* Date/time picker popup */

.ui-datepicker,
.ui-timepicker-div {
    z-index: 3000 !important;
}

/* Responsive */

@media (max-width: 1180px) {
    .booking-calendar-layout {
        grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
        gap: 18px;
    }

    .booking-calendar-section {
        padding-left: 18px;
        padding-right: 18px;
    }
    
    .booking-calendar-sidebar__notice,
    .booking-calendar-sidebar__form,
    .booking-calendar-sidebar__contact {
        margin-left: 18px;
        margin-right: 18px;
    }

    .booking-calendar-sidebar__form {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 980px) {
    .booking-calendar-layout {
        grid-template-columns: 1fr;
    }

    .booking-calendar-sidebar,
    .booking-calendar-card {
        grid-column: 1;
        grid-row: auto;
    }

    .booking-calendar-sidebar {
        max-width: none;
    }
}

@media (max-width: 760px) {
    .booking-calendar-section {
        padding: 14px 14px 24px;
    }

    .booking-calendar-card {
        width: 100%;
        overflow: visible;
    }

    .booking-calendar-widget {
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .booking-calendar-widget .fc {
        min-width: 680px;
    }

    .booking-calendar-sidebar__notice {
        margin-top: 18px;
    }

    .booking-calendar-sidebar__notice,
    .booking-calendar-sidebar__contact {
        margin-left: 18px;
        margin-right: 18px;
    }

    .booking-calendar-sidebar__form {
        margin-left: 18px;
        margin-right: 18px;
        padding: 18px 0;
    }

    .booking-order-form__body {
        gap: 13px;
    }

    .booking-order-form__field,
    .booking-order-form__input,
    .booking-order-form input[type="text"],
    .booking-order-form input[type="email"],
    .booking-order-form input[type="tel"],
    .booking-order-form textarea,
    .booking-order-form select {
        min-height: 46px;
    }

    .booking-order-form__submit {
        min-height: 52px;
        font-size: 14px;
    }
}

@media (max-width: 420px) {
    .booking-calendar-sidebar__notice,
    .booking-calendar-sidebar__contact {
        grid-template-columns: 1fr;
    }

    .booking-calendar-sidebar__notice-icon,
    .booking-calendar-sidebar__contact-icon {
        justify-content: flex-start;
    }

    .booking-calendar-widget .fc {
        min-width: 640px;
    }
}

.booking-result {
    min-height: calc(100vh - 96px);
    padding: clamp(70px, 8vw, 130px) clamp(18px, 5vw, 96px);
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 76% 38%, rgba(157, 0, 25, 0.28), transparent 34%),
        linear-gradient(135deg, #050505 0%, #111111 52%, #2a060b 100%);
    color: #ffffff;
    overflow: hidden;
}

.booking-result__inner {
    width: min(100%, 760px);
    padding: clamp(34px, 5vw, 64px);
    text-align: center;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 40%),
        #101010;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 54px),
        calc(100% - 54px) 100%,
        0 100%
    );
}

.booking-result__icon {
    width: 82px;
    height: 82px;
    margin: 0 auto 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: Arial, sans-serif;
    font-size: 44px;
    font-weight: 900;
    line-height: 1;
}

.booking-result--success .booking-result__icon {
    background: #ffffff;
    color: #0b8f3a;
}

.booking-result--failure .booking-result__icon {
    background: #ffffff;
    color: #b50024;
}

.booking-result h1 {
    margin: 0;
    color: #ffffff;
    font-family: 'Oswald', Arial, sans-serif;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.booking-result p {
    max-width: 600px;
    margin: 24px auto 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 18px;
    line-height: 1.65;
}

.booking-result__contact {
    margin-top: 26px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 18px;
}

.booking-result__contact a {
    color: #ffffff;
    font-weight: 900;
    text-decoration: none;
}

.booking-result__actions {
    margin-top: 38px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.booking-result__button {
    min-height: 52px;
    padding: 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #b50024;
    color: #ffffff;
    border: 2px solid #b50024;
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.booking-result__button:hover {
    transform: translateY(-2px);
    background: #d0002a;
    border-color: #d0002a;
    color: #ffffff;
}

.booking-result__button--secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.32);
}

.booking-result__button--secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

@media (max-width: 560px) {
    .booking-result {
        min-height: calc(100vh - 70px);
        padding: 46px 16px;
    }

    .booking-result__inner {
        padding: 34px 22px 42px;
        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 34px),
            calc(100% - 34px) 100%,
            0 100%
        );
    }

    .booking-result__actions {
        flex-direction: column;
    }

    .booking-result__button {
        width: 100%;
    }
}

/* =========================================================
   9. CONTACT PAGE
   ========================================================= */
   
/* Contact PAGE */

.contact-page {
    background: #ffffff;
    color: #111111;
    overflow: hidden;
}

.contact-main {
    min-height: calc(100vh - 218px);
    padding: 0 clamp(18px, 4vw, 64px);

    display: grid;
    grid-template-columns:
        minmax(300px, 0.72fr)
        minmax(520px, 1.22fr)
        minmax(320px, 0.82fr);

    align-items: stretch;
    gap: clamp(24px, 3vw, 44px);
}

/* Left info */

.contact-main__info {
    padding: clamp(58px, 7vw, 104px) 0 clamp(54px, 6vw, 90px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-main__info h1 {
    margin: 0;
    color: #050505;
    font-size: clamp(46px, 4.8vw, 72px);
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: -0.055em;
    text-transform: uppercase;
}

.contact-main__intro {
    max-width: 420px;
    margin: 22px 0 42px;
    color: #222222;
    font-size: 18px;
    line-height: 1.65;
}

.contact-info-list {
    display: grid;
    gap: 28px;
}

.contact-info-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.contact-info-item__icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-red);
    flex: 0 0 42px;
}

.contact-info-item__icon svg {
    width: 34px;
    height: 34px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-info-item__icon svg circle,
.contact-info-item__icon svg path {
    vector-effect: non-scaling-stroke;
}

.contact-info-item strong {
    display: block;
    margin-bottom: 4px;
    color: #080808;
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 25px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.contact-info-item span:not(.contact-info-item__icon) {
    display: block;
    color: #111111;
    font-size: 18px;
    line-height: 1.35;
}

/* Middle image */
.contact-main__visual {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    background: transparent;
}

/* Image layer */
.contact-main__image {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;

    clip-path: polygon(
        14% 0,
        93% 0,
        78% 100%,
        0 100%
    );
}

.contact-main__image img {
    position: absolute;
    inset: 0;

    width: 122%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    transform: translateX(-7%);
}

/* Stable red wedge, not skewed line */
.contact-main__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background: var(--color-red);

    clip-path: polygon(
        94% 0,
        97% 0,
        82% 100%,
        79% 100%
    );
}

/* Kill older broken line rules */
.contact-main__visual::before,
.contact-main__image::before,
.contact-main__image::after {
    display: none !important;
}
/* Map section - borderless */

.contact-main__map {
    padding: clamp(58px, 7vw, 104px) 0 clamp(54px, 6vw, 90px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-main__map h2 {
    margin: 0 0 18px;
    color: #090909;
    font-size: 25px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.025em;
    text-transform: uppercase;
}

.contact-map {
    width: 100%;
    min-height: 610px;
    overflow: hidden;
    background: #f3f3f3;
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 610px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Responsive */

@media (max-width: 1180px) {
    .contact-main {
        grid-template-columns: 1fr 1fr;
    }

    .contact-main__info {
        grid-column: 1;
    }

    .contact-main__image {
        grid-column: 2;
        min-height: 620px;
    }

    .contact-main__map {
        grid-column: 1 / -1;
        padding-top: 0;
    }

    .contact-map,
    .contact-map iframe {
        min-height: 420px;
        height: 420px;
    }
}

@media (max-width: 760px) {
    .contact-main {
        grid-template-columns: 1fr;
        padding: 0 16px;
    }

    .contact-main__info {
        padding: 42px 0 28px;
    }

    .contact-main__intro {
        margin-bottom: 32px;
    }

    .contact-main__visual {
        min-height: 420px;
    }

    .contact-main__image {
        position: absolute;
        inset: 0;
        clip-path: none;
    }

    .contact-main__image img {
        width: 100%;
        transform: none;
    }

    .contact-main__visual::after {
        display: none;
    }

    .contact-main__map {
        padding: 28px 0 42px;
    }

    .contact-map,
    .contact-map iframe {
        min-height: 360px;
        height: 360px;
    }
}