/* =========================================================================
   HOME PAGE - VERSION 2
   =========================================================================

   Loaded only by index2.phtml (which sets $home2 before including
   index.phtml). Every rule in this file is scoped under .home2 or .h2-*, so
   dropping the stylesheet returns the page to v1 exactly.

   The search engine markup inside the hero is v1's, untouched - all of it is
   driven by the JS bundle at the bottom of index.phtml and duplicating it
   would mean two copies of the tab logic drifting apart. What changes is the
   skin: the rules below override .mainHero's own styling from main.css for
   the .home2 case only.

   Colours come from the main.css custom properties so a white-label agent
   still gets their own palette. The two locals below are the only new ones.
   ========================================================================= */

.home2 {
  --h2-ink: #07182b;
  --h2-line: rgba(255, 255, 255, .22);
}


/* -------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */

/* main.css puts the photograph on .mainHero itself as a background-image.
   v2 needs it on its own layer so it can be animated without dragging the
   search card along with it, so the element's own background is cleared.

   No overflow or inset layer on .mainHero itself: index.phtml opens it and
   never closes it, so it contains every content section further down the
   page. Clipping or covering it would clip or cover the whole page. The hero
   layers live inside .maincontainer, which is closed where it should be. */
.mainHero.home2 {
  background-image: none;
  background-color: var(--h2-ink);
}

/* Again: no overflow:hidden on .maincontainer. It is an ancestor of every
   field in the search engine, so clipping it clips every suggestion list
   that hangs below a field. The zoom is clipped by .h2-hero-layers, which
   contains nothing but the two layers. */
.home2 .maincontainer {
  position: relative;
}

.home2 .h2-hero-layers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

/* The search card and the headline are flex children of .maincontainer and
   have to sit above the two absolutely-positioned layers. */
.home2 .maincontainer > .container {
  position: relative;
  z-index: 2;
}

.home2 .h2-hero-bg {
  position: absolute;
  inset: -4% -4% -4% -4%;   /* bleed, so the zoom never exposes an edge */
  background-position: center;
  background-size: cover;
  will-change: transform;
  animation: h2-kenburns 32s ease-in-out infinite alternate;
}

@keyframes h2-kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}

/* Two scrims, not one. The vertical pass guarantees legibility for the
   headline and for the footer edge; the diagonal pass keeps the left side
   dark enough for the copy without flattening the whole photograph. */
.home2 .h2-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 24, 43, .62) 0%, rgba(7, 24, 43, .18) 30%, rgba(7, 24, 43, .55) 72%, rgba(7, 24, 43, .92) 100%),
    linear-gradient(105deg, rgba(7, 24, 43, .55) 0%, rgba(7, 24, 43, 0) 58%);
}

.home2 .maincontainer {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 3rem;
  padding-bottom: 5rem;
}

.home2 .h2-hero-copy {
  max-width: 46rem;
  margin-bottom: 2.25rem;
}

.home2 .h2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Lato', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--travel-color-10);
  margin-bottom: 1rem;
}

.home2 .h2-eyebrow:before {
  content: "";
  width: 2.25rem;
  height: 2px;
  background: var(--travel-color-10);
  display: inline-block;
}

.home2 h1.h2-headline {
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 5.6vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 1rem 0;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}

/* The accent word. A painted underline rather than a colour change, so it
   still reads as one sentence. */
.home2 .h2-accent {
  position: relative;
  white-space: nowrap;
}

.home2 .h2-accent:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .06em;
  height: .28em;
  background: linear-gradient(90deg, var(--travel-color-10) 0%, rgba(247, 190, 22, .35) 100%);
  border-radius: 2px;
  z-index: -1;
}

.home2 .h2-sub {
  font-family: 'Lato', sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  margin: 0;
  max-width: 38rem;
}


/* -------------------------------------------------------------------------
   HERO - the search card
   ------------------------------------------------------------------------- */

/* v1: a flat 45% navy panel. v2: frosted glass. backdrop-filter degrades to
   the plain background colour where it is unsupported, which is why the
   fallback below is opaque enough to read against any photograph. */
.home2 .search-container.main-search {
  background-color: rgba(9, 28, 48, .58);
  border: 1px solid var(--h2-line);
  border-radius: 22px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .75), 0 2px 0 rgba(255, 255, 255, .06) inset;
  margin-top: 0 !important;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .home2 .search-container.main-search {
    background-color: rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
  }
}

/* Tabs.
   There are up to thirteen of them, and every one is a product somebody can
   book - none of them may be hidden.

   Desktop wraps, so the whole set is visible at once. Below lg the row
   scrolls sideways rather than stacking into three or four ragged lines
   (v1 wrapped everywhere, and on a phone the engine opened with three rows
   of tabs above the fold and nothing else). The fade on the right edge is
   there so a scrolled-off tab reads as "there is more", not as "missing". */
.home2 .main-search-categories-container #sectionstab {
  flex-wrap: wrap;
  justify-content: center !important;
  gap: .35rem;
  padding-bottom: .5rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

@media (max-width: 991.98px) {
  .home2 .main-search-categories-container #sectionstab {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  }
  .home2 .main-search-categories-container #sectionstab::-webkit-scrollbar {
    display: none;
  }
}

.home2 #sectionstab .nav-item {
  flex: 0 0 auto;
}

.home2 #sectionstab .nav-link {
  font-family: 'Lato', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  color: rgba(255, 255, 255, .78);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .55rem 1.05rem;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.home2 #sectionstab .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .18);
}

.home2 #sectionstab .nav-link.active {
  color: var(--travel-color-02);
  background: #fff;
  border-color: #fff;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6);
}

.home2 #sectionstab .nav-link i {
  opacity: .9;
}

/* Fields. v1 drew a 1px blue rule under every control, which read as an
   underline on a dark panel rather than as an input. */
.home2 .mainHero .form-control,
.home2 .mainHero .form-select,
.home2 .mainHero .input-group-text,
.home2 .form-control,
.home2 .form-select,
.home2 .input-group-text {
  border: 0;
  border-bottom: 0;
  background-color: rgba(255, 255, 255, .96);
  color: var(--travel-color-08);
}

/* NO overflow:hidden HERE.
   Every autocomplete on this page - airports, hotels, cities, cruise ports,
   tour countries, FlixBus stops - renders its suggestion list as an
   absolutely positioned child of the input group. Clipping the group to
   round its corners clips the suggestions to the height of the field, and
   every autocomplete on the home page silently stops appearing. The corners
   are rounded on the first and last child instead. */
.home2 .input-group {
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 6px 18px -12px rgba(0, 0, 0, .8);
  transition: box-shadow .18s ease;
}

.home2 .input-group > :first-child {
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

/* The right-hand corners need !important, and NOT :last-child.
   Two things fight this rule:

   1. main.css has
        .mainHero .input-group > .form-control {
            border-top-right-radius: .375rem !important;
            border-bottom-right-radius: .375rem !important; }
      so without !important here the field keeps a 5.25px corner inside a
      14px group - the top-right sits visibly inside the curve.

   2. Every autocomplete appends its .search-helper panel as the LAST child
      of the input group, so the moment a field has an autocomplete the text
      input stops being :last-child and any :last-child rule silently stops
      applying to it. In these groups the icon is the leading addon and the
      field is the trailing element, so the field is targeted directly.

   The .search-helper panel itself is deliberately NOT restyled here - it
   keeps main.css's own radius. */
.home2 .input-group > .form-control,
.home2 .input-group > .form-select {
  border-top-right-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}

.home2 .input-group > .input-group-text:last-child {
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* The autocomplete panel HAS to match the group's radius, and this is not
   decoration.

   The panel is absolutely positioned at inset 0 of the input group, so it
   covers the field it belongs to. The group carries the focus ring
   (box-shadow, which follows the group's 14px corners); main.css gives the
   panel .375rem. Two different curves on the same corner means the ring's
   arc shows through as a notch at the top-left and top-right of every
   focused field with an autocomplete. Matching the radius makes the panel
   sit flush inside the ring.

   EVERY TAB, not just Air. There is no single autocomplete component on
   this page - each product bundle builds its own panel with its own class
   name, and there are nine of them:

     search-helper                    air.js, escortedtours.js, main.js
     search-helper-hotels             hotels.js
     search-helper-cruises            cruises.js
     search-helper-transfers-origin   transfers.js
     search-helper-transfers-destination
     search-helper-activities         activities.js
     search-helper-insurances         insurances.js
     fx-suggest-list                  flixbus.js
     rc-suggest-list                  rivercruises.js

   Naming them one at a time is how Hotels ended up with a square top-right
   corner while Air was correct. The substring match covers the seven
   search-helper* variants including any added later; the two suggest lists
   are named because they do not share the prefix.

   main.css sets .375rem with !important, so this has to answer in kind. The
   panels carry their own overflow:hidden, so anything inside them is
   clipped to the same curve. */
.home2 [class*="search-helper"],
.home2 .fx-suggest-list,
.home2 .rc-suggest-list {
  border-radius: 14px !important;
}

.home2 .input-group:focus-within {
  box-shadow: 0 0 0 3px rgba(247, 190, 22, .55), 0 6px 18px -12px rgba(0, 0, 0, .8);
}

.home2 .search-container .form-label {
  font-family: 'Lato', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  margin-bottom: .35rem;
}

.home2 .search-container .form-check-label {
  color: rgba(255, 255, 255, .9);
}

/* Search button */
.home2 .button-container {
  margin-top: 1.75rem !important;
}

.home2 .mainHero .button-container .btn,
.home2 .button-container .btn {
  background: linear-gradient(135deg, var(--travel-color-10) 0%, #ffd452 100%);
  color: var(--travel-color-02);
  border: 0;
  border-radius: 999px;
  padding: .95rem 4.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .01em;
  box-shadow: 0 18px 38px -16px rgba(247, 190, 22, .9);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.home2 .mainHero .button-container .btn:hover,
.home2 .button-container .btn:hover {
  background: #fff;
  color: var(--travel-color-02);
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .8);
}

@media (max-width: 575.98px) {
  .home2 .mainHero .button-container .btn,
  .home2 .button-container .btn {
    display: block;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Reassurance strip under the card. Nothing here is a number, because there
   is no number in the system to back one up. */
.home2 .h2-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem 2.5rem;
  margin-top: 1.75rem;
  font-family: 'Lato', sans-serif;
  font-size: .86rem;
  color: rgba(255, 255, 255, .82);
}

.home2 .h2-trust span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.home2 .h2-trust i {
  color: var(--travel-color-10);
  font-size: 1.05rem;
}


/* -------------------------------------------------------------------------
   SECTIONS
   ------------------------------------------------------------------------- */

/* 3rem, matching Bootstrap's spacer 5.
   Set here rather than with a pb-5 utility on each section: Bootstrap's
   spacing utilities are !important, so a section carrying one can never get
   its padding back from CSS - which is how the rail ended up sitting flush
   on the tours panel when the section between them stopped rendering. One
   value, one place, and the collapse rule below still applies. */
.h2-section {
  padding: 3rem 0;
}

/* Two untinted sections in a row stack their padding - 3rem of bottom plus
   3rem of top is 96px of empty page between two blocks that are already
   separated by being different blocks. The second one drops its top padding.

   A tinted section is excluded on both sides: there the padding is what
   makes the band a band, and collapsing it would push the content against
   the colour change. */
.h2-section:not(.h2-tint) + .h2-section:not(.h2-tint) {
  padding-top: 0;
}

.h2-section.h2-tint {
  background: #f7f5f1;
}

.h2-section-head {
  margin-bottom: 1.75rem;
}

.h2-section-head .h2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Lato', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--travel-color-01);
  margin-bottom: .65rem;
}

.h2-section-head .h2-eyebrow:before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--travel-color-10);
  display: inline-block;
}

.h2-section-title {
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--travel-color-02);
  margin: 0 0 .5rem 0;
}

.h2-section-sub {
  font-family: 'Lato', sans-serif;
  color: var(--main-color);
  font-size: 1.02rem;
  margin: 0;
  max-width: 44rem;
}

.h2-more {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  color: var(--travel-color-01);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.h2-more:hover {
  color: var(--travel-color-02);
}

.h2-more i {
  transition: transform .18s ease;
}

.h2-more:hover i {
  transform: translateX(3px);
}


/* -------------------------------------------------------------------------
   PRODUCT RAIL
   ------------------------------------------------------------------------- */

.h2-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.h2-railitem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .85rem;
  padding: 1.35rem 1.2rem;
  background: #fff;
  border: 1px solid #e8e6e1;
  border-radius: 16px;
  text-decoration: none;
  color: var(--travel-color-02);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.h2-railitem:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 18px 36px -22px rgba(7, 24, 43, .55);
  color: var(--travel-color-02);
}

.h2-railitem i {
  font-size: 1.45rem;
  color: var(--travel-color-01);
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(5, 92, 157, .08);
  transition: background .2s ease, color .2s ease;
}

.h2-railitem:hover i {
  background: var(--travel-color-10);
  color: var(--travel-color-02);
}

.h2-railitem span {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.25;
}


/* -------------------------------------------------------------------------
   DESTINATION MOSAIC
   ------------------------------------------------------------------------- */

.h2-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 13rem;
  gap: 1rem;
}

.h2-bento a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  text-decoration: none;
  background: #0d2035;
}

/* Six tiles tile a 4 x 3 grid exactly:
     row 1  [ 1 1 ][ 2 ][ 3 ]
     row 2  [ 1 1 ][  4   4 ]
     row 3  [  5   5 ][ 6 6 ]
   Change the count and this has to change with it. */
.h2-bento a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.h2-bento a:nth-child(4),
.h2-bento a:nth-child(5),
.h2-bento a:nth-child(6) { grid-column: span 2; }

.h2-bento img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.h2-bento a:hover img {
  transform: scale(1.07);
}

.h2-bento a:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 24, 43, 0) 35%, rgba(7, 24, 43, .78) 100%);
}

.h2-bento .h2-bento-label {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.1rem;
  z-index: 2;
  color: #fff;
}

.h2-bento .h2-bento-name {
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
  display: block;
}

.h2-bento a:nth-child(1) .h2-bento-name {
  font-size: 2rem;
}

.h2-bento .h2-bento-note {
  font-family: 'Lato', sans-serif;
  font-size: .85rem;
  color: rgba(255, 255, 255, .8);
  display: block;
  margin-top: .15rem;
}

/* Two columns: tile 1 goes full width as a banner, the rest pair off. */
@media (max-width: 991.98px) {
  .h2-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 11rem; }
  .h2-bento a:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .h2-bento a:nth-child(4),
  .h2-bento a:nth-child(5),
  .h2-bento a:nth-child(6) { grid-column: span 1; }
}

@media (max-width: 575.98px) {
  .h2-bento { grid-template-columns: 1fr; grid-auto-rows: 10rem; }
  .h2-bento a:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .h2-bento a:nth-child(1) .h2-bento-name { font-size: 1.5rem; }
}


/* -------------------------------------------------------------------------
   FEATURE PANEL
   ------------------------------------------------------------------------- */

.h2-feature {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: 26rem;
  display: flex;
  align-items: center;
  background: #0d2035;
}

.h2-feature-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
}

.h2-feature:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(7, 24, 43, .92) 0%, rgba(7, 24, 43, .72) 45%, rgba(7, 24, 43, .15) 100%);
}

.h2-feature-body {
  position: relative;
  z-index: 2;
  padding: 3.25rem;
  max-width: 34rem;
  color: #fff;
}

.h2-feature-body .h2-eyebrow {
  color: var(--travel-color-10);
}

.h2-feature-body .h2-eyebrow:before {
  background: var(--travel-color-10);
}

.h2-feature-body h2 {
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 .85rem 0;
}

.h2-feature-body p {
  font-family: 'Lato', sans-serif;
  color: rgba(255, 255, 255, .85);
  line-height: 1.65;
  margin: 0 0 1.5rem 0;
}

.h2-feature-points {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem 0;
  font-family: 'Lato', sans-serif;
  color: rgba(255, 255, 255, .9);
}

.h2-feature-points li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: .55rem;
  font-size: .96rem;
}

.h2-feature-points i {
  color: var(--travel-color-10);
  margin-top: .15rem;
}

.h2-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  padding: .8rem 2rem;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.h2-btn-gold {
  background: var(--travel-color-10);
  color: var(--travel-color-02);
  box-shadow: 0 16px 32px -18px rgba(247, 190, 22, .95);
}

.h2-btn-gold:hover {
  background: #fff;
  color: var(--travel-color-02);
  transform: translateY(-2px);
}

.h2-btn-outline {
  border: 1px solid var(--travel-color-01);
  color: var(--travel-color-01);
  background: transparent;
}

.h2-btn-outline:hover {
  background: var(--travel-color-01);
  color: #fff;
}

/* Mirrored panel. Two identical full-bleed panels stacked down the page read
   as a template; flipping the second puts the photograph on the left and the
   copy on the right, so the eye has somewhere different to go. */
.h2-feature-flip {
  justify-content: flex-end;
}

.h2-feature-flip:after {
  background: linear-gradient(260deg, rgba(7, 24, 43, .92) 0%, rgba(7, 24, 43, .72) 45%, rgba(7, 24, 43, .15) 100%);
}

@media (max-width: 767.98px) {
  .h2-feature { min-height: 0; }
  .h2-feature-body { padding: 2.25rem 1.5rem; }
  .h2-feature:after,
  .h2-feature-flip:after {
    background: linear-gradient(180deg, rgba(7, 24, 43, .78) 0%, rgba(7, 24, 43, .94) 55%);
  }
}


/* -------------------------------------------------------------------------
   PACKAGE CARDS
   ------------------------------------------------------------------------- */

.h2-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8e6e1;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.h2-card:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: 0 24px 46px -26px rgba(7, 24, 43, .6);
  color: inherit;
}

.h2-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eceae5;
}

.h2-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.h2-card:hover .h2-card-media img {
  transform: scale(1.06);
}

.h2-card-body {
  padding: 1.1rem 1.15rem 1.25rem 1.15rem;
}

.h2-card-name {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--travel-color-02);
  /* Two lines then ellipsis. v1 used text-truncate, which cut most package
     names mid-word at the first line. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.75rem;
}

.h2-card-price {
  font-family: 'Lato', sans-serif;
  margin-top: .65rem;
  color: var(--travel-color-02);
}

.h2-card-price small {
  color: var(--main-color);
  font-size: .78rem;
  display: block;
  line-height: 1;
  margin-bottom: .1rem;
}

.h2-card-price strong {
  font-size: 1.3rem;
  font-weight: 800;
}

/* Cruise cards reuse .h2-card, plus these. */

.h2-cruise-meta {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin-top: .45rem;
  font-family: 'Lato', sans-serif;
  font-size: .82rem;
  color: var(--main-color);
}

.h2-cruise-meta i {
  color: var(--travel-color-01);
  margin-right: .15rem;
}

/* The qualifier under a cruise price. Small, but it is doing real work: the
   figure is per person at double occupancy, and without this line it reads
   as the price of the cabin. */
.h2-card-price-note {
  display: block;
  margin-top: .15rem;
  font-size: .7rem;
  line-height: 1.25;
  color: var(--main-color);
}

/* Ships with no photograph in ships_images fall back to the cruise line's
   mark, which needs containing rather than cropping like a photograph. */
.h2-card-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f5f1;
}

.h2-card-fallback img {
  width: auto !important;
  height: auto !important;
  max-width: 60%;
  max-height: 50%;
  object-fit: contain !important;
}


/* -------------------------------------------------------------------------
   TOUR CARDS - real rows out of escortedtours
   -------------------------------------------------------------------------

   No photograph, on purpose: escortedtours has no image column, and a stock
   shot of Venice on a tour of Morocco is the same fabrication as the star
   ratings that came off this page. The category colour the supplier sends
   carries the card instead. These sit on the dark feature panel's section,
   so they are light cards on white with a coloured spine. */

.h2-tour {
  display: flex;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #e8e6e1;
  border-radius: 16px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.h2-tour:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 22px 44px -26px rgba(7, 24, 43, .6);
  color: inherit;
}

/* The spine. Falls back to the house gold when the feed sent no colour, or
   sent something that was not a hex value. */
.h2-tour-bar {
  flex: 0 0 6px;
  background: var(--travel-color-10);
}

.h2-tour-body {
  display: flex;
  flex-direction: column;
  padding: 1.05rem 1.1rem 1.15rem 1.1rem;
  width: 100%;
}

.h2-tour-name {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--travel-color-02);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.h2-tour-meta {
  font-family: 'Lato', sans-serif;
  font-size: .85rem;
  color: var(--main-color);
  margin-top: .5rem;
}

.h2-tour-meta i {
  color: var(--travel-color-01);
}

/* margin-top:auto pins the price to the bottom so a two-line title and a
   three-line title still line their prices up across the row. */
.h2-tour-price {
  font-family: 'Lato', sans-serif;
  margin-top: auto;
  padding-top: .75rem;
  color: var(--travel-color-02);
}

.h2-tour-price small {
  display: block;
  font-size: .75rem;
  color: var(--main-color);
  line-height: 1;
  margin-bottom: .15rem;
}

.h2-tour-price strong {
  font-size: 1.2rem;
  font-weight: 800;
}


/* -------------------------------------------------------------------------
   VALUE PROPS
   ------------------------------------------------------------------------- */

/* No vertical padding. The section already provides 3rem top and bottom;
   adding 1.5rem here as well gave the value props 24px more breathing room
   than any other block on the page, above and below, which read as the row
   drifting away from the section it belongs to. Horizontal padding was
   never set, so there is nothing else to keep. */
.h2-prop {
  padding: 0;
}

/* The columns carry mt-0, which Bootstrap applies at every breakpoint. That
   is right when the three sit side by side, but once they stack they need
   separating again. */
@media (max-width: 767.98px) {
  .h2-prop {
    margin-top: 2rem;
  }
  .col-md-4:first-child > .h2-prop {
    margin-top: 0;
  }
}

.h2-prop i {
  font-size: 1.6rem;
  color: var(--travel-color-01);
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(5, 92, 157, .08);
  margin-bottom: 1rem;
}

.h2-prop h3 {
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--travel-color-02);
  margin: 0 0 .4rem 0;
}

.h2-prop p {
  font-family: 'Lato', sans-serif;
  color: var(--main-color);
  line-height: 1.6;
  font-size: .96rem;
  margin: 0;
}


/* -------------------------------------------------------------------------
   AIRLINE MARQUEE
   ------------------------------------------------------------------------- */

/* The airline logo strip that lived here has been removed - see the note in
   index2-content.phtml for why it is deleted rather than switched off. */

/* -------------------------------------------------------------------------
   MOTION
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .home2 .h2-hero-bg {
    animation: none !important;
  }
  .h2-bento img,
  .h2-card-media img,
  .h2-railitem,
  .h2-card,
  .h2-btn {
    transition: none !important;
  }
}