/* ============================================================================================
   Homepage v2 - new design, ported from F:\CyprusParadise-NewDesigns\prototypes\homepage-v2\
   (index.html + styles.css). Everything below is scoped under .hp2 so it can't collide with the
   site's existing global CSS/Bootstrap (same reasoning as JourneyPages.css's .pp-page and
   AccommodationItemPage.css's .aip-page) - "hp2" ("HomePage v2") rather than reusing the
   legacy ".home" class already used by HomePage.cshtml's own banner-image wrapper.

   Loaded alongside (not replacing) the existing Home.css. Class names below match the
   prototype's own 1:1 (.hero, .week, .spots, .mosaic, etc.) so this file is a straightforward
   diff against styles.css if the design changes later - only the .hp2 scoping prefix and the
   --home-* token names (renamed from the source's --cp-*) are different.

   Not ported: the prototype's ~500 lines of fine-grained @media breakpoints. Responsive
   behaviour here follows the same simpler mobile-stacking pattern already used throughout
   JourneyPages.css (single max-width:720px/860px breakpoint per section) rather than
   transcribing every intermediate breakpoint - flagged in the redesign's final report as a
   deliberate scope trade-off given the size of this page. */

.hp2 {
  /* Read directly from CyprusParadise-NewDesigns/assets/tokens/tokens.css's --cp-* custom
     properties (homepage-v2's styles.css is built against these) - note --primary-deep here is
     #3c4e5a (same as --text), NOT the #104443 JourneyPages.css's --pp-primary-deep uses; that's a
     genuine difference between this design iteration's tokens.css and the one ProductPage was
     built from, not a typo - headings/deep text on this page really are the slate colour below. */
  --home-primary: #02aaa9;
  --home-primary-dark: #218887;
  --home-primary-deep: #3c4e5a;
  --home-primary-soft: #deffff;
  --home-primary-mist: #def6f5;
  --home-gold: #febb02;
  --home-gold-soft: #fff6d9;
  --home-coral: #f9706a;
  --home-green: #23ae24;
  --home-green-text: #008009;
  --home-green-soft: #dff6e1;
  --home-red-soft: #ffe7e8;
  --home-link: #009ff4;
  --home-warning: #ca4a00;
  --home-urgency-text: #c23b4a;
  --home-text: #3c4e5a;
  --home-text-muted: #707070;
  --home-ink: #141515;
  --home-surface: #ffffff;
  --home-page-bg: #f3f6f6;
  --home-border: #d8e0e0;
  --home-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.16);
  --home-shadow-lg: 6px 6px 12px 0 rgba(0, 0, 0, 0.16);
  --home-label-deal: #f9706a;
  --home-font: "Lato", "Segoe UI", sans-serif;
  --home-font-display: "Montserrat", "Lato", sans-serif;

  font-family: var(--home-font);
  color: var(--home-text);
  background: var(--home-page-bg);
  line-height: 1.45;
}

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

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

.hp2 a {
  color: var(--home-primary-dark);
  text-decoration: none;
}

.hp2 h1,
.hp2 h2,
.hp2 h3 {
  margin: 0;
  font-family: var(--home-font-display);
  color: var(--home-primary-deep);
  letter-spacing: -0.03em;
}

.hp2 :where(button, input, select) {
  font: inherit;
}

.hp2 .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.hp2 .wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---- Buttons ---- */

.hp2 .btn {
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  min-height: 48px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.hp2 .btn--primary {
  background: linear-gradient(180deg, #14b8b6, var(--home-primary));
  color: #fff;
  box-shadow: 0 8px 18px rgba(2, 170, 169, 0.28);
}

.hp2 .btn--primary:hover {
  background: var(--home-primary-dark);
  transform: translateY(-1px);
}

.hp2 .btn--gold {
  background: var(--home-gold);
  color: var(--home-primary-deep);
  box-shadow: inset 0 0 0 1px #c99400;
}

.hp2 .btn--gold:hover {
  background: #f0b000;
  transform: translateY(-1px);
}

.hp2 .btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  min-height: 40px;
  font-size: 13px;
}

.hp2 .btn--ghost-dark {
  background: transparent;
  color: var(--home-primary-dark);
  box-shadow: inset 0 0 0 1.5px var(--home-primary);
}

.hp2 .btn--search {
  min-width: 112px;
  font-size: 16px;
}

.hp2 .btn--block {
  width: 100%;
}

/* ---- Ticker ---- */

.hp2 .ticker {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--home-gold);
  color: var(--home-primary-deep);
}

.hp2 .ticker__btn {
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--home-primary-deep);
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  cursor: pointer;
}

.hp2 .ticker__btn svg {
  width: 18px;
  height: 18px;
}

.hp2 .ticker__viewport {
  overflow: hidden;
  min-width: 0;
}

.hp2 .ticker__track {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.hp2 .ticker__track p {
  margin: 0;
  padding: 8px 4px;
  font-size: 13px;
}

.hp2 .ticker__track p + p::before {
  content: "|";
  margin: 0 14px 0 10px;
  opacity: 0.55;
}

.hp2 .ticker__track strong {
  font-weight: 800;
}

/* Only items with a real link (Website Settings > Topbar Items) render as <a> - browsers don't
   inherit link colour by default, so without this it shows the plain blue/visited-purple default
   instead of matching the other, link-less ticker messages' text colour. */
.hp2 .ticker__track a {
  color: inherit;
  text-decoration: none;
}

.hp2 .ticker__track a:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .hp2 .ticker {
    grid-template-columns: 40px 1fr 40px;
  }
  .hp2 .ticker__btn {
    display: grid;
    place-items: center;
  }
  .hp2 .ticker__track {
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
  }
  .hp2 .ticker__track p {
    flex: 0 0 100%;
    text-align: center;
  }
  .hp2 .ticker__track p + p::before {
    display: none;
  }
}

/* ---- Chrome: site-bar / main-nav / mobile-menu ---- */

.hp2 .chrome {
  position: sticky;
  top: 0;
  z-index: 50;
}

.hp2 .chrome.is-stuck .site-bar {
  box-shadow: 0 10px 28px rgba(16, 68, 67, 0.18);
}

.hp2 .site-bar {
  background: var(--home-primary-dark);
  color: #fff;
}

.hp2 .site-bar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.hp2 .site-bar__brand {
  flex: 0 0 auto;
  line-height: 0;
}

/* .hp2 .site-bar__brand img {
  display: block;
  height: 52px;
  width: auto;
  max-width: none;
} */

.hp2 .site-bar__tools {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.hp2 .site-bar__mark {
  height: 52px;
  width: auto;
  object-fit: contain;
}

.hp2 .site-bar__signin,
.hp2 .site-bar__manage {
  color: #fff;
}

.hp2 .site-bar__account {
  display: none;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}

.hp2 .site-bar__account svg {
  width: 22px;
  height: 22px;
}

.hp2 .main-nav {
  background: var(--home-primary-dark);
}

.hp2 .main-nav__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.hp2 .main-nav__inner::-webkit-scrollbar {
  display: none;
}

.hp2 .main-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.hp2 .main-nav svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.hp2 .main-nav a.is-active,
.hp2 .main-nav a:hover {
  background: #fff;
  color: var(--home-primary-dark);
}

.hp2 .nav-toggle {
  display: none;
  position: relative;
  z-index: 91;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85);
  cursor: pointer;
}

.hp2 .nav-toggle svg {
  width: 24px;
  height: 24px;
}

.hp2 .nav-toggle__close {
  display: none;
}
.hp2 .nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}
.hp2 .nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

.mobile-menu[hidden] {
  display: none !important;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  font-family: var(--home-font, "Lato", "Segoe UI", sans-serif);
}

.mobile-menu__scrim {
  position: absolute;
  top: var(--menu-top, 0px);
  right: 0;
  bottom: 0;
  left: 0;
  border: 0;
  background: rgba(12, 36, 40, 0.45);
  cursor: pointer;
}

.mobile-menu__panel {
  position: absolute;
  top: var(--menu-top, 0px);
  right: 0;
  bottom: 0;
  display: grid;
  align-content: start;
  gap: 16px;
  width: min(88vw, 360px);
  height: 100%;
  padding: 20px 18px 28px;
  overflow: auto;
  background: #fff;
  box-shadow: -16px 0 40px rgba(16, 68, 67, 0.18);
}

.mobile-menu__title {
  margin: 0;
  font-family: var(--home-font-display, "Montserrat", sans-serif);
  font-size: 22px;
  color: #3c4e5a;
}

.mobile-menu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-menu__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mobile-menu__actions .hp2-btn,
.mobile-menu__actions a {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 10px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu__actions .is-primary {
  background: linear-gradient(180deg, #14b8b6, #02aaa9);
  color: #fff;
}

.mobile-menu__actions .is-ghost {
  color: #218887;
  box-shadow: inset 0 0 0 1.5px #02aaa9;
}

.mobile-menu nav {
  display: grid;
}

.mobile-menu nav a {
  padding: 12px 4px;
  border-bottom: 1px solid #d8e0e0;
  color: #3c4e5a;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
}

.mobile-menu nav a.is-active {
  color: #02aaa9;
}

body.menu-open {
  overflow: hidden;
}

body.menu-open .hp2 .chrome {
  z-index: 90;
}

@media (max-width: 980px) {
  .hp2 .nav-toggle,
  .hp2 .site-bar__account {
    display: grid;
  }

  .hp2 .site-bar__signin,
  .hp2 .site-bar__manage {
    display: none;
  }

  .hp2 .main-nav {
    display: none;
  }
}

/* ---- Hero + search bar + hero-strip ---- */

.hp2 .hero {
  position: relative;
  min-height: 0;
  display: grid;
  /* Without an explicit column, .hero__inner (its only real grid item - .hero__media is
     position:absolute, so it's taken out of grid flow entirely) has no track to stretch
     against and can size to its own content's intrinsic width instead of the full section -
     this is what was making the hero's search bar/deal card visibly narrower than every other
     .wrap-based section on the page (nav bar, "Continue your search", etc.), which all sit in
     plain block flow and just get the full width for free. Matches .hero__inner's own
     grid-template-columns: 1fr below - a grid container and its one real item should agree on
     that, not just the item. */
  grid-template-columns: 1fr;
  align-items: end;
  overflow: hidden;
  color: #fff;
}

.hp2 .hero__media {
  position: absolute;
  inset: 0;
}

.hp2 .hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  transform-origin: 50% 55%;
  animation: hp2-ken 22s ease-in-out infinite alternate;
}

.hp2 .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 68, 67, 0.2) 0%, rgba(16, 68, 67, 0.05) 44%, rgba(16, 68, 67, 0.4) 100%),
    linear-gradient(90deg, rgba(16, 68, 67, 0.18), transparent 50%);
}

.hp2 .hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: 18px;
  /* Vertical-only now - this sits inside its own .wrap div (section > .wrap > .hero__inner,
     same nesting as every other section) rather than carrying .wrap's class/padding itself, so
     horizontal spacing/max-width comes from .wrap alone instead of two competing padding
     declarations on one element. */
  padding: 64px 0 32px;
}

.hp2 .hero__copy {
  max-width: none;
  animation: hp2-rise 0.85s ease both;
}

.hp2 .hero__copy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 20px;
}

.hp2 .hero__kicker {
  display: inline-flex;
  margin: 0 0 12px;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--home-gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 6px 18px rgba(16, 68, 67, 0.45);
}

.hp2 .hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.12;
  text-shadow: 0 10px 32px rgba(16, 68, 67, 0.4);
}

.hp2 .hero__lede {
  margin: 8px 0 0;
  max-width: 52ch;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 6px 18px rgba(16, 68, 67, 0.45);
}

.hp2 .hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp2 .hero__facts li {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(16, 68, 67, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.hp2 .hero__facts strong {
  font-family: var(--home-font-display);
}

/* FlightSearchTab.cshtml/HotelSearchTab.cshtml (rendered inside .hero by HomePage.cshtml - see
   its own comment - when the CMS toggle picks one of those instead of Holiday) each carry their
   own "Find your next holiday..." heading + dark panel, meant for when that partial is the ONLY
   thing on the page. Inside the new hero it duplicates the real .hero__copy heading right above
   it, so it's hidden here rather than edited out of the shared partial itself (other pages may
   still render it standalone). HolidaySearchTab.cshtml (the default tab) no longer has this
   markup at all - it was rebuilt entirely on the .aip-search-bar component from
   AccommodationItem.cshtml/ProductPage.cshtml (see that file's own header comment), so none of
   the overrides below apply to it any more. */
.hp2 .hero .search-panel-text {
  display: none;
}

.hp2 .hero .search-bar-desktop {
  margin-top: 0;
}

/* Forces the new design's gold-capsule look onto FlightSearchTab.cshtml/HotelSearchTab.cshtml's
   own existing markup/classes (.search-panel-container/.search_item/.search-capsule/
   .search-circle, from SearchTab.css) rather than editing those shared, JS-wired components -
   every field here still opens the same real modals (data-bs-toggle="modal") it always did.
   SearchTab.css has several fairly specific/!important rules of its own for this exact markup
   (it's used standalone elsewhere too), so this needs matching specificity + !important on the
   handful of properties that actually matter for the look, rather than relying on cascade order. */
.hp2 .hero .search-panel-container {
  background: var(--home-gold) !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 8px !important;
  box-shadow: 0 22px 50px rgba(16, 68, 67, 0.28);
}

.hp2 .hero .search_panel_content {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.hp2 .hero .search_item {
  width: auto !important;
  min-height: 0 !important;
  flex: 1 1 0;
  background: #fff !important;
  border-radius: 10px !important;
  border: 0 !important;
  padding: 8px 12px 10px !important;
}

.hp2 .hero .search_item.search-btn {
  flex: 0 0 auto;
  width: auto !important;
  margin-right: 0 !important;
}

.hp2 .hero .search-capsule {
  width: 100% !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

.hp2 .hero .search-capsule > div:first-of-type {
  margin: 0 0 2px;
  font-size: 11px !important;
  font-weight: 700;
  color: var(--home-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hp2 .hero .search-capsule .input-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hp2 .hero .search-capsule .pt-icon {
  display: inline-flex;
  color: var(--home-primary);
  font-size: 16px;
  padding-top: 0 !important;
}

.hp2 .hero .search-capsule input,
.hp2 .hero .search-capsule select {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--home-ink) !important;
  -webkit-text-fill-color: var(--home-ink) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  cursor: pointer;
}

.hp2 .hero .search-capsule:hover,
.hp2 .hero .search-capsule.active {
  background: none !important;
  box-shadow: none !important;
}

.hp2 .hero .search-circle {
  width: 48px !important;
  height: 48px !important;
  min-height: 0;
  border-radius: 50% !important;
  background: var(--home-primary-deep) !important;
  color: #fff;
  font-size: 20px;
  margin: 0 !important;
}

.hp2 .hero .search-circle:hover {
  background: var(--home-primary-dark) !important;
}

@media (max-width: 860px) {
  .hp2 .hero .search_panel_content {
    flex-direction: column;
  }
  .hp2 .hero .search_item {
    width: 100% !important;
  }
}

.hp2 .hero-strip {
  position: relative;
  display: grid;
  /* Without an explicit column, this card's one implicit column sizes to its content's
     min-content width instead of the card's own box - and .hero-strip__perks's uppercase,
     letter-spaced "LUXURY TRANSFERS INCLUDED"/"FLIGHTS INCLUDED" text has a wide min-content
     size that doesn't want to shrink, which was pushing the whole card (and the page with it)
     wider than the viewport on mobile instead of letting that list wrap. Same root cause as
     .hero above - a grid container and its real item(s) need to agree on a template. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 28px;
  padding: 18px 16px 14px;
  border-radius: 14px;
  color: #fff;
  background: rgba(16, 68, 67, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 2px 0 rgba(254, 187, 2, 0.9),
    0 18px 40px rgba(16, 68, 67, 0.22);
  animation: hp2-rise 0.9s 0.12s ease both;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hp2 .hero-strip {
    background: rgba(16, 68, 67, 0.4);
    backdrop-filter: blur(18px) saturate(1.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
  }
}

.hp2 .hero-strip__badge {
  position: absolute;
  top: 0;
  left: 18px;
  z-index: 1;
  display: inline-flex;
  margin: 0;
  padding: 6px 10px;
  border-radius: 4px;
  transform: translateY(-50%);
  background: var(--home-label-deal);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hp2 .hero-strip__body {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.hp2 .hero-strip__photo {
  display: block;
  overflow: hidden;
  height: 112px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(16, 68, 67, 0.28);
}

.hp2 .hero-strip__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.hp2 .hero-strip__main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 24px;
}

.hp2 .hero-strip__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
  padding-right: 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.32);
  line-height: 1;
}

.hp2 .hero-strip__price strong {
  font-family: var(--home-font-display);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.05em;
}

.hp2 .hero-strip__price small {
  font-family: var(--home-font-display);
  font-size: 16px;
  font-weight: 700;
  opacity: 0.85;
}

.hp2 .hero-strip__copy h2 {
  margin: 0 0 4px;
  color: #fff;
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 800;
  line-height: 1.25;
}

.hp2 .hero-strip__copy p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}

.hp2 .hero-strip__cta {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.hp2 .hero-strip__safe {
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--home-primary-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hp2 .hero-strip__cta .btn {
  min-width: 156px;
  min-height: 44px;
}

.hp2 .hero-strip__perks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp2 .hero-strip__perks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hp2 .hero-strip__perks svg {
  width: 18px;
  height: 18px;
  flex: none;
}

@media (max-width: 860px) {
  .hp2 .hero-strip__body {
    grid-template-columns: 1fr;
  }
  .hp2 .hero-strip__photo {
    height: 160px;
  }
  .hp2 .hero-strip__main {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hp2 .hero-strip__price {
    border-right: 0;
    padding-right: 0;
  }
  .hp2 .hero-strip__cta {
    justify-items: stretch;
  }
  .hp2 .hero-strip__safe {
    text-align: center;
  }
  .hp2 .hero-strip__cta .btn {
    width: 100%;
  }
  /* AipSearchDropdowns.css collapses .aip-search-bar behind a tap-to-expand ".aip-search-summary"
     chip below 860px - a reasonable trade-off on AccommodationItem.cshtml/ProductPage.cshtml,
     where the search bar sits above a long page of other content, but wrong here: on the
     homepage the search bar IS the hero's main call to action, so it should never start hidden.
     #aipSearchWrap only exists inside the homepage's hero (HolidaySearchTab.cshtml), so this
     can't affect that shared component's behaviour on the other two pages. */
  .hp2 #aipSearchWrap .aip-search-bar {
    max-height: none;
    visibility: visible;
    margin-top: 14px;
  }
  .hp2 #aipSearchWrap .aip-search-summary {
    display: none;
  }
  /* Departure date + Duration share one row instead of each taking a full one - the two other
     fields either side of them (airport/resort, guests) stay full-width since their own values
     tend to run longer, but "Tue 15 Sep" and "7 nights" are short enough to sit side by side.
     Switching to 2 columns and spanning every OTHER field across both puts date/nights, which
     are adjacent in the markup, into the same grid row automatically via normal auto-placement -
     no need to name them individually. */
  .hp2 #aipSearchWrap .aip-search-bar {
    grid-template-columns: 1fr 1fr;
  }
  .hp2 #aipSearchWrap #aipOpenAirports,
  .hp2 #aipSearchWrap #aipOpenResort,
  .hp2 #aipSearchWrap #aipOpenGuests,
  .hp2 #aipSearchWrap .aip-search-bar__btn {
    grid-column: 1 / -1;
  }
}

/* ---- Continue your search (resume cards) ---- */

.hp2 .resume {
  padding: 28px 0 4px;
}

.hp2 .resume h2 {
  margin: 0 0 14px;
  font-size: 22px;
}

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

.hp2 .resume__card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 100px;
  padding: 8px 12px 8px 8px;
  background: #fff;
  border: 1px solid var(--home-border);
  border-radius: 8px;
  box-shadow: var(--home-shadow);
  color: inherit;
  text-decoration: none;
}

.hp2 .resume__card:hover {
  box-shadow: inset 0 0 0 2px var(--home-primary);
}

.hp2 .resume__media {
  position: relative;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border-radius: 6px;
}

.hp2 .resume__media img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.hp2 .resume__kind {
  position: absolute;
  top: 6px;
  left: 6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--home-primary);
  color: #fff;
}

.hp2 .resume__kind--hotel {
  background: var(--home-primary-dark);
}

.hp2 .resume__kind svg {
  width: 14px;
  height: 14px;
}

.hp2 .resume__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.hp2 .resume__body strong {
  font-size: 15px;
  color: var(--home-primary-deep);
}

.hp2 .resume__body span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--home-text-muted);
}

.hp2 .resume__body svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

@media (max-width: 860px) {
  /* Swipeable horizontal rail instead of stacking all 3 cards full-width one under another -
     same pattern as .types-track's holiday-types rail (flex row, scroll-snap, hidden
     scrollbar), rather than a plain 1-column grid. Desktop keeps the 3-column grid above since
     there's never more than 3 resume cards and they fit side by side without needing to scroll. */
  .hp2 .resume__list {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .hp2 .resume__list::-webkit-scrollbar {
    display: none;
  }
  .hp2 .resume__card {
    flex: 0 0 min(280px, 80vw);
    scroll-snap-align: start;
  }
}

/* ---- Trust stack: reviews + safe grid ---- */

.hp2 .trust-stack {
  position: relative;
  z-index: 2;
  padding: 40px 0 52px;
  background: linear-gradient(180deg, #fff 0%, var(--home-primary-mist) 28%, var(--home-page-bg) 100%);
}

.hp2 .reviews {
  padding: 40px 0 0;
  margin-bottom: 0;
}

.hp2 .reviews__panel {
  align-items: start;
  padding: 18px 20px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(216, 224, 224, 0.9);
  box-shadow:
    inset 0 3px 0 var(--home-gold),
    0 16px 40px rgba(16, 68, 67, 0.08);
}

.hp2 .reviews__grade {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 800;
  color: var(--home-primary-deep);
}

.hp2 .reviews__stars {
  display: flex;
  gap: 3px;
  margin: 0 0 8px;
}

.hp2 .reviews__stars span {
  width: 22px;
  height: 22px;
  background: #00b67a;
  clip-path: polygon(50% 3%, 63% 38%, 100% 38%, 69% 60%, 81% 97%, 50% 75%, 19% 97%, 31% 60%, 0 38%, 37% 38%);
}

.hp2 .reviews__count {
  display: inline-block;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--home-primary-deep);
}

.hp2 .reviews__brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #191919;
}

.hp2 .reviews__brand svg {
  width: 18px;
  height: 18px;
  color: #00b67a;
}

.hp2 .reviews__widget {
  /* The real stored widget (Umbraco's customHtmlInput on TrustPilotWidget) is a full "TrustBox
     Carousel" - several review cards laid out side by side by Trustpilot's own bootstrap script,
     not the compact single-line mini-widget the prototype's own reference content used. A fixed
     140px/overflow:hidden box (matching the prototype) clips/crushes that real widget instead of
     showing it - let it size itself instead. */
  min-width: 0;
  border-radius: 10px;
  background: var(--home-page-bg);
  padding: 4px;
}

.hp2 .reviews__widget iframe {
  display: block;
  width: 100%;
  border: 0;
  min-height: 140px;
}

@media (max-width: 980px) {
  .hp2 .reviews__panel {
    align-items: center;
  }
}

.hp2 .safe__head {
  text-align: center;
  max-width: 22em;
  margin: 0 auto 28px;
}

.hp2 .safe__head h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
}

.hp2 .safe__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp2 .safe__grid li {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 22px 14px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(216, 224, 224, 0.85);
  box-shadow: 0 10px 24px rgba(16, 68, 67, 0.06);
  text-align: center;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.hp2 .safe__grid li:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(16, 68, 67, 0.12);
}

.hp2 .safe__mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  /* background: var(--home-primary-dark); */
  color: #fff;
  box-shadow: 0 0 0 4px var(--home-gold-soft);
}

.hp2 .safe__mark img,
.hp2 .safe__mark svg {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.hp2 .safe__mark strong {
  font-family: var(--home-font-display);
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

.hp2 .safe__grid li > strong {
  font-size: 15px;
  color: var(--home-primary-deep);
}

.hp2 .safe__grid li > span:last-child {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--home-text-muted);
}

@media (max-width: 980px) {
  .hp2 .reviews__panel {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hp2 .reviews__stars {
    justify-content: center;
  }
  .hp2 .safe__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

/* ---- Section/eyebrow primitives ---- */

.hp2 .section {
  padding: 48px 0 8px;
}

.hp2 .section--mist {
  margin-top: 24px;
  padding: 48px 0;
  background: linear-gradient(180deg, var(--home-primary-mist), var(--home-page-bg));
}

.hp2 .section__head {
  max-width: 640px;
  margin: 0 0 28px;
}

.hp2 .section__head--center {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
}

.hp2 .section__head--center p {
  font-weight: 500;
}

.hp2 .section__head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  max-width: none;
}

.hp2 .section__head h2 {
  margin: 0 0 8px;
  font-size: clamp(26px, 3vw, 36px);
}

.hp2 .section__head p {
  margin: 0;
  font-weight: 700;
  color: var(--home-text-muted);
}

.hp2 .section__head a {
  color: var(--home-primary);
}

.hp2 .eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--home-primary);
}

/* ---- Deal of the Week ---- */

.hp2 .week {
  display: grid;
  grid-template-columns: minmax(250px, 34%) minmax(0, 1fr) 228px;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--home-border);
  box-shadow: 0 10px 28px rgba(16, 68, 67, 0.1);
}

.hp2 .week__hero {
  position: relative;
  min-height: 280px;
  color: #fff;
}

.hp2 .week__hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}

.hp2 .week__hero-open {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hp2 .week__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 36, 40, 0.08) 45%, rgba(12, 36, 40, 0.35) 100%);
  pointer-events: none;
}

.hp2 .week__flags {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.hp2 .week__flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--home-coral);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.hp2 .week__flag svg,
.hp2 .week__flag img {
  width: 12px;
  height: 12px;
}

.hp2 .week__fav,
.hp2 .week__photos {
  position: absolute;
  z-index: 2;
}

.hp2 .week__fav {
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--home-primary);
  cursor: pointer;
}

.hp2 .week__fav svg {
  width: 16px;
  height: 16px;
}

.hp2 .week__fav.is-on svg path {
  fill: var(--home-primary);
  stroke: var(--home-primary);
}

.hp2 .week__photos {
  left: 12px;
  right: auto;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 21, 21, 0.5);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}

.hp2 .week__photos svg {
  width: 13px;
  height: 13px;
}

.hp2 .week__main {
  padding: 16px 18px 16px 20px;
}

.hp2 .week__score {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}

.hp2 .week__score strong {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--home-primary);
  color: #fff;
  font-family: var(--home-font-display);
  font-size: 14px;
  font-weight: 800;
}

.hp2 .week__score span {
  font-size: 12px;
  font-weight: 700;
  color: var(--home-text-muted);
  line-height: 1.25;
}

.hp2 .week__main h3 {
  margin: 0 0 4px;
  color: var(--home-text);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.hp2 .week__place {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--home-text-muted);
}

.hp2 .week__stars {
  color: var(--home-gold);
  letter-spacing: 0.12em;
}

.hp2 .week__stay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--home-primary-deep);
}

.hp2 .week__stay span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--home-primary);
  font-size: 13px;
}

.hp2 .week__stay svg {
  width: 15px;
  height: 15px;
}

.hp2 .week__perks {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.hp2 .week__perks li {
  display: flex;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--home-green-text);
}

.hp2 .week__perks li::before {
  content: "✓";
  flex: 0 0 auto;
}

.hp2 .week__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.hp2 .week__tags span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--home-primary);
  color: var(--home-primary-dark);
  font-size: 11px;
  font-weight: 800;
}

.hp2 .week__tags-hot {
  border-color: transparent !important;
  background: #fff1e6;
  color: var(--home-warning) !important;
}

.hp2 .week__pay {
  display: grid;
  align-content: center;
  justify-items: stretch;
  gap: 6px;
  padding: 16px;
  background: var(--home-primary-mist);
}

.hp2 .week__who {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--home-text-muted);
}

.hp2 .week__was {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--home-text-muted);
}

.hp2 .week__was span {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--home-green-soft);
  color: var(--home-green-text);
  font-size: 11px;
  font-weight: 800;
}

.hp2 .week__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  line-height: 1;
  color: var(--home-text);
}

.hp2 .week__price > span {
  font-size: 12px;
  font-weight: 800;
  color: var(--home-text-muted);
}

.hp2 .week__price strong {
  font-family: var(--home-font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.hp2 .week__price small {
  font-size: 14px;
  font-weight: 800;
}

.hp2 .week__inc {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--home-green-text);
}

.hp2 .week__inc::before {
  content: "✓ ";
}

.hp2 .week__left {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--home-urgency-text);
}

.hp2 .week__left::before {
  content: "⏱ ";
}

.hp2 .week__pay .btn {
  width: 100%;
  min-height: 44px;
  margin: 4px 0 0;
}

.hp2 .week__atol {
  position: relative;
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: help;
}

.hp2 .week__atol-logo {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}

.hp2 .week__atol-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--home-green-text);
  border-bottom: 1px dotted currentColor;
}

.hp2 .week__atol-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 6;
  width: 220px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--home-primary-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 10px 22px rgba(60, 78, 90, 0.22);
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.hp2 .week__atol-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: var(--home-primary-deep);
  transform: translateX(-50%) rotate(45deg);
}

.hp2 .week__atol:hover .week__atol-tip,
.hp2 .week__atol:focus .week__atol-tip,
.hp2 .week__atol:focus-visible .week__atol-tip {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 980px) {
  .hp2 .week {
    grid-template-columns: 1fr;
  }
  .hp2 .week__hero {
    min-height: 220px;
  }
}

/* ---- Spots (3-card promo) ---- */

.hp2 .spots__head {
  max-width: 560px;
}

.hp2 .spots {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  grid-template-rows: minmax(230px, 1fr) minmax(230px, 1fr);
  gap: 16px;
  min-height: 560px;
}

.hp2 .spot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  background: #0c2428;
  box-shadow: var(--home-shadow);
}

.hp2 .spot--lead {
  grid-row: 1 / span 2;
}

.hp2 .spot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.55s ease;
}

.hp2 .spot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 36, 40, 0.08) 35%, rgba(12, 36, 40, 0.42) 100%);
  pointer-events: none;
}

.hp2 .spot:hover img {
  transform: scale(1.08);
}

.hp2 .spot__chip {
  position: absolute;
  z-index: 1;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--home-primary-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hp2 .spot__chip--hot {
  background: var(--home-coral);
  color: #fff;
}

.hp2 .spot__panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  margin: 14px;
  padding: 16px 18px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(60, 78, 90, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.hp2 .spot__panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--home-primary);
  transition: background 0.2s ease;
}

.hp2 .spot:hover .spot__panel {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(60, 78, 90, 0.2);
}

.hp2 .spot:hover .spot__panel::before {
  background: var(--home-gold);
}

.hp2 .spot__panel strong {
  font-family: var(--home-font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--home-primary-deep);
}

.hp2 .spot--lead .spot__panel strong {
  font-size: clamp(22px, 2.2vw, 28px);
}

.hp2 .spot__panel em {
  display: -webkit-box;
  overflow: hidden;
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--home-text-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hp2 .spot__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 8px;
}

.hp2 .spot__price {
  font-size: 13px;
  font-weight: 700;
  color: var(--home-text-muted);
}

.hp2 .spot__price b {
  display: inline-block;
  margin-right: 2px;
  font-family: var(--home-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--home-text);
}

.hp2 .spot__go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 800;
  color: var(--home-primary);
}

.hp2 .spot__go svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.hp2 .spot:hover .spot__go {
  color: var(--home-primary-dark);
}

.hp2 .spot:hover .spot__go svg {
  transform: translateX(3px);
}

@media (max-width: 860px) {
  .hp2 .spots {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    min-height: 0;
  }
  .hp2 .spot,
  .hp2 .spot--lead {
    grid-row: auto;
    min-height: 260px;
  }
}

/* ---- Video / film card ---- */

.hp2 .film-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) 1.2fr;
  overflow: hidden;
  min-height: 400px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--home-shadow-lg);
}

.hp2 .film-card__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 36px;
  background: linear-gradient(165deg, #fff 0%, var(--home-primary-mist) 100%);
}

.hp2 .film-card__copy h2 {
  margin: 0 0 10px;
  font-size: clamp(26px, 3vw, 36px);
}

.hp2 .film-card__copy > p {
  margin: 0 0 22px;
  max-width: 36ch;
  font-weight: 600;
  line-height: 1.5;
  color: var(--home-text-muted);
}

.hp2 .film-card__copy .btn svg {
  width: 18px;
  height: 18px;
}

.hp2 .film-card__meta {
  margin: 14px 0 0 !important;
  font-size: 13px;
  font-weight: 700;
}

.hp2 .film-card__stage {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
  background: #0c2428;
}

.hp2 .film-card__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.hp2 .film-card__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 36, 40, 0.18), transparent 45%);
  pointer-events: none;
}

.hp2 .film-card__play {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.hp2 .film-card__play::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 36px rgba(12, 36, 40, 0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hp2 .film-card__core {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(180deg, #14b8b6, var(--home-primary));
  color: #fff;
  box-shadow:
    0 10px 22px rgba(2, 170, 169, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.hp2 .film-card__core svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;
}

.hp2 .film-card__pulse {
  position: absolute;
  inset: -8px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: hp2-film-pulse 2.2s ease-out infinite;
  pointer-events: none;
}

.hp2 .film-card__pulse--late {
  animation-delay: 1.1s;
}

.hp2 .film-card__play:hover .film-card__core {
  background: var(--home-primary-dark);
  transform: scale(1.06);
  box-shadow: 0 12px 26px rgba(33, 136, 135, 0.42);
}

.hp2 .film-card__time {
  position: absolute;
  z-index: 1;
  right: 14px;
  bottom: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(20, 21, 21, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

@media (max-width: 860px) {
  .hp2 .film-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hp2 .film-card__stage {
    min-height: 220px;
    /* .film-card__copy comes first in the markup (desktop shows copy on the left, video on the
       right), which would otherwise stack as copy-then-video on a single mobile column - flip
       the visual order only, so the video poster/play button leads and the heading/description/
       button follow underneath, without touching reading/DOM order for screen readers. */
    order: -1;
  }
}

/* ---- Regions mosaic ---- */

.hp2 .mosaic {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: 240px 240px;
  gap: 16px;
}

.hp2 .mosaic__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  color: #fff;
  text-decoration: none;
  min-height: 240px;
  box-shadow: var(--home-shadow);
}

.hp2 .mosaic__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.hp2 .mosaic__item:hover img {
  transform: scale(1.07);
}

.hp2 .mosaic__item--tall {
  grid-row: 1 / span 2;
  min-height: 0;
}

.hp2 .mosaic__item--tall img {
  object-position: center 78%;
}

.hp2 .mosaic__item--tall strong {
  font-size: 28px;
}

.hp2 .mosaic__chip {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--home-primary-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(12, 36, 40, 0.18);
}

.hp2 .mosaic__copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 28px 20px 20px;
  background: linear-gradient(transparent, rgba(16, 68, 67, 0.88));
}

.hp2 .mosaic__copy strong {
  display: block;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.hp2 .mosaic__copy em {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.9;
}

@media (max-width: 980px) {
  .hp2 .mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 200px);
  }
  .hp2 .mosaic__item--tall {
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .hp2 .mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
}

/* ---- Holiday-types rail ---- */

.hp2 .types-head {
  margin-bottom: 24px;
}
.hp2 .types-head__copy {
  max-width: 560px;
}
.hp2 .types-head__copy h2,
.hp2 .types-head__copy p {
  margin: 0 0 8px;
}
.hp2 .types-head__copy p:last-child {
  margin: 0;
  font-weight: 600;
  color: var(--home-text-muted);
}

.hp2 .types-nav {
  display: flex;
  gap: 8px;
}

.hp2 .types-nav button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--home-primary-deep);
  box-shadow: inset 0 0 0 1px var(--home-border);
  cursor: pointer;
}

.hp2 .types-nav button svg {
  width: 20px;
  height: 20px;
}

.hp2 .types-nav button:hover:not(:disabled) {
  color: var(--home-primary-dark);
  box-shadow: inset 0 0 0 2px var(--home-primary);
}

.hp2 .types-nav button:disabled {
  opacity: 0.38;
  cursor: default;
}

.hp2 .types-rail {
  position: relative;
}

.hp2 .types-rail::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 10px;
  width: 36px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--home-page-bg));
}

.hp2 .types-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 2px 4px 12px 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.hp2 .types-track::-webkit-scrollbar {
  display: none;
}

.hp2 .kind {
  flex: 0 0 min(280px, 78vw);
  display: grid;
  align-content: start;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
}

.hp2 .kind__photo {
  display: block;
  overflow: hidden;
  height: 176px;
  border-radius: 14px;
  background: #0c2428;
  box-shadow: var(--home-shadow);
}

.hp2 .kind__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.hp2 .kind:hover .kind__photo img {
  transform: scale(1.06);
}

.hp2 .kind strong {
  font-family: var(--home-font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--home-primary-deep);
}

.hp2 .kind em {
  display: -webkit-box;
  overflow: hidden;
  min-height: 2.9em;
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--home-text-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hp2 .kind__go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 800;
  color: var(--home-primary);
}

.hp2 .kind__go svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.hp2 .kind:hover .kind__go {
  color: var(--home-primary-dark);
}

.hp2 .kind:hover .kind__go svg {
  transform: translateX(3px);
}

/* ---- Newsletter signup ---- */

.hp2 .signup {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--home-shadow-lg);
}

.hp2 .signup__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 36px;
  background: linear-gradient(165deg, var(--home-primary-mist) 0%, #fff 72%);
}

.hp2 .signup__copy h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 3vw, 32px);
}

.hp2 .signup__copy p:last-of-type {
  margin: 0;
  max-width: 36ch;
  font-weight: 600;
  color: var(--home-text-muted);
}

.hp2 .signup__form {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 36px;
  background: var(--home-primary-deep);
}

.hp2 .signup__form label {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}

.hp2 .signup__form input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: var(--home-text);
  font: inherit;
}

.hp2 .signup__form input:focus {
  outline: 2px solid var(--home-gold);
  outline-offset: 2px;
}

.hp2 .signup__form .btn {
  justify-self: start;
  min-width: 140px;
}

@media (max-width: 860px) {
  .hp2 .signup {
    grid-template-columns: 1fr;
  }
  .hp2 .signup__form .btn {
    justify-self: stretch;
    width: 100%;
  }
}

/* ---- Real estate / "Your dream home" promo ---- */

.hp2 .homes {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  overflow: hidden;
  min-height: 380px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--home-shadow-lg);
}

.hp2 .homes__photo {
  min-height: 280px;
  background: #0c2428;
}

.hp2 .homes__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp2 .homes__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  padding: 40px 36px;
}

.hp2 .homes__copy h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
}

.hp2 .homes__copy > p {
  margin: 0;
  max-width: 38ch;
  font-weight: 600;
  color: var(--home-text-muted);
}

.hp2 .homes__stat {
  margin: 4px 0 2px !important;
  color: var(--home-primary-deep) !important;
}

.hp2 .homes__stat b {
  display: inline-block;
  margin-right: 4px;
  font-family: var(--home-font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--home-primary);
}

.hp2 .homes__copy .btn {
  margin-top: 10px;
}

@media (max-width: 860px) {
  .hp2 .homes {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hp2 .homes__photo {
    min-height: 220px;
  }
}

/* ---- Hotel directory tabs ---- */

.hp2 .dir {
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--home-shadow);
}

.hp2 .dir__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--home-border);
}

.hp2 .dir__tabs button {
  min-height: 52px;
  padding: 0 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--home-text-muted);
  font-weight: 800;
  cursor: pointer;
}

.hp2 .dir__tabs button[aria-selected="true"] {
  color: var(--home-primary-deep);
  border-bottom-color: var(--home-primary);
}

.hp2 .dir__tabs button:hover {
  color: var(--home-primary-dark);
}

.hp2 .dir__panel {
  padding: 28px 32px 32px;
}

.hp2 .dir__panel[hidden] {
  display: none;
}

.hp2 .dir__panel > p {
  margin: 0;
  max-width: 62ch;
  font-weight: 600;
  color: var(--home-text-muted);
}

.hp2 .dir__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 28px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.hp2 .dir__list a {
  display: block;
  padding: 6px 0;
  color: var(--home-primary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.hp2 .dir__list a:hover {
  color: var(--home-primary-dark);
  text-decoration: underline;
}

@media (max-width: 720px) {
  .hp2 .dir__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hp2 .dir__panel {
    padding: 20px;
  }
  .hp2 .dir__list {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Sitemap ---- */

.hp2 .sitemap {
  padding: 56px 0 64px;
  background: var(--home-surface);
  border-top: 1px solid var(--home-border);
}

.hp2 .sitemap__grid {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr 0.85fr;
  gap: 20px;
  align-items: start;
}

.hp2 .sitemap__card {
  padding: 28px 26px 30px;
  border: 1px solid var(--home-border);
  border-radius: 16px;
  background: var(--home-surface);
  box-shadow: var(--home-shadow);
}

.hp2 .sitemap__card--help {
  background: linear-gradient(180deg, var(--home-primary-mist), #fff);
}

.hp2 .sitemap__kicker {
  margin: 0 0 6px;
  color: var(--home-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hp2 .sitemap__card h3 {
  margin: 0 0 18px;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.hp2 .sitemap__card ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp2 .sitemap__card--help ul {
  grid-template-columns: 1fr;
}

.hp2 .sitemap__card a {
  display: block;
  padding: 6px 0;
  color: var(--home-text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.hp2 .sitemap__card a:hover {
  color: var(--home-primary);
  text-decoration: underline;
}

.hp2 .sitemap__sub {
  margin: 18px 0 10px;
  color: var(--home-text-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hp2 .sitemap__months {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hp2 .sitemap__months li {
  margin: 0;
}

.hp2 .sitemap__months a {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--home-primary-mist);
  color: var(--home-primary-dark);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.hp2 .sitemap__months a:hover {
  background: var(--home-primary);
  color: #fff;
}

@media (max-width: 980px) {
  .hp2 .sitemap__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Footer ---- */

.hp2 .foot {
  color: #fff;
  padding: 0 0 16px;
  background: radial-gradient(80% 60% at 12% -10%, rgba(2, 170, 169, 0.55), transparent 58%), var(--home-primary-dark);
  border-top: 4px solid var(--home-primary);
}

.hp2 .foot a {
  color: #fff;
  text-decoration: none;
}

.hp2 .foot h2 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.hp2 .foot__top {
  display: grid;
  grid-template-columns: 1.35fr 1.15fr 0.85fr;
  gap: 14px;
  padding: 22px 0 0;
  align-items: start;
}

.hp2 .foot__panel {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.hp2 .foot__panel--offer {
  background: #fff;
  border-color: transparent;
  color: var(--home-text);
}

.hp2 .foot__panel--offer h2,
.hp2 .foot__panel--offer .foot__kicker,
.hp2 .foot__panel--offer .foot__lede,
.hp2 .foot__panel--offer .foot__legal,
.hp2 .foot__panel--offer .foot__legal a {
  color: var(--home-text);
}

.hp2 .foot__panel--offer .foot__kicker {
  color: var(--home-primary);
}

.hp2 .foot__panel--offer .foot__lede,
.hp2 .foot__panel--offer .foot__legal {
  color: var(--home-text-muted);
}

.hp2 .foot__panel--offer .foot__legal a {
  color: var(--home-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hp2 .foot__kicker {
  margin: 0 0 6px;
  color: var(--home-primary-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hp2 .foot__lede {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.hp2 .foot__lines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 8px;
}

.hp2 .foot__line {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  color: var(--home-text);
  box-shadow: var(--home-shadow);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.hp2 .foot a.foot__line {
  color: var(--home-text);
}

.hp2 .foot__line:hover {
  transform: translateY(-1px);
  box-shadow: var(--home-shadow-lg);
}

.hp2 .foot__line-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--home-primary-mist);
  color: var(--home-primary);
}

.hp2 .foot__line-icon svg {
  width: 16px;
  height: 16px;
}

.hp2 .foot__line strong {
  display: block;
  color: var(--home-text);
  font-family: var(--home-font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.hp2 .foot__line em {
  display: block;
  margin-top: 1px;
  color: var(--home-text);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.hp2 .foot__hours {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.hp2 .foot__hours svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--home-primary-soft);
}

.hp2 .foot__social {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp2 .foot__social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--home-primary-dark);
}

.hp2 .foot__social a:hover {
  background: var(--home-primary);
  color: #fff;
}

.hp2 .foot__social svg {
  width: 14px;
  height: 14px;
}

.hp2 .foot__form {
  display: flex;
  gap: 8px;
  margin: 0 0 8px;
}

.hp2 .foot__form input {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--home-border);
  border-radius: 8px;
  background: var(--home-page-bg);
  color: var(--home-text);
  font: inherit;
}

.hp2 .foot__form .btn {
  flex: 0 0 auto;
  min-width: 96px;
  min-height: 42px;
}

.hp2 .foot__legal {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.4;
}

.hp2 .foot__tp {
  display: block;
  width: 100%;
  max-width: 200px;
  height: 24px;
  border: 0;
  background: transparent;
}

.hp2 .foot__chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 6px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.hp2 .foot__chip::after {
  content: "→";
  color: var(--home-primary-soft);
  font-weight: 700;
}

.hp2 .foot__chip:hover {
  background: #fff;
  border-color: #fff;
  color: var(--home-primary-dark);
}

.hp2 .foot__chip:hover::after {
  color: var(--home-primary);
}

.hp2 .foot__bottom {
  display: grid;
  grid-template-columns: 1.3fr auto;
  gap: 12px 20px;
  align-items: center;
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.12);
}

.hp2 .foot__help .foot__kicker {
  margin-bottom: 8px;
}

.hp2 .foot__help nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hp2 .foot__help a {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.hp2 .foot__help a:hover {
  background: #fff;
  color: var(--home-primary-dark);
}

.hp2 .foot__co {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
}

.hp2 .foot__marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.hp2 .foot__marks img {
  height: 28px !important;
  width: auto !important;
  max-width: 60px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  padding: 4px 6px;
}

.hp2 .foot__marks img[alt="ATOL Protected"] {
  height: 36px !important;
  background: transparent;
  padding: 0;
}

.hp2 .foot__mark--abta {
  height: 32px !important;
  background: transparent;
  padding: 0;
  mix-blend-mode: screen;
}

@media (max-width: 980px) {
  .hp2 .foot__top {
    grid-template-columns: 1fr;
  }
  .hp2 .foot__bottom {
    grid-template-columns: 1fr;
  }
  .hp2 .foot__marks {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .hp2 .foot__lines {
    grid-template-columns: 1fr;
  }
}

/* ---- Film modal (shares .film-modal-scoped keyframes; markup only added if the video section
   is later switched off the legacy #videoModal - kept here for parity/spare use) ---- */

.film-modal[hidden] {
  display: none !important;
}

.film-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.film-modal__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(12, 36, 40, 0.78);
  cursor: pointer;
}

.film-modal__card {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  overflow: hidden;
  border-radius: 14px;
  background: #141515;
  color: #fff;
  box-shadow: 6px 6px 12px 0 rgba(0, 0, 0, 0.16);
}

.film-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 10px 18px;
}

.film-modal__head h2 {
  margin: 0;
  font-family: "Montserrat", "Lato", sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.film-modal__x {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.film-modal__x:hover {
  background: #febb02;
  color: #3c4e5a;
}

.film-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.film-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

body.film-open {
  overflow: hidden;
}

/* ---- Keyframes ---- */

@keyframes hp2-ken {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.08) translate3d(0, -1.5%, 0);
  }
}

@keyframes hp2-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hp2-film-pulse {
  from {
    transform: scale(1);
    opacity: 0.7;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp2 .hero__photo,
  .hp2 .hero__copy,
  .hp2 .search-bar,
  .hp2 .hero-strip,
  .hp2 .film-card__pulse {
    animation: none !important;
  }
}