/* Home hub (inc/home_hub.php, inc/home_hub_help.php). The language of About us and the fleet pages:
   Bubblegum titles, Cabin copy, white cards with the 4px grey line, orange accent. Mobile first. */

.hh {
    --hh-ink: #14272c;
    --hh-muted: #5f686b;
    --hh-line: #c7d3d8;
    --hh-cream: #f4f1ea;
    --hh-soft: #f3f6f7;
    --hh-orange: #f37720;
    --hh-orange-dark: #d9650f;
    --hh-blue: #206c83;
    --hh-blue-soft: #e3f3f6;
    position: relative;
    z-index: 1;
    background: #fffefb;
    color: var(--hh-ink);
    font-family: "Cabin", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}
.hh * { box-sizing: border-box; }
.hh .container { max-width: 1400px; }
.hh ul { margin: 0; padding: 0; list-style: none; }
.hh h2, .hh h3, .hh p, .hh dl, .hh dd { margin: 0; }
.hh h2 { text-wrap: balance; font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: 32px; line-height: 1.1; color: var(--hh-ink); }
.hh a, .hh a:visited { color: inherit; text-decoration: none; } /* :visited too, or the links the user has already opened turn blue */
.hh svg { display: block; }
.hh-section { padding: 48px 0; }
.hh-cats { padding-top: 56px; }
.hh-head { max-width: 640px; margin: 0 auto 28px; text-align: center; }
.hh-head--left { margin-left: 0; text-align: left; }
/* two sentences, one per line whatever the language, across the full width of the layout */
.hh-head.hh-head--left { max-width: none; }
.hh-head-lines span { display: block; }
.hh-head p { margin-top: 8px; font-size: 18px; color: var(--hh-muted); }
.hh-kicker { display: inline-block; margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hh-orange-dark); }

/* links and buttons */
.hh-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--hh-orange-dark); }
.hh-link svg { width: 18px; height: 18px; transition: transform .2s; }
.hh-link:hover svg, .hh-btn:hover svg { transform: translateX(3px); }
.hh-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; border-radius: 50px; background: var(--hh-orange); color: #fff !important;
    font-size: 18px; font-weight: 600; line-height: 1.3; transition: background .2s;
}
.hh-btn svg { width: 18px; height: 18px; transition: transform .2s; }
.hh-btn:hover { background: var(--hh-orange-dark); }
.hh-btn--small { padding: 9px 20px; font-size: 16px; }
.hh a:focus-visible { outline: 3px solid var(--hh-orange-dark); outline-offset: 3px; border-radius: 12px; }

/* cards: white, grey line, round corners; the orange ring on hover is the shared .hh-ring (end of file) */
/* columns are minmax(0, 1fr), not 1fr: Safari keeps a column's minimum at the width its card had before a resize, so turning an iPad
   from portrait to landscape left four columns at the two-column width (page wider than the screen, ENR-4) */
.hh-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.hh-card {
    position: relative; display: flex; flex-direction: column; height: 100%;
    padding: 14px 14px 18px; border: 3px solid var(--hh-line); border-radius: 30px; background: #fff;
}
.hh-card-img { position: relative; display: block; aspect-ratio: 4 / 3; margin-bottom: 14px; border-radius: 18px; overflow: hidden; background: #e8eef0; }
.hh-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hh-card-name { color: var(--hh-ink); padding: 0 8px; font-family: "Bubblegum Sans", cursive; font-size: 26px; line-height: 1.1; }
/* CAR-5: the name is the card's only link and its ::before covers the whole card */
.hh .hh-card-link::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hh .hh-card-link:focus-visible { outline: none; }
.hh-card:has(.hh-card-link:focus-visible) { outline: 3px solid var(--hh-orange-dark); outline-offset: 3px; }
.hh-card-for { margin-top: 6px; padding: 0 8px; font-size: 15px; line-height: 1.4; color: var(--hh-muted); }
.hh-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 14px 8px 0; }
.hh-from { font-size: 14px; color: var(--hh-muted); }
.hh-from b { font-size: 22px; font-weight: 700; color: var(--hh-ink); }
.hh-go { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: var(--hh-orange); color: #fff; }
.hh-go svg { width: 18px; height: 18px; }
.hh-badge { position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 50px; background: var(--hh-ink); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; }

/* needs: lighter than the category cards on purpose (cream tiles, no photo, an icon) */
.hh-needs { background: var(--hh-cream); border-radius: 40px; }
.hh-needs-list { display: grid; gap: 12px; grid-template-columns: 1fr; }
.hh-need { display: flex; gap: 14px; height: 100%; padding: 16px; border-radius: 20px; background: #fff; border: 2px solid transparent; transition: border-color .2s, transform .2s; }
.hh-need-ico { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; background: var(--hh-blue-soft); color: var(--hh-blue); }
.hh-need-ico svg { width: 26px; height: 26px; }
.hh-need-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hh-need-name { font-size: 18px; font-weight: 700; }
.hh-need-text { font-size: 15px; line-height: 1.35; color: var(--hh-muted); }
.hh-need-meta { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--hh-blue); }

/* places: the island's real outline (Natural Earth, public domain) with its main glaciers; the interactive map is at the end of the file */
.hh-map-sea { fill: #94d6f2; }
.hh-map-land { fill: #e4d9c0; stroke: #c6b690; stroke-width: 2.5; stroke-linejoin: round; }
.hh-map-ice { fill: url(#hhIce); stroke: #b9d6e0; stroke-width: 1.2; stroke-linejoin: round; }
.hh-map-ice-label { fill: #5b8a9a; font: italic 600 8.5px "Cabin", sans-serif; letter-spacing: .02em; }
.hh-map-city { fill: #6b6254; }
.hh-map-label { fill: #6b6254; font: 600 10px "Cabin", sans-serif; }
.hh-map-road { fill: none; stroke: #a89a79; stroke-width: 4; stroke-dasharray: 2 9; stroke-linecap: round; }

/* trust */
/* the «Why Iceland?» band above ends 64px into this section (its negative margin, see .hhw--a) and paints over it:
   the card sits above the band, and on phones (48px of section padding) it starts 20px below the band's edge */
.hh-section.hh-trust { position: relative; z-index: 3; }
@media (max-width: 767px) { .hh-section.hh-trust { padding-top: 84px; } }
.hh-trust-grid { display: grid; gap: 28px; grid-template-columns: 1fr; padding: 28px; border: 4px solid var(--hh-line); border-radius: 40px; background: #fff; }
.hh-about p { margin-top: 10px; font-size: 18px; color: var(--hh-muted); }
.hh-stats { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 20px 0 !important; }
.hh-stats li { display: flex; flex-direction: column; }
.hh-stats b { font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: 34px; line-height: 1; color: var(--hh-orange); }
.hh-stats span { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hh-muted); }
.hh-reviews-top { margin-bottom: 14px; }
.hh-tp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.hh-tp img { display: block; height: 24px; width: auto; }
.hh-tp b { font-size: 20px; }
.hh-tp-stars { display: flex; gap: 2px; }
.hh-tp-stars svg { width: 22px; height: 22px; padding: 3px; background: #00b67a; fill: #fff; }
.hh-tp-text { font-size: 14px; color: var(--hh-muted); }
.hh-reviews-list { display: grid; gap: 12px; grid-template-columns: 1fr; }
.hh-review { padding: 16px 18px; border-radius: 20px; background: var(--hh-soft); }
.hh-review b { display: block; margin: 4px 0 2px; }
.hh-review p { font-size: 14px; line-height: 1.4; color: var(--hh-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* three lines, «Read more» opens the rest */
.hh-review.is-open p { display: block; -webkit-line-clamp: unset; overflow: visible; }
.hh-review-more { display: inline-block; margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--hh-orange-dark); text-decoration: underline; cursor: pointer; }
.hh-review-more:focus-visible { outline: 2px solid var(--hh-orange-dark); outline-offset: 2px; border-radius: 4px; }
.hh-review-who { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; }
.hh-stars { display: flex; gap: 2px; }
.hh-stars svg { width: 16px; height: 16px; fill: #00b67a; }

/* help */
.hh-help { padding-bottom: 72px; }

/* phone: the four categories as compact rows (photo left) so they do not stack four full photos */
@media (max-width: 575px) {
    .hh-grid--4 { gap: 12px; }
    .hh-grid--4 .hh-card { display: grid; grid-template-columns: 108px 1fr; grid-template-areas: "img name" "img for" "foot foot"; column-gap: 14px; align-content: start; padding: 12px; border-radius: 26px; }
    .hh-grid--4 .hh-card-img { grid-area: img; aspect-ratio: 1; margin: 0; align-self: start; }
    .hh-grid--4 .hh-card-name { grid-area: name; padding: 0; font-size: 24px; align-self: end; }
    .hh-grid--4 .hh-card-for { grid-area: for; padding: 0; font-size: 14px; }
    .hh-grid--4 .hh-card-foot { grid-area: foot; padding: 12px 2px 0; }
}
@media (min-width: 576px) {
    .hh-grid--4, .hh-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hh-needs-list { grid-template-columns: repeat(2, 1fr); }
    .hh-reviews-list { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
    .hh-section { padding: 64px 0; }
    .hh h2 { font-size: 40px; }
    .hh-trust-grid { padding: 40px; }
}
@media (min-width: 992px) {
    .hh-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
    .hh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .hh-needs { padding: 64px 0; margin: 0 24px; }
    .hh-needs-list { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .hh-trust-grid { grid-template-columns: 4fr 7fr; gap: 48px; align-items: center; }
    .hh-reviews-list { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .hh *, .hh *::before, .hh *::after { transition: none !important; }
}

/* ====== Commercial layer: the offer first, the price on every card, everything included ====== */
.hh-deal { padding: 0; background: var(--hh-orange); color: #fff; overflow: hidden; position: relative; }
.hh-deal::before, .hh-deal::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.hh-deal::before { right: -60px; top: -90px; width: 260px; height: 260px; background: #f3c13c; opacity: .9; }
.hh-deal::after { right: -92px; top: -122px; width: 324px; height: 324px; border: 5px dashed rgba(255, 255, 255, .55); background: none; }
.hh-deal-in { position: relative; z-index: 1; display: grid; gap: 14px; justify-items: start; padding: 28px 0; }
.hh-sticker {
    display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #fff; color: var(--hh-orange-dark);
    font-family: "Bubblegum Sans", cursive; font-size: 20px; line-height: 1; text-align: center; text-transform: uppercase; transform: rotate(8deg);
    box-shadow: 0 6px 0 rgba(20, 39, 44, .2);
}
/* «Rent your … up to» in lime, the offer itself in white */
.hh-deal-big { margin: 0; color: #d4f53c; font-size: 18px; font-weight: 600; line-height: 1.3; text-transform: uppercase; letter-spacing: .02em; }
.hh-deal-big b { display: block; color: #fff; font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: clamp(34px, 9vw, 56px); line-height: 1.02; letter-spacing: 0; }
.hh-deal-small { margin: 6px 0 0; font-size: 16px; opacity: .95; }

/* «Pick up where you left off» (inc/home_resume.php, filled in by assets/js/interest.js): a dark bar on the foot
   of the hero. Outside .hh, so it carries its own colours. The dock is sticky and zero-height: the bar sits on
   the hero's bottom edge and never over the offer band below it. */
.hh-resume-dock {
    --hh-ink: #14272c;
    --hh-orange: #f37720;
    --hh-orange-dark: #d9650f;
    --hh-blue: #206c83;
    --hh-blue-soft: #e3f3f6;
    position: sticky; bottom: 0; z-index: 1040; height: 0;
}
.hh-resume {
    position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 16px; width: min(740px, calc(100% - 24px)); padding: 12px 58px 12px 12px;
    border-radius: 26px; background: var(--hh-ink); color: #fff; font-family: "Cabin", sans-serif;
    box-shadow: 0 20px 44px rgba(20, 39, 44, .35);
    transform: translate(-50%, 0);
}
.hh-resume[hidden] { display: none; }
/* in a moment after the page, once the hero has settled (interest.js sets data-in) */
.hh-resume:not([data-in]) { opacity: 0; transform: translate(-50%, 24px); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
    .hh-resume { transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
}
.hh-resume-stage { display: grid; place-items: center; width: 104px; height: 76px; flex: none; border-radius: 16px; background: var(--hh-blue-soft); }
.hh-resume-stage[hidden] { display: none; }
.hh-resume-car { display: block; width: 98px; height: 66px; object-fit: contain; }
.hh-resume-text { display: grid; flex: 1; min-width: 0; margin: 0; line-height: 1.2; }
.hh-resume-kicker { margin-bottom: 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ffb27a; }
.hh-resume-text b { font-size: 21px; font-weight: 700; }
.hh-resume-meta { font-size: 16px; color: #c9d6da; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-resume-go, .hh-resume-go:visited {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
    padding: 13px 26px; border-radius: 50px; background: var(--hh-orange); color: #fff;
    font-size: 18px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: background .2s;
}
.hh-resume-go svg { transition: transform .2s; }
.hh-resume-close {
    position: absolute; top: 50%; right: 10px; display: grid; place-items: center; width: 34px; height: 34px;
    padding: 0; border: 0; border-radius: 50%; background: transparent; color: #c9d6da; cursor: pointer; transform: translateY(-50%);
}
.hh-resume-go:focus-visible, .hh-resume-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (hover: hover) {
    .hh-resume-go:hover { background: var(--hh-orange-dark); color: #fff; text-decoration: none; }
    .hh-resume-go:hover svg { transform: translateX(3px); }
    .hh-resume-close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
}
/* phone: one line each, the button a round arrow */
@media (max-width: 575px) {
    .hh-resume { gap: 10px; width: calc(100% - 20px); padding: 10px 38px 10px 10px; border-radius: 20px; }
    .hh-resume-stage { width: 72px; height: 60px; }
    .hh-resume-car { width: 68px; height: 50px; }
    .hh-resume-kicker, .hh-resume-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hh-resume-kicker { font-size: 11px; letter-spacing: .06em; }
    .hh-resume-text b { font-size: 17px; }
    .hh-resume-meta { font-size: 14px; }
    .hh-resume-go { width: 46px; height: 46px; padding: 0; }
    .hh-resume-go span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .hh-resume-close { right: 2px; width: 32px; height: 32px; }
}

.hh-incl { background: var(--hh-cream); color: var(--hh-ink); }
.hh-incl-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 16px 0; }
.hh-incl-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; line-height: 1.2; }
/* padding on both classes: a general `ul { padding: 0 }` of style.css was flattening the strip to 20px */
.hh-incl .hh-incl-list { padding: 18px 0; }
@media (min-width: 992px) { .hh-incl .hh-incl-list { padding: 26px 0; } }
/* desktop: the strip is a layer on the foot of the hero, always inside its first screen. Out of the flow
   (absolute on .hh, which already sits over the hero with z-index 1), so the hero and its illustration keep
   their size and an offer band (.hh-deal, when a campaign is on) still follows the hero right below it.
   72px = 26 + 20 (icon) + 26; .hh-resume (index.php, outside .hh) is lifted by the same amount. */
@media (min-width: 992px) {
    .hh > .hh-incl { position: absolute; top: -72px; left: 0; right: 0; z-index: 2; height: 72px; }
    .hh > .hh-incl .hh-incl-list { height: 72px; padding: 0; align-items: center; }
    .hh-resume { bottom: calc(72px + 16px); }
}
.hh-incl-list svg { flex: 0 0 20px; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--hh-orange); color: #fff; }

.hh-section.hh-cats { padding-top: 72px; }
.hh-cats .hh-head { max-width: 760px; margin-bottom: 36px; }
.hh-cats .hh-head h2 { font-size: clamp(38px, 9vw, 60px); line-height: 1.04; }
.hh-cats .hh-head p { margin-top: 12px; font-size: 19px; }
@media (min-width: 992px) { .hh-section.hh-cats { padding-top: 120px; } .hh-cats .hh-head { margin-bottom: 48px; } }
.hh-card--shop:hover 
.hh-card--shop { padding-bottom: 14px; }
.hh-card--shop .hh-card-img { aspect-ratio: 4 / 3.2; }
.hh-ribbon {
    position: absolute; top: 12px; left: -2px; padding: 5px 14px 5px 12px; border-radius: 0 50px 50px 0; background: var(--hh-orange); color: #fff;
    font-size: 13px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 3px 8px rgba(20, 39, 44, .25);
}
.hh-price {
    position: absolute; right: 10px; bottom: 10px; display: grid; justify-items: center; padding: 8px 14px 7px; border-radius: 18px; background: #fff;
    color: var(--hh-ink); line-height: 1; box-shadow: 0 6px 16px rgba(20, 39, 44, .25); transform: rotate(-3deg);
}
.hh-price small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hh-muted); }
.hh-price b { margin: 2px 0 -3px; font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: 30px; color: var(--hh-orange); }
.hh-price b i { font-style: normal; font-size: .62em; vertical-align: baseline; margin: 0 1px; }
/* «> span»: the price itself is a <span data-isk> inside <b> (inc/currency_fx.php), and must not get the small grey text */
.hh-price > span { font-size: 12px; font-weight: 700; color: var(--hh-muted); }
.hh-card-tags { display: grid; gap: 0; margin: 14px 8px 0; }
.hh-card-tags > span { display: flex; align-items: center; gap: 8px; padding: 9px 2px; border-bottom: 1px solid #dde6ea; font-size: 15px; line-height: 1.2; color: var(--hh-ink); }
.hh-card-tags > span:last-child { border-bottom: 0; }
.hh-card-tags svg { flex: 0 0 18px; width: 18px; height: 18px; }
.hh-card-tags .t-lab { font-weight: 500; color: var(--hh-muted); }
.hh-card-tags .t-val { margin-left: auto; font-weight: 700; text-align: right; }
.hh-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 8px 4px; padding: 11px 16px; border-radius: 50px;
    background: var(--hh-orange); color: #fff; font-size: 16px; font-weight: 700; transition: background .2s;
}
.hh-cta svg { width: 18px; height: 18px; transition: transform .2s; }
.hh-card--shop:hover .hh-cta { background: var(--hh-orange-dark); }
.hh-card--shop:hover .hh-cta svg { transform: translateX(3px); }

.hh-need-price { display: grid; justify-items: end; margin-left: auto; padding-left: 8px; line-height: 1.05; text-align: right; flex: 0 0 auto; }
.hh-need-price small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--hh-muted); }
.hh-need-price b { font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: 24px; color: var(--hh-orange); }
.hh-need-price > span { font-size: 11px; font-weight: 700; color: var(--hh-muted); }

/* discounts + extras: loud, two colour blocks */

/* trust: the number first */
.hh-tp b { font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: 34px; line-height: 1; }
.hh-tp-stars svg { width: 28px; height: 28px; padding: 4px; }
.hh-tp img { height: 28px; }

@media (min-width: 768px) {
    .hh-deal-in { grid-template-columns: 1fr auto; align-items: center; gap: 28px; padding: 26px 0; }
    .hh-sticker { width: 104px; height: 104px; font-size: 24px; }
    .hh-incl-list { display: flex; justify-content: space-between; gap: 18px; }
    .hh-incl-list li { font-size: 15px; }
}
@media (min-width: 992px) {
    .hh-cats { padding-top: 64px; }
}
@media (max-width: 575px) {
    .hh-grid--4 .hh-card--shop { display: flex; flex-direction: column; padding: 12px 12px 12px; }
    .hh-grid--4 .hh-card--shop .hh-card-img { aspect-ratio: 16 / 11; margin-bottom: 12px; }
    .hh-grid--4 .hh-card--shop .hh-card-name { font-size: 26px; align-self: auto; }
    .hh-grid--4 .hh-card--shop .hh-card-for { font-size: 15px; }
}
@media (max-width: 575px) {
    .hh-deal::before { right: -46px; top: -64px; width: 150px; height: 150px; }
    .hh-deal::after { right: -66px; top: -84px; width: 190px; height: 190px; border-width: 4px; }
    .hh-deal-big { padding-right: 96px; } /* the long first line («Rent your rooftop tent car up to») breaks before the sun */
}

/* needs: trip cards, same as the mega menu's «Find your trip» */
.hh-needs { background: #fff; border-radius: 0; }
.hh-trips { display: grid; gap: 14px; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
.hh-trip { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px; border-radius: 24px; background: #fff; border: 1px solid var(--hh-line); transition: border-color .2s, transform .2s, box-shadow .2s; }
.hh-trip::after { content: ""; position: absolute; inset: -1px; border: 3px solid var(--hh-orange); border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s; }
.hh-trip:hover::after { opacity: 1; }
.hh-trip-img { display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; margin-bottom: 10px; }
.hh-trip-img img { width: 100%; height: 100%; object-fit: cover; }
.hh-trip-name { font-size: 20px; font-weight: 700; color: var(--hh-ink); padding: 0 4px; }
.hh-trip-text { padding: 0 4px; font-size: 15px; line-height: 1.4; color: var(--hh-muted); }
.hh-trip-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 12px 4px 0; border-top: 1px solid var(--hh-line); }
.hh-trip-text { margin-bottom: 12px; }
.hh-trip-price { color: var(--hh-muted); font-size: 13px; font-weight: 700; }
.hh-trip-price b { font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: 28px; color: var(--hh-orange); line-height: 1; }
.hh-trip-foot .hh-go { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--hh-orange); color: #fff; transition: background .2s; }
.hh-trip-foot .hh-go svg { width: 20px; height: 20px; }
.hh-trip:hover .hh-go { background: var(--hh-orange-dark); }
.hh-rate { display: inline-flex; align-items: center; gap: 16px; margin-left: auto; }
.hh-rate a { display: inline-flex; align-items: center; gap: 6px; color: var(--hh-ink); }
.hh-rate a + a { padding-left: 16px; border-left: 1px solid #c7d3d8; line-height: 1; }
.hh-rate svg { width: 18px; height: 18px; flex: 0 0 18px; }
.hh-rate b { font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: 20px; line-height: 1; }
.hh-rate a:hover b { color: var(--hh-orange-dark); }
@media (min-width: 576px) { .hh-trips { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .hh-needs { margin: 0; } .hh-trips { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1200px) { .hh-trips { grid-template-columns: repeat(5, 1fr); gap: 16px; } .hh-trip-name { font-size: 19px; } }
.hh-trip-price { white-space: nowrap; }
@media (min-width: 1200px) { .hh-trip-price b { font-size: 24px; } .hh-trip-price > span { font-size: 12px; } .hh-trip-foot .hh-go { width: 38px; height: 38px; } }
@media (min-width: 1200px) { .hh-trip-foot { gap: 6px; } .hh-trip-price b { font-size: 21px; } .hh-trip-price > span { font-size: 11px; } .hh-trip-price small { font-size: 11px; } .hh-trip { padding: 12px; } }

/* needs: tabs + one big photo card with a small info card on top */
.hh-tabs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 16px; }
.hh-tabs-row .hh-tabs { flex: 1 1 100%; min-width: 0; margin-bottom: 0; }
@media (min-width: 1200px) { .hh-tabs-row .hh-tabs { flex: 1 1 0; } }
.hh-tabs { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.hh-tabs::-webkit-scrollbar { display: none; }
.hh-tab { flex: 0 0 auto; padding: 12px 20px; border: 2px solid var(--hh-line); border-radius: 999px; background: #fff; color: var(--hh-ink); font: 700 16px/1.1 "Cabin", sans-serif; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s, color .2s; }
.hh-tab[aria-selected="true"] { background: var(--hh-orange); border-color: var(--hh-orange); color: #fff; }
.hh-tab:focus:not(:focus-visible) { outline: 0; box-shadow: none; } /* no blue ring after a mouse click; keyboard focus keeps its ink ring */
.hh-tab:focus-visible { outline: 3px solid var(--hh-ink); outline-offset: 2px; }
/* The chosen trip hangs over its photo (Rasheed, 2026-11-10: visitors kept tapping the orange pill, not seeing it was already the one
   shown): a notch in the pill's orange points down to the photo and nearly touches it, like a folder tab, so the pill reads as
   «this is what you are looking at», not as a button. It slides in under the newly chosen pill. The tabs strip scrolls sideways,
   which clips anything outside it: its bottom padding holds the notch. Below 1200px the 4.7 goes above the pills, so nothing
   comes between the chosen pill and its photo. */
.hh-tabs-row { margin-bottom: 0; }
.hh-tabs-row .hh-tabs { padding-bottom: 12px; }
.hh-tab { position: relative; }
.hh-tab::before { content: ""; position: absolute; left: 50%; top: calc(100% + 1px); border-style: solid; border-width: 10px 10px 0; border-color: var(--hh-orange) transparent transparent; transform: translateX(-50%) scaleY(0); transform-origin: 50% 0; opacity: 0; pointer-events: none; transition: transform .25s cubic-bezier(.22, .9, .3, 1), opacity .2s ease; }
.hh-tab[aria-selected="true"]::before { transform: translateX(-50%) scaleY(1); opacity: 1; } /* ::before: ::after is the hover ring (.hh-ring) */
@media (max-width: 1199px) { .hh-tabs-row .hh-rate { order: -1; } }
@media (prefers-reduced-motion: reduce) { .hh-tab::before { transition: none; } }
.hh-stage { position: relative; display: flex; align-items: flex-end; min-height: 560px; padding: 14px; border-radius: 30px; overflow: hidden; background: #8aa; }
.hh-stage[hidden] { display: none; }
.hh-stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hh-pos, 50% 50%); } /* --hh-pos / --hh-pos-m: focus per photo, set inline in home_hub.php */
.hh-stage-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; padding: 20px; border-radius: 22px; background: #fff; box-shadow: 0 10px 30px rgba(20,39,44,.25); }
.hh-stage-card h3 { margin: 0; font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: 32px; line-height: 1.05; color: var(--hh-ink); }
.hh-stage-card p { margin: 0; font-size: 16px; line-height: 1.4; color: var(--hh-muted); }
.hh-stage-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.hh-stage-perks li { position: relative; padding-left: 22px; font-size: 14px; font-weight: 700; color: var(--hh-ink); }
.hh-stage-perks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--hh-green, #2f8a4f) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.3 2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.hh-stage-card .hh-trip-price { margin-top: 4px; font-size: 14px; }
.hh-stage-card .hh-trip-price b { font-size: 36px; }
.hh-stage-card .hh-btn { align-self: stretch; justify-content: center; }
@media (min-width: 768px) {
    .hh-stage { min-height: 520px; align-items: center; padding: 28px; }
    .hh-stage-card { width: 380px; padding: 28px; } /* on the left at every width from here: the guarantees sit in the bottom right corner, and a card on the right ran over them (and its button) on an iPad in portrait */
    .hh-stage-card h3 { font-size: 38px; }
}
@media (min-width: 992px) { .hh-stage { min-height: 560px; } }
.hh-stage-van { display: block; width: 100%; max-width: 230px; height: auto; aspect-ratio: 3 / 2; object-fit: contain; align-self: center; margin: -4px 0 4px; }
@media (min-width: 768px) { .hh-stage-van { max-width: 260px; } }

/* trip card, three bands: vehicle with its facts around it, the pitch, then price and button */
.hh-stage-card { gap: 0; padding: 12px; }
.hh-stage-top { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "beds beds" "van van" "perks perks"; justify-items: center; gap: 6px; padding: 14px; border-radius: 16px; background: var(--hh-cream); }
.hh-stage-top .hh-stage-van { grid-area: van; max-width: 260px; margin: 0; }
.hh-stage-top .hh-stage-perks { grid-area: perks; justify-content: center; }
.hh-stage-body { display: grid; gap: 6px; padding: 18px 10px 14px; }
.hh-stage-buy { display: grid; gap: 12px; align-items: center; padding: 14px 10px 6px; border-top: 2px dashed var(--hh-line); }
.hh-stage-buy .hh-trip-price { margin: 0; }
.hh-stage-buy .hh-btn { align-self: auto; }
@media (min-width: 768px) {
    .hh-stage-card { width: 520px; padding: 14px; }
    .hh-stage-top { grid-template-columns: auto 1fr auto; grid-template-areas: "beds . ." "van van van" "perks perks perks"; padding: 16px 18px 18px; }
    .hh-stage-top .hh-stage-van { max-width: 300px; }
    .hh-stage-body { padding: 20px 12px 16px; }
    .hh-stage-buy { grid-template-columns: auto 1fr; gap: 20px; padding: 16px 12px 8px; }
    .hh-stage-buy .hh-btn { justify-self: end; padding-left: 28px; padding-right: 28px; }
}
.hh-stage-card { align-items: stretch; }

/* narrower card; the guarantees sit on the photo, around it */
.hh-stage-perks { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.hh-stage-perks li { padding: 8px 14px 8px 38px; border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: 0 4px 14px rgba(20,39,44,.25); font-size: 15px; }
.hh-stage-perks li::before { left: 12px; top: 50%; margin-top: -9px; width: 18px; height: 18px; }
.hh-stage-top { grid-template-areas: "beds beds" "van van"; }
@media (min-width: 768px) {
    .hh-stage-card { width: 400px; }
    .hh-stage-top { grid-template-areas: "beds . ." "van van van"; }
    .hh-stage-top .hh-stage-van { max-width: 260px; }
    .hh-stage-perks { top: auto; left: auto; right: 28px; bottom: 28px; flex-direction: column; align-items: flex-end; }
    .hh-stage-buy { grid-template-columns: 1fr; gap: 12px; }
    .hh-stage-buy .hh-btn { justify-self: stretch; }
}
@media (max-width: 767px) { .hh-stage { padding-top: 112px; min-height: 0; } .hh-stage-perks { flex-direction: column; align-items: flex-start; gap: 6px; } }
/* «Sleeps N» sits on the vehicle's area, no container of its own */
.hh-stage-top, .hh-stage-top { grid-template-areas: "van"; grid-template-columns: 1fr; padding: 22px 18px 14px; }
@media (min-width: 768px) { .hh-stage-top { grid-template-areas: "van"; grid-template-columns: 1fr; padding: 24px 18px 14px; } }
/* «Sleeps N» is a small label over the picture; the cream box wraps the whole cut-out, with no padding on top
   so the empty sky of the image is the only space above the van (no cropping of the image) */
.hh-stage-top { position: relative; padding: 0 14px 12px; background: var(--hh-cream); }
.hh-stage-top .hh-stage-van { position: relative; z-index: 1; aspect-ratio: 3 / 2; object-fit: contain; max-width: 280px; margin: 0; }
/* Fewer pills in «Which trip are you planning?»: the profile tabs stay pills; «Sleeps» is plain text,
   the two guarantees on the photo share one white card and the «browse» links are text links with an arrow. */
.hh-showcase .hh-stage-perks { top: 14px; left: 14px; right: auto; bottom: auto; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 4px 14px rgba(20,39,44,.25); }
.hh-showcase .hh-stage-perks li { padding: 0 0 0 26px; border-radius: 0; background: none; box-shadow: none; font-size: 15px; }
.hh-showcase .hh-stage-perks li::before { left: 0; top: 50%; margin-top: -9px; width: 18px; height: 18px; }
@media (min-width: 768px) { .hh-showcase .hh-stage-perks { top: auto; left: auto; right: 28px; bottom: 28px; } }
/* phone: the photo is no longer a backdrop under the card (it only showed in a strip at the top); it stands on its own,
   large and portrait, and the card comes up over its lower edge. The two guarantees are already in the line under the
   heading, so they leave the photo here. */
@media (max-width: 767px) {
    .hh-stage { display: block; min-height: 0; padding: 0; border-radius: 0; overflow: visible; background: none; }
    .hh-stage-img { position: relative; inset: auto; display: block; height: auto; aspect-ratio: 4 / 5; border-radius: 28px; background: #8aa; object-position: var(--hh-pos-m, 50% 50%); }
    .hh-showcase .hh-stage-perks { display: none; }
    .hh-stage-card { width: auto; margin: -40px 12px 0; }
    .hh-stage-top .hh-stage-van { max-width: 220px; }
}

/* the winter deal has its own band under the hero: no top banner on the home */
.navbar-promotion { display: none !important; }

/* the hero fills the screen (Rasheed, 2026-11-10): at 100vh - 160px (to keep the offer band above the fold) a short window squashed
   the artwork and the van went under the edge */
@media (min-width: 992px) {
    body.homepage .hero.hero-home { height: max(480px, 100vh); height: max(480px, 100svh); max-height: 1080px; } /* SEO: tope para viewports altos (Googlebot) */
    /* the artwork follows the shorter hero instead of overflowing below it, so the van is not cut by the band */
    body.homepage .hero.hero-home .hero-canvas { height: 100%; max-height: none; }
    /* no 80px push down (hero-booking.css, «more sky»): on a wide, short window it put the van under the edge */
    body.homepage #section-1.hero .hero-canvas { transform: none; }
}
/* a tablet in landscape (touch, no mouse): Safari's own bars already take a lot of a short screen, so minus 160 px left
   the hero squat; it takes 90% of the screen instead */
@media (min-width: 992px) and (hover: none) and (pointer: coarse) {
    body.homepage .hero.hero-home { height: max(480px, 90vh); height: max(480px, 90svh); }
    /* the artwork sits on the bottom edge: the desktop push down (hero-booking.css, 80px "for more sky") cut the van and the ground off */
    body.homepage #section-1.hero .hero-canvas { transform: none; }
    /* title, reviews and bar with its tab (~263px, starting 163px down) centred in the whole 90% hero, menu included (it sits on the same
       sky, so the eye measures from the top of the screen): (90svh - 263px) / 2 - 163px = 45svh - 294px. The floor keeps the title
       clear of the logo on a short screen */
    body.homepage #section-1.hero.hero-home .hero-content { top: max(-30px, calc(min(45vh, 540px) - 294px)); top: max(-30px, calc(min(45svh, 540px) - 294px)); }
    /* the date bar sits close under the reviews (20px instead of 32 + 30): the title stays put, the bar goes up */
    body.homepage #section-1.hero .hero-content .hero-trustpilot.hero-trustpilot--inline { margin-bottom: 20px; }
    body.homepage #section-1.hero .hero-booking { margin-top: 0; }
}
/* phone hero: a smaller title (50px took three big lines), and the «13 years» in green instead of white, which hardly read on the
   pale sky (#2f8a4f, the site's green: 3.3:1 on the sky; Trustpilot's #219653 is 2.9:1, under the 3:1 large text needs) */
@media (max-width: 575.98px) {
    body.homepage .hero.hero-home .hero-home-title { font-size: 40px; }
}
@media (max-width: 767px) {
    body.homepage .hero-home .hero-trustpilot--inline .tp-text .tp-years { color: #2f8a4f; }
    /* at the bottom of the hero the «13» sits on the olive hills (#959a2e-#9b9f31). White by Rasheed's choice (2026-11-08): 2.8-3.1:1 there,
       at the edge of the 3:1 large text needs (#2f8a4f was 1.5:1, the deep green #0f4a27 3.4-3.6:1) */
    body.homepage #calendar .hero-trustpilot .tp-text .tp-years { color: #fff; }
    /* the Trustpilot row (logo, score, stars) stays under the title; the «Rated Excellent … 13 years» line sits on its own at the very
       bottom of the hero, over the hills, no card. Same HTML (screen readers still meet it after the title). The content box and the
       Trustpilot span go static so the line can hang from the hero; each block keeps its own layer over the illustration, the form on
       top so the location list is not covered by the chips. The bottom padding keeps the line off the chips on a short phone. */
    body.homepage #calendar.hero-home { padding-bottom: 90px; }
    body.homepage #calendar .hero-content { position: static; }
    body.homepage #calendar .hero-content > * { position: relative; z-index: 1; }
    body.homepage #calendar .hero-content > form { z-index: 3; }
    body.homepage #calendar .hero-content > .hero-trustpilot { position: static; }
    body.homepage #calendar .hero-trustpilot .tp-row { position: relative; z-index: 1; }
    body.homepage #calendar .hero-trustpilot .tp-text { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 20px; margin: 0; text-align: center; }
    body.homepage #calendar .hero-trustpilot .tp-years { display: inline-block; font-variant-numeric: tabular-nums; text-align: center; }
    /* the date picker a little lower, towards the middle of the hero (Rasheed, 2026-11-10): 32px on a 664px-tall screen (iPhone 13)
       and taller ones; less on shorter ones, nothing on an iPhone SE (568px), where there is no room to spare. More than 32px and
       the form and its tab come down onto the van. */
    body.homepage #calendar .hero-content > form { margin-top: clamp(0px, calc((100svh - 600px) / 2), 32px); }
    /* the title and the Trustpilot row 6px lower (Rasheed, 2026-11-10); the form stays where it is */
    body.homepage #calendar .hero-content > .text-sm-center, body.homepage #calendar .hero-trustpilot .tp-row { transform: translateY(6px); }
}
/* the «13 years» line enters after the stars (they end at ~0.85s): it rises in, then the years count 9 → 13 (script after the bar in
   index.php), each step rolling up, the last one with a small bounce. Hidden until .animated (scripts.js); if that never comes, it
   shows by itself after 4s. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    body.homepage #calendar .hero-trustpilot .tp-text { opacity: 0; animation: tp-show 0s 4s forwards; }
    body.homepage #calendar .hero-trustpilot.animated .tp-text { animation: tp-line-in .7s cubic-bezier(.22, .9, .3, 1) .7s both; }
    body.homepage #calendar .hero-trustpilot .tp-years.is-tick { animation: tp-tick .22s ease-out; }
    body.homepage #calendar .hero-trustpilot .tp-years.is-final { animation: tp-final .5s cubic-bezier(.3, 1.5, .5, 1); }
    @keyframes tp-show { to { opacity: 1; } }
    @keyframes tp-line-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
    @keyframes tp-tick { from { opacity: .25; transform: translateY(45%); } }
    @keyframes tp-final { 0% { opacity: .25; transform: translateY(45%); } 60% { opacity: 1; transform: translateY(0) scale(1.2); } 100% { transform: none; } }
}

/* the points of the strip come in one after another when it scrolls into view (class set by the script in home_hub.php) */
.hh-incl-list.is-rev li { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.hh-incl-list.is-rev.is-in li { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hh-incl-list.is-rev li { opacity: 1; transform: none; transition: none; } }

/* «Choose your camper»: heading first, then the cards one after another; price and facts land last (class set by the script in home_hub.php) */
.hh-cats.is-rev .hh-head,
.hh-cats.is-rev .hh-grid > li { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.hh-cats.is-rev .hh-grid > li { transition-delay: calc(120ms + var(--i, 0) * 110ms); }
.hh-cats.is-rev .hh-price,
.hh-cats.is-rev .hh-card-tags { opacity: 0; transition: opacity .5s ease; transition-delay: calc(450ms + var(--i, 0) * 110ms); }
.hh-cats.is-rev .hh-price { transform: rotate(-3deg) scale(.85); transform-origin: right bottom; transition-property: opacity, transform; }
.hh-cats.is-rev.is-in .hh-head,
.hh-cats.is-rev.is-in .hh-grid > li,
.hh-cats.is-rev.is-in .hh-card-tags { opacity: 1; transform: none; }
.hh-cats.is-rev.is-in .hh-price { opacity: 1; transform: rotate(-3deg); }
@media (prefers-reduced-motion: reduce) {
    .hh-cats.is-rev .hh-head, .hh-cats.is-rev .hh-grid > li, .hh-cats.is-rev .hh-card-tags { opacity: 1; transform: none; transition: none; }
    .hh-cats.is-rev .hh-price { opacity: 1; transform: rotate(-3deg); transition: none; }
}

/* «Which trip are you planning?»: heading, tabs, then the photo and its card; perks, price and button land last (class set by the script in home_hub.php) */
.hh-needs.is-rev .hh-head, .hh-needs.is-rev .hh-tab, .hh-needs.is-rev .hh-rate, .hh-needs.is-rev .hh-stage-card,
.hh-needs.is-rev .hh-stage-buy { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.hh-needs.is-rev .hh-stage-img, .hh-needs.is-rev .hh-stage-perks { opacity: 0; transition: opacity .7s ease; } /* the photo keeps its own crop transform: fade only */
.hh-needs.is-rev .hh-tab { transition-delay: calc(120ms + var(--i, 0) * 70ms); }
.hh-needs.is-rev .hh-rate { transition-delay: 330ms; }
.hh-needs.is-rev .hh-stage-img { transition-delay: 200ms; }
.hh-needs.is-rev .hh-stage-card { transition-delay: 400ms; }
.hh-needs.is-rev .hh-stage-perks { transition-delay: 650ms; }
.hh-needs.is-rev .hh-stage-buy { transition-delay: 750ms; }
.hh-needs.is-rev.is-in .hh-head, .hh-needs.is-rev.is-in .hh-tab, .hh-needs.is-rev.is-in .hh-rate, .hh-needs.is-rev.is-in .hh-stage-card,
.hh-needs.is-rev.is-in .hh-stage-buy { opacity: 1; transform: none; }
.hh-needs.is-rev.is-in .hh-stage-img, .hh-needs.is-rev.is-in .hh-stage-perks { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .hh-needs.is-rev * { opacity: 1 !important; transform: none; transition: none; }
}

/* «Prefer a brand?»: the pitch first, then the brand tiles one after another; the «from» prices land last (class set by the script in home_hub.php) */
.hh-brands.is-rev .hh-bpanel-text > * { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.hh-brands.is-rev .hh-bpanel-text > :nth-child(2) { transition-delay: 100ms; }
.hh-brands.is-rev .hh-bpanel-text > :nth-child(3) { transition-delay: 200ms; }
.hh-brands.is-rev .hh-bpanel-grid > li { opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(200ms + var(--i, 0) * 70ms); }
.hh-brands.is-rev .hh-bpanel-grid a > span { opacity: 0; transition: opacity .5s ease; transition-delay: calc(600ms + var(--i, 0) * 40ms); }
.hh-brands.is-rev.is-in .hh-bpanel-text > *, .hh-brands.is-rev.is-in .hh-bpanel-grid > li { opacity: 1; transform: none; }
.hh-brands.is-rev.is-in .hh-bpanel-grid a > span { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .hh-brands.is-rev * { opacity: 1 !important; transform: none; transition: none; }
}

/* vehicle card names in the regular text font (Cabin SemiBold, as the menu), not the illustrated Bubblegum Sans */
.hh-card--shop .hh-card-name { font-family: "Cabin", sans-serif; font-weight: 600; font-size: 25px; line-height: 1.15; }

/* vehicle card CTA: orange outline, filled orange on hover */
.hh-card--shop .hh-cta { background: transparent; color: var(--hh-orange-dark); box-shadow: inset 0 0 0 2px var(--hh-orange); transition: background .2s, color .2s; }
.hh-card--shop:hover .hh-cta { background: var(--hh-orange); color: #fff; }

/* ====== Brands: cream panel inside the container, the pitch on the left and each brand with its starting price ====== */
.hh-brands { padding: 64px 0 24px; }
@media (min-width: 992px) { .hh-brands { padding: 96px 0 32px; } }
.hh-bpanel { display: grid; gap: 28px; padding: 28px; border-radius: 32px; background: var(--hh-cream); }
@media (min-width: 992px) { .hh-bpanel { grid-template-columns: 320px 1fr; align-items: center; gap: 48px; padding: 44px; } }
.hh-bpanel-text h2 { margin: 0; font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: clamp(34px, 7vw, 46px); line-height: 1.05; color: var(--hh-ink); }
.hh-bpanel-text p { margin-top: 10px; font-size: 17px; color: var(--hh-muted); }
.hh-bpanel-text .hh-bpanel-more { margin-top: 22px; }
.hh-bpanel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .hh-bpanel-grid { grid-template-columns: repeat(4, 1fr); } }
.hh-bpanel-grid a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 130px; padding: 18px 8px 14px; border: 2px solid transparent; border-radius: 18px; background: #fff; }
.hh-bpanel-grid img { display: block; zoom: 1.3; }
.hh-bpanel-grid a > span { font-size: 13px; font-weight: 700; color: var(--hh-muted); }
.hh-bpanel-grid b { margin-left: 2px; font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: 20px; color: var(--hh-orange); }

/* ====== Trust band (above the brands): what we promise, in the brand's soft blue ====== */
.hh-covered { padding: 56px 0; background: linear-gradient(160deg, #e6f3f6 0%, #cfe9ef 100%); }
@media (min-width: 992px) { .hh-covered { padding: 88px 0; } }
.hh-covered h2 { margin: 0 0 48px; text-align: center; font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: clamp(32px, 6vw, 50px); line-height: 1.08; color: var(--hh-blue); }
/* Bubblegum Sans draws «-» as a long dash; the hyphen in «drop-off» uses a neutral font so it reads as a normal hyphen. */
.hh-covered h2 .hh-hy { font-family: Arial, Helvetica, sans-serif; }
/* Cards of the trust band. Brand language: Bubblegum figures and titles, white cards with the grey border. Figure 36px, title 24px, text 16px, padding 24px. */
.hh-tb { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .hh-tb { grid-template-columns: repeat(2, 1fr); gap: 16px; } .hh-tc--lang { grid-column: 1 / -1; } }
.hh-tc { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px 26px; border: 4px solid #c7d3d8; border-radius: 24px; background: #fff; color: var(--hh-ink); }
.hh-tc-fig { font-family: "Bubblegum Sans", cursive; font-size: 36px; line-height: 1; color: var(--hh-orange-dark); }
.hh-tc h3 { margin: 0; font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: 24px; line-height: 1.1; color: var(--hh-ink); }
.hh-tc p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--hh-muted); }
.hh .hh-reach { display: grid; gap: 18px; width: 100%; margin: 10px 0 0; padding: 0; } /* .hh ul { margin: 0 } is more specific than a single class: say it with .hh */
.hh-reach li { display: grid; row-gap: 4px; }
.hh-reach-line { display: flex; align-items: center; min-width: 0; }
.hh .hh-reach-value { font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--hh-orange-dark); overflow-wrap: anywhere; }
.hh .hh-reach-value:hover { text-decoration: underline; }
.hh-reach-label { font-size: 13px; line-height: 1.3; color: var(--hh-muted); }
.hh-reach-label--live { display: flex; align-items: center; gap: 7px; }
.hh-reach-label--live::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #2fb36a; box-shadow: 0 0 0 3px rgba(47, 179, 106, .22); animation: hhLive 2.4s ease-in-out infinite; } /* someone is online */
@keyframes hhLive { 50% { box-shadow: 0 0 0 5px rgba(47, 179, 106, 0); } }
@media (prefers-reduced-motion: reduce) { .hh-reach-label--live::before { animation: none; } }
/* copy button: bare icon next to the value; it turns into a check and a small «Copied» tag for a moment */
.hh-copy { position: relative; display: flex; align-items: center; flex: 0 0 auto; height: 20px; margin-left: 16px; padding: 0 0 0 12px; border: 0; border-left: 1px solid #c7d3d8; border-radius: 0; background: none; color: var(--hh-muted); cursor: pointer; transition: color .2s; }
.hh-copy svg { width: 18px; height: 18px; }
.hh-copy .hh-copy-ck { display: none; }
.hh-copy:hover { color: var(--hh-orange-dark); }
.hh-copy { -webkit-tap-highlight-color: transparent; user-select: none; }
.hh-copy:focus:not(:focus-visible), .hh-copy:active { outline: 0; box-shadow: none; background: none; } /* no blue block after a click; keyboard focus keeps its ink ring */
.hh-copy:focus-visible { outline: 3px solid var(--hh-ink); outline-offset: 2px; }
.hh-copy.is-copied { color: #2f8a4f; }
.hh-copy.is-copied .hh-copy-cp { display: none; }
.hh-copy.is-copied .hh-copy-ck { display: block; }
.hh-copy::after { content: attr(data-done); position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translate(-50%, 3px); padding: 3px 8px; border-radius: 8px; background: var(--hh-ink); color: #fff; font-size: 12px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.hh-copy.is-copied::after { opacity: 1; transform: translate(-50%, 0); }
.hh .hh-tc-list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 10px 18px; margin: 16px 0 0; padding: 0; } /* two columns, and room under the title (.hh ul { margin: 0 } is more specific than one class) */
.hh-tc-list li { position: relative; padding-left: 22px; font-size: 15px; font-weight: 700; line-height: 1.25; }
.hh-tc-list li::before { content: ""; position: absolute; left: 2px; top: .28em; width: 10px; height: 6px; border-left: 3px solid var(--hh-orange); border-bottom: 3px solid var(--hh-orange); transform: rotate(-45deg); }
.hh-tc--lang h3 + p { margin-top: -5px; }
.hh .hh-tc-langs { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 14px 22px; width: 100%; margin: auto 0 0; padding: 14px 0 0; }
.hh-tc-lang { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--hh-ink); }
.hh-tc-langs .mm-flag { display: inline-block; width: 30px; height: 20px; overflow: hidden; border-radius: 3px; flex: 0 0 30px; box-shadow: 0 0 0 1px rgba(20, 39, 44, .16); }
.hh-tc-langs .mm-flag svg { display: block; width: 100%; height: 100%; }
/* deposit: a bar that shows the split, the small part now and the rest at pick-up */
.hh-tc--dep h3 + p { margin-top: -5px; }
.hh-split { display: grid; gap: 8px; width: 100%; margin-top: auto; padding-top: 14px; }
.hh-split-bar { height: 12px; border-radius: 8px; background: #dde6ea; overflow: hidden; }
.hh-split-bar span { display: block; width: 15%; height: 100%; border-radius: 8px; background: var(--hh-orange); }
.hh-split-labels { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--hh-muted); }
.hh-split-labels b { font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: 20px; line-height: 1; color: var(--hh-orange-dark); }
/* photo cards: the picture sits beside the text, never above it */
.hh-tc--photo { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.hh-tc--photo img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: 62% 28%; }
.hh-tc-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 26px 24px; }
.hh-tc-body h3 + p, .hh-tc--incl h3 + p { margin-top: -5px; } /* the line under the title sits close to it */
.hh .hh-facts { display: flex; margin: auto 0 0; padding: 12px 0 0; }
.hh-facts li { display: grid; gap: 1px; padding: 0 16px; border-left: 1px solid #c7d3d8; }
.hh-facts li:first-child { padding-left: 0; border-left: 0; }
.hh-facts b { font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: 22px; line-height: 1; color: var(--hh-orange-dark); }
.hh-facts span { font-size: 13px; color: var(--hh-muted); }
@media (min-width: 992px) { .hh-tc--photo { flex-direction: row; } .hh-tc--photo img { width: 38%; height: auto; min-height: 0; aspect-ratio: auto; align-self: stretch; flex: 0 0 38%; } }
.hh-tc--loc img { object-position: 34% 38%; } /* the hiker leaning into the wind */
@media (min-width: 992px) {
    .hh-tb { grid-template-columns: repeat(12, 1fr); }
    .hh-tc--lang { grid-column: 1 / -1; }
    /* the support card with its photo and the price list, then the local team with its photo and the deposit */
    .hh-covered .hh-tc--photo:not(.hh-tc--loc) { grid-column: span 8; }
    .hh-covered .hh-tc--incl { grid-column: span 4; }
    .hh-covered .hh-tc--loc, .hh-covered .hh-tc--dep { grid-column: span 4; }
    .hh-covered .hh-tc--lang { grid-column: span 4; }
}


/* page colour that flows with the scroll: the sections stop painting their own band, the wrapper changes colour (script at the end of home_hub.php, tones in data-tone) */
.hh.hh-flow .hh-incl, .hh.hh-flow .hh-needs, .hh.hh-flow .hh-covered { background: none; }
/* except the strip on desktop: it lies over the hero, outside the wrapper's box, so it keeps its own cream */
@media (min-width: 992px) { .hh.hh-flow > .hh-incl { background: var(--hh-cream); } }

/* trust band entrance, second row only (classes set by the script in home_hub.php): cards rise in turn, the deposit bar fills, the flags pop in last */
.hh-covered.is-rev :is(.hh-tc--loc, .hh-tc--dep, .hh-tc--lang) { opacity: 0; transform: translateY(18px); }
.hh-covered.is-rev.is-in :is(.hh-tc--loc, .hh-tc--dep, .hh-tc--lang) { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.hh-covered.is-rev .hh-split-bar span { width: 0; }
.hh-covered.is-rev.is-in .hh-split-bar span { width: 15%; transition: width 1.2s cubic-bezier(.22, 1, .36, 1) .9s; }
.hh-covered.is-rev .hh-tc-langs li { opacity: 0; transform: translateY(8px) scale(.7); }
.hh-covered.is-rev.is-in .hh-tc-langs li { opacity: 1; transform: none; transition: opacity .4s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.8s + var(--f, 0) * 80ms); }

/* ====== Discounts and extras: the text on the left, two offers as rows on the right, in a warm panel ====== */
.hh-db { display: grid; gap: 24px; padding: 28px; border-radius: 32px; background: #fdf0e2; }
@media (min-width: 992px) { .hh-db { grid-template-columns: 320px 1fr; align-items: center; gap: 48px; padding: 44px; } }
.hh-db-text h2 { margin: 0; font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: clamp(34px, 7vw, 46px); line-height: 1.05; color: var(--hh-ink); }
.hh-db-text p { margin-top: 10px; font-size: 17px; color: var(--hh-muted); }
.hh-db-rows { display: grid; gap: 14px; }
.hh-dr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 22px 26px; border: 2px solid transparent; border-radius: 22px; background: #fff; color: var(--hh-ink); }
.hh-dr-main { display: grid; gap: 4px; min-width: 0; }
.hh-dr-kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hh-orange-dark); }
.hh-dr-title { font-family: "Cabin", sans-serif; font-weight: 700; font-size: 22px; line-height: 1.2; }
.hh-dr-title b { font-weight: 700; color: var(--hh-orange-dark); }
.hh-dr-note { font-size: 15px; color: var(--hh-muted); }
.hh-dr-go { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; color: var(--hh-orange-dark); white-space: nowrap; }
.hh-dr-go svg { width: 18px; height: 18px; transition: transform .2s; }
.hh-dr:hover .hh-dr-go svg { transform: translateX(4px); }

/* RULE: whenever a hover draws an outline, it is this ring (class .hh-ring), never a plain border-color change:
   it is drawn in from the edge the pointer crossed and wiped out through the exit edge, as on the vehicle cards and the mega menu.
   The ring sits over the element's own border (width in --ring-w, 2px by default). The script is at the end of home_hub.php. */
.hh-ring { --ring-w: 2px; position: relative; }
.hh-card.hh-ring { --ring-w: 3px; }
.hh-ring::after { content: ""; position: absolute; inset: calc(var(--ring-w) * -1); border: var(--ring-w) solid var(--hh-orange); border-radius: inherit; pointer-events: none; clip-path: inset(0 0 100% 0); transition: clip-path .4s cubic-bezier(.22, 1, .36, 1); }
.hh-ring[data-from="top"]::after { clip-path: inset(0 0 100% 0); }
.hh-ring[data-from="bottom"]::after { clip-path: inset(100% 0 0 0); }
.hh-ring[data-from="left"]::after { clip-path: inset(0 100% 0 0); }
.hh-ring[data-from="right"]::after { clip-path: inset(0 0 0 100%); }
.hh-ring.is-lit::after, .hh-ring:focus-visible::after { clip-path: inset(0 0 0 0); }
.hh-ring.is-ring-reset::after { transition: none; }
/* MOR-11 / MOR-14: the ring sits --ring-w outside the box, so its corners need the box's radius plus that width;
   with the box's own radius («inherit») they came out tighter than the card's and looked cut at the corners */
.hh-dr.hh-ring::after { border-radius: calc(22px + var(--ring-w)); }
@media (hover: hover) { .hh-ring:hover:not([data-from])::after { clip-path: inset(0 0 0 0); } } /* before the script has set an edge */
@media (hover: none) { .hh-ring:hover::after { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .hh-ring::after { transition: none; } }

/* ====== Places: pick where you are heading, the camper drives there and the map zooms in ====== */
.hh-pa-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: 32px; }
.hh-pa-head > div { max-width: 660px; }
.hh-pa-head p { margin-top: 10px; font-size: 18px; color: var(--hh-muted); }
.hh-pz { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 992px) { .hh-pz { grid-template-columns: 6fr 6fr; gap: 24px; } }
.hh-pz-map { position: relative; min-height: 320px; overflow: hidden; border: 4px solid var(--hh-line); border-radius: 30px; background: #94d6f2; }
/* one column (below 992px): the map is as tall as the island drawing at that width; with only the 320px minimum, a tablet cut off
   the south coast (route, places and their label). Beside the panel (992px and up) it takes the panel's height. */
@media (min-width: 576px) and (max-width: 991px) { .hh-pz-map { aspect-ratio: 600 / 380; } } /* not on a phone: there the drawing is shorter than the 320px minimum, and the ratio would turn that minimum into a width wider than the screen */
.hh-pz-tag { position: absolute; top: 14px; left: 14px; z-index: 4; padding: 2px 12px; border-radius: 50px; background: var(--hh-ink); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
/* the sketch keeps its 600:380 shape and sits in the middle of the box, so the pins (in %) always land on the map */
.hh-pz-zoom { position: absolute; left: 0; right: 0; top: 50%; aspect-ratio: 600 / 380; margin-top: -31.667%; } /* fixed framing: the whole island, nothing moves but the camper */
.hh-pz-zoom svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hh-pz-trail { fill: none; stroke: var(--hh-orange); stroke-width: 4; stroke-linecap: round; }
.hh-pz-pin { position: absolute; z-index: 1; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 3px solid #fff; border-radius: 50%; background: var(--hh-orange); opacity: .6; transition: opacity .3s, background .3s, transform .3s; }
.hh-pz-pin.is-passed { opacity: 1; }
.hh-pz-pin.is-on { opacity: 1; transform: scale(1.3); } /* the destination, until the camper gets there */
.hh-pz-pin.is-here { opacity: 0; } /* the camper is on it: no dot under the vehicle */
/* the camper is always above the pins (z-index 3 over 1) and sits just over its point on the road */
.hh-pz-van { position: absolute; z-index: 3; width: 32px; margin: -22px 0 0 -16px; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(20, 39, 44, .35)); }
.hh-pz-van svg { display: block; width: 100%; height: auto; }
/* the conversation: room between the question, the options and the answers */
.hh-pz-side { display: grid; gap: 28px; align-content: start; padding: 32px 36px 36px; border: 4px solid var(--hh-line); border-radius: 30px; background: #f7f8f8; }
.hh-pz-q { margin: 0; font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--hh-ink); }
.hh .hh-pz-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin: 0; padding: 0; }
.hh-pz-opt { display: flex; align-items: center; width: 100%; min-height: 46px; padding: 8px 18px; border: 2px solid var(--hh-line); border-radius: 14px; background: #fff; color: var(--hh-ink); font: 700 15px/1.2 "Cabin", sans-serif; text-align: left; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.hh-pz-opt.is-on { border-color: var(--hh-orange); background: #fff1e4; color: var(--hh-orange-dark); }
.hh-pz-opt:focus-visible { outline: 3px solid var(--hh-ink); outline-offset: 2px; }
.hh-pz-answers { display: grid; gap: 16px; min-height: 300px; align-content: start; padding-top: 28px; border-top: 2px dashed #dfe5e7; }
.hh-pz-ans { position: relative; display: grid; gap: 4px; padding: 16px 20px; border-radius: 6px 20px 20px 20px; background: #fff; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .45s cubic-bezier(.22, 1, .36, 1); }
.hh-pz-ans b { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hh-orange-dark); }
.hh-pz-ans span { font-size: 16px; line-height: 1.5; color: var(--hh-ink); }
.hh-pz-ans.is-in, .hh-pz-ans.is-typing { opacity: 1; transform: none; }
.hh-pz-ans.is-typing b, .hh-pz-ans.is-typing span { visibility: hidden; }
.hh-pz-typing { display: none; position: absolute; left: 20px; top: 50%; margin-top: -4px; gap: 5px; }
.hh-pz-ans.is-typing .hh-pz-typing { display: flex; }
.hh-pz-typing u { display: block; width: 8px; height: 8px; border-radius: 50%; background: #9aa6aa; text-decoration: none; animation: hhType 1s ease-in-out infinite; }
.hh-pz-typing u:nth-child(2) { animation-delay: .15s; }
.hh-pz-typing u:nth-child(3) { animation-delay: .3s; }
@keyframes hhType { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hh-pz-ans { transition: none; } .hh-pz-typing u { animation: none; } }

/* the spotlight on the camper and the label that travels with it */
.hh-pz-spot { display: none; } /* the cream veil around the camper washed the water out to grey: the sea stays a clean blue */
.hh-pz-callout { position: absolute; z-index: 4; display: grid; gap: 1px; padding: 8px 14px; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(20, 39, 44, .22); transform: translate(-50%, calc(-100% - 32px)); pointer-events: none; text-align: center; white-space: nowrap; }
.hh-pz-callout::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.hh-pz-callout.is-below { transform: translate(-50%, 28px); }
.hh-pz-callout.is-below::after { bottom: auto; top: -6px; }
.hh-pz-callout b { font-size: 15px; font-weight: 700; color: var(--hh-ink); }
.hh-pz-callout span { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--hh-orange-dark); }

/* ====== «Why Iceland?»: the video on a warm illustration, melting into the page above and below (inc/home_why.php) ====== */
.hhw { --hh-orange: #f37720; --hh-orange-dark: #d9650f; position: relative; color: #14272c; font-family: "Cabin", sans-serif; }
.hhw h2 { margin: 0 0 40px; font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: clamp(40px, 6vw, 64px); line-height: 1.05; color: #14272c; }
.hhw p { color: #14272c; }
.hhw--a { z-index: 2; overflow: hidden; padding: 120px 0 254px; margin-bottom: -64px; pointer-events: none; background: linear-gradient(#f7f3e8 0%, #fbe6cf 20%, #f9d0a8 52%, #f4bc90 80%, #fffefb 100%); } /* the extra 64px of padding and the negative margin cancel out: the band's background reaches the About card without moving anything */
.hhw--a .hhw-art { position: absolute; left: 0; right: 0; bottom: 64px; width: 100%; height: 640px; overflow: visible; }
.hhw--a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 330px; background: linear-gradient(rgba(255, 254, 251, 0) 0%, rgba(255, 254, 251, .12) 22%, rgba(255, 254, 251, .42) 50%, rgba(255, 254, 251, .78) 76%, #fffefb 100%); pointer-events: none; } /* an eased fade, so there is no visible edge where it ends */
.hhw-in { position: relative; z-index: 1; text-align: center; pointer-events: auto; }
.hhw--a .hhw-vid { max-width: 860px; margin: 0 auto; }

/* the video: poster, one play button, a click to pause and a «Replay» layer at the end */
.hhw-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 6px solid #fff; border-radius: 30px; background: #1d1a17; box-shadow: 0 24px 60px rgba(120, 60, 30, .28); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.hhw-poster-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s; }
.hhw-player.is-playing .hhw-poster-img, .hhw-player.is-paused .hhw-poster-img { opacity: 0; }
.hhw-frame, .hhw-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hhw-over { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 0; border: 0; background: rgba(20, 39, 44, .16); color: #fff; font: 700 20px/1 "Cabin", sans-serif; cursor: pointer; transition: background .3s, opacity .3s; }
.hhw-over:hover { background: rgba(20, 39, 44, .28); }
.hhw-over:focus-visible { outline: 4px solid #fff; outline-offset: -8px; }
.hhw-over-ico { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #f37720; box-shadow: 0 10px 30px rgba(20, 39, 44, .3); transition: transform .25s; }
.hhw-over:hover .hhw-over-ico { transform: scale(1.07); }
.hhw-over-ico svg { width: 34px; height: 34px; margin-left: 4px; }
.hhw-i-replay { display: none; }
.hhw-over.is-ended .hhw-i-play { display: none; }
.hhw-over.is-ended .hhw-i-replay { display: block; margin-left: 0; }
.hhw-over-label { display: none; text-shadow: 0 2px 10px rgba(20, 39, 44, .5); }
.hhw-over.is-playing { opacity: 0; background: transparent; } /* invisible, but a click anywhere pauses */
.hhw-over.is-playing:hover { background: transparent; }
.hhw-over.is-paused { background: rgba(20, 39, 44, .4); }
.hhw-over.is-ended { background: rgba(20, 20, 20, .94); } /* nearly opaque: it hides whatever YouTube shows when a video ends */
.hhw-over.is-ended .hhw-over-label { display: block; }

/* the three pills under the video: the two season guides and the blog */
.hhw .hhw-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; }
.hhw a.hhw-pill { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px 12px 20px; border: 2px solid #fff; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #14272c; text-decoration: none; }
.hhw a.hhw-pill:hover { color: #14272c; }
.hhw-pill svg { width: 20px; height: 20px; color: #f37720; }
.hhw-pill b { font-size: 17px; font-weight: 700; }
.hhw-pill small { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a6a58; }

/* About us: the reviews with more air (two cards, longer line height, bigger gaps) */
.hh .hh-reviews-top { margin-bottom: 28px; }
.hh .hh-reviews-list { grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .hh .hh-reviews-list { grid-template-columns: repeat(2, 1fr); } }
.hh .hh-review { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; }
.hh .hh-review b { margin: 0; font-size: 17px; line-height: 1.3; }
.hh .hh-review p { margin: 0; font-size: 15px; line-height: 1.55; }
.hh .hh-review-who { margin-top: auto; padding-top: 6px; }

/* ====== «Questions? Start here»: the same four cards as the FAQs panel of the menu ====== */
.hhq { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .hhq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .hhq { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hhq-group, .hhq-foot { min-width: 0; display: flex; flex-direction: column; padding: 20px; border: 1px solid #ebf0f0; border-radius: 16px; }
.hhq-group { background: #f7fafa; }
.hhq-group-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 16px; font-weight: 700; color: var(--hh-ink); }
.hhq-group-title svg { flex-shrink: 0; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--hh-blue-soft); fill: none; stroke: var(--hh-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hh .hhq-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hh .hhq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 14px; border: 1px solid #ebf0f0; border-radius: 10px; background: #fff; color: var(--hh-ink); font-size: 15px; font-weight: 600; line-height: 1.35; text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }
.hhq-arrow { flex-shrink: 0; color: var(--hh-muted); transition: transform .2s ease, color .2s ease; }
.hh .hhq-q:hover { border-color: var(--hh-blue-soft); background: var(--hh-blue-soft); color: var(--hh-ink); }
.hh .hhq-q:hover .hhq-arrow { color: var(--hh-blue); transform: translateX(3px); }
.hhq-foot { gap: 10px; background: #fff6ee; border-color: #fff6ee; }
.hhq-foot-title { margin-bottom: 6px; font-family: "Bubblegum Sans", cursive; font-size: 24px; line-height: 1.05; }
.hh .hhq-all { margin-top: auto; align-self: flex-start; font-size: 15px; font-weight: 700; color: var(--hh-blue); text-decoration: none; white-space: nowrap; }
.hh .hhq-all:hover { text-decoration: underline; }
.hhq-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hhq-search { position: relative; width: 100%; margin: 0; }
.hh:has(#hhq-results:not([hidden])) { z-index: 2; } /* the suggestions run over the next section, which sits on the same layer */
.hhq-search-icon { position: absolute; left: 14px; top: 27px; margin-top: -10px; fill: none; stroke: var(--hh-blue); stroke-width: 2.4; stroke-linecap: round; pointer-events: none; }
.hh .hhq-search input { width: 100%; height: 54px; box-sizing: border-box; margin: 0; padding: 0 14px 0 42px; border: 2px solid var(--hh-blue); border-radius: 14px; background: #fff; color: var(--hh-ink); font: 600 15px/1.3 "Cabin", sans-serif; outline: none; -webkit-appearance: none; appearance: none; }
.hh .hhq-search input::placeholder { color: var(--hh-muted); opacity: 1; }
.hh .hhq-search input:focus { box-shadow: 0 0 0 4px var(--hh-blue-soft); }
.hh .hhq-search .mm-faq-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 5; margin: 0; padding: 6px; list-style: none; border-radius: 14px; background: #fff; box-shadow: 0 12px 32px rgba(20, 39, 44, .18), 0 0 0 1px #ebf0f0; }
.hh .hhq-search .mm-faq-results[hidden] { display: none; }
/* the suggestions themselves: also here because a phone gets no mega-menu.css (inc/header.php, adaptive menu) */
.hhq-search { --hhq-tint: #ebf0f0; --hhq-muted: #5c6a6e; --hhq-link: #206c83; --hhq-sky: #e3f3f6; }
.hhq-search .mm-faq-result { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 15px; line-height: 1.3; cursor: pointer; }
.hhq-search .mm-faq-result[aria-selected="true"] { background: var(--hhq-tint); }
@media (hover: hover) { .hhq-search .mm-faq-result:hover { background: var(--hhq-tint); } }
.hhq-search .mm-faq-result mark { padding: 0; background: none; color: inherit; font-weight: 700; }
.hhq-search .mm-faq-kind { flex-shrink: 0; width: 56px; padding: 3px 0; border-radius: 999px; background: var(--hhq-tint); color: var(--hhq-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.hhq-search .mm-faq-kind[data-kind="faq"] { background: #eef6e6; color: #4f7f25; }
.hhq-search .mm-faq-kind[data-kind="page"] { background: var(--hhq-sky); color: var(--hhq-link); }
.hhq-search .mm-faq-result--all { font-weight: 700; color: var(--hhq-link); }
.hhq-search .mm-faq-empty { padding: 10px 12px; font-size: 14px; color: var(--hhq-muted); }

/* Location (home): same width as the other sections and a plain title instead of the big orange pill */
.lt-hub .section-title { margin: 0 0 24px; padding: 0; text-align: left; }
.hh .lt-title { margin: 0; padding: 0; background: none; font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: clamp(34px, 5vw, 48px); line-height: 1.05; color: #14272c; text-align: left; }
.hh.lt-hub .lc-address-note { margin-top: 4px; }
.hh.lt-hub .lc-hours { margin: 16px 0 0; } /* .hh p { margin: 0 } is more specific than the single class of location-contact.css */
.hh.lt-hub .lc-thumbs { margin: 20px 0 0; padding: 0; }
@media (min-width: 992px) { .hh.lt-hub .lc-thumbs { margin-top: auto; padding-top: 20px; } }

/* The lower sections come in once on scroll (assets/js/home-reveal.js): pieces rise a little, one after another; .rv is removed when they have landed */
.rv-ready .rv { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .6s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--d, 0ms); }
.rv-ready .rv.rv--fade { transform: none; transition-property: opacity; }
.rv-ready .rv.rv--pop { transform: scale(.4); transition-duration: .5s; transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.rv-ready.rv-in .rv { opacity: 1; transform: none; }

/* «Why Iceland?»: the three birds fly towards the sun (--x/--y is each one's way there), getting smaller and fading out, then start again from where they were;
   wings beat all the time (scale). Each one has its own pace and starts at a different point of the flight. */
@media (prefers-reduced-motion: no-preference) {
    .hhw-bird { transform-box: fill-box; transform-origin: center; animation: hhw-flap calc(1.1s + var(--b) * .18s) ease-in-out calc(var(--b) * -.4s) infinite, hhw-away calc(11s + var(--b) * 2.5s) ease-in calc(var(--b) * -4.5s) infinite; }
}
@keyframes hhw-flap { 0%, 100% { scale: 1 1; } 50% { scale: 1 -.6; } }
@keyframes hhw-away {
    0% { translate: 0 0; transform: scale(1); opacity: 0; }
    8% { opacity: 1; }
    80% { opacity: 1; }
    100% { translate: var(--x) var(--y); transform: scale(.22); opacity: 0; }
}

/* ---------------------------------------------------------------------------------------------------------------------------------
   Phone search form (#calendar, index.php), close to the desktop bar (hero-booking.css / .js) while keeping its box.
   Two columns of cells, each a label in orange over a value: dates («Saturday» / «14 Nov») and places («Pick-up» / «Int. Airport»),
   then Go. Labels share one line, values another, and every ▼ (the desktop chevron) sits on its value's centre line, 10px clear of
   the dividing line. The date column is as wide as its date, the places take the rest.
   --------------------------------------------------------------------------------------------------------------------------------- */

/* columns */
body.homepage #calendar .selector-table td:first-child { width: 1%; min-width: 0 !important; white-space: nowrap; } /* dates */
body.homepage #calendar .selector-table td[rowspan] { width: 1%; min-width: 0 !important; }                        /* Go */

/* labels: one line, 14px orange */
body.homepage #calendar .hero-date-day { color: #f37720; font-weight: 600; }
body.homepage #calendar .hero-loc-label { margin-bottom: 11px; padding: 0; color: #f37720; font-size: 14px; font-weight: 600; line-height: 17px; }

/* date values. The inputs keep their DD-MM-YYYY value (scripts.js, the booking) and are the tap target, their text hidden;
   .hero-date-show draws «14 Nov» over them (index.php keeps it in step). The value row is a flex line so the ▼ centres on it. */
body.homepage #calendar .hero-date-value { display: flex; align-items: center; }
body.homepage #calendar .hero-date-field { position: relative; display: inline-block; }
body.homepage #calendar #t-start, body.homepage #calendar #t-end { width: 75px; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; }
/* the tap goes to the cell, not to the input (index.php, CAR-17: a tap anywhere in a cell opens its calendar): an input that takes
   the tap gets the focus, and Safari then pans the page to show it, so the return calendar (its input lower down) opened lower than
   the pick-up one */
body.homepage #calendar #t-start, body.homepage #calendar #t-end { pointer-events: none; }
body.homepage #calendar .hero-date-show { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font: 600 22px/22px "Cabin", sans-serif; color: #14272c; white-space: nowrap; pointer-events: none; }
body.homepage #calendar .is-picked + .hero-date-show { color: #f37720; } /* picked by the visitor */
body.homepage #calendar form[data-returning] .hero-date-field #t-start,
body.homepage #calendar form[data-returning] .hero-date-field #t-end { color: transparent; -webkit-text-fill-color: transparent; } /* hero-booking.css colours them */
body.homepage #calendar form[data-returning] .hero-date-show { color: #d9650f; } /* a returning visitor's last search (interest.js) */

/* place values: the short name (index.php, hd_loc_short). margin 0: Bootstrap's .row margins pushed the ▼ into the Go column */
body.homepage #calendar .selector .selected-box { width: auto; margin: 0; padding: 1px 10px 10px 0; flex-wrap: wrap; align-items: center; }
body.homepage #calendar .selected-option { flex: 1 1 auto; min-width: 0; width: auto; padding: 0; font: 600 18px/22px "Cabin", sans-serif; color: #14272c; white-space: nowrap; }

/* the ▼: the desktop chevron, the same in all four cells; it turns while its calendar or list is open (td.is-open, index.php) */
body.homepage #calendar .hero-chev { flex: none; display: block; width: 12px; max-width: none; height: 8px; margin: 0 0 0 8px; padding: 0; background: url("/assets/images/dropdown-down.svg") center / contain no-repeat; transition: transform .3s ease; }
body.homepage #calendar .selected-box .hero-chev { margin-left: 6px; }
body.homepage #calendar td.is-open .hero-chev { transform: rotate(180deg); }

@media (max-width: 374px) {
    body.homepage #calendar #t-start, body.homepage #calendar #t-end { width: 66px; }
    body.homepage #calendar .hero-date-show { font-size: 20px; }
    body.homepage #calendar .selected-option { font-size: 16px; }
}

/* the open list of places: a card across the form, under the row it belongs to (top set on opening, index.php), with a title like
   the calendar's, the full names, an icon for each kind of place and a check on the current one */
body.homepage #calendar #selector { position: relative; }
body.homepage #calendar .selector-table .col-12, body.homepage #calendar .selector { position: static; }
body.homepage #calendar .options-list { left: 6px; right: 6px; width: auto; max-height: none; overflow: visible; padding: 8px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #e1e7e9, 0 18px 40px rgba(20, 39, 44, .22); z-index: 5; font-family: "Cabin", sans-serif; }
body.homepage #calendar .options-list::before { content: attr(data-title); display: block; padding: 8px 12px 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f37720; }
body.homepage #calendar .options-list li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 12px; border: 0; border-radius: 12px; font-size: 17px; font-weight: 600; line-height: 1.25; color: #14272c; }
body.homepage #calendar .options-list li + li { margin-top: 2px; }
body.homepage #calendar .options-list li:last-child { border-top: 0; }
body.homepage #calendar .options-list li:hover, body.homepage #calendar .options-list li:active { background: #f2f6f7; }
body.homepage #calendar .options-list li::before { content: ""; flex: 0 0 24px; height: 24px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23206c83' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
body.homepage #calendar .options-list li[data-short*="Airport"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23206c83' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/%3E%3C/svg%3E"); }
body.homepage #calendar .options-list li.is-current { color: #f37720; }
body.homepage #calendar .options-list li.is-current::after { content: ""; flex: 0 0 20px; height: 20px; margin-left: auto; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f37720' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

/* Both calendars open in the same place on a phone. hero-booking.css centres them with top: 50% and translateY(-50%), but Safari's
   50% moves as its toolbar shrinks or grows after a tap or a scroll, so the return calendar came up lower than the pick-up one.
   The top is set from the small viewport height (svh, the height with the toolbar shown, which does not change), for a 400px panel. */
@media only screen and (max-width: 767px) {
    html body.homepage .daterangepicker.single.show-calendar { top: max(12px, calc(50svh - 200px)) !important; transform: translateX(-50%); }
}

/* the open calendar's title: «Pick-up» or «Return» (index.php puts it in on opening), a label like the ones over each date */
.daterangepicker .drp-title { padding: 16px 12px 0; font: 700 14px/1.2 "Cabin", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #f37720; text-align: center; }

/* the reasons under the form, as on the desktop bar: a blue tab growing out of the bottom of the form, one reason at a time
   (index.php rotates them). The form sits above it (z-index 3), so the tab starts 8px up behind it; the concave corners meet the
   form's edge. */
body.homepage #calendar .hero-booking-usp { display: flex; justify-content: center; margin-top: -8px; }
body.homepage #calendar .hero-booking-usp-tab { position: relative; display: grid; padding: 17px 22px 10px; border-radius: 0 0 16px 16px; background: #206c83; color: #fff; font: 600 14px/1.2 "Cabin", sans-serif; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 10px 24px rgba(32, 108, 131, .32), 0 2px 6px rgba(20, 39, 44, .1); }
body.homepage #calendar .hero-booking-usp-tab::before,
body.homepage #calendar .hero-booking-usp-tab::after { content: ""; position: absolute; top: 8px; width: 14px; height: 14px; }
body.homepage #calendar .hero-booking-usp-tab::before { right: 100%; background: radial-gradient(circle 14px at 0 100%, transparent calc(100% - 1px), #206c83 100%); }
body.homepage #calendar .hero-booking-usp-tab::after { left: 100%; background: radial-gradient(circle 14px at 100% 100%, transparent calc(100% - 1px), #206c83 100%); }
body.homepage #calendar .hero-booking-usp-item { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .35s ease; }
body.homepage #calendar .hero-booking-usp-item.is-active { opacity: 1; transform: none; }
body.homepage #calendar .hero-booking-usp-item.is-leaving { opacity: 0; transform: translateY(-14px); }
body.homepage #calendar .hero-booking-usp-item svg { flex: none; color: #f37720; }
@media (prefers-reduced-motion: reduce) { body.homepage #calendar .hero-booking-usp-item { transition: none; transform: none; } }

/* The phone form's Go button (index.php): a button you can feel. At rest it stands on a darker orange edge, no shadow; under the finger it sinks
   onto it (.is-pressed) and a light ripple spreads from the touch; once the search starts (.is-loading) it stays down, with the
   spinner in place of «Go». No glow around it (Rasheed, 2026-11-10). No hover: this is for touch. */
body.homepage #calendar .go-reserve { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 4px 0 #c4570b; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
body.homepage #calendar .go-reserve.is-pressed,
body.homepage #calendar .go-reserve.is-loading { background: #e0670f; transform: translateY(3px); box-shadow: 0 1px 0 #c4570b; }
/* «Go» always white: style.css turns every hovered button teal-grey (button:hover), and on a phone that hover sticks after the tap */
body.homepage #calendar .go-reserve, body.homepage #calendar .go-reserve:hover, body.homepage #calendar .go-reserve:active,
body.homepage #calendar .go-reserve:focus, body.homepage #calendar .go-reserve:disabled { color: #fff; -webkit-text-fill-color: #fff; }
body.homepage #calendar .go-reserve:focus { outline: none; }
body.homepage #calendar .go-reserve:focus-visible { outline: 2px solid #14272c; outline-offset: 3px; }
body.homepage #calendar .go-reserve:disabled { opacity: 1; cursor: progress; } /* style.css dims it to .8 */
body.homepage #calendar .go-reserve .go-ripple { position: absolute; z-index: -1; border-radius: 50%; background: rgba(255, 255, 255, .45); transform: scale(0); pointer-events: none; animation: go-ripple .6s ease-out forwards; }
body.homepage #calendar .go-reserve .btn-spinner { width: 20px !important; height: 20px !important; border-width: 3px !important; }
@keyframes go-ripple { to { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.homepage #calendar .go-reserve { transition: none; } }