/* ==========================================================================
   HOMEPAGE — modern redesign
   Namespaced under .hm so nothing here reaches the header, the footer, or the
   shared card components as they appear on /services, /vendors and the vendor
   panel. Card overrides below are all scoped inside .hm for the same reason.
   Palette: #667eea → #764ba2 brand gradient, #ff6b35 accent.
   ========================================================================== */

.hm {
    --hm-brand: #667eea;
    --hm-brand-2: #764ba2;
    --hm-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --hm-accent: #ff6b35;
    --hm-ink: #1e2a3a;
    --hm-ink-2: #46536a;
    --hm-muted: #7a8699;
    --hm-line: #e7e9f3;
    --hm-tint: #f6f7fe;
    --hm-radius: 20px;
    --hm-shadow: 0 2px 14px rgba(18, 41, 63, .06);
    --hm-shadow-lg: 0 18px 44px rgba(18, 41, 63, .13);

    display: block;
    color: var(--hm-ink);
}

.hm,
.hm *,
.hm *::before,
.hm *::after {
    box-sizing: border-box;
}

.hm-shell {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ==========================================================================
   SCROLL REVEAL
   Elements start slightly lowered and transparent; JS adds .is-in when they
   enter the viewport. Without JS (or with reduced motion) they simply show.
   ========================================================================== */

/* The hidden state is gated behind .hm-js, which an inline script in the head
   sets. If JavaScript never runs — blocked, failed to load, disabled — the
   rule below never applies and the whole page renders normally instead of
   sitting at opacity 0 forever. */
.hm-js .hm-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
                transform .6s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.hm-js .hm-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Staggered children — each step is small enough to read as one motion. */
.hm-js .hm-reveal[data-delay="1"] { transition-delay: .07s; }
.hm-js .hm-reveal[data-delay="2"] { transition-delay: .14s; }
.hm-js .hm-reveal[data-delay="3"] { transition-delay: .21s; }
.hm-js .hm-reveal[data-delay="4"] { transition-delay: .28s; }
.hm-js .hm-reveal[data-delay="5"] { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
    .hm-js .hm-reveal {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0s;
    }
}

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

.hm-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 72px 0 84px;
    background: #141c2f;
    color: #fff;
}

/* Brand wash sits over the banner photography so the palette reads as ours
   whatever the admin uploads. */
.hm-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(900px 520px at 12% -20%, rgba(102, 126, 234, .34), transparent 68%),
        radial-gradient(760px 480px at 92% 110%, rgba(118, 75, 162, .28), transparent 70%),
        /* Light vertical seat: enough to anchor the header and the trust row,
           the heavy lifting for text contrast is the left-side fade in
           home.css (.hero-overlay). */
        linear-gradient(180deg,
            rgba(14, 20, 34, .30) 0%,
            rgba(14, 20, 34, .12) 50%,
            rgba(14, 20, 34, .40) 100%);
    pointer-events: none;
}

.hm-hero > .hm-shell {
    position: relative;
    z-index: 2;
}

.hm-hero-copy {
    max-width: 44rem;
    margin-bottom: 34px;
}

.hm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
}

.hm-eyebrow i {
    color: var(--hm-accent);
}

/* The wash is lighter than it used to be so the photo shows through; these
   shadows carry the contrast on bright banners (snow, sky, sand) without
   needing to darken the whole image again. */
.hm-hero h1 {
    margin: 0 0 14px;
    font-size: clamp(2.1rem, 4.6vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -.035em;
    color: #fff;
    text-shadow: 0 1px 3px rgba(4, 8, 16, .55), 0 6px 26px rgba(4, 8, 16, .38);
}

.hm-hero-sub {
    margin: 0;
    max-width: 40rem;
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .94);
    text-shadow: 0 1px 3px rgba(4, 8, 16, .5), 0 2px 14px rgba(4, 8, 16, .32);
}

/* ---------- Search panel ---------- */
.hm-search {
    position: relative;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 26px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 26px 60px rgba(10, 16, 30, .35);
}

.hm-search-inner {
    border-radius: 18px;
    background: #fff;
    padding: 18px 18px 16px;
}

/* ---------- Business-type tabs (replaces the old dropdown) ---------- */
.hm-tabs {
    display: flex;
    gap: 8px;
    /* overflow-x:auto makes this a scroll container, which clips vertically
       too. The padding reserves room inside that clip box for the hover lift,
       the focus ring and — the tight one — the shadows: the active tab's
       `0 8px 18px` reaches 10px above the element and 26px below it. Matching
       negative margins keep the tabs aligned with the search field and the
       spacing below unchanged. */
    margin: -12px -4px -8px;
    padding: 12px 4px 28px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.hm-tabs::-webkit-scrollbar {
    display: none;
}

.hm-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid var(--hm-line);
    border-radius: 14px;
    background: #fff;
    color: var(--hm-ink-2);
    font-family: inherit;
    font-size: .93rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color .16s, color .16s, background .16s,
                box-shadow .16s, transform .16s;
}

.hm-tab i {
    font-size: .95rem;
    color: var(--hm-brand);
    transition: color .16s;
}

.hm-tab:hover {
    border-color: rgba(102, 126, 234, .45);
    color: var(--hm-brand);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(102, 126, 234, .14);
}

.hm-tab.is-active {
    border-color: transparent;
    background: var(--hm-grad);
    color: #fff;
    box-shadow: 0 8px 18px rgba(102, 126, 234, .32);
}

.hm-tab.is-active i {
    color: #fff;
}

.hm-tab:focus-visible {
    outline: 2px solid var(--hm-brand);
    outline-offset: 2px;
}

/* Error cue when the form is submitted with no type chosen — the old markup
   relied on the browser bubble, which never appeared for a hidden select. */
.hm-tabs.has-error .hm-tab {
    border-color: rgba(255, 107, 53, .55);
}

.hm-search-error {
    display: none;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--hm-accent);
}

.hm-search-error.is-shown {
    display: flex;
}

/* ---------- Query row ---------- */
.hm-search-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.hm-field {
    position: relative;
    min-width: 0;
}

.hm-field-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--hm-muted);
    font-size: .95rem;
    pointer-events: none;
    z-index: 1;
}

.hm-field input,
.hm-field select {
    width: 100%;
    min-height: 56px;
    padding: 15px 16px 15px 44px;
    border: 1px solid var(--hm-line);
    border-radius: 14px;
    background: #fff;
    color: var(--hm-ink);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color .15s, box-shadow .15s;
}

.hm-field select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 40px;
}

.hm-field-chevron {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: var(--hm-muted);
    font-size: .78rem;
    pointer-events: none;
}

.hm-field input:focus,
.hm-field select:focus {
    outline: none;
    border-color: var(--hm-brand);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, .15);
}

.hm-field select:disabled {
    background: var(--hm-tint);
    color: var(--hm-muted);
    cursor: not-allowed;
}

/* ---------- Custom category dropdown ----------
   The native <select> stays in the DOM and is what submits; this is a styled
   layer on top of it, built only when JS is available. Until then the plain
   select is shown, so the field always works. */
.hm-dd {
    position: relative;
    min-width: 0;
}

/* Once enhanced, the native control steps aside. It still submits — a
   display:none form control is excluded from the tab order, not from the
   submitted data. */
.hm-dd.is-enhanced > select {
    display: none;
}

/* The plain-field icon and chevron belong to the native control; the trigger
   draws its own, so hide the originals rather than doubling them up. */
.hm-dd.is-enhanced > .hm-field-icon,
.hm-dd.is-enhanced > .hm-field-chevron {
    display: none;
}

.hm-dd-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 15px 16px;
    border: 1px solid var(--hm-line);
    border-radius: 14px;
    background: #fff;
    color: var(--hm-ink);
    font-family: inherit;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.hm-dd-trigger:focus-visible {
    outline: none;
    border-color: var(--hm-brand);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, .15);
}

.hm-dd.is-open .hm-dd-trigger {
    border-color: var(--hm-brand);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, .15);
}

.hm-dd-ic {
    flex-shrink: 0;
    color: var(--hm-muted);
    font-size: .95rem;
}

.hm-dd-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nothing chosen yet — read as a placeholder, not as a value. */
.hm-dd-trigger.is-placeholder .hm-dd-label {
    color: var(--hm-muted);
}

.hm-dd-chevron {
    flex-shrink: 0;
    color: var(--hm-muted);
    font-size: .78rem;
    transition: transform .2s ease;
}

.hm-dd.is-open .hm-dd-chevron {
    transform: rotate(180deg);
}

.hm-dd.is-disabled .hm-dd-trigger {
    background: var(--hm-tint);
    color: var(--hm-muted);
    cursor: not-allowed;
}

.hm-dd.is-disabled .hm-dd-ic,
.hm-dd.is-disabled .hm-dd-chevron {
    opacity: .55;
}

/* ---------- Panel ---------- */
.hm-dd-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 288px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--hm-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 44px rgba(18, 41, 63, .18);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.hm-dd.is-open .hm-dd-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Panel opens upward when there is more room above than below. */
.hm-dd.is-up .hm-dd-panel {
    top: auto;
    bottom: calc(100% + 8px);
    transform: translateY(6px);
}

.hm-dd.is-up.is-open .hm-dd-panel {
    transform: none;
}

.hm-dd-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 11px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--hm-ink-2);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background .13s, color .13s;
}

.hm-dd-option-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hover and keyboard focus share one highlight so the two never disagree. */
.hm-dd-option:hover,
.hm-dd-option.is-active {
    background: var(--hm-tint);
    color: var(--hm-brand);
}

.hm-dd-option.is-selected {
    color: var(--hm-brand);
    font-weight: 700;
}

.hm-dd-check {
    flex-shrink: 0;
    font-size: .78rem;
    opacity: 0;
}

.hm-dd-option.is-selected .hm-dd-check {
    opacity: 1;
}

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

    .hm-dd-panel,
    .hm-dd-chevron,
    .hm-dd-option {
        transition: none !important;
    }
}

.hm-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 15px 30px;
    border: none;
    border-radius: 14px;
    background: var(--hm-grad);
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(102, 126, 234, .34);
    transition: opacity .16s, transform .16s, box-shadow .16s;
}

.hm-submit:hover {
    opacity: .96;
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(102, 126, 234, .4);
}

/* ---------- Trust strip ---------- */
.hm-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-top: 28px;
}

.hm-trust span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .95);
    text-shadow: 0 1px 3px rgba(4, 8, 16, .55);
}

.hm-trust i {
    color: var(--hm-accent);
    font-size: .92rem;
    text-shadow: 0 1px 3px rgba(4, 8, 16, .5);
}

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

.hm-section {
    padding: 72px 0;
    background: #fff;
}

.hm-section--tint {
    background: var(--hm-tint);
    border-top: 1px solid var(--hm-line);
    border-bottom: 1px solid var(--hm-line);
}

.hm-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
}

/* No max-width on this block — `60ch` here used to cap titles at ~518px and
   force h2 onto two lines while the row still had 700px+ free. The measure
   cap belongs on `.hm-head p` only (sections that have a subtitle). */
.hm-head-text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}

.hm-head-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--hm-brand);
}

.hm-head h2 {
    margin: 0 0 8px;
    max-width: none;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--hm-ink);
}

@media (min-width: 769px) {
    /* Wine / tours / car rows: title + “View all” — keep title on one line. */
    .hm-head:not(.hm-head--center) h2 {
        white-space: nowrap;
    }
}

.hm-head p {
    margin: 0;
    /* Readable line length — this is where the measure cap belongs. */
    max-width: 60ch;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--hm-ink-2);
}

.hm-head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hm-head--center .hm-head-text {
    margin: 0 auto;
}

.hm-viewall {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    min-height: 46px;
    padding: 12px 22px;
    border: 1px solid var(--hm-line);
    border-radius: 12px;
    background: #fff;
    color: var(--hm-brand);
    font-size: .93rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}

.hm-viewall:hover {
    border-color: rgba(102, 126, 234, .45);
    box-shadow: 0 8px 18px rgba(102, 126, 234, .15);
    transform: translateY(-1px);
}

.hm-viewall i {
    font-size: .78rem;
    transition: transform .2s ease;
}

.hm-viewall:hover i {
    transform: translateX(3px);
}

/* ==========================================================================
   CARD GRID — the shared service cards, scoped to the homepage only
   ========================================================================== */

.hm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 24px;
}

/* Homepage-only polish on the shared components. Everything is nested under
   .hm, so /services, /vendors and the vendor panel keep their own look. */
.hm .car-rental-card,
.hm .wine-tasting-card,
.hm .home-wine-ad-card,
.hm .tour-card {
    border-radius: var(--hm-radius);
    border: 1px solid var(--hm-line);
    box-shadow: var(--hm-shadow);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.hm .car-rental-card:hover,
.hm .wine-tasting-card:hover,
.hm .home-wine-ad-card:hover,
.hm .tour-card:hover {
    transform: translateY(-5px);
    border-color: rgba(102, 126, 234, .35);
    box-shadow: var(--hm-shadow-lg);
}

/* Wine Shop — lock image box to card crop (homepage only) */
.hm .wine-card-image {
    flex-shrink: 0;
    height: 180px;
    max-height: 180px;
}

.hm .wine-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 1023px) {
    .hm .wine-card-image {
        height: 170px;
        max-height: 170px;
    }
}

@media (max-width: 575px) {
    .hm .wine-card-image {
        height: 160px;
        max-height: 160px;
    }
}

/* Brand-tint the card CTAs so the page reads as one palette. */
.hm .btn-rent-now {
    background: var(--hm-grad);
    color: #fff;
    border: none;
}

.hm .car-rental-price-amount {
    color: var(--hm-brand-2);
}

.hm .car-spec-icon,
.hm .car-rental-location-icon {
    color: var(--hm-brand);
}

/* ==========================================================================
   BENEFITS  (Why choose us)
   ========================================================================== */

.hm-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.hm-benefit {
    padding: 28px 24px;
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius);
    background: #fff;
    box-shadow: var(--hm-shadow);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.hm-benefit:hover {
    transform: translateY(-4px);
    border-color: rgba(102, 126, 234, .3);
    box-shadow: var(--hm-shadow-lg);
}

.hm-benefit-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 15px;
    background: var(--hm-grad);
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 8px 18px rgba(102, 126, 234, .28);
}

.hm-benefit h3 {
    margin: 0 0 8px;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--hm-ink);
}

.hm-benefit p {
    margin: 0;
    font-size: .94rem;
    line-height: 1.6;
    color: var(--hm-muted);
}

/* ==========================================================================
   BROWSE BY CATEGORY
   ========================================================================== */

.hm-cats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.hm-cat {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 260px;
    padding: 22px;
    border-radius: var(--hm-radius);
    overflow: hidden;
    background: var(--hm-ink);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--hm-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

.hm-cat:hover {
    transform: translateY(-5px);
    box-shadow: var(--hm-shadow-lg);
}

.hm-cat-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hm-cat-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.hm-cat:hover .hm-cat-media img {
    transform: scale(1.07);
}

/* Brand-tinted scrim keeps white text legible on any photo. */
.hm-cat-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(20, 28, 47, .15) 0%,
        rgba(20, 28, 47, .62) 55%,
        rgba(76, 52, 110, .88) 100%);
}

.hm-cat-body {
    position: relative;
    z-index: 1;
}

.hm-cat-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 1rem;
}

.hm-cat h3 {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

.hm-cat p {
    margin: 0 0 12px;
    font-size: .9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
}

.hm-cat-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .88rem;
    font-weight: 700;
    color: #fff;
}

.hm-cat-cta i {
    font-size: .76rem;
    transition: transform .2s ease;
}

.hm-cat:hover .hm-cat-cta i {
    transform: translateX(3px);
}

/* ==========================================================================
   JOIN
   ========================================================================== */

.hm-join {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.hm-join-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 32px 28px;
    border-radius: var(--hm-radius);
    background: var(--hm-grad);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(102, 126, 234, .28);
    transition: transform .22s ease, box-shadow .22s ease;
}

.hm-join-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(102, 126, 234, .36);
}

/* Second card leans on the accent so the pair reads as two distinct paths. */
.hm-join-card--guide {
    background: linear-gradient(135deg, #ff6b35 0%, #f0526b 100%);
    box-shadow: 0 14px 34px rgba(255, 107, 53, .3);
}

.hm-join-card--guide:hover {
    box-shadow: 0 20px 44px rgba(255, 107, 53, .38);
}

.hm-join-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(420px 200px at 100% 0%, rgba(255, 255, 255, .2), transparent 70%);
    pointer-events: none;
}

.hm-join-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .2);
    font-size: 1.2rem;
}

.hm-join-body {
    position: relative;
    z-index: 1;
}

.hm-join-body h3 {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

.hm-join-body p {
    margin: 0 0 14px;
    font-size: .96rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
}

.hm-join-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
}

.hm-join-cta i {
    font-size: .78rem;
    transition: transform .2s ease;
}

.hm-join-card:hover .hm-join-cta i {
    transform: translateX(4px);
}

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

.hm-cta {
    position: relative;
    overflow: hidden;
    padding: 76px 0;
    background: var(--hm-grad);
    color: #fff;
    text-align: center;
}

.hm-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(680px 300px at 8% 0%, rgba(255, 255, 255, .2), transparent 70%),
        radial-gradient(560px 260px at 96% 100%, rgba(255, 107, 53, .3), transparent 70%);
    pointer-events: none;
}

.hm-cta > .hm-shell {
    position: relative;
    z-index: 1;
}

.hm-cta h2 {
    margin: 0 0 12px;
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -.028em;
    color: #fff;
}

.hm-cta p {
    margin: 0 auto 28px;
    max-width: 52ch;
    font-size: 1.06rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .93);
}

.hm-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.hm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px 30px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s, box-shadow .16s, background .16s, border-color .16s;
}

.hm-btn-light {
    background: #fff;
    color: var(--hm-brand-2);
    box-shadow: 0 12px 28px rgba(10, 16, 30, .22);
}

.hm-btn-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(10, 16, 30, .28);
}

.hm-btn-ghost {
    border-color: rgba(255, 255, 255, .55);
    background: transparent;
    color: #fff;
}

.hm-btn-ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .14);
    transform: translateY(-2px);
}

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

@media (min-width: 700px) {
    .hm-benefits { grid-template-columns: repeat(2, 1fr); }
    .hm-cats     { grid-template-columns: repeat(2, 1fr); }
    .hm-join     { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .hm-search-row {
        grid-template-columns: 1.5fr 1fr auto;
        align-items: center;
    }
}

@media (min-width: 1100px) {
    .hm-benefits { grid-template-columns: repeat(4, 1fr); }
    .hm-cats     { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .hm-shell {
        padding: 0 16px;
    }

    .hm-hero {
        padding: 44px 0 56px;
    }

    .hm-hero-copy {
        margin-bottom: 26px;
    }

    .hm-search {
        padding: 8px;
        border-radius: 22px;
    }

    .hm-search-inner {
        padding: 14px 14px 12px;
    }

    .hm-section {
        padding: 48px 0;
    }

    .hm-head {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Wine / tours / car — long EN titles; scale down so one line fits ~340px content */
    .hm-head:not(.hm-head--center) h2 {
        font-size: clamp(1.05rem, 4.6vw, 1.38rem);
        line-height: 1.22;
        letter-spacing: -.018em;
        text-wrap: balance;
    }

    .hm-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 18px;
    }

    .hm-cta {
        padding: 52px 0;
    }

    .hm-cta-actions .hm-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .hm-grid {
        grid-template-columns: 1fr;
    }

    .hm-head:not(.hm-head--center) h2 {
        font-size: clamp(1rem, 4.9vw, 1.22rem);
    }
}

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

    .hm-tab,
    .hm-benefit,
    .hm-cat,
    .hm-cat-media img,
    .hm-join-card,
    .hm-btn,
    .hm-viewall,
    .hm .car-rental-card,
    .hm .wine-tasting-card,
    .hm .tour-card {
        transition: none !important;
    }

    .hm-benefit:hover,
    .hm-cat:hover,
    .hm-join-card:hover,
    .hm-btn:hover,
    .hm-viewall:hover,
    .hm .car-rental-card:hover,
    .hm .wine-tasting-card:hover,
    .hm .tour-card:hover {
        transform: none;
    }

    .hm-cat:hover .hm-cat-media img {
        transform: none;
    }
}