/* ==================================================================
   Global sections — project CSS
   ==================================================================
   Carola styles most of what the Page Composer needs, but not all of
   it. Everything below covers a gap in the theme, using only the
   theme's own colour tokens so it sits inside the design:

     .counter-*        Carola ships NO counter block at all — nothing
                       matching .funfact / .count exists in its CSS.
                       The count-up itself is still the theme's:
                       main.js binds .count-box and animates
                       .count-text[data-stop][data-speed].
     .about-*          the theme has .about-section and
                       .about-info-block but no image/content/text
                       children for them.
     .subscribe-btn-box  the theme's band held a form, not buttons.
     spacing utilities Carola defines pt_120/pb_90 etc. but not every
                       step the sections needed.
   ================================================================== */

/* ------------------------------------------------------------------
   Spacing utilities the theme does not define
------------------------------------------------------------------ */
.pt_80 { padding-top: 80px; }
.pb_80 { padding-bottom: 80px; }
.mt_20 { margin-top: 20px; }
.mt_30 { margin-top: 30px; }
.mb_40 { margin-bottom: 40px; }

/* ------------------------------------------------------------------
   Counters — style_1, cards
------------------------------------------------------------------ */
.counter-block {
    text-align: center;
    padding: 36px 24px;
    margin-bottom: 30px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    height: calc(100% - 30px);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.counter-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
}

.counter-icon {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 16px;
    color: var(--theme-color);
}

.counter-icon img { width: 40px; height: 40px; object-fit: contain; }

.counter-number {
    font-family: var(--primary-font);
    font-size: 46px;
    line-height: 1;
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.counter-postfix { color: var(--theme-color); }

.counter-label {
    margin: 10px 0 0;
    font-size: 16px;
    color: var(--body-color);
}

/* ------------------------------------------------------------------
   Counters — style_2, one dark inline band
------------------------------------------------------------------ */
.counter-section-2 {
    background: var(--primary-color);
}

.counter-section-2 .section-title .title,
.counter-section-2 .counter-number { color: #fff; }

.counter-section-2 .counter-label { color: rgba(255, 255, 255, 0.7); }

.counter-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 30px;
}

.counter-inline-item {
    flex: 1 1 180px;
    text-align: center;
    position: relative;
}

/* Hairline between figures, never before the first. */
.counter-inline-item + .counter-inline-item::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 56px;
    background: rgba(255, 255, 255, 0.18);
}

.counter-inline-item .counter-number i {
    font-size: 30px;
    color: var(--theme-color);
    margin-right: 8px;
}

@media (max-width: 767px) {
    .counter-inline-item { flex: 1 1 45%; }
    .counter-inline-item + .counter-inline-item::before { display: none; }
    .counter-number { font-size: 36px; }
}

/* ------------------------------------------------------------------
   Info Block — children the theme's .about-section does not define
------------------------------------------------------------------ */
.about-image {
    border-radius: 10px;
    overflow: hidden;
}

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

.about-content .about-text,
.about-text {
    color: var(--body-color);
}

.about-text :last-child { margin-bottom: 0; }

.about-info-content { min-width: 0; }

/* .about-info-icon itself is NOT restyled here — the theme already sets
   it (60px, font-size 25px, black on a 10% theme-colour circle). An
   earlier version of this file redeclared it at 58px in theme-red,
   silently overriding the theme for no reason. Only the parts Carola
   leaves undefined are below. */
.about-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.about-info-icon img { width: 28px; height: 28px; object-fit: contain; }

.about-info-title { margin: 0 0 4px; font-size: 18px; }

.about-info-text { margin: 0; font-size: 15px; color: var(--body-color); }

/* Tick list used by the Info Block highlights. */
.feature-list {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.feature-list.centred {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--body-color);
}

.feature-list li i { color: var(--theme-color); }

/* ------------------------------------------------------------------
   CTA — the theme's band carried a form, so it has no button row
------------------------------------------------------------------ */
.subscribe-btn-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.subscribe-section-2 .subscribe-btn-box { justify-content: center; }

/* ------------------------------------------------------------------
   Testimonials — the author photo in style_1
------------------------------------------------------------------ */
.testimonial-block-one .author-thumb {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    margin: 0 15px 0 0;
    border-radius: 50%;
    overflow: hidden;
}

.testimonial-block-one .author-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------------------------------------
   Contact — Page Composer section styles
   ------------------------------------------------------------------
   Carola styles .contact-info-item and .default-form, but has no
   two-column details/form layout and no plain form panel, which is
   what the composer's Contact section needs.
------------------------------------------------------------------ */
.contact-form-box {
    padding: 40px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
}

.contact-side-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-side-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.contact-side-list li:last-child { border-bottom: 0; }

.contact-side-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--theme-color);
    background: rgba(255, 44, 59, 0.1);
}

.contact-side-text { min-width: 0; }

.contact-side-text span {
    display: block;
    font-size: 14px;
    color: var(--body-color);
    margin-bottom: 2px;
}

.contact-side-text a,
.contact-side-text p {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--primary-color);
    word-break: break-word;
}

.contact-side-text a:hover { color: var(--theme-color); }

.mt_50 { margin-top: 50px; }

@media (max-width: 991px) {
    .contact-form-box { padding: 26px; }
    .contact-side-info { margin-bottom: 40px; }
}

/* ------------------------------------------------------------------
   Contact band above the footer
   ------------------------------------------------------------------
   Carola gives .subscribe-section.style-two `margin-bottom: -95px` so
   the red panel pulls up and overlaps the footer, and z-index: 99 so it
   sits over it. Kept, but far gentler: a generous gap above, and only a
   small tuck into the footer below.

   Same spacing on every page, since the band is sitewide.
------------------------------------------------------------------ */
.subscribe-section.style-two {
    margin-top: 100px;
    margin-bottom: -30px;
}

@media (max-width: 991px) {
    .subscribe-section.style-two {
        margin-top: 70px;
        margin-bottom: -22px;
    }
}

@media (max-width: 767px) {
    .subscribe-section.style-two {
        margin-top: 50px;
        margin-bottom: -16px;
    }

    /* The panel s 55px inset is a lot of the screen on a phone, and the
       heading and buttons need to stack rather than fight for one row. */
    .subscribe-section.style-two .subscribe-inner {
        padding: 34px 24px;
        flex-direction: column;
        text-align: center;
        gap: 22px;
    }
}

/* ------------------------------------------------------------------
   Brand logo strip (.brand-section-2)
   ------------------------------------------------------------------
   IMPORTANT, and the reason this block looks the way it does:

   THE THEME SHIPS NO BRAND ARTWORK. Every file in
   assets/front/images/brands/ — brand-1..6.png and all twelve marque
   names — is a grey PLACEHOLDER with its own pixel dimensions printed
   inside it ("147X31", "60X60"). Same for the older
   assets/front/images/brand/ set. Theme packs do this instead of
   shipping trademarked logos. So there is nothing to show, and no CSS
   can fix that.

   An earlier version of this block assumed those files were pale
   wordmarks and normalised them to 70px with
   `filter: brightness(0) invert(1)`. On a placeholder that resolves to
   a SOLID WHITE RECTANGLE, which is what the strip had been rendering.
   The filter is gone: it also wrecks the real logos the owner has
   uploaded (BMW, Ford, Toyota are full-colour badges — flattening and
   inverting a BMW roundel gives a white disc).

   So the strip now has two tile types, and only ever shows something
   real:

     .brand-image img        a logo that genuinely exists — an owner
                             upload. Normalised to one optical height,
                             unfiltered, real colours.
     .brand-wordmark         the manufacturer NAME set as type, used
                             when there is no logo file. Honest, and it
                             reads deliberately on the dark band.

   Sizing rules stay scoped to `.is-marques` (the dynamic Brands group)
   because uploads arrive at any ratio and need normalising; the static
   strip's tiles are all wordmarks and need no size correction.
------------------------------------------------------------------ */
.brand-section-2 .single-brand-item-2 .brand-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

.brand-section-2 .single-brand-item-2 .brand-image a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.brand-section-2.is-marques .single-brand-item-2 .brand-image {
    min-height: 78px;
}

.brand-section-2.is-marques .single-brand-item-2 .brand-image img {
    height: 70px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Name-as-type tile. Mirrors the theme's own 0.5 -> 1 opacity hover so
   a wordmark and a logo behave identically in the row. */
.brand-section-2 .brand-wordmark {
    display: inline-block;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    opacity: 0.5;
    transition: all 500ms ease 0s;
}

.brand-section-2 .brand-image:hover .brand-wordmark,
.brand-section-2 a:hover .brand-wordmark {
    opacity: 1;
}

/* The theme pads each cell 60px top and bottom, which is very tall for
   a strip of small badges. */
.brand-section-2 .single-brand-item-2 {
    padding: 40px 20px;
}

@media (max-width: 767px) {
    .brand-section-2 .single-brand-item-2 {
        padding: 26px 14px;
        flex: 0 0 50%;
    }

    .brand-section-2.is-marques .single-brand-item-2 .brand-image img {
        height: 52px;
    }

    .brand-section-2 .brand-wordmark {
        font-size: 16px;
        letter-spacing: 0.1em;
    }
}

/* ------------------------------------------------------------------
   Brand grid (.brand-section, MakeGroup style_2)
   ------------------------------------------------------------------
   The theme reserves a fixed 60px image box per tile and expects every
   tile to fill it. Manufacturer logos vary from 60x60 squares to 80x44
   rectangles, and some makes have no artwork at all, so without these
   rules the row renders at mismatched sizes and ragged heights.
------------------------------------------------------------------ */
.single-brand-item .brand-image a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.single-brand-item .brand-image img {
    max-height: 96px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* Stand-in for a make with no uploaded logo: its own initials, so the
   tile keeps the theme's height and reads as deliberate rather than
   broken. Not a substitute logo — no other brand's mark is ever used. */
.single-brand-item .brand-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--grey-bg);
    color: var(--primary-color);
    font-family: var(--primary-font);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1;
    transition: all 500ms ease 0s;
}

.single-brand-item:hover .brand-monogram {
    background: var(--theme-color);
    color: #fff;
}

/* The theme fixes .brand-image at 60px tall. The logos above are larger
   than that now, so the box has to grow with them or they overflow the
   tile. Padding is trimmed to keep the tile from getting much taller. */
.single-brand-item .brand-image {
    height: 104px;
    line-height: 104px;
    margin-bottom: 14px;
}

.single-brand-item {
    padding: 30px 12px;
}

.single-brand-item .brand-monogram {
    font-size: 32px;
}

@media (max-width: 767px) {
    .single-brand-item .brand-image {
        height: 84px;
        line-height: 84px;
    }

    .single-brand-item .brand-image img {
        max-height: 76px;
    }

    .single-brand-item .brand-monogram {
        width: 76px;
        height: 76px;
        font-size: 26px;
    }
}

/* ------------------------------------------------------------------
   Car type tiles (.car-type-item, BodyTypeGroup style_1)
   ------------------------------------------------------------------
   The home-three variant gives .car-image a 100px box, and Carola's
   artwork for it (car-1..6.png) is ~160x85 to fill that.

   The tiles here are matched to the real body type by slug instead —
   an SUV gets the SUV cut-out rather than an arbitrary car — but those
   named files (hatchback/sedan/suv/sports-car/truck.png) are ~140x50,
   drawn for the DEFAULT 60px box. Dropped into the 100px box they
   render small and at mixed sizes down the row.

   So: one optical height for every tile, whichever file it came from.
   The theme's own shape animation is untouched — it is absolutely
   positioned, so centring the image does not affect it.
------------------------------------------------------------------ */
.car-type-item .car-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.car-type-item .car-image img {
    max-height: 62px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.home-three .car-type-item .car-image img {
    max-height: 88px;
}

@media (max-width: 767px) {
    .home-three .car-type-item .car-image {
        height: 84px;
    }

    .home-three .car-type-item .car-image img {
        max-height: 72px;
    }
}

/* An unfilled rating star. iconfont ships no outline variant of icon-21,
   so the same glyph is dimmed rather than swapped for a different mark. */
.author-rating li.is-empty {
    opacity: 0.3;
}

/* ------------------------------------------------------------------
   Info Block image (.about-left-image, InfoBlock style_1)
   ------------------------------------------------------------------
   Carola defines no rules for .about-left-image at all, so the image
   sat top-left in its column while the copy opposite was pushed down
   by the theme's pt_50 — the two columns read as misaligned.

   Centre it both ways: the row aligns the columns to each other, and
   the wrapper centres the image inside its own column whatever its
   aspect ratio.
------------------------------------------------------------------ */
.about-section .row {
    align-items: center;
}

.about-left-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.about-left-image img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    /* Stacked at this width, so it needs breathing room under it and the
       copy no longer needs the theme's top offset. */
    .about-left-image {
        margin-bottom: 40px;
    }

    .about-section .section-title.pt_50 {
        padding-top: 0;
    }
}

/* ------------------------------------------------------------------
   Vehicle cards (VehicleGroup style_1 / style_2)
   ------------------------------------------------------------------
   Carola sets `width: 100%` on the card photograph with no height rule.
   Its own artwork is all 390x250, so the demo looks even — but a real
   dealer upload in portrait would make one card far taller than its
   neighbours and leave the row ragged. Pin the window to the theme's
   own ratio and crop to fill.

   Cards are also made equal height, so a car with fewer recorded specs
   does not leave a short card next to a tall one.
------------------------------------------------------------------ */
.single-featured-car-image,
.single-popular-car-image {
    aspect-ratio: 390 / 250;
    overflow: hidden;
}

.single-featured-car-image img,
.single-popular-car-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-featured-car-block,
.single-popular-car-block {
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
}

.single-featured-car-content,
.single-popular-car-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Buttons line up across the row whatever the spec count above them. */
.single-featured-car-book-btn,
.single-popular-car-book-btn {
    margin-top: auto;
}

/* ------------------------------------------------------------------
   Review card (TestimonialSection style_2)
   ------------------------------------------------------------------
   Carola's own quote-led testimonial block is very plain — a paragraph
   and a name — so this is a proper card built from the theme's tokens:
   a serif quote mark, the review at a readable size, a hairline
   divider, then the author footer.
------------------------------------------------------------------ */
.review-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 38px 34px 32px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 60px rgba(17, 17, 17, 0.09);
}

/* Oversized quote glyph, sitting behind the text as a watermark. */
.review-card__mark {
    position: absolute;
    top: 10px;
    right: 26px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 110px;
    line-height: 1;
    color: var(--theme-color);
    opacity: 0.12;
    pointer-events: none;
    user-select: none;
}

.review-card__rating {
    list-style: none;
    display: flex;
    gap: 5px;
    margin: 0 0 18px;
    padding: 0;
    color: var(--rating-color);
    font-size: 15px;
    position: relative;
}

.review-card__rating li.is-empty {
    opacity: 0.28;
}

.review-card__quote {
    position: relative;
    margin: 0 0 26px;
    padding: 0;
    border: 0;
    font-family: var(--primary-font);
    font-size: 17px;
    line-height: 30px;
    color: var(--primary-color);
    /* Pushes the author footer to the bottom so footers line up across
       the row however long the quotes are. */
    flex: 1 1 auto;
}

.review-card__author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 22px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.review-card__avatar {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--grey-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Initials, for a record with no portrait. Never a stock face. */
.review-card__avatar span {
    font-family: var(--primary-font);
    font-size: 19px;
    font-weight: 600;
    color: var(--theme-color);
}

.review-card__meta {
    min-width: 0;
}

.review-card__meta h5 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 24px;
    color: var(--primary-color);
}

.review-card__meta span {
    display: block;
    font-size: 14px;
    color: var(--body-color);
}

@media (max-width: 767px) {
    .review-card {
        padding: 30px 24px 26px;
    }

    .review-card__quote {
        font-size: 16px;
        line-height: 28px;
    }

    .review-card__mark {
        font-size: 84px;
    }
}

/* ------------------------------------------------------------------
   Condition badge on the vehicle cards
   ------------------------------------------------------------------
   The theme pins .single-popular-car-rating / -featured-car-rating with
   `position: absolute; right: 20px; top: 28px` because in a rental
   template it holds a tiny star rating — "★ 4.8", four characters.

   Here it carries a WORD: New, Used, Approved Used, Reserved, Now Sold.
   Absolutely positioned over the same line as the car title, a long one
   sits straight on top of the title text.

   So take it out of absolute flow and let it sit above the title as a
   pill. The theme's own border, radius, padding and type are untouched —
   only its positioning changes.
------------------------------------------------------------------ */
.single-popular-car-rating,
.single-featured-car-rating {
    position: static;
    display: inline-flex;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 12px;
    white-space: nowrap;
}

/* Sold and reserved need to read as states, not as a neutral tag. */
.single-popular-car-rating.is-sold,
.single-featured-car-rating.is-sold {
    background: #b42318;
    border-color: #b42318;
    color: #fff;
}

.single-popular-car-rating.is-reserved,
.single-featured-car-rating.is-reserved {
    background: #b54708;
    border-color: #b54708;
    color: #fff;
}

/* The title no longer has to dodge an absolute badge. */
.single-popular-car-title,
.single-featured-car-title {
    padding-right: 0;
}

/* ------------------------------------------------------------------
   Call to action — three designs
   ------------------------------------------------------------------
   Carola has no CTA section of its own; its `subscribe-section` is a
   newsletter band, and this application has no subscriber table, screen
   or route. So these are built from the theme's tokens (--theme-color,
   --primary-color, --primary-font) and its real buttons.

   Rewritten after looking at the rendered result in a browser rather
   than trusting the markup. Three faults were visible and all three are
   addressed below:

     1. DEAD SPACE. Every panel was padded for far more copy than a CTA
        carries — a headline, one line of support, two buttons. Rendered,
        they were mostly empty dark rectangle. Padding is down and the
        type scale is up, so the panel is filled by its content.

     2. UNREADABLE SUPPORTING TEXT. The lead was white at 70% and the
        fine print at 45%. On the red band the lead effectively
        disappeared, and the fine print was invisible on every one. Both
        are raised, and the values on red are set separately because red
        is a much lighter ground than near-black.

     3. HEADLINES BREAKING BADLY. Long words wrapped mid-phrase in narrow
        centred columns. The columns are wider, the headings balance
        their line breaks, and hyphenated words are kept whole.

     .cta-split      boxed panel, headline left / actions right
     .cta-band       full-bleed, centred, red gradient
     .cta-spotlight  full-bleed photographic background

   All decoration is CSS. No theme raster art is referenced: the Carola
   image library is grey placeholders with their pixel size printed
   inside them.
------------------------------------------------------------------ */

/* Shared: stop headings splitting into a ragged stack. `balance` evens
   the lines out where supported, and long hyphenated words such as
   "part-exchanging" are not broken further. */
.cta-split__title,
.cta-band__title,
.cta-spotlight__title {
    text-wrap: balance;
    overflow-wrap: normal;
}

/* --- style_1: boxed panel, headline left, actions right ---------- */
.cta-split-section {
    padding: 60px 0;
}

.cta-split {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 48px;
    padding: 52px 56px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #17171c 0%, #111 55%, #1d1417 100%);
}

/* Red wedge on the trailing edge, so the panel has a direction and the
   actions sit on something rather than floating in black. */
.cta-split::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 42%;
    z-index: 0;
    background: linear-gradient(105deg, rgb(255 44 59 / 0) 0%, rgb(255 44 59 / 13%) 55%, rgb(255 44 59 / 30%) 100%);
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}

.cta-split__body,
.cta-split__media,
.cta-split__actions {
    position: relative;
    z-index: 1;
}

.cta-split__title {
    font-family: var(--primary-font);
    font-size: 40px;
    line-height: 48px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
}

.cta-split__title span {
    color: var(--theme-color);
}

.cta-split__lead {
    font-size: 18px;
    line-height: 28px;
    color: rgb(255 255 255 / 82%);
    margin-bottom: 0;
    max-width: 52ch;
}

.cta-split__note {
    margin-top: 14px;
    font-size: 15px;
    line-height: 23px;
    color: rgb(255 255 255 / 74%);
}

.cta-split__note p:last-child {
    margin-bottom: 0;
}

/* Stacked in the right-hand column: two buttons side by side there would
   force the headline into a narrow ragged column. */
.cta-split__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    min-width: 210px;
}

.cta-split__actions .btn-style-four,
.cta-split__actions .btn-style-six {
    width: 100%;
    text-align: center;
    justify-content: center;
}

/* With a photograph the panel becomes three parts: copy, picture,
   actions — so the picture takes the middle and the copy narrows. */
.cta-split--media {
    grid-template-columns: minmax(0, 1fr) 260px auto;
}

.cta-split__media {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: 0 24px 50px rgb(0 0 0 / 45%);
}

.cta-split__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms ease;
}

.cta-split:hover .cta-split__media img {
    transform: scale(1.05);
}

/* --- style_2: full-bleed, centred, red ---------------------------- */
/* The only style that changes the page's COLOUR rather than its shape,
   and the only centred one. */
.cta-band-section {
    position: relative;
    padding: 84px 0;
    overflow: hidden;
    background: linear-gradient(115deg, #ff3341 0%, var(--theme-color) 40%, #bf1320 100%);
}

/* Light source top-right, so the gradient is not flat. */
.cta-band-section::before {
    content: "";
    position: absolute;
    right: -6%;
    top: -70%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 255 255 / 22%) 0%, rgb(255 255 255 / 0) 70%);
}

/* The light sweep — the one thing in these three styles that moves
   without being scrolled to, which is the point of this style. */
.cta-band-section::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 22%;
    pointer-events: none;
    background: linear-gradient(100deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 20%) 50%, rgb(255 255 255 / 0) 100%);
    transform: translateX(-170%) skewX(-18deg);
    animation: ctaSheen 7s ease-in-out infinite;
}

@keyframes ctaSheen {

    0%,
    10% {
        transform: translateX(-170%) skewX(-18deg);
    }

    60%,
    100% {
        transform: translateX(540%) skewX(-18deg);
    }
}

.cta-band {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.cta-band__title {
    font-family: var(--primary-font);
    font-size: 46px;
    line-height: 56px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 14px;
}

/* On red, a white "span" highlight is the only one that reads — the
   theme colour would vanish into the background. */
.cta-band__title span {
    color: #111;
}

/* 92% white, not 65%: on red the earlier value was barely legible. */
.cta-band__lead {
    margin: 0 auto 32px;
    max-width: 60ch;
    font-size: 19px;
    line-height: 30px;
    color: rgb(255 255 255 / 92%);
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.cta-band__note {
    margin-top: 20px;
    font-size: 15px;
    line-height: 23px;
    color: rgb(255 255 255 / 90%);
}

.cta-band__note p:last-child {
    margin-bottom: 0;
}

/* --- style_3: photographic background ---------------------------- */
/* Shorter than it was, and the overlay is heavier. The picture is
   atmosphere behind branded darkness, not the subject — which is also
   what lets any uploaded photograph work here without breaking the
   contrast the copy and buttons need. */
.cta-spotlight-section {
    position: relative;
    padding: 96px 0;
    overflow: hidden;
    isolation: isolate;
    background: #0b0b0d;
}

/* Its own layer, so the slow push does not drag the overlay or type. */
.cta-spotlight__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    animation: ctaKenBurns 24s ease-in-out infinite alternate;
}

@keyframes ctaKenBurns {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

/* Two layers: a near-solid side-weighted wash for legibility, and a red
   tint over it so the section reads as this dealership's rather than as
   a stock photograph with text on it. */
.cta-spotlight-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(102deg, rgb(255 44 59 / 26%) 0%, rgb(255 44 59 / 0) 62%),
        linear-gradient(90deg, rgb(8 8 10 / 96%) 0%, rgb(8 8 10 / 90%) 38%, rgb(8 8 10 / 74%) 74%, rgb(8 8 10 / 58%) 100%);
}

.cta-spotlight {
    position: relative;
    max-width: 700px;
}

/* Short red bar above the heading — the section's only ornament, and the
   thing that ties a photographic background back to the brand. */
.cta-spotlight__rule {
    display: block;
    width: 64px;
    height: 4px;
    margin-bottom: 24px;
    border-radius: 2px;
    background: var(--theme-color);
}

.cta-spotlight__title {
    font-family: var(--primary-font);
    font-size: 44px;
    line-height: 54px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 14px;
}

.cta-spotlight__title span {
    color: var(--theme-color);
}

.cta-spotlight__lead {
    font-size: 19px;
    line-height: 30px;
    color: rgb(255 255 255 / 84%);
    margin-bottom: 30px;
    max-width: 56ch;
}

.cta-spotlight__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

/* 66%, not 48%: at the old value this line was invisible against the
   lighter right-hand side of the wash. */
.cta-spotlight__note {
    margin-top: 20px;
    font-size: 15px;
    line-height: 23px;
    color: rgb(255 255 255 / 76%);
}

.cta-spotlight__note p:last-child {
    margin-bottom: 0;
}

/* The fine print comes out of the admin as rich text, so it arrives
   wrapped in <p>. Carola sets `p { color: var(--primary-color) }` — a
   DIRECT rule, and a direct rule beats an inherited colour however
   specific the parent is. So the note inherited nothing and rendered
   near-black: invisible on both dark styles and unreadable on the red
   band. It also picked up the theme's 16px secondary font, flattening
   the size step between the lead and the fine print. Forced back to
   inherit from the note itself. */
.cta-split__note p,
.cta-band__note p,
.cta-spotlight__note p {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
}

/* --- responsive -------------------------------------------------- */
@media (max-width: 1199px) {
    .cta-split {
        padding: 44px 40px;
        gap: 34px;
    }

    .cta-split__title {
        font-size: 34px;
        line-height: 42px;
    }

    .cta-split--media {
        grid-template-columns: minmax(0, 1fr) 210px auto;
    }

    .cta-band-section {
        padding: 70px 0;
    }

    .cta-band__title {
        font-size: 38px;
        line-height: 48px;
    }

    .cta-spotlight__title {
        font-size: 38px;
        line-height: 48px;
    }
}

@media (max-width: 991px) {

    /* The right-hand action column has nowhere to go, so the panel
       becomes a single column and the buttons return to a row. */
    .cta-split,
    .cta-split--media {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .cta-split::before {
        width: 100%;
        height: 46%;
        top: auto;
        clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 100%);
    }

    .cta-split__actions {
        flex-direction: row;
        flex-wrap: wrap;
        min-width: 0;
    }

    .cta-split__actions .btn-style-four,
    .cta-split__actions .btn-style-six {
        width: auto;
    }

    .cta-split__media {
        order: -1;
        aspect-ratio: 16 / 9;
    }

    .cta-spotlight-section {
        padding: 76px 0;
    }

    /* Too narrow for a side-weighted wash to leave anywhere readable. */
    .cta-spotlight-section::before {
        background:
            linear-gradient(102deg, rgb(255 44 59 / 22%) 0%, rgb(255 44 59 / 0) 70%),
            linear-gradient(180deg, rgb(8 8 10 / 88%) 0%, rgb(8 8 10 / 94%) 100%);
    }

    .cta-spotlight {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .cta-split-section {
        padding: 40px 0;
    }

    .cta-split {
        padding: 30px 24px;
        border-radius: 12px;
    }

    .cta-split__title {
        font-size: 27px;
        line-height: 35px;
    }

    .cta-split__lead,
    .cta-spotlight__lead {
        font-size: 17px;
        line-height: 27px;
    }

    .cta-band-section {
        padding: 52px 0;
    }

    .cta-band__title {
        font-size: 28px;
        line-height: 37px;
    }

    .cta-band__lead {
        font-size: 17px;
        line-height: 27px;
        margin-bottom: 26px;
    }

    .cta-spotlight-section {
        padding: 56px 0;
    }

    .cta-spotlight__title {
        font-size: 27px;
        line-height: 36px;
    }

    /* Full-width buttons read better than two half-width pills. */
    .cta-split__actions .btn-style-four,
    .cta-split__actions .btn-style-six,
    .cta-band__actions .btn-style-seven,
    .cta-band__actions .btn-style-six,
    .cta-spotlight__actions .btn-style-four,
    .cta-spotlight__actions .btn-style-six {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* Two of these styles loop an animation nobody asked to start — the
   sheen on the band and the slow push behind the spotlight. Both stop
   for anyone who has asked the OS for less motion. The scroll-in
   reveals are left alone; WOW.js runs those once and they end. */
@media (prefers-reduced-motion: reduce) {

    .cta-band-section::after,
    .cta-spotlight__bg {
        animation: none;
    }
}

/* ------------------------------------------------------------------
   Gallery Album — sizing the theme leaves open
   ------------------------------------------------------------------
   Carola styles .gallery-image-block (hover zoom, and the red overlay
   that carries the expand button) but says nothing about the <figure>
   inside it, because its demo feeds the strip one fixed set of
   identically-cropped pictures.

   Real uploads are not identical. This gallery's own images run from
   390x250 landscape to 400x500 portrait, and in a five-across strip with
   margin:0 that renders as a ragged row of different heights — owl's
   autoheight sizes the CAROUSEL, not the items inside it.

   So the figure is the sizing box: one portrait ratio for every tile,
   the photograph cropped to fill it. 4:5 is the ratio the theme's own
   artwork is drawn at, so this matches the design rather than imposing
   a new one.
------------------------------------------------------------------ */
.gallery-section .gallery-image {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.gallery-section .gallery-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The theme animates the photograph over 500ms but gives the overlay no
   transition at all, so the button snapped in while the zoom eased. */
.gallery-image-block .lightbox-image {
    transition: all 500ms ease;
}

/* Wider tiles at tablet width, where three across would otherwise be
   very tall columns. */
@media (max-width: 999px) {
    .gallery-section .gallery-image {
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 767px) {
    .gallery-section .gallery-image {
        aspect-ratio: 4 / 3;
    }
}

/* ------------------------------------------------------------------
   Why Choose Us — two designs
   ------------------------------------------------------------------
   Carola ships .why-chooseus-block (a white card with a 90px square
   icon tile). Both of the previous styles used it, so they came out as
   the same white cards on white — the second one only moved the heading
   into the grid and turned the tiles red. These two differ in ground,
   alignment, item shape and reveal, so choosing between them is a real
   choice.

     .wcu-cards   grey ground, centred heading, round-badge cards
     .wcu-split   white ground, heading in a left column, numbered rows

   The theme's own block is untouched and still available to any other
   section that wants it.

   Both share the heading type (.wcu-eyebrow / .wcu-title / .wcu-intro)
   so the two styles remain the same voice.
------------------------------------------------------------------ */

/* --- shared heading type ----------------------------------------- */
/* Carola's .sub-title renders as a small pink pill. Fine over a
   photograph; over a quiet grey block it is the loudest thing on screen
   and pulls rank on the heading. This is the same information set as
   plain letter-spaced type. */
.wcu-eyebrow {
    display: block;
    margin-bottom: 12px;
    font-family: var(--primary-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: #8b8b8b;
}

.wcu-title {
    font-family: var(--primary-font);
    font-size: 42px;
    line-height: 52px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
    text-wrap: balance;
}

.wcu-title span {
    color: var(--theme-color);
}

.wcu-intro {
    margin-top: 16px;
    color: var(--body-color);
}

/* The admin stores this as rich text, so it arrives wrapped in <p>, and
   Carola's `p { color: var(--primary-color) }` is a DIRECT rule — it
   beats the inherited colour however specific the parent is. */
.wcu-intro p {
    color: var(--body-color);
    font-size: 17px;
    line-height: 28px;
    margin-bottom: 0;
}

/* --- style_1: centred cards on grey ------------------------------ */
.why-chooseus-section.wcu-cards {
    padding: 110px 0;
    background: var(--grey-bg);
}

.wcu-cards .wcu-head {
    max-width: 700px;
    margin: 0 auto 56px;
    text-align: center;
}

.wcu-cards .wcu-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.wcu-card {
    padding: 44px 34px 40px;
    text-align: center;
    background: #fff;
    border: 1px solid rgb(17 17 17 / 6%);
    border-radius: 14px;
    transition: transform 400ms ease, box-shadow 400ms ease, border-color 400ms ease;
}

.wcu-card:hover {
    transform: translateY(-6px);
    border-color: rgb(255 44 59 / 25%);
    box-shadow: 0 22px 50px rgb(17 17 17 / 9%);
}

/* Round, not the theme's square tile — the one shape cue that separates
   this style from every other block on the page. */
.wcu-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: 26px;
    border-radius: 50%;
    background: var(--grey-bg);
    color: var(--theme-color);
    font-size: 32px;
    line-height: 1;
    transition: all 400ms ease;
}

.wcu-card__badge img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.wcu-card:hover .wcu-card__badge {
    background: var(--theme-color);
    color: #fff;
    transform: scale(1.06);
}

.wcu-card__title {
    font-family: var(--primary-font);
    font-size: 21px;
    line-height: 29px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.wcu-card__text {
    font-size: 16px;
    line-height: 26px;
    color: var(--body-color);
    font-family: var(--secondary-font);
    margin-bottom: 0;
}

/* --- style_2: split, numbered rows on white --------------------- */
.why-chooseus-section.wcu-split {
    padding: 110px 0;
    background: #fff;
}

.wcu-split__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 60px;
    align-items: start;
}

.wcu-split__aside {
    position: relative;
}

/* A rule under the heading rather than a card around it: this column is
   the anchor, and boxing it would make it compete with the rows. */
.wcu-split__aside::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin-top: 26px;
    border-radius: 2px;
    background: var(--theme-color);
}

.wcu-split__media {
    margin: 32px 0 0;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

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

.wcu-split__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 40px;
}

.wcu-row {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding-top: 24px;
    border-top: 1px solid rgb(17 17 17 / 9%);
}

/* Outlined numeral, filling on hover. Generated from the item order, so
   reordering in the admin renumbers the list. */
.wcu-row__num {
    flex: 0 0 auto;
    font-family: var(--primary-font);
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1px rgb(17 17 17 / 32%);
    transition: all 400ms ease;
}

.wcu-row:hover .wcu-row__num {
    color: var(--theme-color);
    -webkit-text-stroke: 1px var(--theme-color);
}

.wcu-row__body {
    min-width: 0;
}

.wcu-row__title {
    font-family: var(--primary-font);
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.wcu-row__text {
    font-size: 16px;
    line-height: 26px;
    color: var(--body-color);
    font-family: var(--secondary-font);
    margin-bottom: 0;
}

/* --- responsive ------------------------------------------------- */
@media (max-width: 1199px) {

    .wcu-title {
        font-size: 34px;
        line-height: 44px;
    }

    .why-chooseus-section.wcu-cards,
    .why-chooseus-section.wcu-split {
        padding: 90px 0;
    }

    .wcu-split__inner {
        gap: 44px;
    }

    .wcu-split__list {
        gap: 28px 30px;
    }
}

@media (max-width: 991px) {

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

    /* The left column stops being a column, so the heading goes back on
       top and the rows take the full width. */
    .wcu-split__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .wcu-split__media {
        max-width: 460px;
    }
}

@media (max-width: 767px) {

    .why-chooseus-section.wcu-cards,
    .why-chooseus-section.wcu-split {
        padding: 60px 0;
    }

    .wcu-title {
        font-size: 27px;
        line-height: 36px;
    }

    .wcu-cards .wcu-head {
        margin-bottom: 36px;
    }

    .wcu-cards .wcu-grid,
    .wcu-split__list {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .wcu-card {
        padding: 32px 24px 30px;
    }

    .wcu-card__badge {
        width: 70px;
        height: 70px;
        font-size: 27px;
        margin-bottom: 20px;
    }
}

/* ------------------------------------------------------------------
   Contact section — two designs
   ------------------------------------------------------------------
   Carola's own .contact-info-item hangs a 100px red tile above the card
   (translateY(-50px)) and compensates with margin-top:50px. That is the
   theme's intent, but with one line of text per card it left the tile
   floating over a shallow box, and because the cards were Bootstrap
   columns the phone card grew taller whenever a second number was set —
   so the row sat on three different baselines. Both styles below use a
   grid instead, so every card shares one height whatever it holds.

     .contact-cards   centred heading, cards in a row, form beneath
     .contact-split   one panel: dark details beside a white form

   The theme's .contact-info-item is left untouched for the contact PAGE,
   which still uses it.
------------------------------------------------------------------ */

/* --- shared heading type ----------------------------------------- */
.contact-cards__eyebrow,
.contact-split__eyebrow {
    display: block;
    margin-bottom: 12px;
    font-family: var(--primary-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: #8b8b8b;
}

.contact-cards__title,
.contact-split__title {
    font-family: var(--primary-font);
    font-size: 40px;
    line-height: 50px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
    text-wrap: balance;
}

/* --- style_1: cards above the form ------------------------------- */
.contact-cards-section {
    padding: 110px 0;
    background: var(--grey-bg);
}

.contact-cards__head {
    max-width: 640px;
    margin: 0 auto 52px;
    text-align: center;
}

.contact-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-bottom: 44px;
}

.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 30px 36px;
    background: #fff;
    border: 1px solid rgb(17 17 17 / 6%);
    border-radius: 14px;
    transition: transform 400ms ease, box-shadow 400ms ease, border-color 400ms ease;
}

.contact-card:hover {
    transform: translateY(-6px);
    border-color: rgb(255 44 59 / 25%);
    box-shadow: 0 22px 50px rgb(17 17 17 / 9%);
}

/* Inside the card, not hanging over its top edge: with a single line of
   detail underneath, the theme's overhanging tile had nothing to anchor
   it and read as a misplaced block. */
.contact-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--grey-bg);
    color: var(--theme-color);
    font-size: 29px;
    line-height: 1;
    transition: all 400ms ease;
}

.contact-card:hover .contact-card__icon {
    background: var(--theme-color);
    color: #fff;
    transform: scale(1.06);
}

.contact-card__title {
    font-family: var(--primary-font);
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.contact-card__lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-card__lines p,
.contact-card__lines a {
    font-family: var(--secondary-font);
    font-size: 16px;
    line-height: 26px;
    color: var(--body-color);
    margin: 0;
    transition: color 300ms ease;
}

.contact-card__lines a:hover {
    color: var(--theme-color);
}

.contact-cards__form {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px;
    background: #fff;
    border: 1px solid rgb(17 17 17 / 6%);
    border-radius: 14px;
}

/* --- style_2: split panel ---------------------------------------- */
.contact-split-section {
    padding: 110px 0;
    background: #fff;
}

.contact-split {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 26px 70px rgb(17 17 17 / 10%);
}

.contact-split__aside {
    position: relative;
    padding: 52px 44px;
    overflow: hidden;
    background: linear-gradient(150deg, #17171c 0%, #111 58%, #1d1417 100%);
}

/* Warm glow low in the column, so it is not a flat black rectangle. */
.contact-split__aside::before {
    content: "";
    position: absolute;
    left: -30%;
    bottom: -30%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 44 59 / 24%) 0%, rgb(255 44 59 / 0) 70%);
}

.contact-split__aside > * {
    position: relative;
    z-index: 1;
}

.contact-split__eyebrow {
    color: rgb(255 255 255 / 55%);
}

.contact-split__title {
    color: #fff;
    font-size: 34px;
    line-height: 44px;
    margin-bottom: 34px;
}

.contact-split__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-split__list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid rgb(255 255 255 / 12%);
}

.contact-split__list li:first-child {
    border-top: 0;
    padding-top: 0;
}

.contact-split__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgb(255 44 59 / 16%);
    color: var(--theme-color);
    font-size: 18px;
    line-height: 1;
}

.contact-split__detail {
    min-width: 0;
}

.contact-split__label {
    display: block;
    font-family: var(--primary-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 50%);
    margin-bottom: 3px;
}

/* The detail itself. Set on both the anchor and the paragraph, because
   Carola's `p { color: var(--primary-color) }` is a direct rule and beats
   an inherited colour — on this dark column that would render the address
   in near-black. */
.contact-split__detail a,
.contact-split__detail p {
    font-family: var(--secondary-font);
    font-size: 16px;
    line-height: 25px;
    color: rgb(255 255 255 / 90%);
    margin: 0;
    word-break: break-word;
    transition: color 300ms ease;
}

.contact-split__detail a:hover {
    color: var(--theme-color);
}

.contact-split__form {
    padding: 52px 44px;
    background: #fff;
}

/* --- responsive -------------------------------------------------- */
@media (max-width: 1199px) {

    .contact-cards-section,
    .contact-split-section {
        padding: 90px 0;
    }

    .contact-cards__title,
    .contact-split__title {
        font-size: 32px;
        line-height: 42px;
    }

    .contact-split__aside,
    .contact-split__form {
        padding: 40px 32px;
    }
}

@media (max-width: 991px) {

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

    /* One column below tablet: a 40/60 split leaves the form too narrow
       to lay its fields out two across. */
    .contact-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {

    .contact-cards-section,
    .contact-split-section {
        padding: 60px 0;
    }

    .contact-cards__title,
    .contact-split__title {
        font-size: 26px;
        line-height: 35px;
    }

    .contact-cards__head {
        margin-bottom: 34px;
    }

    .contact-cards__grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 30px;
    }

    .contact-cards__form {
        padding: 26px 20px;
    }

    .contact-split {
        border-radius: 12px;
    }

    .contact-split__aside,
    .contact-split__form {
        padding: 32px 22px;
    }
}

/* ------------------------------------------------------------------
   Feature section — two designs
   ------------------------------------------------------------------
   Both are built for the data this section actually carries: a title
   and an icon per item, with subtitle and description empty. Neither
   design reserves space for body copy that is not there.

     .feature-strip   dark band, four across, numbered
     .feature-split   light, photograph beside a list
------------------------------------------------------------------ */

/* --- shared heading ---------------------------------------------- */
.feature-strip__eyebrow,
.feature-split__eyebrow {
    display: block;
    margin-bottom: 12px;
    font-family: var(--primary-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--theme-color);
}

.feature-strip__title,
.feature-split__title {
    font-family: var(--primary-font);
    font-size: 40px;
    line-height: 50px;
    font-weight: 600;
    margin: 0;
    text-wrap: balance;
}

/* --- style_1: numbered strip ------------------------------------- */
.feature-strip-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background: linear-gradient(140deg, #17171c 0%, #111 60%, #1d1417 100%);
}

.feature-strip-section::before {
    content: "";
    position: absolute;
    left: -8%;
    bottom: -40%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 44 59 / 18%) 0%, rgb(255 44 59 / 0) 70%);
}

.feature-strip__head {
    position: relative;
    max-width: 680px;
    margin: 0 auto 56px;
    text-align: center;
}

.feature-strip__title {
    color: #fff;
}

.feature-strip__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

/* Hairlines between the items rather than boxes around them — four cards
   in a row would compete with the vehicle cards elsewhere on the page. */
.feature-strip__item {
    position: relative;
    padding: 8px 30px;
    border-left: 1px solid rgb(255 255 255 / 12%);
}

.feature-strip__item:first-child {
    border-left: 0;
    padding-left: 0;
}

.feature-strip__num {
    display: block;
    font-family: var(--primary-font);
    font-size: 44px;
    line-height: 1;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1px rgb(255 255 255 / 30%);
    margin-bottom: 18px;
    transition: all 400ms ease;
}

.feature-strip__item:hover .feature-strip__num {
    color: var(--theme-color);
    -webkit-text-stroke: 1px var(--theme-color);
}

.feature-strip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 12px;
    font-size: 22px;
    color: var(--theme-color);
    background: rgb(255 44 59 / 12%);
    transition: all 400ms ease;
}

.feature-strip__item:hover .feature-strip__icon {
    background: var(--theme-color);
    color: #fff;
}

.feature-strip__label {
    font-family: var(--primary-font);
    font-size: 19px;
    line-height: 27px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.feature-strip__text {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 24px;
    color: rgb(255 255 255 / 68%);
}

/* --- style_2: split with image ----------------------------------- */
.feature-split-section {
    padding: 110px 0;
    background: #fff;
}

.feature-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: center;
}

.feature-split--solo {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin: 0 auto;
}

.feature-split__media {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: 0 24px 60px rgb(17 17 17 / 12%);
}

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

.feature-split__title {
    color: var(--primary-color);
}

.feature-split__intro {
    margin-top: 14px;
    color: var(--body-color);
}

/* Carola's `p { color: var(--primary-color) }` is a direct rule and beats
   an inherited colour, so rich text from the admin needs saying twice. */
.feature-split__intro p {
    color: var(--body-color);
    margin-bottom: 0;
}

.feature-split__list {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
}

.feature-split__list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid rgb(17 17 17 / 8%);
}

.feature-split__list li:first-child {
    border-top: 0;
    padding-top: 0;
}

.feature-split__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    font-size: 19px;
    color: var(--theme-color);
    background: rgb(255 44 59 / 10%);
    transition: all 400ms ease;
}

.feature-split__list li:hover .feature-split__icon {
    background: var(--theme-color);
    color: #fff;
}

.feature-split__detail h5 {
    font-family: var(--primary-font);
    font-size: 19px;
    line-height: 28px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
}

.feature-split__detail p {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 24px;
    color: var(--body-color);
}

/* --- responsive --------------------------------------------------- */
@media (max-width: 1199px) {

    .feature-strip__title,
    .feature-split__title {
        font-size: 32px;
        line-height: 42px;
    }

    .feature-strip__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 0;
    }

    .feature-strip__item:nth-child(odd) {
        border-left: 0;
        padding-left: 0;
    }

    .feature-split {
        gap: 40px;
    }
}

@media (max-width: 767px) {

    .feature-strip-section,
    .feature-split-section {
        padding: 60px 0;
    }

    .feature-strip__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .feature-strip__item {
        border-left: 0;
        padding: 0;
    }

    .feature-split {
        grid-template-columns: 1fr;
    }

    .feature-strip__title,
    .feature-split__title {
        font-size: 26px;
        line-height: 35px;
    }
}

/* ------------------------------------------------------------------
   Gallery page
   ------------------------------------------------------------------
   Carola's gallery-section is the homepage carousel; this is the full
   page, with category filtering. The filter is radio inputs plus :has()
   rather than a script — the previous buttons were driven by a project
   file that no longer exists, so clicking a category did nothing at all.
------------------------------------------------------------------ */
.gallery-page__state {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gallery-page__filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 46px;
}

.gallery-page__filter label {
    margin: 0;
    padding: 10px 26px;
    border: 1px solid rgb(17 17 17 / 14%);
    border-radius: 40px;
    font-family: var(--primary-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-color);
    background: #fff;
    cursor: pointer;
    transition: all 300ms ease;
}

.gallery-page__filter label:hover {
    border-color: var(--theme-color);
    color: var(--theme-color);
}

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

.gallery-tile {
    position: relative;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--grey-bg);
}

.gallery-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease;
}

.gallery-tile:hover img {
    transform: scale(1.06);
}

/* The caption rides in from the bottom on hover; the gradient keeps white
   type readable over any photograph. */
.gallery-tile__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 22px;
    color: #fff;
    background: linear-gradient(180deg, rgb(9 9 11 / 0) 0%, rgb(9 9 11 / 88%) 100%);
    transform: translateY(14px);
    opacity: 0;
    transition: all 400ms ease;
}

.gallery-tile:hover .gallery-tile__caption {
    transform: translateY(0);
    opacity: 1;
}

.gallery-tile__badge {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 12px;
    border-radius: 40px;
    font-family: var(--primary-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--theme-color);
}

.gallery-tile__caption h4 {
    font-family: var(--primary-font);
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.gallery-tile__caption p {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 22px;
    color: rgb(255 255 255 / 78%);
}

.gallery-tile__zoom {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 15px;
    color: #fff;
    background: var(--theme-color);
    opacity: 0;
    transform: scale(0.86);
    transition: all 400ms ease;
}

.gallery-tile:hover .gallery-tile__zoom {
    opacity: 1;
    transform: scale(1);
}

.gallery-page__empty {
    max-width: 520px;
    margin: 0 auto;
    padding: 60px 30px;
    text-align: center;
    background: #fff;
    border: 1px solid rgb(17 17 17 / 7%);
    border-radius: 14px;
}

.gallery-page__empty span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 22px;
    border-radius: 50%;
    font-size: 28px;
    color: var(--theme-color);
    background: var(--grey-bg);
}

.gallery-page__empty h3 {
    font-family: var(--primary-font);
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.gallery-page__empty p {
    color: var(--body-color);
    margin: 0;
}

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

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

    .gallery-page__filter label {
        padding: 8px 18px;
        font-size: 13px;
    }

    /* No hover on touch, so the caption stays visible. */
    .gallery-tile__caption {
        transform: none;
        opacity: 1;
    }
}

/* ------------------------------------------------------------------
   Feature — style_1, staggered row
   ------------------------------------------------------------------
   Four items on one line read as a table; stepping every second one down
   turns the row into a composition. The step is decorative, so it is
   dropped the moment the grid stops being four across — on two columns
   or one it would just look misaligned.
------------------------------------------------------------------ */
.feature-step-section {
    position: relative;
    padding: 110px 0;
    background: #fff;
    overflow: hidden;
}

/* A faint chart-like wash behind the section, drawn in CSS: the theme
   ships no such artwork and a background photograph would fight the
   icons. */
.feature-step-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 30%, rgb(255 44 59 / 5%) 0 1px, transparent 1px),
        radial-gradient(circle at 72% 65%, rgb(17 17 17 / 4%) 0 1px, transparent 1px);
    background-size: 46px 46px, 62px 62px;
    opacity: 0.9;
}

.feature-step-section > .container {
    position: relative;
}

.feature-step__head {
    max-width: 720px;
    margin: 0 auto 64px;
    text-align: center;
}

.feature-step__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-family: var(--primary-font);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--theme-color);
}

.feature-step__title {
    font-family: var(--primary-font);
    font-size: 44px;
    line-height: 56px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    text-wrap: balance;
}

/* The admin marks the emphasised word with <span>; the rule under it is
   a background so it sits tight to the baseline rather than on it. */
.feature-step__title span {
    position: relative;
    background-image: linear-gradient(var(--theme-color), var(--theme-color));
    background-repeat: no-repeat;
    background-size: 100% 6px;
    background-position: 0 88%;
}

.feature-step__intro {
    margin-top: 18px;
    color: var(--body-color);
}

.feature-step__intro p {
    color: var(--body-color);
    font-size: 18px;
    line-height: 29px;
    margin-bottom: 0;
}

.feature-step__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    align-items: start;
}

.feature-step__item {
    text-align: center;
    padding: 0 6px;
}

/* The stagger. */
.feature-step__item:nth-child(even) {
    margin-top: 62px;
}

.feature-step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    margin-bottom: 24px;
    border-radius: 14px;
    font-size: 34px;
    color: var(--theme-color);
    background: #fbf3f1;
    transition: all 400ms ease;
}

.feature-step__icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.feature-step__item:hover .feature-step__icon {
    background: var(--theme-color);
    color: #fff;
    transform: translateY(-6px);
}

.feature-step__label {
    font-family: var(--primary-font);
    font-size: 21px;
    line-height: 29px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.feature-step__text {
    font-size: 16px;
    line-height: 26px;
    color: var(--body-color);
    margin: 0;
}

@media (max-width: 1199px) {
    .feature-step__title {
        font-size: 34px;
        line-height: 45px;
    }

    .feature-step__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 26px;
    }

    /* Two across: the stagger would leave one column hanging. */
    .feature-step__item:nth-child(even) {
        margin-top: 0;
    }
}

@media (max-width: 575px) {
    .feature-step-section {
        padding: 60px 0;
    }

    .feature-step__title {
        font-size: 27px;
        line-height: 36px;
    }

    .feature-step__grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .feature-step__icon {
        width: 76px;
        height: 76px;
        font-size: 28px;
        margin-bottom: 18px;
    }
}

/* ------------------------------------------------------------------
   Feature — style_2, split heading beside a card grid
   ------------------------------------------------------------------
   Replaces a dark numbered strip. The page already goes dark at the CTA
   and the vehicle group, and a third dark band in the same scroll made
   the middle of the page read as one long night section.
------------------------------------------------------------------ */
.feature-panel-section {
    padding: 110px 0;
    background: var(--grey-bg);
}

.feature-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 60px;
    align-items: start;
}

.feature-panel__aside {
    position: sticky;
    top: 30px;
}

.feature-panel__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-family: var(--primary-font);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--theme-color);
}

.feature-panel__title {
    font-family: var(--primary-font);
    font-size: 40px;
    line-height: 52px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    text-wrap: balance;
}

.feature-panel__title span {
    color: var(--theme-color);
}

.feature-panel__intro {
    margin-top: 16px;
    color: var(--body-color);
}

.feature-panel__intro p {
    color: var(--body-color);
    font-size: 17px;
    line-height: 28px;
    margin-bottom: 0;
}

.feature-panel__rule {
    display: block;
    width: 56px;
    height: 4px;
    margin-top: 26px;
    border-radius: 2px;
    background: var(--theme-color);
}

.feature-panel__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.feature-panel__card {
    padding: 32px 28px;
    background: #fff;
    border: 1px solid rgb(17 17 17 / 7%);
    border-radius: 14px;
    transition: transform 400ms ease, box-shadow 400ms ease, border-color 400ms ease;
}

.feature-panel__card:hover {
    transform: translateY(-6px);
    border-color: rgb(255 44 59 / 25%);
    box-shadow: 0 22px 50px rgb(17 17 17 / 9%);
}

.feature-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    border-radius: 12px;
    font-size: 22px;
    color: var(--theme-color);
    background: rgb(255 44 59 / 9%);
    transition: all 400ms ease;
}

.feature-panel__card:hover .feature-panel__icon {
    background: var(--theme-color);
    color: #fff;
}

.feature-panel__card h5 {
    font-family: var(--primary-font);
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.feature-panel__card p {
    font-size: 15px;
    line-height: 25px;
    color: var(--body-color);
    margin: 0;
}

@media (max-width: 1199px) {
    .feature-panel {
        gap: 40px;
    }

    .feature-panel__title {
        font-size: 32px;
        line-height: 42px;
    }
}

@media (max-width: 991px) {

    /* The heading stops being a column, so it goes back on top and the
       cards take the full width. */
    .feature-panel {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .feature-panel__aside {
        position: static;
    }
}

@media (max-width: 575px) {
    .feature-panel-section {
        padding: 60px 0;
    }

    .feature-panel__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .feature-panel__title {
        font-size: 26px;
        line-height: 35px;
    }
}

/* ------------------------------------------------------------------
   Legal pages (privacy policy, terms)
   ------------------------------------------------------------------
   A long document, so the type is set for reading rather than for
   scanning: one column at a comfortable measure, clear heading steps,
   and generous space between sections.
------------------------------------------------------------------ */
.legal-section {
    background: var(--grey-bg);
}

.legal {
    max-width: 860px;
    margin: 0 auto;
    padding: 56px 60px;
    background: #fff;
    border: 1px solid rgb(17 17 17 / 7%);
    border-radius: 14px;
}

.legal__title {
    font-family: var(--primary-font);
    font-size: 38px;
    line-height: 48px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
}

.legal__meta {
    margin: 10px 0 0;
    font-size: 14px;
    color: rgb(17 17 17 / 50%);
}

.legal__meta strong {
    color: var(--primary-color);
}

.legal__intro {
    margin: 18px 0 0;
    font-size: 18px;
    line-height: 30px;
    color: var(--body-color);
}

.legal__head {
    padding-bottom: 30px;
    margin-bottom: 34px;
    border-bottom: 1px solid rgb(17 17 17 / 9%);
}

.legal__body h2 {
    font-family: var(--primary-font);
    font-size: 23px;
    line-height: 32px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 38px 0 12px;
    padding-left: 16px;
    border-left: 4px solid var(--theme-color);
}

.legal__body h2:first-child {
    margin-top: 0;
}

.legal__body p {
    font-size: 16px;
    line-height: 28px;
    color: var(--body-color);
    margin-bottom: 14px;
}

.legal__body strong {
    color: var(--primary-color);
}

.legal__body a {
    color: var(--theme-color);
    text-decoration: underline;
}

.legal__body ul {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.legal__body ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 27px;
    color: var(--body-color);
}

/* A dot rather than a bullet glyph, so the list matches the rest of the
   site instead of inheriting the browser's marker. */
.legal__body ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 11px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--theme-color);
}

.legal__foot {
    margin-top: 46px;
    padding-top: 32px;
    border-top: 1px solid rgb(17 17 17 / 9%);
    text-align: center;
}

.legal__foot h3 {
    font-family: var(--primary-font);
    font-size: 22px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.legal__foot p {
    color: var(--body-color);
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .legal {
        padding: 34px 22px;
    }

    .legal__title {
        font-size: 27px;
        line-height: 36px;
    }

    .legal__body h2 {
        font-size: 20px;
        line-height: 28px;
        margin-top: 30px;
    }
}

/* ==================================================================
   Customer account
   ==================================================================
   Carola has no account area at all, so all of this is project CSS
   built from the theme's tokens.

   Two shapes:
     .auth-*      the signed-out pages — one narrow card, one form
     .account-*   the signed-in pages — a nav column beside a panel
   ================================================================== */

/* --- signed out --------------------------------------------------- */
.auth-section {
    background: var(--grey-bg);
}

.auth-card {
    max-width: 520px;
    margin: 0 auto;
    padding: 46px 44px;
    background: #fff;
    border: 1px solid rgb(17 17 17 / 7%);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgb(17 17 17 / 6%);
}

.auth-card__head {
    margin-bottom: 28px;
    text-align: center;
}

.auth-card__head h1 {
    font-family: var(--primary-font);
    font-size: 30px;
    line-height: 40px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 8px;
}

.auth-card__head p {
    color: var(--body-color);
    font-size: 16px;
    line-height: 26px;
    margin: 0;
}

.auth-card__alt {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgb(17 17 17 / 8%);
    text-align: center;
    font-size: 15px;
    color: var(--body-color);
}

.auth-card__alt a,
.auth-link {
    color: var(--theme-color);
    font-weight: 500;
}

.auth-card__alt a:hover,
.auth-link:hover {
    text-decoration: underline;
}

/* Sign-out inside a sentence is a real form, so the button has to look
   like the link beside it. */
.auth-inline-form {
    display: inline;
}

.auth-inline-form button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* --- forms -------------------------------------------------------- */
.auth-field {
    margin-bottom: 18px;
}

.auth-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
}

.auth-field .req {
    color: var(--theme-color);
}

.auth-field input {
    width: 100%;
    padding: 13px 15px;
    font-family: var(--secondary-font);
    font-size: 15px;
    line-height: 22px;
    color: var(--primary-color);
    background: #fff;
    border: 1px solid rgb(17 17 17 / 13%);
    border-radius: 8px;
    transition: border-color 300ms ease;
}

.auth-field input:focus {
    border-color: var(--theme-color);
}

.auth-field.has-error input {
    border-color: var(--theme-color);
    background: rgb(255 44 59 / 3%);
}

.auth-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--theme-color);
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
    font-size: 14px;
}

.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--body-color);
    cursor: pointer;
}

.auth-form .btn-style-four.w-100 {
    width: 100%;
    text-align: center;
}

.auth-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    margin-bottom: 22px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 24px;
}

.auth-note--ok {
    color: #0f7a3d;
    background: rgb(18 161 80 / 9%);
}

.auth-note--error {
    color: #b42318;
    background: rgb(180 35 24 / 8%);
}

.auth-verify {
    text-align: center;
}

.auth-verify__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: 22px;
    border-radius: 50%;
    font-size: 30px;
    color: var(--theme-color);
    background: var(--grey-bg);
}

.auth-verify p {
    color: var(--body-color);
    margin-bottom: 24px;
}

/* --- signed in ---------------------------------------------------- */
.account-section {
    background: var(--grey-bg);
}

.account {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.account__side {
    position: sticky;
    top: 24px;
    padding: 26px 22px;
    background: #fff;
    border: 1px solid rgb(17 17 17 / 7%);
    border-radius: 14px;
}

.account__me {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgb(17 17 17 / 8%);
}

.account__avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-family: var(--primary-font);
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    background: var(--theme-color);
}

.account__me-text {
    min-width: 0;
}

.account__me-text strong {
    display: block;
    font-family: var(--primary-font);
    font-size: 16px;
    color: var(--primary-color);
}

.account__me-text span {
    display: block;
    font-size: 13px;
    color: var(--body-color);
    word-break: break-word;
}

.account__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account__nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 8px;
    font-family: var(--primary-font);
    font-size: 15px;
    font-weight: 500;
    color: var(--body-color);
    transition: all 300ms ease;
}

.account__nav a i {
    width: 18px;
    text-align: center;
    font-size: 14px;
}

.account__nav a:hover {
    background: var(--grey-bg);
    color: var(--primary-color);
}

.account__nav a.is-active {
    background: var(--theme-color);
    color: #fff;
}

.account__signout {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgb(17 17 17 / 8%);
}

.account__signout button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--primary-font);
    font-size: 15px;
    color: var(--body-color);
    cursor: pointer;
    transition: color 300ms ease;
}

.account__signout button:hover {
    color: var(--theme-color);
}

.account__panel {
    padding: 34px 32px;
    background: #fff;
    border: 1px solid rgb(17 17 17 / 7%);
    border-radius: 14px;
    min-width: 0;
}

.account-head {
    margin-bottom: 28px;
}

.account-head h2 {
    font-family: var(--primary-font);
    font-size: 26px;
    line-height: 34px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 6px;
}

.account-head p {
    color: var(--body-color);
    margin: 0;
}

/* --- stat tiles --------------------------------------------------- */
.account-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 34px;
}

.account-stat {
    display: block;
    padding: 22px 18px;
    text-align: center;
    background: var(--grey-bg);
    border-radius: 12px;
    transition: all 300ms ease;
}

.account-stat:hover {
    background: rgb(255 44 59 / 8%);
}

.account-stat__num {
    display: block;
    font-family: var(--primary-font);
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
    color: var(--theme-color);
}

.account-stat__label {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: var(--body-color);
}

/* --- blocks and lists --------------------------------------------- */
.account-block {
    margin-bottom: 36px;
}

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

.account-block__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.account-block__head h3 {
    font-family: var(--primary-font);
    font-size: 19px;
    line-height: 27px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
}

.account-block__head a {
    font-size: 14px;
    color: var(--theme-color);
}

.account-empty {
    color: var(--body-color);
    margin: 0;
}

.account-empty a {
    color: var(--theme-color);
    text-decoration: underline;
}

.account-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.account-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgb(17 17 17 / 8%);
}

.account-list li:last-child {
    border-bottom: 0;
}

.account-list__main strong {
    display: block;
    font-family: var(--primary-font);
    font-size: 15px;
    color: var(--primary-color);
}

.account-list__main a {
    font-size: 14px;
    color: var(--theme-color);
}

.account-list__meta {
    flex: 0 0 auto;
    font-size: 13px;
    color: rgb(17 17 17 / 45%);
}

/* --- record cards ------------------------------------------------- */
.account-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.account-card {
    padding: 20px 22px;
    background: var(--grey-bg);
    border-radius: 12px;
}

.account-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}

.account-card__type {
    font-family: var(--primary-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-color);
}

.account-card__status {
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    background: #fff;
}

.account-card h4 {
    font-family: var(--primary-font);
    font-size: 17px;
    line-height: 25px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 6px;
}

.account-card h4 a {
    color: var(--primary-color);
}

.account-card h4 a:hover {
    color: var(--theme-color);
}

.account-card__message {
    font-size: 15px;
    line-height: 24px;
    color: var(--body-color);
    margin: 0 0 10px;
}

.account-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 13px;
    color: rgb(17 17 17 / 50%);
}

.account-card__meta i {
    margin-right: 6px;
    color: var(--theme-color);
}

.account-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.account-card__remove {
    padding: 0;
    background: none;
    border: 0;
    font-size: 14px;
    color: var(--body-color);
    text-decoration: underline;
    cursor: pointer;
}

.account-card__remove:hover {
    color: var(--theme-color);
}

.account-pagination {
    margin-top: 20px;
}

/* --- empty panel -------------------------------------------------- */
.account-empty-panel {
    padding: 50px 30px;
    text-align: center;
}

.account-empty-panel span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    border-radius: 50%;
    font-size: 28px;
    color: var(--theme-color);
    background: var(--grey-bg);
}

.account-empty-panel h3 {
    font-family: var(--primary-font);
    font-size: 22px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.account-empty-panel p {
    color: var(--body-color);
    margin-bottom: 22px;
}

/* --- responsive --------------------------------------------------- */
@media (max-width: 991px) {
    .account {
        grid-template-columns: 1fr;
    }

    .account__side {
        position: static;
    }

    /* A row of links reads better than a tall column above the panel. */
    .account__nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 767px) {
    .auth-card {
        padding: 32px 22px;
    }

    .account__panel {
        padding: 24px 20px;
    }

    .account-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .account-stat {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        text-align: left;
        padding: 16px 18px;
    }

    .account-stat__num {
        font-size: 24px;
    }

    .account-stat__label {
        margin: 0;
    }
}

/* ------------------------------------------------------------------
   Sell / part-exchange your car
   ------------------------------------------------------------------
   One page in three fieldsets rather than a wizard: the wizard's script
   was lost with the old asset folder, and a form that needs a missing
   file to reach step two is worse than a longer one that always submits.
   Reuses the .auth-field controls so every form on the site looks the
   same.
------------------------------------------------------------------ */
.sell-section {
    background: var(--grey-bg);
}

.sell {
    max-width: 880px;
    margin: 0 auto;
}

.sell__intro {
    margin-bottom: 30px;
    text-align: center;
}

.sell__intro h2 {
    font-family: var(--primary-font);
    font-size: 32px;
    line-height: 42px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.sell__intro p {
    color: var(--body-color);
    margin: 0 auto;
    max-width: 620px;
}

.sell__points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}

.sell__points li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    color: var(--body-color);
}

.sell__points li i {
    color: #12a150;
    font-size: 13px;
}

.sell-form {
    padding: 36px 34px;
    background: #fff;
    border: 1px solid rgb(17 17 17 / 7%);
    border-radius: 14px;
}

.sell-block {
    border: 0;
    padding: 0;
    margin: 0 0 30px;
}

.sell-block legend {
    float: none;
    width: auto;
    padding: 0 0 16px;
    margin-bottom: 20px;
    font-family: var(--primary-font);
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    border-bottom: 1px solid rgb(17 17 17 / 8%);
}

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

.sell-form textarea {
    width: 100%;
    padding: 13px 15px;
    font-family: var(--secondary-font);
    font-size: 15px;
    line-height: 24px;
    color: var(--primary-color);
    background: #fff;
    border: 1px solid rgb(17 17 17 / 13%);
    border-radius: 8px;
    resize: vertical;
}

.sell-form textarea:focus {
    border-color: var(--theme-color);
}

.sell-form select,
.sell-form input[type="file"] {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--secondary-font);
    font-size: 15px;
    color: var(--primary-color);
    background: #fff;
    border: 1px solid rgb(17 17 17 / 13%);
    border-radius: 8px;
}

.sell-hint {
    display: block;
    margin-top: 7px;
    font-size: 13px;
    line-height: 20px;
    color: rgb(17 17 17 / 50%);
}

.sell-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding-top: 8px;
}

.sell-actions span {
    font-size: 14px;
    color: var(--body-color);
}

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

@media (max-width: 575px) {
    .sell-form {
        padding: 26px 20px;
    }

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

    .sell__intro h2 {
        font-size: 25px;
        line-height: 34px;
    }
}

/* --- finance calculator page + shortlist head --------------------- */
.finance-vehicle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px;
    margin-bottom: 22px;
    background: #fff;
    border: 1px solid rgb(17 17 17 / 7%);
    border-radius: 14px;
}

.finance-vehicle__text span {
    display: block;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-color);
}

.finance-vehicle__text h3 {
    font-family: var(--primary-font);
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 4px 0 0;
}

.finance-panel {
    padding: 34px 32px;
    background: #fff;
    border: 1px solid rgb(17 17 17 / 7%);
    border-radius: 14px;
}

.finance-next {
    margin-top: 26px;
    padding: 30px;
    text-align: center;
    background: #fff;
    border: 1px solid rgb(17 17 17 / 7%);
    border-radius: 14px;
}

.finance-next h3 {
    font-family: var(--primary-font);
    font-size: 21px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.finance-next p {
    color: var(--body-color);
    margin-bottom: 20px;
}

.finance-next__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.shortlist-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 30px;
}

.shortlist-head h2 {
    font-family: var(--primary-font);
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
}

.shortlist-head p {
    color: var(--body-color);
    margin: 4px 0 0;
}

@media (max-width: 575px) {
    .finance-panel {
        padding: 24px 20px;
    }
}

/* ------------------------------------------------------------------
   Sign-in page (standalone)
   ------------------------------------------------------------------
   No header, footer or breadcrumb: signing in is one task, and the
   navigation only offers ways to leave it. Two halves — a picture and
   the form — which collapse to the form alone on a phone, where a
   half-height decorative image would just push the fields off screen.
------------------------------------------------------------------ */
.signin-page {
    margin: 0;
    background: #fff;
}

.signin {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

/* --- left: the picture -------------------------------------------- */
.signin__art {
    position: relative;
    overflow: hidden;
    background: #0b0b0d;
}

.signin__art-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    transform: scale(1.02);
}

/* The same scrim reasoning as the slider: the copy has to hold against
   whatever photograph sits behind it. */
.signin__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(9 9 11 / 45%) 0%, rgb(9 9 11 / 88%) 100%);
}

.signin__art-copy {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 54px 52px;
}

.signin__art-copy h2 {
    font-family: var(--primary-font);
    font-size: 34px;
    line-height: 44px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
}

.signin__art-copy p {
    font-size: 17px;
    line-height: 27px;
    color: rgb(255 255 255 / 78%);
    margin: 0;
    max-width: 34ch;
}

/* --- right: the form ---------------------------------------------- */
.signin__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 40px;
}

.signin__inner {
    width: 100%;
    max-width: 420px;
}

.signin__logo {
    display: inline-block;
    margin-bottom: 34px;
}

.signin__logo img {
    max-height: 52px;
    width: auto;
}

.signin__logo span {
    font-family: var(--primary-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
}

.signin__inner h1 {
    font-family: var(--primary-font);
    font-size: 32px;
    line-height: 42px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 8px;
}

.signin__lead {
    font-size: 16px;
    line-height: 26px;
    color: var(--body-color);
    margin: 0 0 28px;
}

.signin__alt {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgb(17 17 17 / 8%);
    font-size: 15px;
    color: var(--body-color);
}

.signin__alt a {
    color: var(--theme-color);
    font-weight: 500;
}

.signin__alt a:hover {
    text-decoration: underline;
}

.signin__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    font-size: 14px;
    color: var(--body-color);
    transition: color 300ms ease;
}

.signin__back:hover {
    color: var(--theme-color);
}

@media (max-width: 991px) {

    /* The picture is decorative; on a narrow screen it would push the
       fields below the fold, so the form takes the whole page. */
    .signin {
        grid-template-columns: 1fr;
    }

    .signin__art {
        display: none;
    }

    .signin__panel {
        padding: 40px 24px;
    }
}

/* The terms row on registration. Its links were falling back to the
   browser's default blue, and the checkbox sat tight against the submit
   button. */
.auth-check--terms {
    align-items: flex-start;
    margin-bottom: 20px;
    line-height: 22px;
}

.auth-check--terms input {
    margin-top: 3px;
}

.auth-check a,
.signin__inner .auth-check--terms a {
    color: var(--theme-color);
    font-weight: 500;
}

.auth-check a:hover {
    text-decoration: underline;
}

.auth-check--terms.has-error span {
    color: var(--theme-color);
}

/* ==================================================================
   Palette layer — colour with meaning, and readable small text
   ==================================================================
   Two problems this fixes.

   1. ONE COLOUR EVERYWHERE. Carola ships a single accent
      (--theme-color, #FF2C3B) and this project used it 99 times: every
      icon tile, badge, numeral, bullet and link was the same red, so
      nothing stood out because everything did.

      Red is kept for ACTIONS — primary buttons, active nav, links. The
      accents below carry MEANING instead of decoration, and the
      decorative icon tiles rotate through them so a row of four reads as
      four things rather than one repeated stamp.

   2. SMALL TEXT TOO PALE. Muted copy sat at rgb(17 17 17 / 45%) — about
      4.0:1 on white, under the 4.5:1 minimum for body-sized text. Every
      one of those is lifted to a token that clears it.

   Nothing in the theme's own files is touched; these rules load last and
   override only this project's classes.
   ================================================================== */
:root {
    /* Semantic accents. Each is dark enough to sit on white as text. */
    --accent-blue: #1668cc;
    --accent-teal: #0a7a7a;
    --accent-green: #0e7c3d;
    --accent-amber: #9c6108;
    --accent-violet: #6743cf;

    /* Tinted grounds for icon tiles — the same hues at 10%. */
    --tint-red: rgb(255 44 59 / 10%);
    --tint-blue: rgb(22 104 204 / 10%);
    --tint-teal: rgb(10 122 122 / 10%);
    --tint-green: rgb(14 124 61 / 10%);
    --tint-amber: rgb(156 97 8 / 12%);
    --tint-violet: rgb(103 67 207 / 10%);

    /* Small print that still passes AA on white. */
    --ink-muted: rgb(17 17 17 / 64%);
}

/* --- readability ---------------------------------------------------
   Every muted value that was under contrast, lifted in one place. */
.compare-cell__group,
.account-list__meta,
.account-card__meta,
.legal__meta,
.enquiry-thanks__list li span,
.sell-hint,
.finance-disclaimer,
.car-details-more,
.gallery-tile__caption p,
.vd-price-was,
.account-stat__label,
.signin__back {
    color: var(--ink-muted);
}

/* On dark grounds the same problem runs the other way. */
.cta-split__note,
.cta-spotlight__note,
.feature-strip__text {
    color: rgb(255 255 255 / 78%);
}

/* --- condition badges carry meaning --------------------------------
   Every card showed the same outlined pill whatever it said. Now the
   word and the colour agree, which is readable at a glance across a
   grid of twelve cars. */
.single-popular-car-rating,
.single-featured-car-rating,
.vd-badge {
    background: var(--tint-blue);
    border-color: transparent;
    color: var(--accent-blue);
    font-weight: 600;
}

/* Sold and reserved keep their existing loud treatment; these two rules
   only restate them after the rule above. */
.single-popular-car-rating.is-sold,
.single-featured-car-rating.is-sold,
.vd-badge.is-sold {
    background: #b42318;
    border-color: #b42318;
    color: #fff;
}

.single-popular-car-rating.is-reserved,
.single-featured-car-rating.is-reserved,
.vd-badge.is-reserved {
    background: var(--accent-amber);
    border-color: var(--accent-amber);
    color: #fff;
}

/* --- decorative icon tiles rotate through the accents --------------
   Same shape, four different hues, so a row reads as four items. The
   nth-child steps are on the CARD, not the icon, because the icon is
   not its parent's only child. */
.feature-step__item:nth-child(4n + 1) .feature-step__icon,
.feature-panel__card:nth-child(4n + 1) .feature-panel__icon,
.wcu-card:nth-child(4n + 1) .wcu-card__badge,
.contact-card:nth-child(4n + 1) .contact-card__icon {
    color: var(--accent-blue);
    background: var(--tint-blue);
}

.feature-step__item:nth-child(4n + 2) .feature-step__icon,
.feature-panel__card:nth-child(4n + 2) .feature-panel__icon,
.wcu-card:nth-child(4n + 2) .wcu-card__badge,
.contact-card:nth-child(4n + 2) .contact-card__icon {
    color: var(--accent-green);
    background: var(--tint-green);
}

.feature-step__item:nth-child(4n + 3) .feature-step__icon,
.feature-panel__card:nth-child(4n + 3) .feature-panel__icon,
.wcu-card:nth-child(4n + 3) .wcu-card__badge,
.contact-card:nth-child(4n + 3) .contact-card__icon {
    color: var(--accent-amber);
    background: var(--tint-amber);
}

.feature-step__item:nth-child(4n + 4) .feature-step__icon,
.feature-panel__card:nth-child(4n + 4) .feature-panel__icon,
.wcu-card:nth-child(4n + 4) .wcu-card__badge,
.contact-card:nth-child(4n + 4) .contact-card__icon {
    color: var(--accent-violet);
    background: var(--tint-violet);
}

/* Hover still fills with the item's own colour rather than jumping to
   red, which would undo the point of the rotation. */
.feature-step__item:hover .feature-step__icon,
.feature-panel__card:hover .feature-panel__icon,
.wcu-card:hover .wcu-card__badge,
.contact-card:hover .contact-card__icon {
    color: #fff;
}

.feature-step__item:nth-child(4n + 1):hover .feature-step__icon,
.feature-panel__card:nth-child(4n + 1):hover .feature-panel__icon,
.wcu-card:nth-child(4n + 1):hover .wcu-card__badge,
.contact-card:nth-child(4n + 1):hover .contact-card__icon {
    background: var(--accent-blue);
}

.feature-step__item:nth-child(4n + 2):hover .feature-step__icon,
.feature-panel__card:nth-child(4n + 2):hover .feature-panel__icon,
.wcu-card:nth-child(4n + 2):hover .wcu-card__badge,
.contact-card:nth-child(4n + 2):hover .contact-card__icon {
    background: var(--accent-green);
}

.feature-step__item:nth-child(4n + 3):hover .feature-step__icon,
.feature-panel__card:nth-child(4n + 3):hover .feature-panel__icon,
.wcu-card:nth-child(4n + 3):hover .wcu-card__badge,
.contact-card:nth-child(4n + 3):hover .contact-card__icon {
    background: var(--accent-amber);
}

.feature-step__item:nth-child(4n + 4):hover .feature-step__icon,
.feature-panel__card:nth-child(4n + 4):hover .feature-panel__icon,
.wcu-card:nth-child(4n + 4):hover .wcu-card__badge,
.contact-card:nth-child(4n + 4):hover .contact-card__icon {
    background: var(--accent-violet);
}

/* The card's hover border follows its own accent too. */
.wcu-card:nth-child(4n + 1):hover,
.feature-panel__card:nth-child(4n + 1):hover,
.contact-card:nth-child(4n + 1):hover {
    border-color: rgb(22 104 204 / 30%);
}

.wcu-card:nth-child(4n + 2):hover,
.feature-panel__card:nth-child(4n + 2):hover,
.contact-card:nth-child(4n + 2):hover {
    border-color: rgb(18 161 80 / 30%);
}

.wcu-card:nth-child(4n + 3):hover,
.feature-panel__card:nth-child(4n + 3):hover,
.contact-card:nth-child(4n + 3):hover {
    border-color: rgb(184 115 10 / 32%);
}

.wcu-card:nth-child(4n + 4):hover,
.feature-panel__card:nth-child(4n + 4):hover,
.contact-card:nth-child(4n + 4):hover {
    border-color: rgb(103 67 207 / 30%);
}

/* --- the rest, coloured by what it means ---------------------------- */

/* Specification values are information, not action. */
.car-details-feature-icon {
    color: var(--accent-blue);
    background: var(--tint-blue);
}

/* Equipment a car HAS is a positive. */
.car-details-included-list li i,
.vd-feature-list li i,
.sell__points li i {
    color: var(--accent-green);
}

.car-details-top-highlights-list li i {
    color: var(--accent-teal);
}

/* Counters read as facts rather than as four more calls to action. */
.counter-icon {
    color: var(--accent-blue);
}

.counter-postfix {
    color: var(--accent-teal);
}

.counter-inline-item .counter-number i {
    color: var(--accent-blue);
}

/* Ratings are the theme's own amber, which it defines and never uses. */
.review-card__rating li i,
.testimonial-block-one .rating li i {
    color: var(--rating-color);
}

/* Saved searches and matches are informational. */
.account-card__status {
    color: var(--accent-blue);
}

/* The gallery filter's active pill stays red — it is a control. The
   category badge on a tile is a label, so it takes the cool accent. */
.gallery-tile__badge {
    background: var(--accent-blue);
}

/* Compare: a row that DIFFERS is the decision, so it gets the warm
   marker; the header stays neutral. */
.compare-row.is-different .compare-cell--label {
    box-shadow: inset 3px 0 0 var(--accent-amber);
}

.compare-cell--flag i {
    color: var(--accent-green);
}

/* Legal pages: section rules in the cool accent so the page reads as a
   document rather than as marketing. */
.legal__body h2 {
    border-left-color: var(--accent-blue);
}

.legal__body ul li::before {
    background: var(--accent-blue);
}

.legal__body a {
    color: var(--accent-blue);
}

/* Enquiry confirmation is a success state. */
.enquiry-thanks__ref {
    background: rgb(18 161 80 / 9%);
}

.enquiry-thanks__ref strong {
    color: var(--accent-green);
}

/* Vehicle spec rows on the listing card: neutral, not red — they repeat
   six times per card and twelve cards per page. */
.single-featured-car-info li i,
.single-popular-car-info li i {
    color: var(--accent-blue);
}

/* ==================================================================
   Button hover — same colour, just deeper
   ==================================================================
   Carola's buttons all converge on red when hovered: btn-style-one and
   -three fill red, -two and -seven turn their text red, -six takes a red
   border. So whatever colour a button started as, hovering it made it
   red — which flattens the palette back to one colour at exactly the
   moment the button is being looked at, and undoes the accent a card was
   given.

   Hover now changes DEPTH, not hue: a red button gets a darker red, a
   dark button a darker dark, an outline button fills with its own ink.
   The affordance is still obvious, and nothing changes colour.

   Scoped to the front end. The admin panel uses Bootstrap/AdminLTE
   buttons, which are untouched.
   ================================================================== */
.btn-style-one:hover,
.btn-style-four:hover,
.btn-style-five:hover {
    background-color: #d81f2c;
    border-color: #d81f2c;
    color: #fff;
}

/* -four and -five animate a white sweep from a ::after; with the hue
   held steady that sweep is what read as "turning white". */
.btn-style-four:hover::after,
.btn-style-five:hover::after,
.btn-style-seven:hover::after {
    opacity: 0;
}

/* Outline buttons fill with their own ink rather than the theme red. */
.btn-style-three:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.btn-style-two:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* -seven is the dark primary used on the red band; it went white with
   red text, which is the biggest jump of the lot. */
.btn-style-seven:hover {
    background: #000;
    color: #fff;
}

/* -six is the translucent white outline over photographs. */
.btn-style-six:hover {
    background: rgb(255 255 255 / 22%);
    border-color: rgb(255 255 255 / 55%);
    color: #fff;
}

/* -eight is the soft red pill on light grounds; deepen the tint. */
.btn-style-eight:hover {
    background: rgb(255 44 59 / 18%);
    color: var(--theme-color);
}

/* ==================================================================
   Header search overlay
   ==================================================================
   The theme shipped this as a white slab: a logo, a hairline input and a
   submit whose glyph (icon-50 in the iconfont) draws an envelope, not a
   magnifier — so the one control in the overlay looked like "send mail".
   There was also no visible submit, and two thirds of the panel was empty
   white.

   It is now a dark sheet over the page with a single centred panel: one
   large field, a real Search button, and shortcut links for the journeys
   people actually open this to reach.

   The hooks main.js binds are unchanged — #search-popup, .popup-visible,
   .close-search and .overlay-layer — so opening, Escape and click-outside
   still work without touching the JS.
   ================================================================== */
.search-popup {
    padding: 0;
    background: rgb(10 10 12 / 88%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transform: none;
    transition: opacity 320ms ease, visibility 320ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-popup .popup-inner {
    padding: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

/* The click-outside catcher sits behind the panel, edge to edge. */
.search-popup .overlay-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
}

.search-panel {
    position: relative;
    z-index: 2;
    width: min(840px, calc(100vw - 40px));
    margin: 40px 20px;
    padding: 54px 56px 44px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 40px 90px rgb(0 0 0 / 45%);
    text-align: center;
    /* Rises into place as the sheet fades in. */
    transform: translateY(26px) scale(0.98);
    opacity: 0;
    transition: transform 420ms cubic-bezier(0.2, 0.8, 0.3, 1) 60ms,
        opacity 320ms ease 60ms;
}

.search-popup.popup-visible .search-panel {
    transform: none;
    opacity: 1;
}

.search-popup .close-search {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 16px;
    color: var(--primary-color);
    background: var(--grey-bg);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background 250ms ease, color 250ms ease;
}

.search-popup .close-search:hover {
    background: var(--primary-color);
    color: #fff;
}

.search-panel__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 16px;
    font: 600 11px/1 var(--secondary-font);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--theme-color);
    background: var(--tint-red);
    border-radius: 20px;
}

.search-panel__title {
    margin: 0 0 10px;
    font: 700 36px/1.2 var(--primary-font);
    color: var(--primary-color);
}

.search-panel__lead {
    margin: 0 auto 28px;
    max-width: 460px;
    font-size: 15px;
    line-height: 26px;
    color: var(--ink-muted);
}

/* --- the field ------------------------------------------------------ */
.search-panel__form {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.search-panel__field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.search-panel__field i {
    position: absolute;
    top: 50%;
    left: 22px;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--ink-muted);
    pointer-events: none;
    transition: color 250ms ease;
}

.search-panel__field input[type="search"] {
    width: 100%;
    height: 62px;
    padding: 0 20px 0 52px;
    font-family: var(--secondary-font);
    font-size: 16px;
    color: var(--primary-color);
    background: var(--grey-bg);
    border: 1px solid transparent;
    border-radius: 12px;
    outline: none;
    transition: border-color 250ms ease, background 250ms ease;
}

.search-panel__field input[type="search"]::placeholder {
    color: var(--ink-muted);
}

.search-panel__field input[type="search"]:focus {
    background: #fff;
    border-color: var(--primary-color);
}

.search-panel__field input[type="search"]:focus + i,
.search-panel__field:focus-within i {
    color: var(--theme-color);
}

/* Chrome draws its own clear button on type=search; it collides with the
   rounded field, so it is removed and Escape does the same job. */
.search-panel__field input[type="search"]::-webkit-search-decoration,
.search-panel__field input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.search-panel__submit {
    flex: 0 0 auto;
    height: 62px;
    padding: 0 34px;
    font: 500 16px/1 var(--primary-font);
    color: #fff;
    background: var(--theme-color);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: background 250ms ease;
}

/* Deeper, not a different colour — same rule the rest of the buttons follow. */
.search-panel__submit:hover {
    background: #d81f2c;
}

/* --- shortcuts ------------------------------------------------------ */
.search-panel__shortcuts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid rgb(17 17 17 / 8%);
}

.search-panel__shortcuts-label {
    margin-right: 4px;
    font-size: 13px;
    color: var(--ink-muted);
}

.search-panel__shortcuts a {
    padding: 7px 14px;
    font: 500 13px/1 var(--secondary-font);
    white-space: nowrap;
    color: var(--primary-color);
    background: var(--grey-bg);
    border: 1px solid transparent;
    border-radius: 20px;
    transition: all 250ms ease;
}

.search-panel__shortcuts a:hover {
    color: #fff;
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.search-panel__hint {
    margin: 18px 0 0;
    font-size: 12px;
    color: var(--ink-muted);
}

@media (max-width: 575px) {
    .search-panel {
        padding: 46px 22px 32px;
        border-radius: 16px;
    }

    .search-panel__title {
        font-size: 26px;
    }

    .search-panel__form {
        flex-direction: column;
    }

    .search-panel__submit {
        width: 100%;
        padding: 0;
    }
}

/* ==================================================================
   Header "saved cars"
   ==================================================================
   Shortlisting a car worked, but the header offered no way back to
   /shortlist, so a saved car was effectively lost. This is the way back:
   a heart beside the search toggler, with the count on it once there is
   something to come back to.
   ================================================================== */
.header-shortlist {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 4px;
    font-size: 17px;
    color: #fff;
    transition: color 250ms ease;
}

.header-shortlist:hover,
.header-shortlist:focus-visible {
    color: var(--theme-color);
}

/* The badge only appears when the count is non-zero, so it never shows a
   bare "0" the way a always-on counter would. */
.header-shortlist__count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font: 600 10px/17px var(--secondary-font);
    text-align: center;
    color: #fff;
    background: var(--theme-color);
    border-radius: 9px;
}

/* On the inner pages the header bar is solid dark, same as the home one,
   so the icon keeps the same treatment. Only the light sticky bar needs
   the ink colour instead. */
.sticky-header .header-shortlist {
    color: var(--primary-color);
}

.sticky-header .header-shortlist:hover {
    color: var(--theme-color);
}

/* ==================================================================
   Sell your car — the valuation wizard
   ==================================================================
   The single-page form became four steps plus a review. What is new here
   is the progress rail, the panel each step sits in, the media grid and
   the review list. The field styles themselves (.sell-form, .sell-grid,
   .auth-field) are reused unchanged, so a step looks like the rest of the
   site rather than like a wizard bolted on.
   ================================================================== */

/* --- progress rail -------------------------------------------------- */
.sell-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.sell-steps__item {
    flex: 1 1 150px;
    min-width: 0;
}

.sell-steps__item > a,
.sell-steps__item > span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--grey-bg);
    border: 1px solid transparent;
    color: var(--ink-muted);
    font-family: var(--secondary-font);
    font-size: 13px;
    line-height: 1.3;
    transition: background 250ms ease, border-color 250ms ease, color 250ms ease;
}

.sell-steps__item > a:hover {
    border-color: rgb(17 17 17 / 18%);
    color: var(--primary-color);
}

.sell-steps__mark {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--primary-font);
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    color: var(--ink-muted);
    border: 1px solid rgb(17 17 17 / 14%);
}

.sell-steps__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Done, current and still-to-come each read differently: the rail exists
   to tell the seller how much is left, so the states must be obvious. */
.sell-steps__item.is-done > a,
.sell-steps__item.is-done > span {
    background: rgb(18 161 80 / 9%);
    color: var(--accent-green);
}

.sell-steps__item.is-done .sell-steps__mark {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: #fff;
}

.sell-steps__item.is-current > span {
    background: var(--primary-color);
    color: #fff;
}

.sell-steps__item.is-current .sell-steps__mark {
    background: #fff;
    border-color: #fff;
    color: var(--primary-color);
}

/* --- the panel a step sits in --------------------------------------- */
.sell-panel {
    background: #fff;
    border: 1px solid rgb(17 17 17 / 8%);
    border-radius: 16px;
    padding: 34px 34px 30px;
    box-shadow: 0 18px 40px rgb(17 17 17 / 4%);
}

.sell-panel__step {
    margin: 0 0 6px;
    font-family: var(--secondary-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--theme-color);
}

.sell-panel__title {
    margin: 0 0 6px;
    font-family: var(--primary-font);
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-color);
}

.sell-panel__blurb {
    margin: 0 0 26px;
    color: var(--ink-muted);
}

/* --- actions row ---------------------------------------------------- */
.sell-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgb(17 17 17 / 8%);
}

/* With no Back link beside it the button would drift left, so push it over. */
.sell-actions > .btn-style-four:only-child {
    margin-left: auto;
}

.sell-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--secondary-font);
    font-size: 14px;
    color: var(--ink-muted);
    transition: color 250ms ease;
}

.sell-back:hover {
    color: var(--primary-color);
}

.auth-field--wide {
    grid-column: 1 / -1;
}

/* --- consent tick --------------------------------------------------- */
.auth-field--check label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--secondary-font);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--body-color);
    cursor: pointer;
}

.auth-field--check input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    accent-color: var(--theme-color);
}

/* --- uploaded media ------------------------------------------------- */
.sell-media {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin: 0 0 24px;
}

.sell-media__item {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: var(--grey-bg);
}

.sell-media__item img,
.sell-media__item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The video keeps its controls, so it is contained rather than cropped. */
.sell-media__item--video {
    grid-column: span 2;
}

.sell-media__item--video video {
    object-fit: contain;
    background: #000;
}

.sell-media__remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 13px;
    color: #fff;
    background: rgb(17 17 17 / 68%);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background 250ms ease;
}

.sell-media__remove:hover {
    background: #b42318;
}

.sell-upload {
    padding: 22px;
    background: var(--grey-bg);
    border-radius: 12px;
    margin-bottom: 8px;
}

.sell-upload__count {
    float: right;
    font-family: var(--secondary-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-muted);
}

/* --- review --------------------------------------------------------- */
.sell-review__block {
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgb(17 17 17 / 8%);
}

.sell-review__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.sell-review__head h3 {
    margin: 0;
    font-family: var(--primary-font);
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
}

.sell-review__head a {
    font-family: var(--secondary-font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--accent-blue);
}

.sell-review__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px 26px;
    margin: 0;
}

.sell-review__list dt {
    font-family: var(--secondary-font);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 3px;
}

.sell-review__list dd {
    margin: 0;
    font-family: var(--primary-font);
    font-size: 15.5px;
    font-weight: 500;
    color: var(--primary-color);
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .sell-panel {
        padding: 24px 20px 22px;
        border-radius: 12px;
    }

    .sell-steps__item {
        flex-basis: 100%;
    }

    .sell-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .sell-actions .btn-style-four {
        width: 100%;
    }

    .sell-back {
        justify-content: center;
    }

    .sell-media__item--video {
        grid-column: 1 / -1;
    }
}

/* ==================================================================
   Vertical rhythm
   ==================================================================
   Carola pads every section 120px top and bottom. Stacked, that puts
   240px of empty space between one section and the next — on the home
   page, which has fourteen of them, the reader spends most of a scroll
   looking at nothing.

   These are the theme's own utility classes, overridden here rather than
   edited in global.css so the theme file stays as shipped. The scale
   below keeps sections clearly separated while roughly halving the gap,
   and tightens further as the screen narrows, where vertical space is
   worth more.
   ================================================================== */
.pt_120 {
    padding-top: 80px;
}

.pb_120 {
    padding-bottom: 80px;
}

.pb_90 {
    padding-bottom: 60px;
}

.pt_80 {
    padding-top: 60px;
}

.pb_80 {
    padding-bottom: 60px;
}

.pb_60 {
    padding-bottom: 48px;
}

/* The sections written for this project set their own padding, so they
   are brought onto the same scale. */
.cta-spotlight-section {
    padding: 72px 0;
}

.cta-band-section {
    padding: 64px 0;
}

.contact-split-section {
    padding: 80px 0;
}

.cta-split-section {
    padding: 56px 0;
}

@media (max-width: 991px) {
    .pt_120 {
        padding-top: 56px;
    }

    .pb_120 {
        padding-bottom: 56px;
    }

    .pb_90 {
        padding-bottom: 44px;
    }

    .pt_80,
    .pb_80 {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .cta-spotlight-section,
    .contact-split-section {
        padding: 52px 0;
    }

    .cta-band-section,
    .cta-split-section {
        padding: 44px 0;
    }
}

@media (max-width: 575px) {
    .pt_120 {
        padding-top: 44px;
    }

    .pb_120 {
        padding-bottom: 44px;
    }

    .pb_90 {
        padding-bottom: 36px;
    }

    .cta-spotlight-section,
    .contact-split-section,
    .cta-band-section,
    .cta-split-section {
        padding: 40px 0;
    }
}

/* ==================================================================
   Vertical rhythm, second pass
   ==================================================================
   Measured on the home page rather than guessed:

     heading to its own content   60px  (.mb_60 / .mb_50 on section titles)
     between two sections         140px (60px bottom + 80px top)

   140px of nothing between a section and the next one is still most of
   a screen on a laptop. These bring the page in again — sections stay
   clearly separated, but the reader is not scrolling past empty space to
   reach the next thing.
   ================================================================== */
.pt_120 {
    padding-top: 64px;
}

.pb_120 {
    padding-bottom: 64px;
}

.pb_90 {
    padding-bottom: 48px;
}

.pt_80,
.pb_80 {
    padding-top: 52px;
    padding-bottom: 52px;
}

/* A heading sits closer to what it introduces. These two utilities are
   what every section title uses. */
.mb_60 {
    margin-bottom: 34px;
}

.mb_50 {
    margin-bottom: 30px;
}

/* The sections written for this project, brought onto the same scale. */
.cta-spotlight-section {
    padding: 60px 0;
}

.cta-band-section {
    padding: 56px 0;
}

.contact-split-section {
    padding: 64px 0;
}

.cta-split-section {
    padding: 48px 0;
}

@media (max-width: 991px) {
    .pt_120 {
        padding-top: 48px;
    }

    .pb_120 {
        padding-bottom: 48px;
    }

    .pb_90 {
        padding-bottom: 38px;
    }

    .mb_60 {
        margin-bottom: 26px;
    }

    .mb_50 {
        margin-bottom: 24px;
    }

    .cta-spotlight-section,
    .contact-split-section {
        padding: 44px 0;
    }

    .cta-band-section,
    .cta-split-section {
        padding: 38px 0;
    }
}

@media (max-width: 575px) {
    .pt_120 {
        padding-top: 38px;
    }

    .pb_120 {
        padding-bottom: 38px;
    }

    .pb_90 {
        padding-bottom: 30px;
    }

    .cta-spotlight-section,
    .contact-split-section,
    .cta-band-section,
    .cta-split-section {
        padding: 34px 0;
    }
}

/* why-choose-us sets its own 110px on a two-class selector, so the override
   has to match that specificity or it simply loses. */
.why-chooseus-section.wcu-cards,
.why-chooseus-section.wcu-split {
    padding: 64px 0;
}

@media (max-width: 991px) {
    .why-chooseus-section.wcu-cards,
    .why-chooseus-section.wcu-split {
        padding: 44px 0;
    }
}

@media (max-width: 575px) {
    .why-chooseus-section.wcu-cards,
    .why-chooseus-section.wcu-split {
        padding: 34px 0;
    }
}

/* The about block pushes its heading down 50px with .pt_50, which is what
   put a wide gap above the "Cannata Motors" eyebrow. The class is used in
   exactly one view (InfoBlock style_1), so trimming it is safe and affects
   nothing else. */
.pt_50 {
    padding-top: 16px;
}

@media (max-width: 991px) {
    .pt_50 {
        padding-top: 8px;
    }
}

/* ==================================================================
   Section titles — the override that was losing
   ==================================================================
   global.css sets `.section-title.mb_60 { margin-bottom: 60px }` — two
   classes. A single-class `.mb_60` override, however far down the file it
   sits, never wins against that. Matching the specificity is the only
   thing that does.
   ================================================================== */
.section-title.mb_60 {
    margin-bottom: 30px;
}

.section-title.mb_50 {
    margin-bottom: 26px;
}

@media (max-width: 991px) {
    .section-title.mb_60,
    .section-title.mb_50 {
        margin-bottom: 22px;
    }
}

/* ==================================================================
   Body styles — four across, two rows, larger artwork
   ==================================================================
   The theme lays these out as a wrapping flex row, which spreads however
   many items there are across one line and leaves the artwork small. A
   four-column grid gives each car room to be seen and makes eight items
   read as a deliberate 4 x 2 block rather than a row that happened to
   wrap.
   ================================================================== */
.car-type-outer-box {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px 20px;
    justify-content: initial;
}

.car-type-item {
    min-width: 0;
}

/* The artwork, roughly tripled. style.css pins the box at 100px through
   `.home-three .car-type-item .car-image` — two classes — so the override
   has to carry the same weight or the picture overflows a box that never
   grew with it. The box is fixed and the cutout fitted inside, so a saloon
   and an SUV still sit on the same baseline. */
.car-type-item .car-image,
.home-three .car-type-item .car-image {
    /* Matches the artwork height below, so the picture never overflows a box
       that did not grow with it. */
    height: 205px;
    line-height: normal;
}

.car-type-item .car-image img,
.home-three .car-type-item .car-image img {
    max-height: 205px;
    width: 306px;
    max-width: 192%;
    object-fit: contain;
}

/* The theme caps each tile at max-width:191px. Inside a 309px grid column
   that leaves the tile hugging the left edge, so the name looked
   left-aligned even though it was centred — centred inside a box that was
   itself off to one side. Letting the tile fill its column fixes both. */
.car-type-item {
    max-width: 100%;
    padding: 20px 10px 16px;
}

.car-type-item,
.car-type-item .car-name,
.car-type-item .car-name h6 {
    text-align: center;
}

@media (max-width: 991px) {
    .car-type-outer-box {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px 16px;
    }

    .car-type-item .car-image,
    .home-three .car-type-item .car-image,
    .car-type-item .car-image img,
    .home-three .car-type-item .car-image img {
        height: 132px;
        max-height: 132px;
    }
}

@media (max-width: 575px) {
    .car-type-outer-box {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .car-type-item .car-image,
    .home-three .car-type-item .car-image,
    .car-type-item .car-image img,
    .home-three .car-type-item .car-image img {
        height: 110px;
        max-height: 110px;
    }
}

/* The Settings footer text, which no template printed until now. */
.footer_about_text {
    margin: 18px 0 22px;
    max-width: 320px;
    font-family: var(--secondary-font);
    font-size: 14.5px;
    line-height: 26px;
    color: rgb(255 255 255 / 72%);
}