/*
 * Homepage V2 — extracted from boatcrowd-homepage.html mockup.
 * Scoped to .home-v2 wrapper so it does not leak onto V1 pages.
 */

.home-v2 {
    --hv2-navy: #0F1B2D;
    --hv2-navy-light: #1A2B42;
    --hv2-navy-mid: #162336;
    --hv2-accent: #E8513D;
    --hv2-accent-hover: #D4432F;
    --hv2-blue: #1A6FB5;
    --hv2-blue-light: #2180CC;
    --hv2-sand: #F8F7F4;
    --hv2-sand-dark: #EFEDE8;
    --hv2-white: #FFF;
    --hv2-charcoal: #333;
    --hv2-gray-50: #F9FAFB;
    --hv2-gray-100: #F3F4F6;
    --hv2-gray-200: #E5E7EB;
    --hv2-gray-300: #D1D5DB;
    --hv2-gray-400: #9CA3AF;
    --hv2-gray-500: #6B7280;
    --hv2-gray-600: #4B5563;
    --hv2-gray-700: #374151;
    --hv2-green: #16A34A;
    --hv2-amber: #F59E0B;
    --hv2-radius: 8px;
    --hv2-radius-lg: 12px;
    --hv2-radius-xl: 16px;
    --hv2-shadow: 0 1px 3px rgba(0,0,0,.1);
    --hv2-shadow-md: 0 4px 16px rgba(0,0,0,.12);
    --hv2-shadow-lg: 0 12px 40px rgba(0,0,0,.15);
    --hv2-shadow-xl: 0 24px 56px rgba(0,0,0,.2);
    --hv2-max-w: 1200px;
    --hv2-transition: 200ms ease;
    font-family: 'Poppins', system-ui, sans-serif;
    color: var(--hv2-charcoal);
    background: var(--hv2-white);
    -webkit-font-smoothing: antialiased;
}
.home-v2 *,
.home-v2 *::before,
.home-v2 *::after { box-sizing: border-box; }
.home-v2 img { display: block; max-width: 100%; }
.home-v2 a { text-decoration: none; color: inherit; }
.home-v2 button { font-family: inherit; cursor: pointer; border: none; background: none; }
.home-v2 .hv2-section { max-width: var(--hv2-max-w); margin: 0 auto; padding: 0 24px; }

/* ── HERO ── */
.hv2-hero { position: relative; height: 100vh; min-height: 640px; max-height: 900px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* `.hv2-hero-bg` carries the hero background as a CSS `image-set()` so the
 * browser picks the right DPR variant — see `_hero.php` for the per-request
 * registerCss() call that injects the actual `background-image` rule. The
 * `background:` here is the placeholder colour shown until the image paints. */
.hv2-hero-bg { position: absolute; inset: 0; z-index: 0; background: var(--hv2-gray-200); }
.hv2-hero-bg::after { display: none; }
/* max-width is wider than the template's 680px so "Luxury Yachts for Charter"
 * fits on one line at this project's root font-size. The template assumes
 * `html{font-size:15px}`; this project's global root is larger (~16px), which
 * pushes the second line past 680px and wraps "Charter" onto a third line. */
.hv2-hero-content { position: relative; z-index: 2; text-align: center; max-width: 800px; padding: 0 24px; }
.hv2-hero-tag { display: inline-block; padding: 6px 18px; border-radius: 24px; background: rgba(15,27,45,.06); color: var(--hv2-navy); font-size: .7rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 20px; border: 1px solid rgba(15,27,45,.1); }
.hv2-hero h1 { font-size: 3rem; font-weight: 800; color: var(--hv2-navy); line-height: 1.15; margin: 0 0 14px; }
.hv2-hero h1 span { color: var(--hv2-accent); }
.hv2-hero-sub { font-size: 1rem; color: var(--hv2-gray-500); font-weight: 400; max-width: 550px; margin: 0 auto 40px; line-height: 1.65; }

/* hero stats strip */
.hv2-hero-stats { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; background: var(--hv2-navy); border-top: 1px solid rgba(255,255,255,.08); }
.hv2-hero-stats-inner { max-width: var(--hv2-max-w); margin: 0 auto; padding: 16px 24px; display: flex; justify-content: center; gap: 64px; }
.hv2-hero-stat { text-align: center; display: flex; align-items: center; gap: 10px; }
.hv2-hero-stat-num { font-size: 1.35rem; font-weight: 700; color: var(--hv2-white); }
.hv2-hero-stat-label { font-size: .72rem; color: rgba(255,255,255,.5); font-weight: 400; text-align: left; line-height: 1.3; }
.hv2-hero-stat-divider { width: 1px; height: 32px; background: rgba(255,255,255,.12); }

/* hero search bar (single-field).
 *
 * Both the "SEARCH" label and the input placeholder are centered. The label
 * is a <span> and centers via `text-align: center` inherited from
 * .hv2-hero-content; the <input> placeholder does NOT inherit text-align
 * (browser-default is left-aligned regardless), so the alignment is set
 * explicitly on the input itself.
 *
 * .hv2-search-btn is scoped under .home-v2 so it beats the global
 * `.home-v2 button { background: none }` reset on specificity (2-class > 1-class).
 * Without that, the accent-orange background loses to the reset.
 */
.hv2-search-bar { max-width: 580px; margin: 0 auto; background: var(--hv2-white); border-radius: var(--hv2-radius-xl); box-shadow: var(--hv2-shadow-lg); border: 1px solid var(--hv2-gray-200); display: flex; align-items: center; overflow: hidden; }
.hv2-search-bar form { display: flex; align-items: center; flex: 1; width: 100%; }
.hv2-search-field { flex: 1; padding: 18px 24px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; text-align: center; }
.hv2-search-field-label { font-size: .62rem; font-weight: 700; color: var(--hv2-gray-400); text-transform: uppercase; letter-spacing: .7px; }
.hv2-search-input { font-size: 16px; color: var(--hv2-navy); font-weight: 400; border: 0; outline: 0; background: transparent; width: 100%; padding: 0; font-family: 'Poppins', system-ui, sans-serif; text-align: center; }
.hv2-search-input::placeholder { color: var(--hv2-gray-400); font-weight: 400; }
.home-v2 .hv2-search-btn { padding: 14px 32px; margin: 8px 10px 8px 0; background: var(--hv2-accent); color: var(--hv2-white); border-radius: var(--hv2-radius); font-size: .85rem; font-weight: 600; transition: all var(--hv2-transition); white-space: nowrap; flex-shrink: 0; box-shadow: 0 4px 12px rgba(232,81,61,.3); border: none; }
.home-v2 .hv2-search-btn:hover { background: var(--hv2-accent-hover); box-shadow: 0 6px 20px rgba(232,81,61,.4); transform: translateY(-1px); }

/* ── SECTION HEADER ── */
.hv2-section-header { text-align: center; margin-bottom: 48px; }
.hv2-section-eyebrow { display: inline-block; font-size: .68rem; font-weight: 700; color: var(--hv2-blue); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; }
.hv2-section-header h2 { font-size: 1.85rem; font-weight: 700; color: var(--hv2-navy); line-height: 1.2; margin: 0; }
.hv2-section-header p { font-size: .88rem; color: var(--hv2-gray-500); margin-top: 8px; max-width: 620px; margin-left: auto; margin-right: auto; line-height: 1.6;  padding-left: 5px; padding-right: 5px  }

/* ── DESTINATIONS ── */
.hv2-destinations { padding: 80px 0; }
.hv2-region-block { margin-bottom: 40px; }
.hv2-region-block:last-child { margin-bottom: 0; }
.hv2-region-label { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hv2-region-name { font-size: .78rem; font-weight: 700; color: var(--hv2-navy); text-transform: uppercase; letter-spacing: .8px; }
.hv2-region-line { flex: 1; height: 1px; background: var(--hv2-gray-200); }
.hv2-dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hv2-dest-grid--8 { grid-template-columns: repeat(4, 1fr); }
/* Scrollable single-row variant — used by 4-card region groups (template
 * mockup). `min-width: calc(25% - 9px)` shows four cards across at desktop
 * widths while still allowing horizontal overflow on narrower viewports. */
.hv2-dest-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
.hv2-dest-scroll-wrap::-webkit-scrollbar { display: none; }
.hv2-dest-scroll { display: flex; gap: 12px; }
.hv2-dest-scroll .hv2-dest-card { flex: 0 0 calc(25% - 9px); max-width: calc(25% - 9px); }
.hv2-dest-card { position: relative; border-radius: var(--hv2-radius-lg); overflow: hidden; aspect-ratio: 3/2; cursor: pointer; background: var(--hv2-gray-200); transition: all .3s ease; display: block; }
.hv2-dest-card img { width: 100%; height: 100%; object-fit: cover; }
.hv2-dest-card:hover { box-shadow: var(--hv2-shadow-md); transform: translateY(-2px); }
.hv2-dest-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,27,45,.5) 0%, rgba(15,27,45,.05) 50%); transition: background .3s; pointer-events: none; }
.hv2-dest-card:hover::after { background: linear-gradient(0deg, rgba(15,27,45,.65) 0%, rgba(15,27,45,.1) 60%); }
.hv2-dest-name { position: absolute; bottom: 14px; left: 16px; color: var(--hv2-white); font-size: .82rem; font-weight: 600; z-index: 1; text-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* ── YACHT TYPES ── */
.hv2-yacht-types { padding: 80px 0; background: var(--hv2-navy); }
.hv2-yacht-types .hv2-section-eyebrow { color: rgba(255,255,255,.4); }
.hv2-yacht-types .hv2-section-header h2 { color: var(--hv2-white); }
.hv2-yacht-types .hv2-section-header p { color: rgba(255,255,255,.5); padding-left: 5px; padding-right: 5px }
/* `.hv2-types-slider` wraps the scrollable row so prev/next arrow buttons can
 * sit absolutely positioned against the row. The scroll-wrap keeps its native
 * overflow scrolling so swipe / track-pad still work alongside the arrows.
 * When the type list has <= 4 items the slider class `--has-arrows` is
 * omitted and the arrow buttons are not rendered at all (server-side gate). */
.hv2-types-slider { position: relative; max-width: var(--hv2-max-w); margin: 0 auto; padding: 0 24px; }
.hv2-types-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hv2-types-scroll-wrap::-webkit-scrollbar { display: none; }
.hv2-types-grid { display: flex; gap: 16px; }

.hv2-types-arrow {
    position: absolute;
    top: calc(50% - 22px);
    z-index: 5;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--hv2-white);
    border: 1px solid var(--hv2-gray-200);
    color: var(--hv2-navy);
    cursor: pointer;
    box-shadow: var(--hv2-shadow-md);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--hv2-transition), color var(--hv2-transition), opacity var(--hv2-transition);
    padding: 0;
}
.hv2-types-arrow:hover { background: var(--hv2-accent); color: var(--hv2-white); border-color: var(--hv2-accent); }
.hv2-types-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hv2-types-arrow--prev { left: 4px; }
.hv2-types-arrow--next { right: 4px; }
.hv2-types-arrow.is-disabled { opacity: .35; pointer-events: none; }
.hv2-types-arrow.is-hidden    { display: none; }
/* `width` (not `min-width`) is the cap — `min-width: 25%` left the card free
 * to grow up to the intrinsic image size (≈1280px), blowing the layout out.
 * `flex: 0 0 ...` locks the card at exactly the column width regardless of
 * how big the source image is. */
.hv2-type-card { flex: 0 0 calc(25% - 12px); max-width: calc(25% - 12px); background: var(--hv2-navy-mid); border-radius: var(--hv2-radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.06); transition: all .3s ease; cursor: pointer; }
.hv2-type-card:hover { border-color: rgba(255,255,255,.2); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.hv2-type-card-img { aspect-ratio: 16/10; overflow: hidden; background: rgba(255,255,255,.04); }
.hv2-type-card-img img { width: 100%; height: 100%; object-fit: cover; }
.hv2-type-card-body { padding: 16px 18px; }
.hv2-type-card-name { font-size: .88rem; font-weight: 700; color: var(--hv2-white); }
.hv2-type-card-desc { font-size: .65rem; color: rgba(255,255,255,.35); margin-top: 4px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv2-type-card-link { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; color: var(--hv2-accent); margin-top: 10px; transition: all var(--hv2-transition); }
.hv2-type-card:hover .hv2-type-card-link { gap: 8px; }
.hv2-type-card-link svg { width: 12px; height: 12px; fill: none; stroke: var(--hv2-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--hv2-transition); }

/* ── SEASONAL / WHERE TO CHARTER ──
 * Horizontal scrollable strip. Desktop cards size to a quarter of the row
 * (calc(25% - 12px), gap 16px) so they match the yacht-type cards, then
 * overflow horizontally so the section can carry 8–12+ seasonal picks.
 */
.hv2-seasonal { padding: 80px 0; background: var(--hv2-sand); }
.hv2-seasonal-slider { position: relative; max-width: var(--hv2-max-w); margin: 0 auto; }
.hv2-seasonal-scroll-wrap { padding: 0 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hv2-seasonal-scroll-wrap::-webkit-scrollbar { display: none; }
.hv2-seasonal-arrow {
    position: absolute;
    top: calc(50% - 22px);
    z-index: 5;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--hv2-white);
    border: 1px solid var(--hv2-gray-200);
    color: var(--hv2-navy);
    cursor: pointer;
    box-shadow: var(--hv2-shadow-md);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--hv2-transition), color var(--hv2-transition), opacity var(--hv2-transition);
    padding: 0;
}
.hv2-seasonal-arrow:hover { background: var(--hv2-accent); color: var(--hv2-white); border-color: var(--hv2-accent); }
.hv2-seasonal-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hv2-seasonal-arrow--prev { left: 4px; }
.hv2-seasonal-arrow--next { right: 4px; }
.hv2-seasonal-arrow.is-disabled { opacity: .35; pointer-events: none; }
.hv2-seasonal-arrow.is-hidden    { display: none; }
.hv2-seasonal-grid { display: flex; gap: 16px; padding-bottom: 4px; }
.hv2-seasonal-card { flex: 0 0 calc(25% - 12px); max-width: calc(25% - 12px); border-radius: var(--hv2-radius-lg); overflow: hidden; border: 1px solid var(--hv2-gray-200); cursor: pointer; background: var(--hv2-white); transition: all .3s ease; display: block; }
.hv2-seasonal-card:hover { border-color: var(--hv2-gray-300); transform: translateY(-3px); box-shadow: var(--hv2-shadow-md); }
.hv2-seasonal-card-img { aspect-ratio: 3/2; overflow: hidden; background: var(--hv2-gray-200); }
.hv2-seasonal-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hv2-seasonal-info { padding: 14px 16px; }
.hv2-seasonal-dest { font-size: .92rem; font-weight: 700; line-height: 1.2; color: var(--hv2-navy); }
.hv2-seasonal-season { font-size: .6rem; font-weight: 700; color: var(--hv2-accent); margin-top: 6px; text-transform: uppercase; letter-spacing: .7px; }
.hv2-seasonal-desc { font-size: .68rem; font-weight: 400; color: var(--hv2-gray-500); margin-top: 6px; line-height: 1.5; }
.hv2-seasonal-scroll-hint { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; font-size: .66rem; color: var(--hv2-gray-500); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.hv2-seasonal-scroll-hint svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── POPULAR YACHTS ── */
.hv2-popular { padding: 80px 0; }
.hv2-popular-slider { position: relative; }
.hv2-yachts-scroll { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hv2-yachts-scroll::-webkit-scrollbar { display: none; }
.hv2-popular-arrow {
    position: absolute;
    top: calc(50% - 22px);
    z-index: 5;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--hv2-white);
    border: 1px solid var(--hv2-gray-200);
    color: var(--hv2-navy);
    cursor: pointer;
    box-shadow: var(--hv2-shadow-md);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--hv2-transition), color var(--hv2-transition), opacity var(--hv2-transition);
    padding: 0;
}
.hv2-popular-arrow:hover { background: var(--hv2-accent); color: var(--hv2-white); border-color: var(--hv2-accent); }
.hv2-popular-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hv2-popular-arrow--prev { left: -8px; }
.hv2-popular-arrow--next { right: -8px; }
.hv2-popular-arrow.is-disabled { opacity: .35; pointer-events: none; }
.hv2-popular-arrow.is-hidden    { display: none; }
.hv2-yacht-card { min-width: 290px; max-width: 290px; scroll-snap-align: start; background: var(--hv2-white); border-radius: var(--hv2-radius-lg); overflow: hidden; border: 1px solid var(--hv2-gray-200); transition: all .25s; flex-shrink: 0; display: block; color: inherit; }
.hv2-yacht-card:hover { box-shadow: var(--hv2-shadow-lg); transform: translateY(-3px); border-color: var(--hv2-gray-300); }
.hv2-yacht-card-img { aspect-ratio: 16/10; overflow: hidden; position: relative; background: var(--hv2-gray-100); }
.hv2-yacht-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.hv2-yacht-card:hover .hv2-yacht-card-img img { transform: scale(1.04); }
.hv2-yacht-badge { position: absolute; bottom: 10px; left: 10px; padding: 4px 10px; border-radius: 4px; font-size: .6rem; font-weight: 600; color: var(--hv2-white); background: var(--hv2-blue); }
.hv2-yacht-badge + .hv2-yacht-badge { left: auto; right: 10px; background: var(--hv2-amber); }
.hv2-yacht-card-body { padding: 14px 16px; }
.hv2-yacht-card-name { font-size: .88rem; font-weight: 700; color: var(--hv2-navy); text-transform: uppercase; letter-spacing: .3px; }
.hv2-yacht-card-price { font-size: 1rem; font-weight: 700; color: var(--hv2-accent); margin-top: 6px; }
.hv2-yacht-card-price span { font-size: .72rem; font-weight: 400; color: var(--hv2-gray-400); }
.hv2-yacht-card-specs { font-size: .7rem; color: var(--hv2-gray-400); margin-top: 5px; }
/* Scoped under .home-v2 so the 2-class specificity beats
 * `.home-v2 button { border: none }` — otherwise the outline disappears. */
.home-v2 .hv2-discover-btn { display: inline-block; margin: 36px auto 0; padding: 14px 40px; border: 2px solid var(--hv2-navy); border-radius: var(--hv2-radius); font-size: .85rem; font-weight: 600; color: var(--hv2-navy); background: none; transition: all var(--hv2-transition); }
.home-v2 .hv2-discover-btn:hover { background: var(--hv2-navy); color: var(--hv2-white); }
.hv2-popular-cta-wrap { text-align: center; }

/* ── ABOUT / USPs ── */
.hv2-about { padding: 80px 0; background: var(--hv2-sand); color: var(--hv2-charcoal); }
.hv2-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hv2-about-text .hv2-section-eyebrow { color: var(--hv2-blue); }
.hv2-about-text h2 { font-size: 1.7rem; font-weight: 700; color: var(--hv2-navy); margin: 8px 0 16px; }
.hv2-about-text p { font-size: .88rem; color: var(--hv2-gray-600); line-height: 1.75; margin-bottom: 16px; }
.hv2-about-img { border-radius: var(--hv2-radius-xl); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--hv2-shadow-lg); background: var(--hv2-gray-200); }
.hv2-about-img img { width: 100%; height: 100%; object-fit: cover; }
.hv2-usps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.hv2-usp { padding: 28px; border-radius: var(--hv2-radius-lg); background: var(--hv2-white); border: 1px solid var(--hv2-gray-200); transition: all .25s; }
.hv2-usp:hover { border-color: var(--hv2-gray-300); transform: translateY(-2px); box-shadow: var(--hv2-shadow-md); }
.hv2-usp-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(26,111,181,.08); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.hv2-usp-icon svg { width: 18px; height: 18px; stroke: var(--hv2-blue); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hv2-usp-title { font-size: .88rem; font-weight: 700; color: var(--hv2-navy); margin-bottom: 6px; }
.hv2-usp-desc { font-size: .76rem; color: var(--hv2-gray-500); line-height: 1.65; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .home-v2 .hv2-hero { min-height: 560px; }
    .home-v2 .hv2-hero h1 { font-size: 2.2rem; }
    /* 2-col grid so the four stats line up in a tidy 2×2 instead of wrapping
     * unevenly — their differing widths made flex-wrap + center look ragged. */
    .hv2-hero-stats-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 14px 16px; }
    .hv2-hero-stat { justify-content: center; }
    .hv2-hero-stat-divider { display: none; }
    /* align-items: stretch overrides the base `align-items: center`. In the
     * column layout center would shrink each child to its content width, so
     * the field collapsed to the <input>'s default ~20-char intrinsic size
     * and clipped the placeholder ("…yacht name,|"). Stretch makes the field
     * span the full bar width so the whole placeholder shows. */
    .hv2-search-bar { flex-direction: column; align-items: stretch; border-radius: var(--hv2-radius-lg); }
    .hv2-search-field { padding: 8px 18px; width: 100%; }
    /* Matches the hero subtitle (.88rem) for visual parity. Tradeoff: <16px
     * makes iOS Safari zoom the page in when the field is focused. */
    .hv2-search-input { font-size: .88rem; }
    /* Scoped under .home-v2 so it matches the base `.home-v2 .hv2-search-btn`
     * specificity — an unscoped `.hv2-search-btn` here loses to it and the
     * mobile margin/padding/radius silently never apply. */
    .home-v2 .hv2-search-btn { margin: 0; border-radius: 0 0 var(--hv2-radius-lg) var(--hv2-radius-lg); width: 100%; padding: 5px; }
    .hv2-dest-grid, .hv2-dest-grid--8 { grid-template-columns: repeat(2, 1fr); }
    .hv2-dest-scroll .hv2-dest-card { flex: 0 0 calc(50% - 6px); max-width: calc(50% - 6px); }
    .hv2-type-card { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); }
    .hv2-seasonal-card { min-width: 170px; max-width: 170px; }
    .hv2-about-grid { grid-template-columns: 1fr; gap: 32px; }
    .hv2-usps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .home-v2 .hv2-hero { min-height: 520px; }
    .home-v2 .hv2-hero h1 { font-size: 1.7rem; }
    .hv2-hero-sub { font-size: .88rem; }
    .hv2-hero-content { padding: 0 16px; }
    .hv2-section-header h2 { font-size: 1.3rem; }
    .hv2-dest-grid, .hv2-dest-grid--8 { grid-template-columns: 1fr 1fr; }
    .hv2-dest-scroll .hv2-dest-card { flex: 0 0 calc(50% - 6px); max-width: calc(50% - 6px); }
    .hv2-type-card { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); }
    .hv2-seasonal-card { min-width: 160px; max-width: 160px; }
    .hv2-usps { grid-template-columns: 1fr; }
}