@charset "UTF-8";
/* ==========================
    Google fonts
    Variables
    Typographys
    Texts, Links
    Buttons, Controls
    Accordions
    Modals
    Cards
    Tables
    Pagination
    Lists
    Hover Effect
    Circle Icons
    Images
    Backgrounds
    Bottom Overlay
    Video box
    Extra info
    Rates, Reviews, Awards
    Price range
    Comments
    Countdown
    Preloader 
    Animation
    Scroll to top
    Header
    Heros
    Search
    Block titles
    Title Info
    Destinations, Tours
    Testimonials
    Team
    Posts
    Form contact
    Account
    Booking
    Footer
    Utilities 
    Containers
=============================== */
/* ======= Fonts ======= */
/* Self-hosted since 2026-11-08. Outfit used to be @imported from
   fonts.googleapis.com, which sent every visitor's IP address to Google
   before the consent banner could ask, and chained three requests to two
   other hosts before text could render. The files are Google's own woff2
   subsets (Outfit v15, Space Grotesk v22) with the same unicode-ranges, so
   rendering is unchanged; the browser fetches only the subsets a page uses.
   Licences: OFL.txt in each folder.

   Space Grotesk is used for one word on the homepage (.award-word). Declaring
   it here costs other pages nothing: an @font-face is only downloaded when
   some text on the page actually uses it. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/outfit/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/outfit/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/space-grotesk/space-grotesk-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/space-grotesk/space-grotesk-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ======= Fonts ======= */
/* ======= Variables ======= */
:root,
[data-bs-theme=light] {
  --bs-primary: #6cb015;
  --bs-primary-rgb: 108, 176, 21;
  --bs-link-color: var(--bs-primary);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-decoration: none;
  --bs-link-hover-color: var(--bs-secondary);
  --bs-link-hover-color-rgb: var(--bs-secondary-rgb);
  --bs-font-sans-serif: "Outfit", sans-serif;
  --bs-body-font-size: 1.075rem;
  --bs-body-line-height: 1.55;
  --bs-body-font-weight: 300;
  --bs-border-radius: 0.675rem;
  --bs-border-radius-sm: 0.35rem;
  --bs-border-radius-lg: 1.25rem;
  --bs-box-shadow: 0 0.25rem 0.65rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-xs: 0.1rem 0.25rem 0.25rem rgba(0, 0, 0, 0.055);
  --bs-box-shadow-sm: 0 0.15rem 0.35rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 0.55rem 1rem rgba(0, 0, 0, 0.175);
  --bs-dark-blue: #0a3e59;
  --bs-dark-blue-rgb: 10, 62, 89;
  --bs-light-gray: #e9ecef;
  --bs-light-gray-rgb: 244, 245, 247;
}

/* ======= /Variables ======= */
/* ======= Typographys ======= */
/* Anchor */
a {
  color: var(--bs-link-color);
  -webkit-text-decoration: var(--bs-link-decoration);
          text-decoration: var(--bs-link-decoration);
  transition: color 0.25s ease-in-out;
}
a:hover, a:focus {
  color: var(--bs-link-hover-color);
}

/* Strong */
b,
strong {
  font-weight: 500;
}

/* Headings */
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.35;
  margin-bottom: 1rem;
}

.h5,
h5 {
  font-size: 1.275rem;
}

.h6,
h6 {
  font-size: 1.175rem;
}

/* ======= /Typographys ======= */
/* ======= Texts, Links ======= */
.link-hover:hover {
  color: #6cb015 !important;
}
.link-hover:hover svg {
  stroke: #6cb015 !important;
}

.text-primary {
  color: var(--bs-primary) !important;
}

.vertical-box {
  transform: rotate(180deg);
  writing-mode: vertical-lr;
}

.float-text,
.float-text:hover {
  display: inline-block;
  color: white;
  text-wrap: nowrap;
  line-height: 1;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.115rem;
  font-weight: 400;
  background-color: rgba(var(--bs-black-rgb), 0.45);
  padding: 0.4rem 0.55rem 0.4rem 0.75rem;
  border-radius: var(--bs-border-radius-sm);
}
.float-text.float-absolute,
.float-text:hover.float-absolute {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 1;
}

/* ======= /Texts, Links ======= */
/* ======= Buttons, Controls ======= */
/* Button */
.btn {
  padding: 0.625rem 1rem;
  font-size: var(--bs-body-font-size);
  font-weight: 400;
  text-decoration: none;
}
.btn.btn-uppercase {
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.115rem;
  padding: 0.72rem 1rem;
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: var(--bs-link-hover-color);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-bg: var(--bs-link-hover-color);
  --bs-btn-active-border-color: var(--bs-link-hover-color);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

/* Play Button */
.btn-video-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: content-box;
  width: 74px;
  height: 74px;
  padding-left: 5px;
  border-radius: 50%;
}
.btn-video-play::before, .btn-video-play::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 64px;
  height: 64px;
  background: var(--bs-primary);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.25s ease-in-out;
  z-index: 0;
}
.btn-video-play::before {
  animation: pulse-border 1500ms ease-out infinite;
}
.btn-video-play:hover::before, .btn-video-play:hover::after {
  opacity: 0.55;
}
.btn-video-play span {
  display: block;
  width: 0;
  height: 0;
  border-left: 16px solid white;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  position: relative;
  z-index: 3;
}
.btn-video-play.btn-video-play-sm {
  width: 56px;
  height: 56px;
}
.btn-video-play.btn-video-play-sm::before, .btn-video-play.btn-video-play-sm::after {
  width: 48px;
  height: 48px;
}
.btn-video-play.btn-video-play-sm span {
  border-left: 12px solid white;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
@keyframes pulse-border {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

/* Facebook, Google button */
.btn-facebook,
.btn-google {
  background-color: var(--bs-light-gray);
  border-color: var(--bs-border-color);
}
.btn-facebook:hover, .btn-facebook:focus,
.btn-google:hover,
.btn-google:focus {
  border-color: var(--bs-border-color);
}

/* Form check */
.form-check-input.checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-check-input:focus {
  border-color: rgba(var(--bs-primary-rgb), 0.15);
  box-shadow: none;
}
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Form range */
.form-range:focus::-webkit-slider-thumb, .form-range:focus::-moz-range-thumb {
  box-shadow: none;
}
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  background-color: var(--bs-primary);
  box-shadow: none !important;
}
.form-range::-moz-range-thumb {
  -moz-appearance: none;
       appearance: none;
  background-color: var(--bs-primary);
  box-shadow: none !important;
}
.form-range::-moz-range-thumb:active, .form-range::-moz-range-thumb:focus {
  background-color: rgba(var(--bs-primary-rgb), 0.5);
  box-shadow: none;
}
.form-range::-webkit-slider-thumb:active, .form-range::-webkit-slider-thumb:focus {
  background-color: rgba(var(--bs-primary-rgb), 0.5);
  box-shadow: none;
}

/* Form control */
.form-control {
  padding: 0.625rem 1rem;
  font-size: var(--bs-body-font-size);
}
.form-control:focus, .form-control:active {
  border-color: rgba(var(--bs-primary-rgb), 0.35);
  box-shadow: none !important;
}

/* Dropdown */
.dropdown-menu {
  --bs-dropdown-border-color: var(--bs-border-color);
  box-shadow: var(--bs-box-shadow-sm);
}
.dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active {
  background-color: var(--bs-primary);
  color: white;
}

/* Form Select */
.form-select {
  padding: 0.625rem 1rem;
  font-size: var(--bs-body-font-size);
}
.form-select:focus, .form-select:active {
  border-color: rgba(var(--bs-primary-rgb), 0.35);
  box-shadow: none !important;
}

/* Input Icon Group */
.input-icon-group {
  position: relative;
}
.input-icon-group .input-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-secondary);
  z-index: 1;
}
.input-icon-group .form-control,
.input-icon-group .form-select {
  padding-left: 3rem;
}

/* ======= /Buttons, Controls ======= */
/* ======= Accordions ======= */
/* Why Accordion */
.accordion-why {
  background-color: transparent;
}
.accordion-why .accordion-button {
  background-color: transparent;
  color: inherit;
  box-shadow: none;
  font-size: 1.275rem;
  font-weight: 500;
  padding-left: 0;
  padding-right: 0;
}
.accordion-why .accordion-button:hover, .accordion-why .accordion-button:not(.collapsed) {
  color: var(--bs-primary);
}
.accordion-why .accordion-button i {
  margin-right: 0.75rem;
  font-size: 0.95rem;
  color: var(--bs-primary);
}
.accordion-why .accordion-body {
  padding: 0 0 1.35rem 0;
}

/* Itinerary Accordion */
.accordion-itinerary {
  background-color: transparent;
  border: 0;
}
.accordion-itinerary .accordion-item {
  position: relative;
  padding-left: 40px;
  margin-left: 12px;
}
.accordion-itinerary .accordion-item:not(:last-child):before {
  position: absolute;
  content: "";
  border-left: 1px solid var(--bs-accordion-border-color);
  width: 0;
  height: calc(100% + 1rem);
  left: 0;
  top: 2rem;
  z-index: 1;
}
.accordion-itinerary .accordion-button {
  background-color: transparent;
  font-size: 1.275rem;
  color: inherit;
  box-shadow: none;
  font-weight: 500;
  padding: 1.5rem 0;
  align-items: start;
}
.accordion-itinerary .accordion-button::after {
  content: unset;
}
.accordion-itinerary .accordion-button:before {
  position: absolute;
  left: -56px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  content: "\f3de";
  font-family: icons !important;
  font-size: 0.95rem;
  border-radius: 50%;
  display: flex;
  line-height: 0;
  justify-content: center;
  align-items: center;
  background: var(--bs-primary);
  border: 1px solid var(--bs-primary);
  color: white;
  z-index: 2;
  transition: 0.3s ease-in-out;
}
.accordion-itinerary .accordion-button:not(.collapsed):before {
  content: "\f36c";
}
.accordion-itinerary .accordion-button strong {
  margin-right: 0.55rem;
  font-weight: 700;
  text-wrap: nowrap;
}
.accordion-itinerary .accordion-button:hover, .accordion-itinerary .accordion-button:not(.collapsed) {
  color: var(--bs-primary);
}
.accordion-itinerary .accordion-body {
  padding: 0 0 1.35rem 0;
}

/* Accordion Filter */
.accordion-filter .accordion-item {
  background-color: transparent;
  border: 0;
  font-size: 1rem;
}
.accordion-filter .accordion-button {
  border-top: 1px solid var(--bs-border-color);
  background-color: transparent;
  padding: 1.25rem 0;
  font-size: 1.25rem;
  color: var(--bs-body-color);
  font-weight: 500;
  border-radius: 0 !important;
  box-shadow: none;
}
.accordion-filter .accordion-body {
  padding: 0.5rem 0 1.25rem 0;
}

/* ======= /Accordiosn ======= */
/* ======= Modals ======= */
.modal {
  --bs-modal-padding: 1.5rem 2rem;
  --bs-modal-header-padding: 1.5rem 2rem;
}

/* ======= Modals ======= */
/* ======= Navs & Tabs ======= */
.tab-menu {
  display: flex;
  background-color: var(--bs-body-bg);
  border-radius: var(--bs-border-radius);
  font-size: 1rem;
}
.tab-menu .nav-item .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bs-body-color);
  padding: 1rem 1.5rem 1rem 1.75rem;
  border-right: 1px solid var(--bs-border-color);
  letter-spacing: 0.135rem;
}
.tab-menu .nav-item .nav-link::after {
  background: transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  content: "";
  height: 0.7rem;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  position: absolute;
  bottom: -0.35rem;
  width: 0.7rem;
  z-index: 0;
}
.tab-menu .nav-item .nav-link:hover {
  color: var(--bs-primary);
}
.tab-menu .nav-item .nav-link.active {
  background-color: var(--bs-primary);
  color: white !important;
  border-right-color: var(--bs-primary);
}
.tab-menu .nav-item .nav-link.active::after {
  background: var(--bs-primary);
  border-right: 1px solid var(--bs-primary);
  border-bottom: 1px solid var(--bs-primary);
}
.tab-menu .nav-item:first-child .nav-link {
  border-top-left-radius: var(--bs-border-radius);
  border-bottom-left-radius: var(--bs-border-radius);
}
.tab-menu .nav-item:last-child .nav-link {
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}
.tab-menu .nav-item.nav-item-link {
  margin-left: auto;
  margin-right: 0;
}
.tab-menu .nav-item.nav-item-link .nav-link {
  color: var(--bs-secondary);
}
.tab-menu .nav-item.nav-item-button {
  margin-left: auto;
  margin-right: 0;
}
.tab-menu .nav-item.nav-item-button .nav-link {
  background-color: var(--bs-dark-blue);
  color: white;
}
@media (max-width: 1199.98px) {
  .tab-menu {
    box-shadow: none !important;
    background-color: unset;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    margin-right: -0.25rem;
    margin-left: -0.25rem;
  }
  .tab-menu .nav-item {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
    margin-top: 0.5rem;
  }
  .tab-menu .nav-item .nav-link {
    background-color: var(--bs-body-bg);
    border: none;
    width: 100%;
    border-radius: var(--bs-border-radius);
  }
  .tab-menu .nav-item .nav-link::after {
    content: unset;
  }
  .tab-menu .nav-item.nav-item-link, .tab-menu .nav-item.nav-item-button {
    margin-left: unset;
    margin-right: unset;
  }
  .tab-menu.shadow-sm .nav-item .nav-link, .tab-menu.shadow .nav-item .nav-link {
    box-shadow: var(--bs-box-shadow-sm);
  }
  .tab-menu.tour-nav .nav-item {
    width: 33.333%;
  }
}
@media (max-width: 767.98px) {
  .tab-menu.tour-nav .nav-item {
    width: 50%;
  }
}

/* ======= /Navs & Tabs ======= */
/* ======= Cards ======= */
/* Card */
.card {
  --bs-card-spacer-y: 1.5rem;
  --bs-card-spacer-x: 1.5rem;
}

/* Float card */
.float-card {
  position: relative;
}
.float-card .float-image {
  position: relative;
}
.float-card .card-content {
  padding: 1.5rem;
  margin: -1rem 0.5rem 0 0.5rem;
  background-color: white;
  position: relative;
}
@media (min-width: 768px) {
  .float-card.float-card-right .card-content {
    margin: -2rem 1rem 0 1rem;
  }
}
@media (min-width: 1200px) {
  .float-card.float-card-right {
    display: flex;
  }
  .float-card.float-card-right .float-image {
    width: calc(50% + 2rem);
  }
  .float-card.float-card-right .card-content {
    width: calc(50% + 2rem);
    margin: 1rem 0 1rem -2rem;
  }
}

/* Info Card */
.info-card {
  display: block;
  padding: 1.5rem;
  background-color: white;
  color: var(--bs-body-color);
}
.info-card:hover {
  color: var(--bs-body-color);
}
.info-card .card-icon {
  margin-bottom: 1rem;
  color: white;
  display: inline-flex;
  width: 64px;
  height: 64px;
  background: var(--bs-primary);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.info-card .card-title {
  color: var(--bs-emphasis-color);
}
.info-card .card-link {
  color: var(--bs-primary);
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  font-size: 0.875em;
  font-weight: 500;
}
.info-card .card-link:hover {
  color: var(--bs-primary-text-emphasis);
}
.info-card.card-hover, .info-card.active {
  background-color: var(--bs-primary);
}
.info-card.card-hover .card-icon, .info-card.active .card-icon {
  background-color: white;
  color: var(--bs-primary);
}
.info-card.card-hover .card-title,
.info-card.card-hover .card-desc,
.info-card.card-hover .card-link, .info-card.active .card-title,
.info-card.active .card-desc,
.info-card.active .card-link {
  color: white;
}

/* Transparent card */
.transparent-card {
  display: block;
  padding: 1.5rem;
  color: white;
}
.transparent-card .card-icon {
  margin-bottom: 1.5rem;
  display: inline-flex;
  width: 64px;
  height: 64px;
  background: var(--bs-primary);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
}

/* Mini card */
.mini-card {
  display: flex;
  align-items: center;
  padding: 0.85rem 1rem;
  background-color: white;
  color: var(--bs-body-color);
}
.mini-card.card-center {
  padding: 1.25rem;
  flex-direction: column;
  text-align: center;
}
.mini-card.card-simple {
  padding: 0;
  background-color: transparent;
}
.mini-card .card-icon {
  color: var(--bs-primary);
  border-right: 1px solid var(--bs-border-color);
  margin-right: 1.25rem;
  padding-right: 1.25rem;
  font-size: 2.25rem;
  line-height: 1;
  /* the icon is a fixed-width flex child - never let it be squeezed */
  flex-shrink: 0;
}
/* a flex child defaults to min-width:auto, which stops it shrinking below
   its longest word and pushes that word outside the card. */
.mini-card .card-content {
  min-width: 0;
  overflow-wrap: break-word;
}
.mini-card.card-center .card-icon {
  border-right: unset;
  margin-right: unset;
  padding-right: unset;
  margin-bottom: 0.75rem;
}
.mini-card .card-title {
  color: var(--bs-text-emphasis);
  display: block;
  margin-bottom: 0;
  font-size: 1.25rem;
}
.mini-card.card-center .card-title {
  font-size: 1.275rem;
}
.mini-card .card-desc {
  color: var(--bs-secondary);
  display: block;
}
.mini-card .card-link:hover {
  color: var(--bs-text-emphasis);
}
.mini-card.card-hover:hover, .mini-card.active {
  background-color: var(--bs-primary);
}
.mini-card.card-hover:hover .card-icon,
.mini-card.card-hover:hover .card-title,
.mini-card.card-hover:hover .card-desc, .mini-card.active .card-icon,
.mini-card.active .card-title,
.mini-card.active .card-desc {
  color: white;
}
@media (max-width: 576px) {
  .mini-card.card-mobile-small .card-icon {
    margin-right: 0.75rem;
    padding-right: 0.75rem;
    font-size: 1.85rem;
  }
  .mini-card.card-mobile-small .card-title {
    font-size: 1rem;
  }
  .mini-card.card-mobile-small .card-desc {
    font-size: 0.85rem;
  }
}

/* ======= Cards ======= */
/* ======= Tables ======= */
.table > :not(caption) > * > * {
  padding: 1rem 0.5rem;
}

/* ======= Tables ======= */
/* ======= Pagination ======= */
.pagination {
  --bs-pagination-focus-box-shadow: none;
}
.pagination.pagination-circle .page-link {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 1rem;
  border-radius: 50% !important;
}

/* ======= Pagination ======= */
/* ======= Lists ======= */
/* Statistics */
.stats-list {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}
.stats-list > li {
  border-right: 1px solid var(--bs-border-color);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.stats-list > li:nth-child(2n) {
  border-right: 0;
}
.stats-list > li:nth-child(odd) {
  padding-left: 0;
}
@media (min-width: 1200px) {
  .stats-list > li,
  .stats-list > li:nth-child(2n) {
    border-right: 1px solid var(--bs-border-color);
  }
  .stats-list > li:nth-child(odd) {
    padding-left: 1.5rem;
  }
  .stats-list > li:first-child {
    padding-left: 0;
  }
  .stats-list > li:last-child {
    border-right: 0;
    padding-right: 0;
  }
}
/* Not var(--bs-primary). The brand green #6cb015 measures 2.67:1 on white,
   under the 3:1 WCAG asks even of large text - and these figures render at
   40px on the homepage and 24px semibold on About, so large text is exactly
   what they are. #4d7d10 is the same hue two steps down and measures 4.93:1,
   clearing the bar for body text let alone large.

   Only this rule changes; --bs-primary itself is untouched, because it is used
   site-wide for fills and borders where a contrast floor either does not apply
   or is already met. Chris asked for the About page; the homepage and
   how-we-rate-platforms.html carry the same component and had the same
   failure, so all three are fixed by the one line. */
.stats-list .stats-number {
  font-weight: 600;
  margin-right: 1rem;
  margin-bottom: 0.5rem;
  color: #4d7d10;
}
.stats-list .stats-desc {
  line-height: 1.35;
  margin-bottom: 1.5rem;
}
@media (min-width: 576px) {
  .stats-list .stats-item {
    display: flex;
    align-items: center;
  }
  .stats-list .stats-number {
    margin-bottom: 1.5rem;
  }
}

/* Strength */
.strength-list {
  padding-left: 0;
  list-style: none;
}
.strength-list .strength-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.strength-list .strength-icon {
  margin-right: 1rem;
  color: var(--bs-primary);
}

/* Categories */
.cat-list {
  padding-left: 0;
  list-style: none;
}
.cat-list .cat-item a {
  padding: 1.25rem 1.5rem;
  background-color: white;
  color: var(--bs-body-color);
  display: block;
  transition: 0.25s all ease-in-out;
}
.cat-list .cat-item a:hover, .cat-list .cat-item a.active {
  background-color: var(--bs-primary);
  color: white;
}

/* Social list */
.social-list {
  list-style: none;
  padding-left: 0;
}
.social-list li {
  display: inline-block;
}
.social-list li:not(:last-child) {
  margin-right: 0.25rem;
}
.social-list .social-item a svg {
  stroke: var(--bs-body-color);
}
.social-list .social-item a svg:hover {
  stroke: var(--bs-primary);
}
.social-list.social-list-light .social-item a svg {
  stroke: white;
}

/* Highlight list */
.highlight-list {
  list-style: none;
  padding-left: 0;
}
.highlight-list li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 0.35rem;
}
.highlight-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "✓";
  font-weight: 600;
  margin-right: 0.5rem;
}
.highlight-list.unchecked li::before {
  content: "✕";
  color: var(--bs-danger);
}
.highlight-list.checked li::before {
  color: var(--bs-primary);
}

/* Filtered list */
.filtered-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.filtered-list .filtered-item {
  display: inline-block;
  line-height: 1;
  margin: 0.5rem 0;
}
.filtered-list .filtered-item:not(:last-child, :first-child) {
  border-right: 1px solid var(--bs-dark-border-subtle);
  margin-right: 0.75rem;
  padding-right: 0.75rem;
}
.filtered-list .filtered-item button {
  display: inline-flex;
  align-items: center;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 0;
  background-color: transparent;
  outline: none;
  box-shadow: none;
  font-size: 1rem;
  color: var(--bs-secondary);
  font-weight: 300;
  padding: 0;
}
.filtered-list .filtered-item button:not(:last-child) {
  margin-right: 0.5rem;
}
.filtered-list .filtered-item button:hover {
  color: var(--bs-danger);
}
.filtered-list .filtered-item button i {
  font-size: 0.55rem;
  margin-left: 0.35rem;
  color: var(--bs-danger);
}
.filtered-list .filtered-item strong {
  font-size: 1rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* ======= /Lists ======= */
/* ======= Hover Effect ======= */
.hover-effect {
  transition: all 0.25s ease-in-out;
}
.hover-effect:hover {
  transform: translateY(-0.25rem);
}

/* ======= /Hover Effect ======= */
/* ======= Circle Icons ======= */
.circle-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.25s ease-in-out;
  border: 0;
  font-size: 1.125rem;
}
.circle-icon.circle-icon-sm {
  width: 32px;
  height: 32px;
  font-size: 1rem;
}
.circle-icon.cart-icon, .circle-icon.wishlist-icon {
  color: var(--bs-body-color);
  background-color: var(--bs-light-gray);
  position: relative;
}
.circle-icon.cart-icon:hover, .circle-icon.cart-icon:focus, .circle-icon.wishlist-icon:hover, .circle-icon.wishlist-icon:focus {
  color: var(--bs-primary);
}
.circle-icon.cart-icon span, .circle-icon.wishlist-icon span {
  background-color: var(--bs-primary);
  color: white;
  font-size: 0.85rem;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
}
.circle-icon.circle-icon-link {
  background-color: var(--bs-primary);
  color: white !important;
}
.circle-icon.circle-icon-link:hover {
  background-color: var(--bs-secondary);
}
.circle-icon.like-icon {
  background-color: rgba(var(--bs-white-rgb), 0.75);
  color: var(--bs-secondary);
}
.circle-icon.like-icon:hover, .circle-icon.like-icon:focus, .circle-icon.like-icon.liked {
  color: var(--bs-primary);
}
.circle-icon.like-icon.liked:hover, .circle-icon.like-icon.liked:focus {
  color: var(--bs-secondary);
}
.circle-icon.delete-icon {
  background-color: white;
  color: var(--bs-danger);
}
.circle-icon.delete-icon:hover, .circle-icon.delete-icon:focus, .circle-icon.delete-icon.liked {
  color: white;
  background-color: var(--bs-danger);
}
@media (max-width: 576px) {
  .circle-icon.icon-mobile-small {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
}

/* ======= /Circle Icons ======= */
/* ======= Images ======= */
/* Image Info */
.image-info {
  position: relative;
}
.image-info.image-info-vertical .image-center {
  margin-left: 3rem;
}
.image-info.image-info-vertical .vertical-title {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
}
.image-info.image-info-vertical .vertical-title > small {
  transform: rotate(180deg);
  writing-mode: vertical-lr;
  color: var(--bs-secondary);
  text-transform: uppercase;
  text-wrap: nowrap;
  letter-spacing: 0.135rem;
}
.image-info.image-info-right {
  margin-right: 65px;
}
.image-info.image-info-left {
  margin-left: 65px;
}
.image-info .image-center {
  overflow: hidden;
}
/* w-100 sets the width but Bootstrap only ships height:auto with .img-fluid,
   which these do not use - so the width/height attributes pinned the rendered
   height and any raster image in this slot was stretched off its aspect ratio
   (tall and thin below 500px, squat above it). It went unnoticed while these
   were SVGs: an SVG letterboxes inside a distorted box instead of stretching. */
.image-info .image-center img {
  height: auto;
}
.image-info .info-top-right {
  left: unset;
  right: 1.5rem;
  top: 1.5rem;
  width: auto;
}
.image-info .info-left-top {
  right: unset;
  left: 1.5rem;
  top: 1.5rem;
  width: auto;
}
.image-info .info-right-bottom {
  left: unset;
  right: 1.5rem;
  bottom: 1.5rem;
  width: auto;
}
.image-info .info-bottom-left {
  left: 1.5rem;
  right: unset;
  bottom: 1.5rem;
  width: auto;
}
.image-info .info-bottom-left,
.image-info .info-left-top,
.image-info .info-top-right,
.image-info .info-right-bottom {
  text-align: center;
  position: absolute;
  width: 130px;
  z-index: 1;
}
.image-info.image-info-left .info-bottom-left,
.image-info.image-info-left .info-left-top {
  transform: translateX(-50%);
}
.image-info.image-info-left .info-bottom-left {
  bottom: 4rem;
}
.image-info.image-info-left .info-left-top {
  top: 4rem;
}
.image-info.image-info-right .info-top-right,
.image-info.image-info-right .info-right-bottom {
  transform: translateX(-50%);
}
.image-info.image-info-right .info-right-bottom {
  bottom: 4rem;
  left: 100%;
}
.image-info.image-info-right .info-top-right {
  top: 4rem;
  left: 100%;
}
@media (max-width: 1399.98px) {
  .image-info.image-info-right {
    margin-right: 65px;
  }
}
@media (max-width: 1199.98px) {
  .image-info.image-info-right {
    margin-right: 65px;
  }
}
@media (max-width: 767.98px) {
  .image-info.image-info-right {
    margin-right: 0;
    margin-left: 0;
  }
  .image-info.image-info-right .info-right-bottom {
    bottom: -1.5rem;
    right: 1.5rem;
    left: unset;
    transform: unset;
  }
  .image-info.image-info-right .info-top-right {
    top: -1.5rem;
    right: 1.5rem;
    left: unset;
    transform: unset;
  }
  .image-info.image-info-left .info-bottom-left {
    bottom: -1.5rem;
    left: 1.5rem;
    transform: unset;
  }
  .image-info.image-info-vertical .image-center {
    margin-left: 1.75rem;
  }
}
@media (max-width: 576px) {
  .image-info.image-info-vertical .vertical-title > small {
    font-size: 0.65rem;
  }
}

/* Image Hover */
.image-hover {
  display: block;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-bottom: 0;
}
.image-hover img {
  max-width: 100%;
  width: 100%;
}
.image-hover.image-hover-overlay:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background: rgba(var(--bs-black-rgb), 0.35);
  transition: opacity 0.25s ease-in-out;
  z-index: 0;
}
.image-hover.image-hover-overlay:hover:after {
  opacity: 1;
}
.image-hover.image-bottom-overlay:before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  right: 0;
  height: 6rem;
  background: linear-gradient(0deg, rgba(var(--bs-black-rgb), 0.75) 0%, rgba(var(--bs-black-rgb), 0) 100%);
  z-index: 1;
}
.image-hover.image-hover-scale img {
  transition: transform 0.25s ease-in-out;
}
.image-hover.image-hover-scale:hover img {
  transform: scale(1.055);
}
.image-hover .image-hover-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  opacity: 0;
  color: white;
  transition: opacity 0.25s ease-in-out;
  transform: translate(-50%, -50%);
  z-index: 2;
  background-color: rgba(var(--bs-black-rgb), 0.55);
  border-radius: 50%;
}
.image-hover:hover .image-hover-icon {
  opacity: 1;
}

/* ======= /Images ======= */
/* ======= Backgrounds ======= */
/* Background color */
.bg-primary {
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-gray-gradient {
  background-color: var(--bs-light-gray) !important;
  background: linear-gradient(to bottom, var(--bs-light-gray) 0%, rgba(var(--bs-light-gray-rgb), 0.35) 100%) !important;
}

.bg-light-gray {
  background-color: var(--bs-light-gray) !important;
}

.bg-dark-blue {
  background: #0a3e59 !important;
}

.bg-video {
  position: relative;
  overflow: hidden;
}
.bg-video.bg-overlay:after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  background-image: url(../img/background/dot.png);
  background-repeat: repeat;
  bottom: 0;
}
.bg-video .bg-content {
  position: relative;
  z-index: 2;
  height: 100%;
}
.bg-video.ratio::before {
  content: unset;
}

/* ======= /Backgrounds ======= */
/* ======= Bottom Overlay ======= */
.bottom-overlay {
  position: relative;
  display: block;
  overflow: hidden;
}
.bottom-overlay .bottom-overlay-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5rem 1.5rem 1.5rem 1.5rem;
  color: white;
  background: linear-gradient(0deg, rgba(var(--bs-black-rgb), 0.85) 0%, rgba(var(--bs-black-rgb), 0) 100%);
}
.bottom-overlay:hover figure.image-hover-scale img {
  transform: scale(1.055);
}
.bottom-overlay:hover .image-hover-overlay:after {
  opacity: 1;
}
.bottom-overlay:hover .image-hover-icon {
  opacity: 1;
}
.bottom-overlay .float-badge {
  position: absolute;
  left: 0.7rem;
  top: 0.75rem;
  background-color: rgba(var(--bs-black-rgb), 0.45);
  padding: 0.45rem 0.4rem 0.25rem 0.4rem;
  border-radius: var(--bs-border-radius-sm);
}
.bottom-overlay .float-badge span {
  color: white;
  transform: rotate(180deg);
  writing-mode: vertical-lr;
  text-wrap: nowrap;
  line-height: 1;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.115rem;
  font-weight: 400;
}

/* ======= /Bottom Overlay ======= */
/* ======= Video box ======= */
.video-box {
  border: 1px solid rgba(var(--bs-white-rgb), 0.35);
  padding: 3rem 1.5rem;
}
@media (min-width: 576px) {
  .video-box {
    padding: 6rem 1.5rem;
  }
}

/* ======= /Video box ======= */
/* ======= Extra info ======= */
.extra-info {
  display: inline-flex;
  align-items: center;
}
.extra-info strong {
  font-size: 1.75rem;
  font-weight: 600;
  margin-right: 0.5rem;
}
.extra-info span {
  color: var(--bs-secondary);
  font-weight: 400;
}

/* ======= /Extra info ======= */
/* ======= Rates, Reviews, Awards ======= */
/* Star rate */
.star-rate-view {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108.9 103.6'%3E%3Cg data-name='Layer 2'%3E%3Cpath fill='%23ced4da' d='m108.9 39.6-37.6-5.5L54.4 0 37.6 34.1 0 39.6l27.2 26.5-6.4 37.5 33.6-17.7 33.7 17.7-6.4-37.5z' data-name='Layer 1'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 0 0;
  background-repeat: repeat-x;
  display: inline-block;
  position: relative;
}
.star-rate-view.star-rate-size-xs {
  background-size: 10px;
  height: 10px;
  width: 50px;
}
.star-rate-view.star-rate-size-sm {
  background-size: 16px;
  height: 16px;
  width: 80px;
}
.star-rate-view, .star-rate-view.star-rate-size-md {
  background-size: 20px;
  height: 20px;
  width: 100px;
}
.star-rate-view.star-rate-size-lg {
  background-size: 24px;
  height: 24px;
  width: 144px;
}
.star-rate-view .star-value {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108.9 103.6'%3E%3Cg data-name='Layer 2'%3E%3Cpath fill='%23eeb461' d='m54.4 0 16.9 34.1 37.6 5.5-27.2 26.5 6.4 37.5-33.7-17.7-33.6 17.7 6.4-37.5L0 39.6l37.6-5.5z' data-name='Layer 1'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  height: 100%;
  position: absolute;
  width: 100%;
  left: 0;
  background-size: inherit;
}
.star-rate-view .star-value.rate-0 {
  width: 0;
}
.star-rate-view .star-value.rate-5 {
  width: 10%;
}
.star-rate-view .star-value.rate-10 {
  width: 20%;
}
.star-rate-view .star-value.rate-15 {
  width: 30%;
}
.star-rate-view .star-value.rate-20 {
  width: 40%;
}
.star-rate-view .star-value.rate-25 {
  width: 50%;
}
.star-rate-view .star-value.rate-30 {
  width: 60%;
}
.star-rate-view .star-value.rate-35 {
  width: 70%;
}
.star-rate-view .star-value.rate-40 {
  width: 80%;
}
.star-rate-view .star-value.rate-45 {
  width: 90%;
}
.star-rate-view .star-value.rate-50 {
  width: 100%;
}

/* Inline review */
.inline-review {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  border-top: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
}
.inline-review .review-score {
  font-weight: 500;
  margin-right: 0.25rem;
}
.inline-review .star-rate-view {
  margin-right: 0.35rem;
}
.inline-review .review-total {
  color: var(--bs-secondary);
}
.inline-review.review-border-0 {
  padding: 0;
  border: 0;
}

/* Vertical review */
.vertical-review {
  background-color: var(--bs-body-bg);
  text-align: center;
  overflow: hidden;
  width: 130px;
}
.vertical-review .review-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vertical-review .review-score,
.vertical-review .star-rate-view,
.vertical-review .review-total {
  margin-bottom: 0.5rem;
}
.vertical-review .review-score {
  font-weight: 600;
  line-height: 1;
  margin-bottom: 0.75rem;
  font-size: 2.5rem;
}
.vertical-review .review-label {
  font-weight: 500;
  background-color: var(--bs-primary);
  color: white;
  padding: 0.05rem 0.5rem;
  display: inline-block;
  border-radius: var(--bs-border-radius-sm);
}
.vertical-review .review-footer {
  background-color: var(--bs-dark-blue);
  color: white;
  font-weight: 500;
  padding: 0.175rem 0.5rem;
}

/* Horizontal review */
.horizontal-review {
  position: relative;
  overflow: hidden;
  background-color: white;
  padding: 1.5rem 1.5rem 1.5rem 3.25rem;
  width: 100%;
}
.horizontal-review .review-content {
  display: flex;
  align-items: center;
}
.horizontal-review .review-score {
  font-weight: 600;
  font-size: 3.5rem;
  margin-right: 1rem;
  line-height: 1;
  margin-bottom: 0.1rem;
}
.horizontal-review .review-total {
  display: flex;
  flex-direction: column;
  color: var(--bs-secondary);
  line-height: 1.35rem;
}
.horizontal-review .review-total .star-rate-view {
  margin-bottom: 0.25rem;
}
.horizontal-review .review-total strong {
  color: var(--bs-body-color);
}
.horizontal-review .review-link {
  border-top: 1px solid var(--bs-border-color);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}
.horizontal-review .review-label {
  transform: rotate(180deg);
  writing-mode: vertical-lr;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  left: 0;
  text-align: center;
}
.horizontal-review .review-label > small {
  color: white;
  background-color: var(--bs-primary);
  text-transform: uppercase;
  letter-spacing: 0.175rem;
  display: block;
  height: 100%;
  font-weight: 500;
  padding: 0.25rem;
  font-size: 0.75rem;
  min-width: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.horizontal-review .review-label.review-label-lg > small {
  font-size: 1rem;
}
.horizontal-review .review-label.review-label-sm > small {
  font-size: 0.65rem;
}
.horizontal-review .review-title {
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  line-height: 1;
}

/* Review summary */
.review-summary {
  background-color: white;
  overflow: hidden;
  padding: 1.5rem;
}
.review-summary .review-title {
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}
.review-summary li {
  display: flex;
  align-items: center;
  padding: 0.25rem 0;
}
.review-summary .review-content {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.review-summary .review-score {
  display: flex;
  align-items: center;
}
.review-summary .review-score strong {
  margin-right: 0.5rem;
}
.review-summary .review-lable {
  margin-right: auto;
}

/* Review list */
.review-list .review-item {
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
}
.review-list .review-item p {
  font-style: italic;
}
.review-list .review-client {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.review-list .review-name {
  display: flex;
  flex-direction: column;
}
.review-list .review-name strong {
  margin-bottom: 0.35rem;
  font-size: 1.175rem;
  color: var(--bs-emphasis-color);
}
.review-list .review-name strong small {
  color: var(--bs-secondary);
  font-weight: 400;
  font-size: 1rem;
}
.review-list .review-avatar {
  margin-right: 1rem;
  margin-bottom: 0;
}
.review-list .review-date {
  color: var(--bs-secondary);
}
.review-list .review-verify {
  color: var(--bs-primary);
  font-weight: 500;
}

/* Vertical Award */
.vertical-award {
  background-color: var(--bs-body-bg);
  text-align: center;
  overflow: hidden;
  width: 130px;
}
/* "Booking", the display word between the count and the dark footer strip.
   Set in a grotesque sans against the site's geometric Outfit - close enough
   in category not to look like a mistake, different enough in the a, g and k
   to read as a deliberate piece of typography rather than more UI text.
   Self-hosted with @font-face at the top of this file. */
.vertical-award .award-word {
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin-top: 0.5rem;
  color: var(--bs-text-emphasis);
}
/* "Platforms" sits under it as the quieter half of the phrase, so the badge
   reads 28 / Booking / Platforms down the column without the display word
   having to carry two words at a size that would not fit 130px. */
.vertical-award .award-subject {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 0.1rem;
  color: var(--bs-secondary);
}

.vertical-award .award-content {
  padding: 0.875rem 0.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vertical-award .award-content .experience-year {
  line-height: 1;
  margin-bottom: 0;
  font-size: 2.35rem;
  color: var(--bs-primary);
}
.vertical-award .award-title {
  display: inline-block;
  line-height: 1.15;
}
.vertical-award .award-footer {
  background-color: var(--bs-dark-blue);
  color: white;
  font-weight: 500;
  line-height: 1.25;
  padding: 0.3rem 0.5rem;
}
.vertical-award .award-footer small {
  font-size: 0.775rem;
}

/* Vertical experience */
.vertical-experience {
  background-color: var(--bs-primary);
  color: white;
  padding: 1rem;
  text-align: center;
  overflow: hidden;
  width: 130px;
}
.vertical-experience.experience-white {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}
.vertical-experience.experience-white .experience-year {
  color: var(--bs-primary);
}
.vertical-experience .experience-year {
  line-height: 1;
  margin-bottom: 0.55rem;
  font-size: 2.5rem;
}
.vertical-experience .experience-title {
  text-transform: uppercase;
  font-weight: 400;
  display: inline-block;
  line-height: 1.35;
}

/* ======= /Rates, Reviews, Awards ======= */
/* ======= Price range ======= */
.price-range {
  margin-bottom: 0.5rem;
}
.price-range .price-slider {
  height: 0.35rem;
  position: relative;
  background: #ddd;
  border-radius: 0.25rem;
}
.price-range .price-slider .progress {
  height: 100%;
  left: 0;
  right: 0;
  position: absolute;
  border-radius: 0.25rem;
  background: var(--bs-primary);
}
.price-range .price-slider .range-input {
  position: relative;
}
.price-range .price-slider .range-input input {
  position: absolute;
  width: 100%;
  height: 0.35rem;
  top: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}
.price-range .price-slider input[type=range]::-webkit-slider-thumb {
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  background: var(--bs-primary);
  pointer-events: auto;
  -webkit-appearance: none;
}
.price-range .price-slider input[type=range]::-moz-range-thumb {
  height: 1rem;
  width: 1rem;
  border: none;
  border-radius: 50%;
  background: var(--bs-primary);
  pointer-events: auto;
  -moz-appearance: none;
}

/* ======= /Price range ======= */
/* ======= Countdown ======= */
.countdown {
  display: inline-flex;
  align-items: center;
  padding-left: 0;
  list-style: none;
  text-align: center;
}
.countdown .date-time {
  display: block;
  min-width: 90px;
  padding: 0.5rem;
  background-color: rgba(var(--bs-white-rgb), 0.15);
}
.countdown .date-time:not(:last-child) {
  margin-right: 1rem;
}
.countdown .date-time .num {
  display: block;
  font-size: 2.15rem;
  font-weight: 500;
  line-height: 1.1;
}
.countdown .date-time .word {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
}
@media (max-width: 575.98px) {
  .countdown .date-time {
    min-width: 70px;
  }
  .countdown .date-time:not(:last-child) {
    margin-right: 0.5rem;
  }
  .countdown .date-time .num {
    font-size: 1.85rem;
  }
  .countdown .date-time .word {
    font-size: 0.75rem;
  }
}

/* ======= /Countdown ======= */
/* ======= Preloader  ======= */
#preloader {
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  z-index: 999;
}

/* ======= /Preloader  ======= */
/* ======= Animation ======= */
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(-1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.slideIn {
  animation-delay: 0s;
  animation-fill-mode: both;
  animation: slideIn 0.35s both;
}

/* ======= /Animation ======= */
/* ======= Scroll to top ======= */
.scroll-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  opacity: 0;
  visibility: hidden;
  color: white;
  background: rgba(var(--bs-primary-rgb), 0.75);
  z-index: 100000;
  transition: all 0.35s ease-in-out;
  border-radius: 50%;
}
.scroll-top.active {
  opacity: 1;
  visibility: visible;
}
.scroll-top:hover {
  background: rgba(var(--bs-primary-rgb), 1);
}

/* ======= /Scroll to top ======= */
/* ======= Header ======= */
/* Topbar */
.header-topbar {
  background-color: var(--bs-dark-blue);
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 1rem;
}
.header-topbar a {
  color: white;
}
.header-topbar a:hover {
  color: var(--bs-primary);
}

/* Navbar */
.header-navbar {
  transition: 0.5s ease-in-out;
  /* Navbar */
  /* User menu */
}
.header-navbar .navbar {
  padding: 0;
  height: 90px;
}
.header-navbar .navbar .navbar-brand {
  padding: 0;
}
.header-navbar .navbar .navbar-nav {
  margin-bottom: 1.5rem;
}
.header-navbar .navbar .nav-link {
  color: var(--bs-dark);
  font-size: 1.575rem;
  font-weight: 500;
  position: relative;
}
.header-navbar .navbar .nav-link:hover, .header-navbar .navbar .nav-link:focus, .header-navbar .navbar .nav-link.active {
  color: var(--bs-primary);
}
.header-navbar .navbar .nav-link .dropdown-toggle-icon {
  position: absolute;
  top: 50%;
  right: -0.5rem;
  font-size: 1.35rem;
  padding: 0.5rem;
  transform: translateY(-50%);
}
.header-navbar .navbar .dropdown-menu {
  border: 0;
  font-size: 1.25rem;
  padding: 0.35rem 0;
  box-shadow: none;
}
.header-navbar .navbar .dropdown-menu .dropdown-item {
  font-weight: var(--bs-body-font-weight);
  min-width: auto;
  padding: 0.35rem 1.5rem;
}
.header-navbar .navbar .dropdown-menu .dropdown-item:hover, .header-navbar .navbar .dropdown-menu .dropdown-item:focus, .header-navbar .navbar .dropdown-menu .dropdown-item.active {
  color: var(--bs-primary);
  background-color: var(--bs-tertiary-bg);
}
.header-navbar .navbar .mega-menu-title {
  display: block;
  padding: 0.35rem 1.5rem;
  font-weight: 500;
  font-size: 1.25rem;
}
.header-navbar .navbar .mega-menu-item {
  padding: 0;
}
.header-navbar .navbar .mega-menu-item .nav {
  padding-left: 1rem;
}


/* Destinations flyout — mobile-default (below 1200px) state. The tab list
   is non-functional at this width (every panel is already visible, so
   there's nothing to switch between) and would just show as a redundant,
   dead-looking list of region names, so it's hidden entirely; each panel's
   own heading is shown instead. Reversed inside the 1200px+ block below. */
.header-navbar .navbar .flyout-tabs {
  display: none;
}
.header-navbar .navbar .flyout-panel-title {
  display: block;
  padding: 0.35rem 1.5rem;
  font-weight: 500;
  font-size: 1.25rem;
}
.header-navbar .navbar .flyout-mobile-cta {
  display: flex;
  align-items: center;
  padding: 0.6rem 1.5rem;
  font-weight: 500;
  font-size: 1.05rem;
  color: #4682B4;
  text-decoration: none;
}
.header-navbar .navbar .flyout-mobile-cta:hover,
.header-navbar .navbar .flyout-mobile-cta:focus {
  color: var(--bs-primary);
}
.header-navbar .navbar .flyout-mobile-cta i {
  font-size: 1rem;
  flex-shrink: 0;
}
/* Always-visible link inside the "interests" panel to the interactive
   Cities by Interest hub (brief addendum 19/20) — distinct from the
   "Browse Cities by Interest" tab itself, which switches to this panel's
   list of single-topic "Best for X" pages rather than the hub. Unlike
   .flyout-mobile-cta this isn't breakpoint-hidden, since the panel it
   lives in is visible at every width. */
.header-navbar .navbar .flyout-panel-cta {
  display: flex;
  align-items: center;
  padding: 0.5rem 1.5rem 0.75rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 1rem;
  color: #4682B4;
  text-decoration: none;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}
.header-navbar .navbar .flyout-panel-cta:hover,
.header-navbar .navbar .flyout-panel-cta:focus {
  color: var(--bs-primary);
}
.header-navbar .user-menu .dropdown-menu {
  margin-top: 1.55rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.header-navbar .user-menu .user-menu-avatar {
  border: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  overflow: hidden;
}
.header-navbar .user-menu .user-menu-avatar img {
  width: 100%;
  height: 100%;
}
@media (min-width: 1200px) {
  .header-navbar .navbar .navbar-brand {
    margin-right: 3rem;
  }
  .header-navbar .navbar .navbar-nav {
    margin-bottom: 0;
    width: 100%;
    justify-content: center;
  }
  .header-navbar .navbar .navbar-left {
    display: flex;
    align-items: center;
    margin-right: auto;
  }
  .header-navbar .navbar .navbar-right {
    display: flex;
    align-items: center;
    justify-content: end;
  }
  .header-navbar .navbar .nav-link {
    font-size: 1.25rem;
    font-weight: 500;
    padding: 1.7rem 0;
    margin-right: 1.5rem;
  }
  .header-navbar .navbar .nav-link .dropdown-toggle-icon {
    font-size: 0.85rem;
    position: unset;
    top: unset;
    right: unset;
    padding: unset;
    transform: unset;
  }
  .header-navbar .navbar .dropdown-menu {
    font-size: var(--bs-body-font-size);
    box-shadow: var(--bs-box-shadow-sm);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 0.75rem 0;
  }
  .header-navbar .navbar .dropdown-menu .dropdown-item {
    min-width: 12rem;
  }
  .header-navbar .navbar .mega-menu {
    display: flex;
  }
  .header-navbar .navbar .mega-menu-item {
    padding: 0 1.5rem;
    border-right: 1px solid var(--bs-border-color);
    /* Share the panel's spare width between the columns.
       The panel is a fixed 1100px centred on the header container, but the
       columns are flex items sized by their own content and were not growing
       to fill it, so any slack pooled at the right-hand end: 36px of dead
       space after the last column and none before the first, which reads as
       the whole menu sitting off-centre (Chris, 2026-09-08).
       It only became visible when the heading-padding fix above narrowed two
       columns; before that they happened to total exactly 1100 and the bug
       was invisible. flex-grow keeps it that way whatever the columns
       measure, including if one is added or removed. */
    flex: 1 1 auto;
  }
  /* Column headings were wrapping to two lines - "Attraction tickets & tours"
     and "Car hire & transfers" both broke mid-phrase (Chris, 2026-09-08).

     Doubled padding, not a lack of room. The column above applies 1.5rem each
     side, and .mega-menu-title applies another 1.5rem of its own, so a heading
     had 3rem of inset while the links under it had far less: "Car hire &
     transfers" needs 174px and was given 141. Zeroing it here hands each
     heading its column's full width - 189px and 248px - and both fit.

     nowrap so a heading can never silently wrap again. If a future title
     outgrows its column it will widen the panel, which is visible and
     fixable, rather than quietly folding in half.

     Scoped to this 1200px+ block deliberately. Below it the mega-menu is a
     stacked list inside the offcanvas drawer, where the column padding does
     not apply and the heading's own inset is the only thing indenting it -
     removing it there would move every heading, which is not what was asked
     and could not be verified in the preview pane. */
  .header-navbar .navbar .mega-menu-title {
    padding-left: 0;
    padding-right: 0;
    white-space: nowrap;
  }
  .header-navbar .navbar .mega-menu-item:first-child {
    padding-left: 0.5rem;
  }
  .header-navbar .navbar .mega-menu-item:last-child {
    padding-right: 0.5rem;
    border-right: 0;
  }
  .header-navbar .navbar .mega-menu-item .nav {
    padding-left: 0;
  }
  /* Mega-menu panels (Destinations, Reservations) are wide multi-column
     dropdowns. Bootstrap's default dropdown positions them relative to
     their own trigger link, which sits well right-of-center in a centered
     nav — on medium/laptop screens the panel ran past the right edge of
     the viewport and forced horizontal scroll. Fix: position relative to
     the header container instead and center it there, capped to the
     viewport width. Scoped to this 1200px+ block deliberately — below
     this breakpoint the mega-menu lives inside the mobile offcanvas
     drawer instead, where this positioning would break it. */

  /* NOTE for anyone tempted to bottom-align the last sector's submenu so it
     stays inside the panel's height: measured, and it is worse. Bottom-aligned
     it opens 42px ABOVE the heading that summoned it, which reads as belonging
     to the row above. Top-aligned it sits 8px off its own heading and overhangs
     the panel's foot by 34px - which is what cascading submenus normally do,
     and it stays well inside the viewport. Left top-aligned deliberately. */
  /* Destinations flyout menu (brief addendum 9/10) — replaces the old
     6-column layout. One region visible at a time via left-hand tabs;
     capped at max-width: 600px, which is what actually prevents overflow,
     so it needs no special positioning and anchors under its own trigger
     like a normal dropdown. Scoped to this 1200px+ block: below it, the
     tab list is hidden entirely (non-functional there — panels aren't
     hidden, so there's nothing to switch between) and every region's
     content shows via its own .flyout-panel-title heading instead, so
     mobile still reads as one stacked list, just no longer an unlabelled
     wall of ~45 city links with no indication which region each belongs
     to (the bug in the first version of this). */
  .header-navbar .navbar .mega-menu-destinations-v3 {
    padding: 0;
  }
  .header-navbar .navbar .flyout-container {
    display: flex;
    align-items: flex-start;
    max-width: 600px;
  }
  .header-navbar .navbar .flyout-tabs {
    display: block;
    flex: 0 0 190px;
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    border-right: 1px solid var(--bs-border-color-translucent);
  }
  .header-navbar .navbar .flyout-tab,
  .header-navbar .navbar .flyout-tab-link {
    display: flex;
    align-items: center;
    padding: 0.6rem 1.25rem;
    font-size: 1.05rem;
    color: var(--bs-dark);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
  }
  .header-navbar .navbar .flyout-tab:hover,
  .header-navbar .navbar .flyout-tab.active,
  .header-navbar .navbar .flyout-tab-link:hover,
  .header-navbar .navbar .flyout-tab-link.active {
    color: var(--bs-primary);
    background-color: var(--bs-tertiary-bg);
  }
  .header-navbar .navbar .flyout-tab i,
  .header-navbar .navbar .flyout-tab-link i {
    font-size: 1rem;
    flex-shrink: 0;
  }
  .header-navbar .navbar .flyout-tab-interest,
  .header-navbar .navbar .flyout-tab-link {
    color: #4682B4;
  }
  .header-navbar .navbar .flyout-divider {
    border-top: 1px solid var(--bs-border-color-translucent);
    margin: 0.5rem 1.25rem;
  }
  .header-navbar .navbar .flyout-panels {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1.25rem;
  }
  .header-navbar .navbar .flyout-panel {
    display: none;
  }
  .header-navbar .navbar .flyout-panel.active {
    display: block;
  }
  .header-navbar .navbar .flyout-panel-title {
    display: none;
  }
  .header-navbar .navbar .flyout-mobile-cta {
    display: none;
  }
  .header-navbar .navbar .flyout-panel-cta {
    padding: 0.5rem 0.5rem 0.75rem;
  }
  .header-navbar .navbar .flyout-panel .dropdown-item {
    min-width: auto;
    padding: 0.35rem 0.5rem;
    /* Site's default dark text colour, medium weight — chosen over a
       brand-green variant tried first, which read as blurred/less
       impactful for city names. */
    font-weight: 500;
  }
  .header-navbar .navbar .flyout-panel .dropdown-item:hover,
  .header-navbar .navbar .flyout-panel .dropdown-item:focus {
    text-decoration: underline;
  }
  .header-navbar .navbar #interests .dropdown-item {
    color: #4682B4;
    font-weight: normal;
  }
}

/* Navbar toggler */
.navbar-toggler {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--bs-light-gray);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  box-shadow: none;
  font-size: 1.125rem;
}
.navbar-toggler:focus, .navbar-toggler:hover {
  border: 0;
  box-shadow: none;
}

/* Header sticked */
.header-sticked .header-navbar {
  background: white;
  opacity: 0;
  position: fixed;
  top: -90px;
  left: 0;
  right: 0;
  z-index: 1030;
  box-shadow: var(--bs-box-shadow-sm);
}
.header-sticked.header-showed .header-navbar {
  opacity: 1;
  top: 0;
}
.header-sticked + main {
  margin-top: 90px;
}

/* ======= /Header ======= */
/* ======= Heros ======= */
/* Hero */
.hero {
  position: relative;
  /* Hero background */
  /* Hero title */
  /* Hero sub title */
  /* Hero description */
  /* Hero badge */
  /* Hero Carousel */
  /* Hero video */
  /* Hero Page Title */
  /* Hero Reviews */
  /* Breadcrumb */
}
.hero .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hero .hero-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--bs-black-rgb), 0.5);
}
.hero .hero-bg.hero-without-overlay::after {
  content: unset;
}
.hero .hero-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.hero .bg-content {
  position: relative;
}
.hero .hero-title {
  font-weight: 500;
  color: white;
}
.hero .hero-sub-title {
  font-weight: 400;
  color: var(--bs-light);
  text-transform: uppercase;
  letter-spacing: 0.175rem;
  display: block;
  margin-bottom: 1rem;
}
.hero .hero-desc {
  color: rgba(var(--bs-white-rgb), 0.85);
}
.hero .hero-badge {
  color: white;
  background-color: var(--bs-primary);
  display: inline-block;
  padding: 0.15rem 1rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
}
.hero .hero-carousel .hero-item {
  position: relative;
}
.hero .hero-carousel .hero-caption {
  position: relative;
  text-align: center;
  padding-top: 160px;
  padding-bottom: 160px;
}
.hero .hero-carousel .hero-action {
  display: inline-flex;
  align-items: center;
  margin-top: 1.5rem;
}
.hero .hero-carousel .carousel-indicators.hero-indicators {
  margin: 0;
  padding-left: 0.75rem;
  margin-bottom: 0;
  bottom: 2rem;
}
.hero .hero-carousel .carousel-indicators.hero-indicators [data-bs-target] {
  height: 6px;
  width: 18px;
  padding: 0;
  margin: 0 3px;
  border-top: 0 solid transparent;
  border-bottom: 0 solid transparent;
  transition: all 0.25s ease-in-out;
  border-radius: 3px;
}
.hero .hero-carousel .carousel-indicators.hero-indicators [data-bs-target].active {
  width: 40px;
}
.hero .hero-carousel .carousel-indicators.hero-indicators-right {
  left: 0;
  right: 0;
  margin: 0;
  bottom: 2rem;
  align-items: center;
}
.hero .hero-carousel .carousel-indicators.hero-indicators-right [data-bs-target] {
  width: 1.25rem;
  height: 1.25rem;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  margin: 0.35rem 0 0.35rem 0.5rem;
  position: relative;
  transition: all 0.35s ease-in-out;
}
.hero .hero-carousel .carousel-indicators.hero-indicators-right [data-bs-target]::after {
  position: absolute;
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  background-color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  transition: all 0.35s ease-in-out;
}
.hero .hero-carousel .carousel-indicators.hero-indicators-right [data-bs-target].active {
  border-color: var(--bs-primary);
  opacity: 1;
  transition: all 0.35s ease-in-out;
}
.hero .hero-carousel .carousel-indicators.hero-indicators-right [data-bs-target].active::after {
  width: 0.35rem;
  height: 0.35rem;
  background-color: var(--bs-primary);
}
.hero .hero-carousel .carousel-control-next-icon,
.hero .hero-carousel .carousel-control-prev-icon {
  background-color: rgba(var(--bs-black-rgb), 0.75);
  width: 48px;
  height: 48px;
  border: 0.75rem solid transparent;
  border-radius: 50%;
}
.hero .hero-carousel .carousel-control {
  display: none;
  align-items: center;
  bottom: 3.75rem;
  position: absolute;
  z-index: 1;
}
.hero .hero-carousel .carousel-control .carousel-control-next,
.hero .hero-carousel .carousel-control .carousel-control-prev {
  position: relative;
  width: auto;
  transition: all 0.35s ease-in-out;
}
.hero .hero-carousel .carousel-control .carousel-control-next::after, .hero .hero-carousel .carousel-control .carousel-control-next::before,
.hero .hero-carousel .carousel-control .carousel-control-prev::after,
.hero .hero-carousel .carousel-control .carousel-control-prev::before {
  background-color: white;
  content: "";
}
.hero .hero-carousel .carousel-control .carousel-control-next::after,
.hero .hero-carousel .carousel-control .carousel-control-prev::before {
  height: 1px;
  width: 80px;
}
.hero .hero-carousel .carousel-control .carousel-control-next::before,
.hero .hero-carousel .carousel-control .carousel-control-prev::after {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}
.hero .hero-carousel .carousel-control .carousel-control-next {
  margin-right: 0.5rem;
}
.hero .hero-carousel .carousel-control .carousel-control-next::after {
  margin-left: -1rem;
}
.hero .hero-carousel .carousel-control .carousel-control-next::before {
  right: 0;
}
.hero .hero-carousel .carousel-control .carousel-control-prev {
  margin-left: 0.5rem;
}
.hero .hero-carousel .carousel-control .carousel-control-prev::before {
  margin-right: -1rem;
}
.hero .hero-carousel .carousel-control .carousel-control-prev::after {
  left: 0;
}
.hero .hero-carousel .carousel-control .carousel-control-next-icon,
.hero .hero-carousel .carousel-control .carousel-control-prev-icon {
  width: 1.5rem;
  height: 1.5rem;
  background-color: unset;
  border: unset;
}
@media (min-width: 576px) {
  .hero .hero-carousel .carousel-indicators.hero-indicators-right {
    flex-direction: column;
    left: unset;
    right: unset;
    bottom: unset;
    top: 50%;
    transform: translateY(-50%);
  }
  .hero .hero-carousel .carousel-indicators.hero-indicators-right [data-bs-target] {
    margin: 0.35rem 0;
  }
}
@media (min-width: 768px) {
  .hero .hero-carousel .carousel-indicators.hero-indicators-right {
    right: calc((100% - 640px) / 2 + 0.75rem);
  }
  .hero .hero-carousel .carousel-control {
    display: flex;
    left: calc((100% - 640px) / 2);
  }
}
@media (min-width: 992px) {
  .hero .hero-carousel .carousel-indicators.hero-indicators-right {
    right: calc((100% - 720px) / 2 + 0.75rem);
  }
  .hero .hero-carousel .carousel-control {
    left: calc((100% - 720px) / 2);
  }
}
@media (min-width: 1200px) {
  .hero .hero-carousel .hero-caption {
    display: flex;
    align-items: center;
    height: calc(100vh - 130px);
    padding-top: unset;
    padding-bottom: 4rem;
  }
  .hero .hero-carousel .hero-indicators {
    bottom: 7rem;
  }
  .hero .hero-carousel .carousel-indicators.hero-indicators-right {
    right: calc((100% - 1200px) / 2 + 0.75rem);
  }
  .hero .hero-carousel .carousel-control {
    left: calc((100% - 1200px) / 2);
  }
}
@media (min-width: 1400px) {
  .hero .hero-carousel .carousel-indicators.hero-indicators-right {
    right: calc((100% - 1360px) / 2 + 0.75rem);
  }
  .hero .hero-carousel .carousel-control {
    left: calc((100% - 1360px) / 2);
  }
}
.hero .hero-video .hero-caption {
  height: calc(100vh - 130px);
  position: relative;
  text-align: center;
  padding-top: 160px;
  padding-bottom: 160px;
}
.hero .hero-page-title {
  text-align: center;
  padding-top: 160px;
  padding-bottom: 160px;
}
.hero .hero-page-title.hero-title-search {
  padding-bottom: calc(160px + 3rem);
}
.hero .hero-review {
  display: inline-block;
  position: relative;
  color: white;
}
.hero .hero-review .review-content {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.hero .hero-review .review-score {
  font-weight: 600;
  font-size: 3.5rem;
  margin-right: 1rem;
  line-height: 1;
  margin-bottom: 0.1rem;
}
.hero .hero-review .review-total {
  display: flex;
  flex-direction: column;
  line-height: 1.35rem;
}
.hero .hero-review .review-total .star-rate-view {
  margin-bottom: 0.25rem;
}
.hero .hero-review .review-label {
  text-align: center;
  display: inline-block;
}
.hero .hero-review .review-label > small {
  color: white;
  background-color: var(--bs-primary);
  text-transform: uppercase;
  letter-spacing: 0.175rem;
  display: block;
  height: 100%;
  font-weight: 500;
  padding: 0.25rem 0.75rem 0.25rem 1rem;
  font-size: 0.75rem;
  min-width: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bs-border-radius-sm);
}
.hero .hero-review .review-label > small.review-label-lg {
  font-size: 1rem;
}
.hero .hero-review .review-label > small.review-label-sm {
  font-size: 0.65rem;
}
.hero .hero-review .review-title {
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  line-height: 1;
}
.hero nav[aria-label=breadcrumb] {
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  font-size: 0.65rem;
  letter-spacing: 0.135rem;
  z-index: 1;
  display: none;
}
.hero nav[aria-label=breadcrumb] .breadcrumb {
  transform: rotate(180deg);
  writing-mode: vertical-lr;
  color: var(--bs-dark-gray);
  text-transform: uppercase;
  background-color: rgba(var(--bs-black-rgb), 0.35);
  padding: 0.85rem 0.35rem 0.75rem 0.35rem;
  margin: 0;
  border-radius: var(--bs-border-radius-sm);
}
.hero nav[aria-label=breadcrumb] .breadcrumb .breadcrumb-item + .breadcrumb-item {
  padding-left: unset;
  padding-top: 0.35rem;
}
.hero nav[aria-label=breadcrumb] .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  padding-right: unset;
  padding-bottom: 0.35rem;
}
.hero nav[aria-label=breadcrumb] .breadcrumb .breadcrumb-item a {
  color: white;
}
.hero nav[aria-label=breadcrumb] .breadcrumb .breadcrumb-item a:hover {
  color: var(--bs-primary);
}
.hero nav[aria-label=breadcrumb] .breadcrumb .breadcrumb-item.active, .hero nav[aria-label=breadcrumb] .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(var(--bs-white-rgb), 0.5);
}
@media (min-width: 768px) {
  .hero nav[aria-label=breadcrumb] {
    display: flex;
    left: 0.75rem;
  }
}
@media (min-width: 1200px) {
  .hero nav[aria-label=breadcrumb] {
    left: calc((100% - 1200px) / 2 + 0.75rem);
  }
}
@media (min-width: 1400px) {
  .hero nav[aria-label=breadcrumb] {
    left: calc((100% - 1360px) / 2 + 0.75rem);
  }
}

/* ======= /Heros ======= */
/* ======= Searchs ======= */
/* Search tours */
.search-tours {
  position: relative;
  z-index: 1;
  padding-top: 3rem;
  padding-bottom: 3rem;
  /* Seach hero */
}
.search-tours .search-tour-form {
  border-radius: var(--bs-border-radius);
}
.search-tours .btn-search-tour {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  min-width: auto;
}
.search-tours.search-hero {
  border-bottom: 1px solid var(--bs-border-color);
}
.search-tours.search-hero .search-tour-form {
  background-color: var(--bs-light-gray);
}
.search-tours.search-hero .search-tour-input {
  position: relative;
  padding: 1.5rem;
}
@media (min-width: 1200px) {
  .search-tours {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .search-tours.search-hero {
    padding-top: unset;
    padding-bottom: unset;
    border-bottom: unset;
    /* Searh half */
  }
  .search-tours.search-hero .search-tour-form {
    border-radius: 0;
    border-top-right-radius: var(--bs-border-radius);
    border-top-left-radius: var(--bs-border-radius);
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 100%;
    background-color: var(--bs-light-gray);
    z-index: 1;
  }
  .search-tours.search-hero .search-tour-input {
    padding: 1rem;
  }
  .search-tours.search-hero.search-hero-half .search-tour-input {
    padding: 1.25rem;
  }
  .search-tours.search-hero-compact .search-hero-compact-panel {
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 100%;
    z-index: 1;
  }
}
.search-tours.search-hero-compact {
  max-width: 640px;
}
.search-tours.search-hero-compact .search-tour-form {
  position: static;
  bottom: auto;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.search-tours.search-hero-compact .search-tour-input {
  padding: 1rem 1.25rem;
}
.search-tours.search-hero-compact .form-select {
  padding-right: 2.25rem;
  font-size: 0.95rem;
}
.search-tours.search-hero-compact .input-icon-group .form-select {
  padding-left: 2.5rem;
}
.search-tours.search-hero-compact .search-hero-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: none;
  padding: 0.5rem 0.5rem 0;
  background-color: rgba(4, 34, 51, 0.55);
  border-top-left-radius: var(--bs-border-radius);
  border-top-right-radius: var(--bs-border-radius);
}
.search-tours.search-hero-compact .search-hero-tabs .nav-link {
  color: #fff;
  opacity: 0.75;
  background-color: transparent;
  border: none;
  border-top-left-radius: var(--bs-border-radius);
  border-top-right-radius: var(--bs-border-radius);
}
.search-tours.search-hero-compact .search-hero-tabs .nav-link.active {
  opacity: 1;
  font-weight: 600;
  color: var(--bs-body-color);
  background-color: var(--bs-light-gray);
}
@media (max-width: 575.98px) {
  .search-tours.search-hero-compact .search-hero-tabs {
    flex-wrap: nowrap;
    gap: 0.125rem;
    padding: 0.5rem 0.25rem 0;
  }
  .search-tours.search-hero-compact .search-hero-tabs .nav-item {
    flex: 1 1 0;
    min-width: 0;
  }
  .search-tours.search-hero-compact .search-hero-tabs .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0.4rem 0.25rem;
    font-size: 1rem;
    line-height: 1.15;
    text-align: center;
  }
  .search-tours.search-hero-compact .search-hero-tabs .nav-link .hicon {
    display: none;
  }
}
@media (max-width: 359.98px) {
  .search-tours.search-hero-compact .search-hero-tabs .nav-link {
    font-size: 0.85rem;
  }
}
.search-tours.search-hero-compact .search-hero-reservations-note {
  background-color: var(--bs-light-gray);
  border-radius: var(--bs-border-radius);
  padding: 0.5rem 1.25rem;
}
@media (max-width: 767.98px) {
  .search-tours.search-hero-compact {
    margin-top: -1rem;
  }
}

/* ======= /Searchs ======= */
/* ======= Block titles ======= */
.block-title {
  margin-bottom: 1rem;
}
.block-title .title {
  margin-bottom: 0;
  font-weight: 500;
}
.block-title .sub-title {
  text-transform: uppercase;
  color: var(--bs-primary);
  letter-spacing: 0.175rem;
  font-weight: 400;
  display: block;
  margin-bottom: 0.5rem;
}

/* ======= /Block titles ======= */
/* ======= Title Info ======= */
.title-info {
  position: relative;
  z-index: 2;
}
@media (min-width: 1200px) {
  .title-info {
    padding-top: 0;
  }
}
@media (min-width: 1200px) {
  .title-info .title-info-body {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
  }
}

/* ======= /Title Info ======= */
/* ======= Destinations, Tours ======= */
/* Destinations */
.destination .destination-content {
  display: flex;
  align-items: center;
}
.destination .destination-content .destination-info {
  margin-right: auto;
}
.destination .destination-content .destination-info .destination-title {
  margin-bottom: 0;
}
.destination.destination-center {
  text-align: center;
}
.destination.destination-center .destination-icon {
  margin-bottom: 1rem;
}
.destination.destination-center .destination-title {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .destination.destination-center .destination-icon {
    margin-bottom: 0.35rem;
  }
}

/* Tour list */
.tour-list .tour-item {
  background-color: var(--bs-body-bg);
  overflow: hidden;
}
.tour-list .tour-item .tour-img {
  position: relative;
}
.tour-list .tour-item .tour-like {
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
}
.tour-list .tour-item .tour-content {
  position: relative;
  padding: 1.5rem;
  width: 100%;
}
.tour-list .tour-item .tour-content .tour-title {
  font-size: 1.5rem;
}
.tour-list .tour-item .tour-content .tour-title a {
  color: var(--bs-body-color);
}
.tour-list .tour-item .tour-content .tour-title a:hover {
  color: var(--bs-primary);
}
.tour-list .tour-item .tour-content .tour-info {
  display: flex;
  align-items: center;
}
.tour-list .tour-item .tour-content .tour-info .tour-itinerary {
  margin-bottom: 1rem;
  margin-right: 0.5rem;
  font-size: 1rem;
}
.tour-list .tour-item .tour-content .tour-info .tour-itinerary span {
  margin-right: 0.75rem;
}
.tour-list .tour-item .tour-content .tour-info .inline-review {
  margin-bottom: 1rem;
}
.tour-list .tour-item .tour-content .tour-booking {
  display: flex;
  align-items: center;
  width: 100%;
}
.tour-list .tour-item .tour-content .tour-booking .tour-price {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
}
.tour-list .tour-item .tour-content .tour-booking .tour-price strong {
  font-weight: 600;
  font-size: 1.5rem;
  margin-right: 0.25rem;
}
.tour-list .tour-item .tour-content .tour-booking .tour-price span {
  font-size: 1rem;
  color: var(--bs-secondary);
  font-weight: 400;
}
@media (max-width: 1399.98px) {
  .tour-list .tour-item .tour-content .tour-title {
    font-size: 1.275rem;
  }
  .tour-list .tour-item .tour-content .tour-info {
    margin-bottom: 0.75rem;
  }
  .tour-list .tour-item .tour-content .tour-info .tour-itinerary {
    margin-bottom: 0.75rem;
  }
}
@media (max-width: 1199.98px) {
  .tour-list .tour-item .tour-content .tour-info {
    display: block;
    align-items: unset;
  }
  .tour-list .tour-item .tour-content .tour-info .tour-itinerary {
    margin-bottom: 0.55rem;
  }
  .tour-list .tour-item .tour-content .tour-info .inline-review {
    margin-bottom: 0.55rem;
  }
  .tour-list .tour-item .tour-content .tour-booking {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .tour-list .tour-item .tour-content .tour-booking .tour-price strong {
    font-size: 1.35rem;
  }
  .tour-list .tour-item .tour-content .tour-booking .tour-price span {
    font-size: 0.85rem;
  }
}

/* Tour grid */
.tour-grid .tour-item {
  background-color: var(--bs-body-bg);
  overflow: hidden;
}
.tour-grid .tour-item .tour-img {
  position: relative;
}
.tour-grid .tour-item .tour-like {
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
}
.tour-grid .tour-item .tour-content {
  position: relative;
  padding: 1.5rem;
  width: 100%;
}
.tour-grid .tour-item .tour-content .tour-title {
  font-size: 1.275rem;
}
.tour-grid .tour-item .tour-content .tour-title a {
  color: var(--bs-body-color);
}
.tour-grid .tour-item .tour-content .tour-title a:hover {
  color: var(--bs-primary);
}
.tour-grid .tour-item .tour-content .tour-itinerary {
  margin-bottom: 1rem;
  margin-right: 0.5rem;
  font-size: 1rem;
}
.tour-grid .tour-item .tour-content .tour-itinerary span {
  margin-right: 0.75rem;
}
.tour-grid .tour-item .tour-content .inline-review {
  margin-bottom: 1rem;
}
.tour-grid .tour-item .tour-content .tour-booking {
  display: flex;
  align-items: center;
  width: 100%;
}
.tour-grid .tour-item .tour-content .tour-booking .tour-price {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
}
.tour-grid .tour-item .tour-content .tour-booking .tour-price strong {
  font-weight: 600;
  font-size: 1.5rem;
  margin-right: 0.25rem;
}
.tour-grid .tour-item .tour-content .tour-booking .tour-price span {
  font-size: 1rem;
  color: var(--bs-secondary);
  font-weight: 400;
}

/* Cities by Interest hub + genre-index pages */
/* Carousel panels: one height per row.
   .tour-item's content is genuinely variable - intro_blurb runs 97 to 134
   characters so wraps to two or three lines depending on column width, and
   one destination has no rating at all, which drops the whole review row.
   Cards therefore finished at different heights while sitting side by side
   in a carousel.
   Splide's .splide__list is display:flex with no align-items, so the SLIDES
   already stretch to the tallest in the track - the card inside simply was
   not filling its slide. Same root cause as the quick-stats mini-cards.
   Pinning .tour-booking to the bottom lines the CTA buttons up across the
   row, which is what makes equal height read as deliberate rather than as
   cards with dead space under them.
   Scoped to .splide__slide > .tour-item so the full-width .tour-list rows on
   cities-by-interest.html, and every non-carousel use of this card, are
   untouched. */
.splide__slide {
  display: flex;
}
.splide__slide > .tour-item {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.splide__slide > .tour-item > .tour-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.splide__slide > .tour-item > .tour-content > .tour-booking {
  margin-top: auto;
}
.tour-reasoning {
  font-size: 1.2rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Full-image brightness-correction scrim for card thumbnails — 20%
   flat black, scaled down from the hero's 50% .hero-bg::after scrim
   (started at 25%, toned down after review). CSS-only, no new image
   assets or requests. */
.tour-item .tour-img {
  position: relative;
}
.tour-item .tour-img img {
  height: auto;
}
.tour-item .tour-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

/* Hub hero "Search flights / Search hotels" links — inverted from the
   .book-info.info-light default (white, green on hover): permanently
   green, white on hover. Scoped to .hub-question-links only. */
.book-info.info-light .question-contact.hub-question-links > * {
  color: var(--bs-primary);
}
.book-info.info-light .question-contact.hub-question-links > *:hover {
  color: white;
}

/* ======= /Destinations, Tours ======= */
/* ======= Testimonials ======= */
/* Box */
.testimonial-box {
  position: relative;
  background-color: var(--bs-body-bg);
  padding: 1.5rem;
}
.testimonial-box .testimonial-icon {
  font-size: 3.5rem;
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  opacity: 0.05;
  line-height: 1;
}
.testimonial-box .testimonial-client {
  display: flex;
  align-items: center;
  margin-bottom: 1.15rem;
}
.testimonial-box .testimonial-client img {
  margin-right: 1rem;
  max-width: 64px;
  border-radius: 50%;
}
.testimonial-box .testimonial-client span {
  font-size: 0.875rem;
  color: var(--bs-secondary);
  font-weight: normal;
}
.testimonial-box .testimonial-review {
  font-style: italic;
}
.testimonial-box .testimonial-star {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.testimonial-box .testimonial-date {
  font-size: 0.85rem;
  padding: 0.15rem 0.45rem;
  font-weight: 400;
  color: white;
  background-color: var(--bs-primary);
}

/* Above */
.testimonial-above {
  position: relative;
  text-align: center;
}
.testimonial-above .testimonial-content {
  background-color: var(--bs-body-bg);
  padding: 1.5rem;
  position: relative;
}
.testimonial-above .testimonial-content .testimonial-review {
  font-style: italic;
}
.testimonial-above .testimonial-content .testimonial-name span {
  font-size: 0.875rem;
  color: var(--bs-secondary);
  font-weight: normal;
}
.testimonial-above .testimonial-content .testimonial-star {
  display: inline-block;
  margin-bottom: 0.5rem;
}
.testimonial-above .testimonial-content::after {
  background: var(--bs-body-bg);
  border-right: 1px solid var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-body-bg);
  content: "";
  height: 1rem;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  position: absolute;
  bottom: -0.5rem;
  width: 1rem;
  z-index: 0;
  box-shadow: var(--bs-box-shadow-xs);
}
.testimonial-above .testimonial-avatar {
  display: inline-block;
  position: relative;
  margin-top: 1.5rem;
  border: 3px solid var(--bs-body-bg);
  border-radius: 50%;
}
.testimonial-above .testimonial-avatar img {
  width: 80px;
  border-radius: 50%;
}
.testimonial-above .testimonial-avatar .testimonial-icon {
  position: absolute;
  top: 0;
  right: -0.75rem;
  width: 32px;
  height: 32px;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 0.85rem;
  background-color: var(--bs-primary);
  color: white;
  border-radius: 50%;
}

/* Inline */
.testimonial-inline {
  text-align: center;
}
.testimonial-inline .testimonial-avatar {
  display: inline-block;
  position: relative;
  margin-bottom: 1rem;
}
.testimonial-inline .testimonial-avatar img {
  border-radius: 50%;
  width: 80px;
}
.testimonial-inline .testimonial-icon {
  position: absolute;
  top: 0;
  right: -0.75rem;
  width: 32px;
  height: 32px;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 0.85rem;
  background-color: var(--bs-primary);
  color: white;
  border-radius: 50%;
}
.testimonial-inline .testimonial-review {
  font-style: italic;
  margin-bottom: 0.55rem;
}
.testimonial-inline .testimonial-star {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.75rem;
}
.testimonial-inline .testimonial-date {
  font-size: 0.85rem;
  margin-left: 0.5rem;
  color: var(--bs-secondary);
}
.testimonial-inline .testimonial-user {
  display: inline-flex;
  flex-direction: column;
  text-wrap: nowrap;
}
.testimonial-inline .testimonial-user span {
  font-size: 0.875rem;
  color: var(--bs-secondary);
  font-weight: normal;
}
@media (min-width: 1200px) {
  .testimonial-inline {
    display: flex;
    align-items: center;
    text-align: left;
  }
  .testimonial-inline .testimonial-avatar {
    margin-right: 2.5rem;
    margin-bottom: 0;
  }
  .testimonial-inline .testimonial-star {
    margin-bottom: 0;
  }
  .testimonial-inline .testimonial-user {
    border-left: 1px solid var(--bs-border-color);
    padding-left: 1.5rem;
    margin-left: 1.5rem;
  }
}

/* ======= /Testimonials ======= */
/* ======= Team ======= */
.team {
  position: relative;
  overflow: hidden;
  background-color: white;
  text-align: center;
}
.team img {
  width: 100%;
}
.team .team-info {
  padding: 1.5rem;
  position: relative;
  transition: 0.25s all ease-in-out;
}
.team .team-name {
  margin-bottom: 0;
  transition: 0.25s all ease-in-out;
}
.team .team-city {
  font-size: 0.875rem;
  color: var(--bs-secondary);
  font-weight: normal;
  display: block;
  transition: 0.35s all ease-in-out;
}
.team .social-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  opacity: 0;
  transition: 0.35s all ease-in-out;
}
.team:hover .team-info .team-name,
.team:hover .team-info .team-city {
  opacity: 0;
}
.team:hover .social-list {
  opacity: 1;
}

/* ======= /Team ======= */
/* ======= Posts ======= */
/* Post mini */
.post-mini {
  display: flex;
  align-items: center;
}
.post-mini .post-img {
  display: block;
  max-width: 128px;
  flex-shrink: 0;
  overflow: hidden;
}
.post-mini .post-img img {
  width: 100%;
}
.post-mini .post-content {
  flex-grow: 1;
  padding-left: 1.5rem;
}
.post-mini .post-title {
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
}
.post-mini .post-title a {
  color: var(--bs-body-color);
}
.post-mini .post-title a:hover, .post-mini .post-title a:focus {
  color: var(--bs-primary);
}
.post-mini .post-ext {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  color: var(--bs-secondary);
  font-weight: 400;
}
.post-mini .post-ext .post-date,
.post-mini .post-ext .post-comment,
.post-mini .post-ext .post-view {
  margin-right: 0.75rem;
}
@media (max-width: 1200px) {
  .post-mini .post-img {
    max-width: 160px;
  }
}
@media (max-width: 576px) {
  .post-mini .post-img {
    max-width: 110px;
  }
}

/* Post */
.post {
  position: relative;
  background-color: var(--bs-body-bg);
}
.post .post-img {
  position: relative;
}
.post .post-content {
  padding: 1.5rem;
}
.post .post-title {
  margin-bottom: 0.5rem;
  font-size: 1.275rem;
}
.post .post-title a {
  color: var(--bs-body-color);
}
.post .post-title a:hover, .post .post-title a:focus {
  color: var(--bs-primary);
}
.post .post-link {
  display: flex;
  align-items: center;
}
.post .post-link .post-ext {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  color: var(--bs-secondary);
  font-weight: 400;
  margin-right: auto;
}
.post .post-link .post-ext .post-date,
.post .post-link .post-ext .post-comment,
.post .post-link .post-ext .post-view {
  margin-right: 0.75rem;
}

/* Post content */
.post-content h2 {
  font-size: 1.75rem;
}
.post-content h3 {
  font-size: 1.55rem;
}
.post-content h4 {
  font-size: 1.35rem;
}
.post-content blockquote {
  position: relative;
  font-size: 1.175rem;
  color: var(--bs-secondary);
  font-style: italic;
  border-left: 3px solid var(--bs-border-color);
  padding-left: 1rem;
  font-weight: 400;
}

/* Post category */
.post-category {
  list-style: none;
  padding-left: 0;
  font-size: 1.175rem;
}
.post-category li a {
  position: relative;
  padding: 0.25rem 0 0.25rem 1.5rem;
  display: flex;
  align-items: center;
  color: var(--bs-body-color);
}
.post-category li a::before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  content: "\f2a5";
  padding: 0.25rem 0;
  font-weight: 600;
  font-family: icons;
  margin-right: 0.5rem;
}
.post-category li a span {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 400;
  font-size: 1rem;
  color: var(--bs-secondary);
}
.post-category li a:hover, .post-category li a:hover span {
  color: var(--bs-primary);
}

/* Post tags */
.tag-list {
  list-style: none;
  padding-left: 0;
}
.tag-list li {
  display: inline-block;
  margin-right: 0.35rem;
}
.tag-list li a {
  display: inline-block;
  font-size: 1rem;
  background-color: var(--bs-gray-300);
  padding: 0.15rem 0.75rem;
  margin: 0.275rem 0;
  color: var(--bs-body-color);
  border-radius: 0.25rem;
  transition: 0.35s all ease-in-out;
  font-weight: 400;
}
.tag-list li a:hover {
  background-color: var(--bs-primary);
  color: white;
}
.tag-list.tag-lg li a {
  font-size: var(--bs-body-font-size);
  padding: 0.215rem 1rem;
}

/* Post comment */
.comment-list .comment-item {
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}
.comment-list .comment-item p {
  font-style: italic;
}
.comment-list .comment-client {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.comment-list .comment-avatar {
  flex-shrink: 0;
  margin-bottom: 0;
  margin-right: 1rem;
}
.comment-list .comment-name {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.comment-list .comment-name strong {
  font-size: 1.175rem;
  color: var(--bs-emphasis-color);
}
.comment-list .comment-name small {
  color: var(--bs-secondary);
}
.comment-list .comment-report {
  font-weight: 400;
  font-size: 0.875rem;
}
.comment-list .comment-report:hover {
  color: var(--bs-secondary);
}

/* ======= /Posts ======= */
/* ======= Form contact ======= */
.form-contact {
  background-color: var(--bs-primary);
  z-index: 1;
  position: relative;
  padding: 1.5rem;
}
@media (min-width: 992px) {
  .form-contact {
    margin-top: -5.55rem;
  }
}

/* ======= /Form contact ======= */
/* ======= Account ======= */
/* Account menu */
.account-menu {
  list-style: none;
  padding-left: 0;
}
.account-menu .menu-item a {
  display: block;
  color: var(--bs-body-color);
  padding: 0.35rem 0;
}
.account-menu .menu-item a:hover, .account-menu .menu-item a.active {
  color: var(--bs-primary);
}
.account-menu .menu-item a i {
  margin-right: 0.25rem;
}

/* Account user */
.account-user {
  display: flex;
  align-items: center;
}
.account-user .user-avatar {
  position: relative;
  display: inline-block;
  margin-right: 1.25rem;
}
.account-user .user-avatar .show-avatar {
  width: 64px;
  height: 64px;
}
.account-user .user-avatar .btn-update-avatar,
.account-user .user-avatar .select-avatar {
  position: absolute;
  padding: 0;
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.75rem;
}
.account-user .user-avatar .btn-update-avatar {
  bottom: 0;
  right: 0;
}
.account-user .user-avatar .select-avatar {
  background-color: var(--bs-light-gray);
  border: 1px solid var(--bs-border-color);
  top: 0;
  right: 0;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}
.account-user .user-avatar .select-avatar:hover, .account-user .user-avatar .select-avatar:focus {
  background-color: var(--bs-secondary);
  border: 1px solid var(--bs-secondary);
  color: white;
}
.account-user .username {
  display: flex;
  flex-direction: column;
}
.account-user .username span {
  font-weight: 400;
  color: var(--bs-secondary);
}
.account-user .username strong {
  font-weight: 500;
  font-size: 1.275rem;
}

/* Booking status */
.booking-status {
  padding: 0.25rem 0.75rem;
  border-radius: var(--bs-border-radius-sm);
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.15;
  min-width: 100px;
  text-align: center;
}
.booking-status.booking-unpaid {
  background-color: rgba(var(--bs-danger-rgb), 0.1);
  color: var(--bs-danger);
}
.booking-status.booking-cancelled {
  background-color: rgba(var(--bs-dark-rgb), 0.1);
  color: var(--bs-dark);
}
.booking-status.booking-completed {
  background-color: rgba(var(--bs-success-rgb), 0.1);
  color: var(--bs-success);
}
.booking-status.booking-processing {
  background-color: rgba(var(--bs-warning-rgb), 0.1);
  color: var(--bs-warning);
}

/* ======= /Account ======= */
/* ======= Booking ======= */
/* Book Infomation */
.book-info {
  margin-bottom: 2rem;
}

.book-info .block-title .title {
  color: var(--bs-emphasis-color);
}

.book-info .book-question {
  margin-top: 1.5rem;
}

.book-info .question-contact {
  display: flex;
  flex-direction: column;
}

.book-info .question-contact > * {
  margin-right: 1rem;
  color: var(--bs-emphasis-color);
  font-weight: 500;
  margin-bottom: 1rem;
}

.book-info .question-contact > *:hover {
  color: var(--bs-secondary);
}

.book-info.info-light,
.book-info.info-light .block-title .title,
.book-info.info-light .question-contact > * {
  color: white;
}

.book-info.info-light .question-contact > *:hover {
  color: var(--bs-primary);
}

@media (min-width: 768px) {
  .book-info .question-contact {
    align-items: center;
    flex-direction: row;
  }
}
@media (min-width: 1200px) {
  .book-info {
    margin-bottom: 0;
  }
  .book-info {
    margin-right: 3rem;
  }
}
/* Booking process */
.booking-process {
  position: relative;
  height: 32px;
  margin-left: 16px;
  margin-right: 16px;
}
.booking-process::before, .booking-process::after {
  position: absolute;
  content: "";
  height: 2px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
}
.booking-process::before {
  background-color: var(--bs-dark-border-subtle);
  right: 0;
}
.booking-process::after {
  background-color: var(--bs-primary);
}
.booking-process[data-booking-step="1"]::after {
  background-color: var(--bs-primary);
  right: 50%;
}
.booking-process[data-booking-step="2"]::after {
  background-color: var(--bs-primary);
  right: 0;
}
.booking-process[data-booking-step="3"]::after, .booking-process[data-booking-step="4"]::after {
  background-color: var(--bs-primary);
  right: 0;
}
.booking-process .booking-step {
  background-color: var(--bs-dark-border-subtle);
  color: white;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.booking-process .booking-step.step-1 {
  left: -16px;
}
.booking-process .booking-step.step-2 {
  left: calc(50% - 16px);
}
.booking-process .booking-step.step-3 {
  left: calc(100% - 16px);
}
.booking-process[data-booking-step="1"] .step-1 {
  background-color: var(--bs-primary);
}
.booking-process[data-booking-step="2"] .step-1,
.booking-process[data-booking-step="2"] .step-2 {
  background-color: var(--bs-primary);
}
.booking-process[data-booking-step="3"] .step-1,
.booking-process[data-booking-step="3"] .step-2,
.booking-process[data-booking-step="3"] .step-3 {
  background-color: var(--bs-primary);
}

/* ======= /Process ======= */
/* ======= Footer ======= */
.footer {
  position: relative;
  background-color: #042233;
  color: rgba(var(--bs-white-rgb), 0.65);
}
.footer .footer-top {
  border-bottom: 1px solid rgba(var(--bs-white-rgb), 0.15);
  margin-bottom: 45px;
}
.footer a {
  color: white;
}
.footer a:hover {
  color: var(--bs-primary);
}
.footer .social-list .social-item a svg {
  stroke: white;
}
/* Replaces a col-6/col-6 grid split: sizes each link list to its own
   content width with a fixed gap between them, instead of splitting the
   wrapper's full width evenly regardless of how much either list
   actually needs (that even split was leaving a large dead gap between
   the two lists once the wrapper widened to col-xl-9). */
.footer .footer-links-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 5rem;
}
.footer .footer-widget {
  margin-bottom: 2.5rem;
}
.footer .footer-widget h2 {
  color: white;
}
/* "About & Contact" / "Flight4" specifically — same muted tone as the
   footer-bottom copyright line, confirmed via computed style against the
   real rendered page rather than guessed. Needs the extra specificity of
   h2.footer-heading-offset here, not a bare .footer-heading-offset rule,
   since .footer .footer-widget h2 above would otherwise win.
   margin-bottom: 0 here for the same specificity reason -- the sitewide
   h1-h6 rule sets margin-bottom: 1rem, which was the real source of the
   wide gap under these two headings, not the pb-3/pb-2 padding utility
   in the markup. Relying on padding-bottom alone now for that gap. */
.footer .footer-widget h2.footer-heading-offset {
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0;
}
.footer .footer-heading-offset {
  margin-top: 0.5rem;
}
@media (min-width: 1200px) {
  /* Columns only sit side-by-side with the Brand column at this
     breakpoint (below it they stack) - 74px lines the "About & Contact"
     / "Flight4" headings up with the start of the brand-desc paragraph
     in column 1, rather than the logo above it. */
  .footer .footer-heading-offset {
    margin-top: 74px;
  }
  /* Matches the 5rem gap between Flight4 and About & Contact -- the
     brand column and this group already sit right next to each other
     via the outer row's g-2 gutter (a few px), so without this the
     logo-to-Flight4 gap would look noticeably narrower than the gap
     between the two link lists. xl+ only: below this breakpoint the
     group sits full-width under the brand column (stacked), where an
     extra left margin would just push it off-center for no reason. */
  .footer .footer-links-group {
    margin-left: 5rem;
  }
}
.footer .brand-img {
  display: inline-block;
  margin-bottom: 1.5rem;
}
.footer .footer-link {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer .footer-link .link-item {
  margin-bottom: 0.25rem;
}
.footer .footer-link .link-item:last-child {
  margin-bottom: 0;
}
.footer .footer-link .link-item a {
  display: inline-block;
  padding: 0.125rem 0;
}
.footer .footer-local,
.footer .footer-local a {
  display: flex;
  align-items: center;
}

/* ======= /Footer ======= */
/* ======= Utilities  ======= */
/* Pading */
.p-top-50 {
  padding-top: 50px !important;
}

.p-bottom-50 {
  padding-bottom: 50px !important;
}

.p-top-60 {
  padding-top: 60px !important;
}

.p-bottom-60 {
  padding-bottom: 60px !important;
}

.p-top-70 {
  padding-top: 70px !important;
}

.p-bottom-70 {
  padding-bottom: 70px !important;
}

.p-top-80 {
  padding-top: 80px !important;
}

.p-bottom-80 {
  padding-bottom: 80px !important;
}

.p-top-90 {
  padding-top: 90px !important;
}

.p-bottom-90 {
  padding-bottom: 90px !important;
}

.p-top-100 {
  padding-top: 100px !important;
}

.p-bottom-100 {
  padding-bottom: 100px !important;
}

.p-top-110 {
  padding-top: 110px !important;
}

.p-bottom-110 {
  padding-bottom: 110px !important;
}

.p-top-120 {
  padding-top: 120px !important;
}

.p-bottom-120 {
  padding-bottom: 120px !important;
}

.p-top-130 {
  padding-top: 130px !important;
}

.p-bottom-130 {
  padding-bottom: 130px !important;
}

.p-top-140 {
  padding-top: 140px !important;
}

.p-bottom-140 {
  padding-bottom: 140px !important;
}

.p-top-150 {
  padding-top: 150px !important;
}

.p-bottom-150 {
  padding-bottom: 150px !important;
}

.p-top-160 {
  padding-top: 160px !important;
}

.p-bottom-160 {
  padding-bottom: 160px !important;
}

.p-top-170 {
  padding-top: 170px !important;
}

.p-bottom-170 {
  padding-bottom: 170px !important;
}

.p-top-180 {
  padding-top: 180px !important;
}

.p-bottom-180 {
  padding-bottom: 180px !important;
}

.p-top-190 {
  padding-top: 190px !important;
}

.p-bottom-190 {
  padding-bottom: 190px !important;
}

.p-top-200 {
  padding-top: 200px !important;
}

.p-bottom-200 {
  padding-bottom: 200px !important;
}

/* Min width */
.mnw-150 {
  min-width: 150px !important;
}

.mnw-160 {
  min-width: 160px !important;
}

.mnw-170 {
  min-width: 170px !important;
}

.mnw-180 {
  min-width: 180px !important;
}

.mnw-190 {
  min-width: 190px !important;
}

.mnw-200 {
  min-width: 200px !important;
}

/* font sizes */
.fsm-1 {
  font-size: 1rem !important;
}

.fsm-2 {
  font-size: 0.95rem !important;
}

.fsm-3 {
  font-size: 0.9rem !important;
}

.fsm-4 {
  font-size: 0.85rem !important;
}

.fsm-5 {
  font-size: 0.8rem !important;
}

.fsm-6 {
  font-size: 0.75rem !important;
}

.fsm-7 {
  font-size: 0.7rem !important;
}

.fsm-8 {
  font-size: 0.65rem !important;
}

/* Line height */
.lh-xs {
  line-height: 1.15 !important;
}

/* Sticky */
.sticky-top-120 {
  top: 120px !important;
}

/* ======= /Utilities  ======= */
/* ======= Containers ======= */
@media (min-width: 576px) {
  .container,
  .container-sm {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container,
  .container-md,
  .container-sm {
    max-width: 640px;
  }
}
@media (min-width: 992px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm {
    max-width: 720px;
  }
}
@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1200px;
  }
}
@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1360px;
  }
}
.compare-flights-slider .splide__arrows .splide__arrow,
.compare-hotels-slider .splide__arrows .splide__arrow,
.compare-holidays-slider .splide__arrows .splide__arrow,
.compare-car-rental-slider .splide__arrows .splide__arrow {
  position: static !important;
  transform: none !important;
}
.compare-flights-slider,
.compare-hotels-slider,
.compare-holidays-slider,
.compare-car-rental-slider {
  margin-bottom: 3.5rem;
}
/* PANEL DEFINITION. Chris, 2026-09-08: the compare index and review panels
   "blend into page" and he pointed at paris-trip-planner.html as the standard.

   He is right about the cause. Measured on the holidays index: a white card
   (#fff) sits on a white section on a white body, and the ONLY thing dividing
   them is Bootstrap's .shadow-sm - a single shadow at 7.5% opacity. On a
   coloured section that reads as a panel; on white it reads as nothing, so the
   eye gets no edge and the page looks like one flat sheet.

   The trip planner solves it with a real 1px border rather than a heavier
   shadow, which is why it looks crisp. Same approach here: an actual edge in
   --bs-border-color, plus a slightly deeper shadow so the card still lifts.
   A border also survives high-contrast and forced-colours modes, which a
   shadow does not.

   Applied through a wrapper class rather than to .card globally - the site has
   hundreds of cards, many already on grey or coloured grounds where they need
   no border and a border would look boxy. The wrapper is opt-in per page. */
.compare-defined-panels .card {
    border: 1px solid var(--bs-border-color) !important;
    box-shadow: 0 2px 10px rgba(16, 42, 67, .06) !important;
}
/* The platform cards inside the slider keep their own treatment - they already
   carry a logo frame with its own grey ground, so they read as objects without
   help, and a border here would double up against the frame's edge. */
.compare-defined-panels .splide .card {
    border-color: var(--bs-border-color) !important;
}

/* "BEST FOR" AWARDS. Chris, 2026-09-08: make this section stand out more.

   It was one white section among six on a white page, so nothing marked it as
   the summary it actually is - the fastest answer on the page for a reader who
   does not want to read a ten-row table. The band does most of the work:
   .bg-gray-gradient is the site's own standout-section pattern (55 uses
   elsewhere), so this needs no new background of its own and the white cards
   now have something to sit against.

   The icon becomes a badge rather than a glyph with a divider - a circular
   tinted ground reads as an award mark, which is what each of these is. The
   category goes uppercase and small so the PROVIDER stays the loudest thing in
   the card; the reader is scanning for names, not for category headings.

   Each card links to that provider's review page (Chris, 2026-09-08). It first
   shipped deliberately static, on the reasoning that a card which looks
   clickable but is not is worse than one that plainly is not - that reasoning
   still holds, which is why the page renders a plain div, not a dead link,
   for any provider whose review page does not exist. */
/* A FLAT tint, not .bg-gray-gradient, and this is measured rather than taste.
   The gradient runs #e9ecef to near-white over the whole section, so the
   heading and its padding spend the colour and the cards - which sit 52% and
   77% down - land on rgb(242,244,246) and rgb(247,248,249). A white card on
   that is 1.10:1 and 1.06:1, which is no band at all. A flat tint holds the
   same ground under every row. */
.compare-bestfor {
    background: var(--bs-light-gray) !important;
}
.compare-bestfor .mini-card {
    border: 1px solid #ced4da;
    padding: 1rem 1.15rem;
}
/* Solid navy, white glyph. The first attempt used the primary green at 12%
   with a green glyph and measured 2.40:1 - under the 3:1 that WCAG 1.4.11 asks
   of non-text, and washed out to look at, which defeats the point of the
   request. Solid primary green would not have fixed it either: white on
   #6cb015 is 2.67:1, because that green is light. Navy is the site's other
   accent - the same colour as the slider arrows - and clears it comfortably. */
.compare-bestfor .mini-card .card-icon {
    border-right: 0;
    margin-right: 1rem;
    padding-right: 0;
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bs-dark-blue);
    color: #fff;
    font-size: 1.4rem;
}
.compare-bestfor .mini-card .card-desc {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .7rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}
.compare-bestfor .mini-card .card-title {
    font-size: 1.05rem;
    font-weight: 600;
}
/* Hover: border, shadow, and the provider name in navy. Nothing else.

   The first version leaned on the site's .card-hover .hover-effect pair, which
   was a mistake - it fills the card solid primary green, whites out the text,
   and lifts it 4px, none of which this section wants. Chris called the result
   heavy and busy and he was right.

   The underline needs killing explicitly rather than by omission. These anchors
   sit inside <li>, so "main li a:hover" - the prose-link treatment - catches
   them and underlines the title. That rule is right for prose and wrong for a
   card, and this is the second time it has reached further than intended, so
   the override is scoped tightly and says why.

   The name shifting to navy is the whole "this goes somewhere" signal. It is
   enough: the cursor already says clickable, and six cards changing colour in a
   grid is as much movement as this section can take without becoming the
   loudest thing on the page - which it is not meant to be. */
.compare-bestfor a.mini-card,
.compare-bestfor a.mini-card:hover,
.compare-bestfor a.mini-card:focus-visible {
    text-decoration: none;
}
.compare-bestfor a.mini-card {
    transition: border-color .15s ease, box-shadow .15s ease;
}
.compare-bestfor a.mini-card .card-title {
    transition: color .15s ease;
}
.compare-bestfor a.mini-card:hover,
.compare-bestfor a.mini-card:focus-visible {
    border-color: var(--bs-dark-blue);
    box-shadow: 0 4px 14px rgba(16, 42, 67, .12) !important;
}
.compare-bestfor a.mini-card:hover .card-title,
.compare-bestfor a.mini-card:focus-visible .card-title {
    color: var(--bs-dark-blue);
}

/* CTA WIDTH = LOGO WIDTH. Chris, 2026-09-08: the button under the logo should
   be no wider than the logo above it. Measured on the Expedia review page with
   both stylesheets fully parsed: frame 170px, button 197.2px, overhanging
   13.6px each side.

   The cause is a sizing loop. The box is width:fit-content and the button was
   w-100, so the button's width depended on the box while the box's intrinsic
   width depended on the button - and the browser resolves that against the
   available space rather than the frame. Giving the button a definite width
   takes it out of the box's intrinsic sizing entirely: the box then shrinks to
   the frame, and both line up with nothing left over.

   One number, one place. --glance-logo-w drives the frame and the button
   together, so changing the logo size cannot leave the button behind.

   Horizontal padding drops to .5rem because these are fixed-width buttons where
   padding buys nothing. It matters: "Car Rental Search", the longest label of
   the five sectors, needs 139px of text and the default 16px+16px would leave
   only 138px inside a 170px button - it would have wrapped to two lines.

   The w-100 utility came OFF all five templates to make this work. Bootstrap
   ships .w-100 as width:100% !important, so it beat the rule below no matter
   how the selector was written - and the only reason four of the five sectors
   looked right was that their boxes happened to already measure 170px, so
   100% and 170px were the same number by luck. Holidays, whose box resolved to
   214.5px, is where the coincidence broke and showed the real bug. */
.compare-platform-glance-logo-box {
    --glance-logo-w: 170px;
}
.compare-platform-glance-logo-box .compare-platform-logo-frame-sm {
    width: var(--glance-logo-w);
}
.compare-platform-glance-logo-box .btn-compare-review-cta {
    display: block;
    width: var(--glance-logo-w);
    margin-left: auto;
    margin-right: auto;
    padding-left: .5rem;
    padding-right: .5rem;
    white-space: nowrap;
}

/* THE TWO "HOW WE RATE" PAGES. Chris, 2026-09-08: add some styling.

   Both were a single unbroken column of prose with one plain table - the
   least scannable shape on the site, on the two pages that carry the whole
   trust argument. Everything below reuses components that already exist and
   are already styled (.stats-list from about.html, .mini-card, .star-rate-view,
   the card + border treatment from .compare-defined-panels) rather than adding
   a new visual language for two pages.

   .hwr-panel is the card treatment, applied per SECTION rather than to the
   whole article: it breaks the wall into readable blocks, which is the actual
   problem, and it means the sections can be reordered without touching CSS. */
.hwr-panel {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.hwr-panel > :last-child { margin-bottom: 0; }
.hwr-panel h3 { margin-top: 0; }
@media (min-width: 992px) {
    .hwr-panel { padding: 2rem; }
}

/* Category tiles, the same mini-card the "Best for" grid uses so the two read
   as one family. Each links to that category's Best for page where one exists;
   the page already guarded those links, so the guard just moved. */
.hwr-cat .mini-card {
    border: 1px solid #ced4da;
    padding: .9rem 1rem;
    height: 100%;
}
.hwr-cat .mini-card .card-icon {
    border-right: 0;
    margin-right: .9rem;
    padding-right: 0;
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bs-dark-blue);
    color: #fff;
    font-size: 1.2rem;
}
.hwr-cat a.mini-card,
.hwr-cat a.mini-card:hover,
.hwr-cat a.mini-card:focus-visible { text-decoration: none; }
.hwr-cat a.mini-card { transition: border-color .15s ease, box-shadow .15s ease; }
.hwr-cat a.mini-card .card-title { transition: color .15s ease; }
.hwr-cat a.mini-card:hover,
.hwr-cat a.mini-card:focus-visible {
    border-color: var(--bs-dark-blue);
    box-shadow: 0 4px 14px rgba(16, 42, 67, .12);
}
.hwr-cat a.mini-card:hover .card-title,
.hwr-cat a.mini-card:focus-visible .card-title { color: var(--bs-dark-blue); }

/* Stars beside each tier in the scale table. The tier rows are whole numbers,
   so the graphic is exact rather than rounded - 5.0 draws five, 1.0 draws one.
   aria-hidden: the score is already in the cell beside it, and a screen reader
   reading "5.0" then a star graphic would hear the same fact twice. */
.hwr-scale td:first-child { white-space: nowrap; }
.hwr-scale .star-rate-view { vertical-align: middle; }

/* The stat numbers, darkened. .stats-list is reused from about.html, where the
   figure is painted in the brand green #6cb015 - measured 2.67:1 on white,
   under the 3:1 WCAG asks even of large text. #4d7d10 is the same hue two
   steps down and clears 4.5:1, so it passes as body text too.

   Scoped to these two pages rather than fixed on .stats-number itself: the
   about.html instance has the identical problem and the identical fix, but
   changing a page nobody asked about is Chris's call, not mine. Flagged to him.

   Decorative icons take the navy instead of the green for the same reason -
   the green washes out at 2.67:1 against a white card. */
/* The stats bar needs its own ground. Chris: it "looks slightly off and
   fading to background". It was sitting straight on the section's grey
   gradient with nothing but the component's own vertical rules between the
   figures, so its edges dissolved into the page - the same white-on-white
   problem the panels had, in reverse. Given the panel treatment it now reads
   as one object. */
.hwr-stats {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: 1.25rem .5rem;
}
/* "9-18" was breaking after the dash and dropping the 18 onto a second line,
   which read as two numbers rather than a range. */
.hwr-stats .stats-number { white-space: nowrap; }
.hwr-stats > li { padding-top: .25rem; padding-bottom: .25rem; }

/* Rounded table panel, to match the cards around it. A border-radius on the
   table itself does nothing once the cells carry their own borders, so the
   radius and the outer edge live on a wrapper with overflow hidden, and the
   table's outermost cell borders are removed so the two do not double up.
   .table-responsive stays inside it and keeps its own horizontal scroll. */
.hwr-table {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    overflow: hidden;
}
.hwr-table > .table-responsive { border-radius: inherit; }
.hwr-table table { margin-bottom: 0; }
.hwr-table table > :not(caption) > * > *:first-child { border-left: 0; }
.hwr-table table > :not(caption) > * > *:last-child { border-right: 0; }
.hwr-table table > thead > tr > * { border-top: 0; }
.hwr-table table > tbody > tr:last-child > * { border-bottom: 0; }
.hwr-panel > p > i.hicon { color: var(--bs-dark-blue) !important; }

.compare-platform-logo-frame {
  height: 140px;
  background-color: var(--bs-light-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.125rem;
}
.compare-platform-logo-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* THE LOGO LINK MUST FILL THE FRAME.
   Chris, 2026-09-10: the On the Beach logo on the holidays index renders at
   about a quarter size. It is not a mobile problem and not that logo - every
   logo on that page renders at its source file's pixel size, whatever the
   frame is.
   .compare-platform-logo-frame is display:flex. The holidays index is the only
   one of the six that wraps the logo in an outbound <a> (brand_links_to_site,
   added 2026-09-09), so on that page the ANCHOR is the flex item, not the img.
   The anchor had no styles at all, so it shrink-wrapped its content, and the
   img's width:100% then resolved against a box the img was itself sizing -
   circular, so the browser fell back to intrinsic size. Measured: anchor width
   equalled natural width for all ten. On the Beach's file is 125px wide, so it
   filled 10% of a 1285px frame; Eurostar's is 1520px, so it looked fine. That
   is also why every review page is correct - there the img is a direct child
   of the frame.
   Giving the anchor the frame's own box and centring restores it, rather than
   patching one logo's size. */
.compare-platform-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* Matches the 85% the flights, hotels and car rental sliders already use, so
   the six indexes scale their logos alike. Holidays had no such rule because
   the bug above meant it never appeared to need one. */
.compare-holidays-slider .compare-platform-logo-img:not(.compare-platform-logo-img-cover) {
  width: 85% !important;
  height: 85% !important;
}
.compare-flights-slider .compare-platform-logo-img:not(.compare-platform-logo-img-cover) {
  width: 85% !important;
  height: 85% !important;
}
.compare-flights-slider .compare-platform-logo-img.compare-platform-logo-skyscanner {
  width: 100% !important;
  height: 100% !important;
}
.compare-hotels-slider .compare-platform-logo-img:not(.compare-platform-logo-img-cover) {
  width: 85% !important;
  height: 85% !important;
}
.compare-hotels-slider .compare-platform-logo-img.compare-platform-logo-skyscanner {
  width: 100% !important;
  height: 100% !important;
}
.compare-car-rental-slider .compare-platform-logo-img.compare-platform-logo-sixt {
  width: 85% !important;
  height: 85% !important;
}
.compare-car-rental-slider .compare-platform-logo-frame-zest-car-rental,
.compare-car-rental-slider .compare-platform-logo-frame-holiday-extras {
  width: 100%;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
/* Frame colours for these two moved to the generic
   .compare-platform-logo-frame-<key> rules at the end of this file, so each
   brand colour is defined once rather than once per context. The width and
   scale rules below stay slider-specific because they are. */
.compare-car-rental-slider .compare-platform-logo-img.compare-platform-logo-zest-car-rental,
.compare-car-rental-slider .compare-platform-logo-img.compare-platform-logo-holiday-extras {
  transform: scale(0.9);
}
.compare-attraction-tickets-grid .compare-platform-logo-img:not(.compare-platform-logo-img-cover) {
  width: 90% !important;
  height: 90% !important;
}
.compare-platform-logo-frame-sm {
  height: 90px;
  width: 170px;
}
.compare-platform-glance-logo-box {
  border: 1px solid var(--bs-dark);
  border-radius: 0.375rem;
  padding: 0.5rem;
  width: fit-content;
}
.btn-compare-review-cta {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}
.btn-compare-review-cta:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.compare-platform-logo-pending {
  text-align: center;
  font-weight: 600;
}
.compare-platform-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--bs-body-bg);
}
.compare-platform-panel .tour-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.compare-platform-panel .tour-booking {
  margin-top: auto;
}
.tour-grid .compare-platform-panel .tour-content .tour-title {
  font-size: 1.53rem;
}
/* The company name links out to the provider on the Holidays index only. The
   template's own .tour-title a colour is scoped to .tour-list, and these cards
   sit in .tour-grid, so without this the name arrives at the default link
   green and reads as the odd one out against every other card title on the
   site. Keeps the heading colour, moves to primary on hover like the rest. */
.compare-platform-panel .tour-title a {
  color: var(--bs-body-color);
  text-decoration: none;
}
.compare-platform-panel .tour-title a:hover,
.compare-platform-panel .tour-title a:focus-visible {
  color: var(--bs-primary);
}
.compare-platform-specialty {
  margin-bottom: 0.75rem;
  color: var(--bs-gray-700);
}
.compare-platform-checklist {
  margin-bottom: 1rem;
}
.compare-platform-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}
.compare-platform-checklist li i {
  color: var(--bs-primary);
  margin-top: 0.2rem;
  flex-shrink: 0;
}
@media (max-width: 767.98px) {
  .compare-platform-checklist {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 0;
  }
  .compare-platform-checklist li {
    margin-bottom: 0;
    padding: 0.75rem 0.9rem;
    background-color: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.6rem;
    font-size: 0.92rem;
    line-height: 1.5;
  }
  .compare-platform-checklist li i {
    font-size: 1.15rem;
    margin-top: 0.15rem;
  }
}
.compare-platform-rating-pending {
  font-style: italic;
}
.compare-platform-cta-list li {
  display: block;
  width: 100%;
  margin-right: 0;
}
.compare-platform-cta-list li a {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 600;
  padding: 0.5rem 1rem;
}
.compare-platform-cta-list li a.btn {
  background-color: transparent;
  border-color: var(--bs-gray-700);
  color: var(--bs-gray-700);
}
.compare-platform-cta-list li a.btn:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: white;
}
.compare-platform-cta-reversed {
  background-color: var(--bs-gray-300) !important;
  color: var(--bs-body-color) !important;
}
.compare-platform-cta-reversed:hover {
  background-color: var(--bs-primary) !important;
  color: white !important;
}
.compare-platform-commission-note {
  margin-top: 0.5rem;
}
@media (min-width: 1200px) {
  .travel-advice-hero .search-hero-compact-panel {
    position: static !important;
    transform: none !important;
  }
  .travel-advice-hero .search-tour-form {
    border-bottom-left-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
  }
  .travel-advice-hero .search-tour-input {
    padding: 1.5rem 1.25rem !important;
  }
}
/* Cities by Interest hero (Chris, 2026-11-07). The gradient scrim this hero
   used to have is gone at Chris's request, so from xl up it takes the site's
   flat 50% like every other hero. The image is now headers-vectwo/
   hotel-13 (light-blue-pattern was tried first). On a phone this hero is
   about 860px tall, so any picture is enlarged until only a narrow strip
   shows; a plain, even image holds up best there. Centred crop. */

/* Phones and tablets (below xl): the hero is tall and narrow there, so the
   image is scaled up and the white text and filter sit on its palest part.
   The flat 60% this hero had before the gradient went stays at these widths;
   removing it with the gradient left the green sub-title and links hard to
   read on a phone (Chris, 2026-11-07). */
@media (max-width: 1199.98px) {
  .hero.cities-hub-hero .hero-bg::after {
    background-color: rgba(0, 0, 0, 0.6);
  }
  /* hotel-13 on a phone shows only a narrow strip of its middle, which is
     plain sky and ground. 88% across centres the strip on the big wheel,
     the image's one recognisable feature (Chris, 2026-11-07). Revisit if
     the image changes. */
  .hero.cities-hub-hero .hero-bg img {
    object-position: 88% 50%;
  }
}

/* Cities by Interest hub hero. Its filter widget now uses the real
   .search-hero-compact shell (see cities-by-interest.html), which on desktop
   floats its panel over the bottom edge of a hero image via
   position:absolute; bottom:100%. That mechanism only makes sense when the
   widget IS the bottom edge of the hero. Here it sits in the hero's right
   column beside the intro text, so the panel is returned to normal flow -
   exactly the override .travel-advice-hero already needed for the same
   reason, and for the same widget.

   THIRD PAGE, 2026-09-06: airport-transfers-by-destination.html now uses the
   same shell in the same position, so .hero-widget-inline is added to these
   selectors rather than copied a third time. That class is the general name
   for the situation - widget in a hero COLUMN rather than on the hero's
   bottom edge - and any future page should use it instead of its own hero
   class. The two page-specific selectors stay only because their own comments
   in main.scss record why each was needed. */
@media (min-width: 1200px) {
  .cities-hub-hero .search-hero-compact-panel,
  .hero-widget-inline .search-hero-compact-panel {
    position: static !important;
    transform: none !important;
  }
  .cities-hub-hero .search-tour-form,
  .hero-widget-inline .search-tour-form {
    border-bottom-left-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
  }
  .cities-hub-hero .search-tour-input,
  .hero-widget-inline .search-tour-input {
    padding: 1.5rem 1.25rem !important;
  }
}

.travel-advice-hero .hero-sub-title {
  color: var(--bs-primary);
}
.travel-advice-hero .hero-desc {
  color: white;
}
.travel-advice-hero .hero-question-title {
  color: white;
  margin-top: 1.5rem;
}
.travel-advice-hero .hero-action a {
  color: var(--bs-primary);
  font-weight: 500;
}
.travel-advice-hero .hero-action a:hover {
  color: white;
}
.travel-advice-post .post-img img {
  height: auto;
  aspect-ratio: 2.6 / 1;
  object-fit: cover;
}
.travel-advice-post .post-excerpt {
  font-size: 0.9375rem;
  margin-bottom: 0.75rem;
}
.travel-advice-post .post-title-highlight {
  color: #2166ac;
}
.travel-advice-read-more {
  font-size: 0.8125rem;
  padding: 0.375rem 0.9rem;
  white-space: nowrap;
}
.travel-advice-post {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.travel-advice-post .post-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.travel-advice-post .post-link {
  margin-top: auto;
}
.travel-advice-post .image-hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 0;
}
.glossary-az-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}
.glossary-az-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--bs-light-gray);
  color: var(--bs-body-color);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.glossary-az-nav a:hover {
  background-color: var(--bs-primary);
  color: white;
}
.glossary-search {
  margin-bottom: 2.5rem;
}
.glossary-search-input {
  padding-left: 2.75rem;
}
.glossary-search .input-icon-group {
  position: relative;
}
.glossary-search .input-icon {
  position: absolute;
  top: 50%;
  left: 0.9rem;
  transform: translateY(-50%);
  color: var(--bs-secondary);
  pointer-events: none;
}
.glossary-letter-section {
  margin-bottom: 2.5rem;
  scroll-margin-top: 6.5rem;
}
.glossary-letter-heading {
  color: var(--bs-primary);
  font-size: 1.75rem;
  font-weight: 700;
  border-bottom: 2px solid var(--bs-border-color);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}
.glossary-terms {
  margin-bottom: 0;
}
.glossary-term {
  padding: 1rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}
.glossary-term:last-child {
  border-bottom: none;
}
.glossary-term dt {
  font-weight: 700;
  margin-bottom: 0.375rem;
}
.glossary-term dd {
  margin-bottom: 0;
  color: var(--bs-body-color);
}
.glossary-term.d-none {
  display: none !important;
}
/* Reversed on Chris's request, and it brings the set into line: this was the
   only one of the four running light-to-dark. The hotel, car hire and ticket
   variants all fade dark-to-light along the same 135deg, so flight search was
   the odd one out. Base class rather than a variant, so it is also what any
   future search page gets if it uses .search-widget-hero alone. */
.search-widget-hero {
  background: linear-gradient(135deg, #3c5f0c 0%, var(--bs-primary) 100%);
  padding: 2rem 0 5.5rem;
}
.search-widget-hero .breadcrumb-item a {
  color: rgba(var(--bs-white-rgb), 0.75);
}
.search-widget-hero .breadcrumb-item.active {
  color: rgba(var(--bs-white-rgb), 0.9);
}
.search-widget-hero .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(var(--bs-white-rgb), 0.5);
}
.search-widget-hero h1 {
  color: white;
}
.search-widget-hero p {
  color: rgba(var(--bs-white-rgb), 0.85);
}
.search-widget-hero-hotel {
  background: linear-gradient(135deg, #0a2f5c 0%, #1976d2 100%);
}
.search-widget-hero-car-hire {
  background: linear-gradient(135deg, #3a0d54 0%, #7b1fa2 100%);
}
/* Amber variant, applied alongside .search-widget-hero - attraction-ticket
   -search.html only, so the search pages are told apart at a glance:
   flights green, hotels blue, car hire purple, tickets amber, transfers teal.
   Same dark-to-light 135deg fade as the others. */
.search-widget-hero-tickets {
  background: linear-gradient(135deg, #7a3d02 0%, #d98b2b 100%);
}
/* Teal, the fifth and last of the set (2026-09-17). Chosen because it is the
   only hue left that is not already carrying meaning somewhere on the site:
   green is the brand and the flight search, blue the hotels, purple the car
   hire, amber the tickets, and red would read as a warning on a page that is
   telling the visitor something is not ready yet. */
.search-widget-hero-transfers {
  background: linear-gradient(135deg, #06403f 0%, #0f8a86 100%);
}

/* The globe from the compare heroes, on the five search pages (Chris,
   2026-09-28). Same mark, same 10% white, same bleed off the right edge.

   The one difference is what it sizes against. On the compare pages the
   colour is a fixed band inside a taller section, so the globe is sized to
   --compare-band. Here the gradient IS the section, and its height is padding
   plus whatever the heading and the one-line intro wrap to, so the globe is
   sized as a percentage of the box instead: 144% of its height, the same
   1.44 the compare rule uses. The pseudo-element is the section's own size,
   so the oversized mark is cropped to the gradient and never spills onto the
   white widget section below.

   Dropped below 768px for the same reason as the compare heroes: the heading
   runs the full width there and the globe would sit behind the words. */
.search-widget-hero {
  position: relative;
}
.search-widget-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--compare-hero-mark) no-repeat right -8% center / auto 144%;
  pointer-events: none;
  z-index: 0;
}
.search-widget-hero > .container {
  position: relative;
  z-index: 1;
}
@media (max-width: 767.98px) {
  .search-widget-hero::before { content: none; }
}
.search-widget-card {
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.15);
  padding: 1.5rem;
  margin-top: -4rem;
  position: relative;
  z-index: 2;
}
@media (max-width: 575.98px) {
  .search-widget-card {
    margin-top: -2.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
  }
}
@media (min-width: 992px) {
  .search-widget-card {
    width: 75%;
    margin-right: auto;
  }
}
.search-widget-tip-card .tip-icon-circle {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(108, 176, 21, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.search-widget-tip-card .tip-icon-circle i {
  font-size: 1.4rem;
  color: var(--bs-primary);
}
.search-widget-disclaimer {
  background-color: var(--bs-light);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 1.5rem;
}
@media (max-width: 767.98px) {
  .compare-index-hero {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* ======= City sidebar partner block ======= */
/* Compiled equivalent of the .f4-* rules in main.scss. Kept in both files
   because main.css is the file the site actually loads and I cannot run the
   SCSS build here; adding to main.scss as well means a future rebuild
   regenerates rather than removes these. */
.f4-chevron {
  transition: transform 0.2s ease-in-out;
}
.f4-partner-toggle[aria-expanded=true] .f4-chevron {
  transform: rotate(180deg);
}
.f4-partner-toggle[aria-expanded=true] .f4-partner-chip {
  display: none;
}
/* Must clear the sticky site header: main.js adds .header-sticked/.header-showed
   to #header on scroll, making .header-navbar position:fixed, top:0, 90px tall,
   z-index 1030 - above this block's .sticky-top z-index of 1020. Less than 90px
   here and the header covers the block's heading on any upward scroll. #header
   reads position:static at scroll 0, so measuring it there is misleading.
   The offset tracks the header rather than being fixed at 106px, which would
   leave a visible gap above the block whenever the header is hidden. */
.f4-sidebar-sticky {
  top: 24px !important;
  transition: top 0.5s ease-in-out;
}
body:has(#header.header-showed) .f4-sidebar-sticky {
  top: 106px !important;
}
@media (prefers-reduced-motion: reduce) {
  .f4-sidebar-sticky {
    transition: none;
  }
}
.f4-mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: white;
  border-top: 1px solid var(--bs-border-color);
  box-shadow: 0 -0.25rem 0.65rem rgba(0, 0, 0, 0.08);
}
@media (max-width: 1199.98px) {
  body:has(#f4MobileBar.show) {
    padding-bottom: 94px;
  }
  body:has(#f4MobileBar.show) .scroll-top {
    bottom: 100px;
  }
}
/* ======= /City sidebar partner block ======= */

/* ======= /Containers ======= *//*# sourceMappingURL=main.css.map */

/* ---------------------------------------------------------------- GYG search
   attraction-ticket-search.html. Two halves inside .search-widget-card: the
   controls on the left, a live result panel on the right that updates with
   every selection. Written plain (no nesting) so the .scss and the compiled
   .css stay identical - this project has no build step and both files are
   hand-edited. */
.gyg-field-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin-bottom: .4rem;
}

/* Segmented control. Radios stay in the DOM for keyboard and screen readers -
   they are visually hidden, not display:none, so they remain focusable. */
.gyg-segment {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.gyg-segment input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.gyg-segment label {
  flex: 1 1 0;
  min-width: 10rem;
  text-align: center;
  cursor: pointer;
  padding: .6rem .9rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  font-size: .9rem;
  font-weight: 500;
  background: #fff;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.gyg-segment label i {
  margin-right: .35rem;
}
.gyg-segment input[type="radio"]:checked + label {
  border-color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), .08);
  color: var(--bs-primary);
}
.gyg-segment input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.gyg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.gyg-chip {
  border: 1px solid var(--bs-border-color);
  background: #fff;
  border-radius: 2rem;
  padding: .3rem .8rem;
  font-size: .82rem;
  line-height: 1.3;
  color: var(--bs-body-color);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.gyg-chip:hover,
.gyg-chip:focus-visible {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}
.gyg-chip[aria-pressed="true"] {
  border-color: var(--bs-primary);
  background: var(--bs-primary);
  color: #fff;
}

/* Result panel. Grey against the card's white, the same separation the city
   guide sidebar uses between our own content and a partner CTA. */
.gyg-result {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
  overflow: hidden;
}
.gyg-result-media {
  height: 132px;
  flex-shrink: 0;
}
.gyg-result-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gyg-result-body {
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.gyg-result-eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin-bottom: .15rem;
}
.gyg-result-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: .6rem;
}
.gyg-rating-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  font-size: .85rem;
  padding: .3rem 0;
  border-bottom: 1px dashed var(--bs-border-color);
}
.gyg-rating-row:last-of-type {
  border-bottom: 0;
}
.gyg-rating-row .gyg-rating-score {
  font-weight: 600;
  color: var(--bs-primary);
}
.gyg-result-note {
  font-size: .8rem;
  color: var(--bs-secondary-color);
  margin: .6rem 0 .9rem;
}
/* Pushes the buttons to the bottom so panels of different heights still line
   their CTAs up as the selection changes. Anchored on the affiliate line now,
   since that sits between the note and the button. */
.gyg-result-note + .gyg-result-ad {
  margin-top: auto;
}
.gyg-result-ad {
  font-size: .72rem;
  line-height: 1.4;
  color: var(--bs-secondary-color);
  margin: 0 0 .45rem;
}
.gyg-result-fine {
  font-size: .72rem;
  color: var(--bs-secondary-color);
  margin: .6rem 0 0;
  text-align: center;
}

.gyg-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--bs-border-color);
  font-size: .8rem;
  color: var(--bs-secondary-color);
}
.gyg-stats strong {
  color: var(--bs-body-color);
}

@media (max-width: 991.98px) {
  .gyg-result {
    margin-top: .25rem;
  }
  .gyg-segment label {
    min-width: 0;
  }
}

.gyg-chip {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
}
.gyg-chip-rating {
  font-size: .74rem;
  font-weight: 600;
  color: var(--bs-primary);
}
.gyg-chip[aria-pressed="true"] .gyg-chip-rating {
  color: #fff;
}

.gyg-before {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bs-border-color);
}
.gyg-before a {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .85rem;
  line-height: 1.45;
  padding: .35rem 0;
  color: var(--bs-body-color);
  text-decoration: none;
}
.gyg-before a:hover,
.gyg-before a:focus-visible {
  color: var(--bs-primary);
  text-decoration: underline;
}
.gyg-before a i {
  color: var(--bs-primary);
  flex-shrink: 0;
  margin-top: .15rem;
}

/* Empty state: partner logo, padded and centred on grey - never edge-to-edge,
   matching .compare-platform-logo-frame. Once a destination is chosen the
   photo takes the same box and does run edge-to-edge, which is the point of
   the swap. */
.gyg-result-media-logo {
  background-color: var(--bs-light-gray, #f1f3f5);
  display: flex;
  align-items: center;
  justify-content: center;
  /* The 132px box means HEIGHT is what limits the logo, not width - at
     1.75rem vertical padding it rendered 98px wide in a 327px panel, which
     read as an afterthought rather than a deliberate empty state. */
  padding: 1.1rem 1.5rem;
}
.gyg-result-media-logo #gygResultLogo {
  width: auto;
  max-width: 62%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* ------------------------------------------- brand-tile logo frames
   Four partner logos are supplied as full-bleed brand-colour tiles rather
   than transparent marks. They used to be shown object-fit:cover with no
   padding, which filled the frame neatly but cropped 18-51% off the tile
   depending on card width (Netflights lost the most). The marks themselves
   are centred so nothing was mutilated - but cropping into a supplied brand
   asset eats the clear space nearly every brand guideline specifies, and
   "don't alter or crop" is the one rule they all share.

   So the frame takes the tile's own background colour instead and the logo
   is shown whole (contain). No crop, no grey margin around a coloured
   rectangle, and the padding now reads as extra clear space rather than a
   mismatched border. Colours are sampled from the asset itself - the border
   pixels of each file - not picked by eye:
     attractiontix   #35b6bb   (99% of border pixels)
     netflights      #00adef   (100%)
     zest-car-rental #fff      (a white-ground logo, not a colour tile)
     holiday-extras  #542E91   (read from the SVG's own background rect)

   Uses the per-key hook .compare-platform-logo-frame-<key> that
   includes/compare-platform-panel.php already emits for exactly this. */
.compare-platform-logo-frame-attractiontix   { background-color: #35b6bb; }
.compare-platform-logo-frame-netflights      { background-color: #00adef; }
.compare-platform-logo-frame-zest-car-rental { background-color: #fff;    }
.compare-platform-logo-frame-holiday-extras  { background-color: #542e91; }
/* riviera-travel.svg is white-only - fourteen #fff fills and no other colour,
   the single white <rect> in it being a clipPath mask rather than a background.
   On the standard #e9ecef tile it would render as an empty grey panel, which
   is worse than the text fallback because it looks deliberate.

   #003d52 is not a guess and not sampled from the asset, which offers nothing
   to sample. It is rgb(0, 61, 82), read from Riviera Travel's own site, where
   this exact file - byte-identical, SHA-256 7b8f9a2f... - is served from
   /themes/custom/rt/logo.svg against a .header__top of that colour. It is the
   ground the artwork was drawn for. */
.compare-platform-logo-frame-riviera-travel  { background-color: #003d52; }

/* Affiliate flag on a compare panel — sits in the CTA row, styled as a quiet
   label rather than a button so it never reads as another thing to click.
   Only rendered where a commercial relationship genuinely exists. */
.compare-platform-affiliate-flag span {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  border: 1px dashed var(--bs-border-color);
  border-radius: 2rem;
  padding: .25rem .6rem;
  cursor: help;
}

/* ------------------------------------------------- homepage hero height
   Chris's request: reduce the homepage hero ~25% so the section below it shows
   on load. Measured first - the hero was 86% of the screen on a 1440x900
   desktop and 114% on a 375x812 phone, with 0 pixels of the next section
   visible in either case. A visitor had no signal the page continued.

   DESKTOP (>=1200px): height comes from .hero-caption, previously
   calc(100vh - 130px). Multiplied by .75 - a literal 25% cut that stays
   proportional at any screen height, rather than a pixel value that would be
   right on one monitor and wrong on the next. min-height is the safety net:
   the caption holds only ~198px of content here, but on a short laptop window
   75% of the viewport could pinch it.

   BELOW 1200px: no height rule applies; the hero is as tall as its parts, and
   the driver is .hero-caption's 160px top and bottom padding - 320px of
   padding around 341px of content. Trimmed to 90px, which takes the phone
   hero from 114% of the screen to just under it.

   A wrong turn worth recording: the first attempt set an explicit height on
   .hero-bg instead, because a measurement showed the image rendering as a
   650px band ABOVE the text with the caption padding at 0. That reading was
   taken while php -S had truncated main.css at 65,280 bytes - the dev server's
   known bug - so the padding rule simply was not loaded. The band-above-text
   layout does not exist with the real stylesheet; the image is a background
   and the text sits on it. Sizing .hero-bg would have made the image shorter
   than the caption and left a white gap under it. */
@media (min-width: 1200px) {
  .hero .hero-carousel .hero-caption {
    height: calc((100vh - 130px) * 0.75);
    min-height: 440px;
  }
}

@media (max-width: 1199.98px) {
  .hero .hero-carousel .hero-caption {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}

/* Homepage hero carousel arrows: sit lower.

   Chris reported them clashing with the "Browse destinations" CTA on smaller
   laptops. Measured, and it is worse than "clashing" at the tighter end - at
   1280x720 the arrows were overlapping the CTA by 7px, not merely close. At
   1366x768 the gap was 11px. Both read as a collision.

   Caused by the hero reduction. The arrows are anchored to the BOTTOM of the
   carousel while the CTA is centred in the caption, so shortening the hero
   moved the two towards each other.

   Measured at 1280x720, the worst case, before choosing:

     bottom: 3.75rem (was)   gap -7px   clearance below 60px
     bottom: 2rem            gap 21px   clearance below 32px
     bottom: 1.5rem          gap 29px   clearance below 24px
     bottom: 1rem            gap 37px   clearance below 16px

   1.5rem is the balance - a clear gap above without crowding the bottom edge.
   There is room to move down at all because the carousel indicators are the
   vertical dots on the RIGHT edge, not underneath the arrows, so nothing else
   competes for that space. */
.hero .hero-carousel .carousel-control {
  bottom: 1.5rem;
}

/* ============================================ City Trip Planner hub pages
   includes/trip-planner.php. Brief: flight4-trip-planner-hub-brief.md.

   The brief asks for deliberately UNEVEN visual weight: destination-specific
   sections rich, and the booking/advice rows - identical on all 23 hubs -
   visually lighter. That is not only scannability; a page carrying the same
   utility links as 22 others should look like utility navigation rather than
   like padded content, which is the doorway-page impression to avoid. */

/* Compact hero: the pillar hero's 160px padding is too tall for a page whose
   job is to get people to the links. */
.tp-hero .bg-content { padding-top: 3.5rem; padding-bottom: 2rem; }

/* Left padding clears the hero's vertical breadcrumb strip. That strip is
   position:absolute at left:0 with writing-mode:vertical-lr, about 27px wide,
   and it overlaps the content box on the pillar pages too - it just never
   shows there because .hero-page-title is text-align:center, so the words
   start far to the right of it. This page type is left-aligned, so the H1
   ran straight into it. Measured at 27px; 3rem leaves a real gap. */
.tp-hero-inner { max-width: 46rem; padding-left: 3rem; }

@media (max-width: 575.98px) {
  .tp-hero-inner { padding-left: 2rem; }
}

/* COMPACT REVIEW HERO. Chris, 2026-09-08: the review-page heroes are too tall,
   and photography is a poor fit for them - vector shapes are coming instead.

   .hero .hero-page-title carries 160px of padding top and bottom, and that
   padding IS the hero's height: .hero-bg is absolutely positioned and simply
   fills whatever the content makes. Measured at 1440 the heroes are 437px
   (flights) and 486px (the other three, whose titles run to two lines).

   4rem each side takes 320px of padding down to 128px:
       flights            437 -> 245px  (56%)
       hotels/cars/attr   486 -> 294px  (60%)
   Not identical percentages because the title content differs - 117px against
   166px - and only the padding is being changed. 60% of the dominant case was
   the target.

   SCOPED, because .hero .hero-page-title is shared by around 70 pages: every
   guide, policy and methodology page uses it. The class sits on the four
   review templates only. Holidays is not among them - its review pages use the
   coloured gradient band, not this hero at all. */
.hero.review-hero-compact .hero-page-title {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* HERO SCRIM. The global 50% black is measured for the pillar heroes, whose
   text sits centred over the darkest part of a mostly-architectural photo.
   This page type is left-aligned and its intro runs to two lines of small
   text, and on a bright hero - Zurich's lake shot is the worst case - 50% was
   not enough to read comfortably. A left-weighted gradient rather than a
   heavier flat scrim, for the same reason as the cities hub above: it puts
   the density where the white text actually is and leaves the right-hand
   quarter of the image at close to its own colour.

   This is the version Chris chose after seeing three: it went top-down, then
   35% lighter, and he came back to this one. The top-down attempt failed for
   a reason worth recording - it put the badge in the light band at the top of
   the hero, where the frosted panel had nothing dark behind it and the mark
   washed out. Whatever else changes here, the badge sits at 21-32% of the
   hero's height and needs density there.

   Then lightened 12% at Chris's request ("the slightest reduction"). Measured
   before choosing the figure rather than after: sampling the real pixels
   behind the text on all 23 hero images, the 5th-percentile contrast across
   the text column goes from 10.0:1 at the old 0.74 to 7.0:1 at 0.65, worst
   case London. Still AAA at any size, on the worst of the 23. A 35% cut, by
   contrast, put twelve of them below the AA line - which is why that one came
   back rather than being nudged.

   Held at 0.62 out to 55% because the text column - 46rem plus the badge
   padding - reaches about 59% of a 1440px viewport, and the gradient has to
   still be dense where the last word of a line lands. */
.tp-hero .hero-bg::after {
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.62) 55%, rgba(0, 0, 0, 0.46) 78%, rgba(0, 0, 0, 0.3) 100%);
}

/* Below lg the text spans the full width, so a right-fading gradient would
   leave the end of every line under the weakest part of the scrim. Lightened
   9% rather than the desktop 12%: covering the full width means the scrim
   also has to cover the brightest part of the photo, so there is less
   headroom. 5.3:1 on the worst of the 23, which is Zurich's lake shot. */
@media (max-width: 991.98px) {
  .tp-hero .hero-bg::after {
    background: rgba(0, 0, 0, 0.58);
  }
}

/* THE PAGE TYPE'S SIGNATURE MARK (brief section 7), rebuilt to be unlike
   anything else on the site rather than a third variation on the pill. The
   site's existing marks are all solid or outlined pills - .hero-sub-title,
   .block-title .sub-title, the rating chips - so another pill would read as
   one of those rather than as "this is a different kind of page".

   What makes it distinct: a squared corner instead of a 2rem pill, a primary
   left rule, a frosted panel (the only backdrop-filter on the site), and a
   plotted-route glyph - origin dot, dashed leg, destination pin - which says
   trip planning without an icon-font lookup. The frosting also does real work
   here: it lifts the mark off whatever photo is behind it, on all 23 heroes,
   without a second scrim.

   backdrop-filter degrades cleanly - unsupported browsers get the flat 10%
   white panel, which still reads against the scrim. */
.tp-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .32);
  border-left: 3px solid var(--bs-primary);
  border-radius: .25rem;
  padding: .45rem .9rem .45rem .75rem;
  margin-bottom: 1rem;
}
.tp-badge-route {
  display: inline-block;
  position: relative;
  width: 2.2rem;
  height: 2px;
  flex-shrink: 0;
  background: repeating-linear-gradient(to right, rgba(255, 255, 255, .85) 0 4px, transparent 4px 7px);
}
.tp-badge-route::before,
.tp-badge-route::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
}
.tp-badge-route::before { left: -1px; background: #fff; }
.tp-badge-route::after {
  right: -1px;
  background: var(--bs-primary);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}

/* Anchor nav. Sticky under the 90px header so it stays reachable on a long
   page; horizontally scrollable rather than wrapping on a phone. */
.tp-jump {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: #fff;
  border-bottom: 1px solid var(--bs-border-color);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tp-jump .container { display: flex; gap: 1.5rem; white-space: nowrap; }
.tp-jump a {
  display: inline-block;
  padding: .85rem 0;
  font-size: .85rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.tp-jump a:hover { color: var(--bs-primary); border-bottom-color: var(--bs-primary); }

/* Rating snapshot - the framing content that gives the page substance of its
   own rather than being a list of links. */
.tp-snapshot {
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  padding: 1.25rem;
}
.tp-snapshot-head { margin-bottom: 1rem; }
.tp-snapshot-item {
  display: block;
  height: 100%;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  padding: .85rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}
.tp-snapshot-item:hover { border-color: var(--bs-primary); }
.tp-snapshot-score {
  display: inline-block;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--bs-primary);
  margin-right: .4rem;
}
.tp-snapshot-label { font-weight: 600; font-size: .92rem; }
.tp-snapshot-why {
  display: block;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--bs-secondary-color);
  margin-top: .35rem;
}

/* Rich cards: the city's own guides, and the other planners. */
.tp-guide {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.tp-guide:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08);
}
/* Card images. The destination photography is shot bright and several of the
   heroes are close to blown out at card size, where they sit directly above
   white card body - the image reads washed rather than sunny. Two things,
   both light-handed: a small tonal correction, and a scrim that is nearly
   absent across the top and reaches 0.28 at the bottom edge, so the photo
   settles into the card instead of stopping dead against it. Deliberately not
   a flat overlay, which would only turn a bright photo into a grey one. */
.tp-guide-media { display: block; position: relative; height: 190px; }
.tp-guide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.06) contrast(1.04) brightness(.95);
}
.tp-guide-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .28) 100%);
}
.tp-guide-body { display: block; padding: 1rem 1.15rem 1.2rem; }
.tp-guide-kicker {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin-bottom: .2rem;
}
.tp-guide-title { display: block; font-size: 1.05rem; font-weight: 600; }
.tp-guide-desc {
  display: block;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--bs-secondary-color);
  margin-top: .35rem;
}

/* The link FROM a city's pillar page TO its trip planner - the discovery path
   the brief asks for. Carries the same route mark as the hub's own badge, so
   arriving on the hub confirms what was clicked rather than looking like a
   different part of the site. Dark rather than tinted: it sits at the top of
   a long grey-gradient page full of light panels, and needed to be the one
   thing that is not another light panel. */
.tp-crosslink {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--bs-dark, #212529);
  border-radius: .75rem;
  border-left: 4px solid var(--bs-primary);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  text-decoration: none;
  color: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tp-crosslink:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
}
.tp-crosslink-mark {
  position: relative;
  flex-shrink: 0;
  width: 2.2rem;
  height: 2px;
  background: repeating-linear-gradient(to right, rgba(255, 255, 255, .85) 0 4px, transparent 4px 7px);
}
.tp-crosslink-mark::before,
.tp-crosslink-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
}
.tp-crosslink-mark::before { left: -1px; background: #fff; }
.tp-crosslink-mark::after {
  right: -1px;
  background: var(--bs-primary);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}
.tp-crosslink-body { flex: 1 1 16rem; }
.tp-crosslink-body strong { display: block; font-size: 1.05rem; font-weight: 600; }
.tp-crosslink-body small {
  display: block;
  font-size: .82rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .75);
  margin-top: .15rem;
}
.tp-crosslink-go {
  flex-shrink: 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bs-primary);
  white-space: nowrap;
}
.tp-crosslink-go i { font-size: .9rem; margin-left: .35rem; vertical-align: -1px; }

/* The secondary guide tiles: no photo, so the lead card stays dominant and a
   destination with twelve guides does not become twelve competing images. */
.tp-guide-sm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .8rem 1rem;
  font-weight: 500;
}
/* Real great-circle distance, on every nearby card. It is the thing that
   makes the section verifiable rather than a claim: where the third card is
   4,000 miles out the visitor can see that for themselves. */
.tp-guide-dist {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--bs-border-color);
  border-radius: 2rem;
  padding: .15rem .6rem;
  margin-top: .6rem;
}

.tp-guide-sm .tp-guide-title { font-size: .92rem; }
.tp-guide-rating { font-size: .82rem; font-weight: 600; color: var(--bs-primary); flex-shrink: 0; }

/* Utility rows: same on every hub, so deliberately quieter than the cards. */
.tp-utility {
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  padding: 1.25rem;
}
.tp-utility-head {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin-bottom: .85rem;
}
.tp-row {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  height: 100%;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  padding: .7rem .85rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}
.tp-row:hover { border-color: var(--bs-primary); }
.tp-row i { color: var(--bs-primary); font-size: 1.1rem; margin-top: .1rem; flex-shrink: 0; }
.tp-row strong { display: block; font-size: .88rem; font-weight: 600; line-height: 1.3; }
.tp-row small { display: block; font-size: .75rem; line-height: 1.4; color: var(--bs-secondary-color); margin-top: .1rem; }
.tp-utility-note { font-size: .75rem; color: var(--bs-secondary-color); margin: .9rem 0 0; }

@media (max-width: 767.98px) {
  .tp-guide-media { height: 150px; }
  .tp-hero .bg-content { padding-top: 2.5rem; padding-bottom: 1.5rem; }
}

/* ==================================================== Prose link treatment
   Option C from the green-contrast comparison, live on all 45 city pillar
   pages and all 187 support pages. Both shared headers put .f4-prose on the
   content column; a page opts out with $proseLinks = false before the
   include. Not yet applied to the travel advice, buying guide, policy or
   index pages - those are their own families with their own headers.

   WHY THIS SHAPE. The brand green as link text is 2.67:1 against white, where
   4.5:1 is the AA threshold. Chris's team preferred the brighter green to any
   darker one, so this keeps #6cb015 exactly and takes it out of the
   letterforms instead: the link is body-coloured - 15.4:1, the same as the
   sentence around it - and the green becomes the underline. Underlines carry
   no contrast requirement, so the brand colour is unconstrained there.

   It also fixes something a colour change alone would not. Prose links were
   font-weight 300 against body copy at 400, so a link was LIGHTER than the
   sentence containing it. 500 puts that the right way round.

   SCOPE, and why it is where it is. The first version keyed off <main>, and
   Chris caught it reaching two places it had no business in: the partner
   sidebar, where a 2px rule under 12px grey text looks clumsy, and the
   mini-card grid, where "Book Flights" is a card value rather than a
   sentence. Both are handled structurally rather than by guessing:

     - the SIDEBAR is a sibling column of .f4-prose, so it never matches;
     - MINI-CARDS sit inside the content column and are excluded by name below.

   Note that .card-body cannot be used to tell prose from furniture - the
   article body is itself inside one. */
/* !important on the two longhands, reluctantly and for a specific reason.
   Roughly 1,400 links across the site carry Bootstrap's
   .text-decoration-underline utility, applied by hand as the site was built.
   That utility is "text-decoration: underline !important" - a SHORTHAND, so
   it resets colour, thickness and style along with the line, and it beats any
   non-important rule regardless of specificity or order. Without these two
   flags, every link that already had the utility class rendered a default
   body-coloured hairline while the links without it got the green 2px rule:
   the treatment would have been visibly inconsistent on the same page.

   I first wrote that the cleaner fix was to delete the hand-applied classes,
   now the stylesheet provides the underline. Counting them says otherwise, so
   this note is the correction rather than the plan.

   There are 2,860 of them on these 230 pages - not the ~1,400 I estimated,
   which was a count of prose links only. Of those, .f4-prose covers 1,545.
   The other 1,315 would simply lose their underline if the class went:

      937  in the content column but not inside a <p> or <li> - headings,
           table cells, plain divs, which this rule deliberately does not touch
      375  the jump links, mini-cards and author-box links excluded above,
           which get their underline FROM the utility class today
        3  outside the content column

   Plus 136 more on 17 pages outside this rollout entirely.

   So a blanket deletion would remove underlines from about a third of the
   links that have them. Deleting only the 1,545 covered ones is safe but buys
   nothing visible - they already render identically - so the two !important
   flags above stay, and the classes stay with them. Revisit if steps 2 to 4
   ever bring every page under one rule. */
.f4-prose p a,
.f4-prose li a {
  color: inherit;
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-color: var(--bs-primary) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: .16em;
  transition: text-decoration-thickness .12s ease, background-color .12s ease;
}
/* There is no hover underline anywhere in this stylesheet today - a link looks
   identical whether you are pointing at it or not. This thickens the rule and
   lays a faint tint behind the words, so the target is obvious on a phone as
   well as under a cursor. */
.f4-prose p a:hover,
.f4-prose li a:hover,
.f4-prose p a:focus-visible,
.f4-prose li a:focus-visible {
  text-decoration-thickness: 3px;
  background-color: rgba(var(--bs-primary-rgb), .1);
}
/* WHAT IS NOT PROSE, even though it sits in the content column and uses a
   <p> or an <li>. Each of these was found by auditing what the rule really
   matched across all 230 pages rather than by assuming.

   Mini-cards - "Book Flights", "Book Now", "FAQs" are card values.

   Same-page anchors - a link to #q7 is navigation, never a sentence. This is
   what makes the FAQ pages behave: their quick-jump index is twenty links in
   a two-column list, and twenty green rules read as a fence rather than a
   list. Keyed on the href rather than a class, so any jump list anywhere is
   covered without maintaining a list of components.

   The author box - a bio card, and its second line is .small muted text,
   which is exactly the case Chris flagged in the sidebar: a 2px rule under
   12px grey type looks clumsy. */
.f4-prose .mini-card p a,
.f4-prose .mini-card li a,
.f4-prose .mini-card h3 a,
.f4-prose p a[href^="#"],
.f4-prose li a[href^="#"],
.f4-prose .author-box p a,
.f4-prose .author-box li a {
  color: var(--bs-link-color);
  font-weight: inherit;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: auto !important;
  background-color: transparent;
}

/* ========================================= Compare index pages: hero band
   Live on all five compare index pages.

   Arrived at over three rounds with Chris. Version 1 also turned the logo
   tiles white and put the cards on a light ground; he preferred the tiles
   grey, so those reverted and only the hero band, the tighter run-up and the
   white gutter around the tile survived. Recorded because the reverted parts
   were measured and defensible and someone will propose them again: white
   tiles are SAFE (all 27 logos checked, none is white ink on transparency)
   but they were not WANTED.

   WHY A COLOURED BAND AT ALL. The four SEARCH index pages carry saturated
   gradient heroes (.search-widget-hero and its hotel / car-hire / tickets
   variants). The five COMPARE index pages had a grey gradient. Same tier of
   page, two visual languages, and next to the tickets page these read as
   unfinished rather than restrained. The gradients below are taken from those
   pages verbatim so the two families match rather than merely rhyme.

   IT IS A BAND, NOT A SECTION. The heading and the cards share one <section>,
   so the colour is painted as a fixed-height background layer with the page's
   original grey gradient underneath it, rather than by splitting the markup.
   Height is set so the intro card overlaps the lower edge, which is what the
   search pages do with their widget panel. */
.compare-hero-colour {
  --compare-band: 15rem;
  /* Two layers: the band on top, then the section's ORIGINAL grey gradient -
     the same values .bg-gray-gradient used - starting below the band instead
     of at the top of the section. Everything below the hero therefore looks
     exactly as it did before this mock-up existed. */
  /* Decorative globe, centre-right of the coloured band. Chris, 2026-09-08,
     with a wireframe globe as the reference. Four things worth knowing:

     IT IS A BACKGROUND LAYER, not markup. That keeps it out of the accessibility
     tree entirely - no aria-hidden to remember, no empty alt - and it reaches all
     six compare index heroes and every review hero without touching a page. It
     is purely decorative, which is exactly what a background is for.

     INLINE, NOT A FILE. build-upload-package.py skips assets/img/ wholesale
     except for an explicit FORCE_INCLUDE list, so a new .svg there would look
     right locally and simply never reach the server. Inlined, it ships wherever
     main.css ships. 633 bytes.

     IT SIZES ITSELF TO THE BAND. --compare-band is 15rem on index heroes and
     13rem on review heroes, so a fixed size would overflow the shorter one. At
     .72 of the band with a .14 top offset it sits centred with equal air above
     and below, whatever the band is set to.

     WHITE, AND THAT IS THE RISK. The first version was dark, which could only
     raise contrast against white hero text. Chris asked for white instead, and
     white does the opposite: it lightens the ground the headings sit on. 10% is
     the ceiling that keeps every sector where it already was - see the measured
     table in the commit. It does NOT rescue flights and tickets, which were
     already under the 3:1 large-text minimum before this existed.

     The opacity sits on a <g>, not on each stroke. Per-shape opacity stacks
     where the lines cross - measured 34% alpha at the intersections against 13%
     intended - which gave the globe bright seams. Grouping composites the whole
     wireframe once, then fades it. */
  position: relative;
  background:
    var(--compare-hero-gradient, linear-gradient(135deg, #3c5f0c 0%, var(--bs-primary) 100%))
      no-repeat top center / 100% var(--compare-band),
    linear-gradient(to bottom, var(--bs-light-gray) 0%, rgba(var(--bs-light-gray-rgb), 0.35) 100%)
      no-repeat bottom center / 100% calc(100% - var(--compare-band)),
    #fff;
  padding-top: 3rem;
}
/* The globe itself, declared once for every hero that draws it. It used to
   sit inside the .compare-hero-colour block above; lifted out on 2026-09-28
   when the five search page heroes took the same mark, so that there is still
   exactly one copy of the SVG to edit. */
.compare-hero-colour,
.search-widget-hero {
  --compare-hero-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' opacity='.10'%3E%3Ccircle cx='50' cy='50' r='45.5'/%3E%3Cg transform='rotate(-24 50 50)'%3E%3Cline x1='50' y1='4.5' x2='50' y2='95.5'/%3E%3Cline x1='4.5' y1='50' x2='95.5' y2='50'/%3E%3Cellipse cx='50' cy='50' rx='21.5' ry='45.5'/%3E%3Cpath d='M13.5 23.5C24 30 36.5 33.5 50 33.5S76 30 86.5 23.5'/%3E%3Cpath d='M13.5 76.5C24 70 36.5 66.5 50 66.5S76 70 86.5 76.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* NOTE: the mock page drops .bg-gray-gradient and .p-top-90 from the section
   rather than out-shouting them. .bg-gray-gradient sets "background: ...
   !important", so a replacement background could only win with another
   !important - two utilities fighting over the same property on the same
   element, which is how the earlier link bug happened. Removing the class the
   mock-up supersedes is the honest version. */

/* Sector gradients, taken from the search index pages verbatim. */
.compare-hero-flights   { --compare-hero-gradient: linear-gradient(135deg, #3c5f0c 0%, #6cb015 100%); --compare-lead-edge: #6cb015; }
.compare-hero-hotels    { --compare-hero-gradient: linear-gradient(135deg, #0a2f5c 0%, #1976d2 100%); --compare-lead-edge: #1976d2; }
.compare-hero-cars      { --compare-hero-gradient: linear-gradient(135deg, #3a0d54 0%, #7b1fa2 100%); --compare-lead-edge: #7b1fa2; }
.compare-hero-tickets   { --compare-hero-gradient: linear-gradient(135deg, #7a3d02 0%, #d98b2b 100%); --compare-lead-edge: #d98b2b; }
.compare-hero-transfers { --compare-hero-gradient: linear-gradient(135deg, #06403a 0%, #0f8b7d 100%); --compare-lead-edge: #0f8b7d; }
/* Chris, 2026-09-09: match hotel-search.html. That page's hero is
   .search-widget-hero-hotel, linear-gradient(135deg, #0a2f5c, #1976d2) -
   the same pair .compare-hero-hotels already uses, so city breaks and
   hotels now share a hero colour. Flagged to him rather than assumed:
   the six sector gradients had been one-per-sector until now. */
.compare-hero-holidays  { --compare-hero-gradient: linear-gradient(135deg, #0a2f5c 0%, #1976d2 100%); --compare-lead-edge: #1976d2; }

/* Below 768px the hero text fills the width and the band is shorter, so the
   globe would sit under the H1 rather than beside it. Dropped rather than
   shrunk - at that size it reads as a smudge behind the words, not a mark. */
@media (max-width: 767.98px) {
  .compare-hero-colour { --compare-hero-mark: none; }
}

/* Text sitting on the band. The eyebrow was the worst contrast on the page at
   2.25:1 green-on-grey; white on this gradient is 4.9:1 at the lightest end. */
/* The globe now sits on a ::before rather than being a background layer of the
   section, because Chris wants it oversized enough to bleed. A background layer
   is clipped to the whole section, so an oversized globe would have spilled out
   of the coloured band and carried on down the white content area below it -
   where a white mark on white is invisible anyway, so the shape would simply
   have stopped mid-curve. Giving it its own box exactly --compare-band tall
   crops it to the band, which is what makes the bleed read as deliberate.

   z-index 0 with the container lifted to 1: an absolutely positioned pseudo
   would otherwise paint over in-flow content, putting the globe on top of the
   heading rather than behind it. */
.compare-hero-colour::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--compare-band);
  background: var(--compare-hero-mark) no-repeat
    right -8% center / calc(var(--compare-band) * 1.44) calc(var(--compare-band) * 1.44);
  pointer-events: none;
  z-index: 0;
}
.compare-hero-colour > .container {
  position: relative;
  z-index: 1;
}
.compare-hero-colour .breadcrumb,
.compare-hero-colour .breadcrumb a,
.compare-hero-colour .breadcrumb span { color: rgba(255, 255, 255, .82); }
.compare-hero-colour .breadcrumb a:hover { color: #fff; }
.compare-hero-colour .sub-title { color: rgba(255, 255, 255, .92); }
.compare-hero-colour .block-title .title { color: #fff; }
.compare-hero-colour .block-title { margin-bottom: 1.25rem !important; }

/* Logo tiles stay GREY, and the four brand-coloured frames keep their own
   colour - netflights.png is a solid #00adef field and its frame is set to
   the identical value, so the logo reads as filling the whole tile. Nothing
   here touches either.

   What changes is the space AROUND the tile. It used to run edge to edge
   across the top of the card, so the grey met the card border with nothing
   between them. Insetting it lets the card's white show as a gutter on all
   four sides, framing the logo instead of butting it against the edge. */
.compare-hero-colour .compare-platform-logo-frame {
  margin: .85rem .85rem 0;
  border-radius: .375rem;
}
/* Two frames carry "width: 100%" from an older rule - zest and holiday-extras
   on the car rental page. That was a no-op while the tile ran edge to edge,
   because 100% and the default auto width came to the same number. Adding a
   margin turned it into an overflow: border-box resolves 100% against the
   card's content width and then the left margin pushes the box past the right
   edge. Measured before the fix: gutter 16px on the left, MINUS 12 on the
   right, which is Chris's "butts up to the side".

   width:auto lets the margins do the sizing, so these two match every other
   tile. Nothing is lost - their max-width of 360px never applied, the card is
   only 316 wide. */
.compare-hero-colour .compare-platform-logo-frame-zest-car-rental,
.compare-hero-colour .compare-platform-logo-frame-holiday-extras {
  width: auto;
}

/* The run-up. On a 1280px screen the first card started 571px down; the
   arrows sat alone in empty grey above it, reading as the strongest element
   on the page. Pulled up beside the disclosure line and made quieter. */
.compare-hero-colour .splide__arrows { margin-top: -3.25rem; }
/* THE ARROWS. Chris compared four treatments: the original white outline,
   solid green, solid dark blue, and this - outlined in the dark blue, which
   he chose, at 40x40 rather than the 44x44 also trialled. The green and solid
   navy variants are deleted rather than left lying around; git has them if
   the choice is ever reopened.

   The green pair are worth one line of record: white on #6cb015 is 2.67:1,
   and the glyph IS the control here - no label to fall back on - so SC 1.4.11
   applies to the arrowhead itself at 3:1. They failed it. The outline is
   11.4:1.

   OUTLINE, in the dark blue. The white pair Chris found too light failed
   because the BORDER was --bs-border-color against a grey page - 1.3:1, so
   the button had almost no edge. Swapping that border for the dark blue takes
   it to 9.6:1 and the glyph inside to 11.4:1, both well past the 3:1 that
   SC 1.4.11 asks of a control with no label.

   Fills solid on hover and focus rather than only changing shade, so the
   state change is unmistakable on a touch screen as well as under a cursor. */
.compare-arrows-outline .splide__arrow {
  background: #fff;
  border: 2px solid var(--bs-dark-blue);
  color: var(--bs-dark-blue);
  opacity: 1;
  box-shadow: none;
  transition: background-color .15s ease, color .15s ease;
}
.compare-arrows-outline .splide__arrow:hover,
.compare-arrows-outline .splide__arrow:focus-visible {
  background: var(--bs-dark-blue);
  color: #fff;
}
.compare-arrows-outline .splide__arrow:disabled {
  border-color: #b6c2ca;
  color: #b6c2ca;
}

/* Size: 40x40, Chris's choice after seeing 44 beside it. That clears WCAG 2.2
   SC 2.5.8, which asks 24x24. It is under the 44 that Apple and Google both
   recommend for touch, which is worth knowing because on a carousel the arrow
   is the only route to the platforms off-screen - a missed tap costs the
   visitor a platform. Raising it later is two lines. */

.compare-hero-colour .splide__arrow i { color: inherit; }

@media (max-width: 767.98px) {
  /* Mobile reorders the section - the lead panel and the cards come before
     the intro text - so the band covers less. */
  .compare-hero-colour { --compare-band: 11.5rem; padding-top: 2rem !important; }
  .compare-hero-colour .splide__arrows { margin-top: 0; }
}

/* ============================================ Link hover and focus, site-wide
   WCAG 2.1 SC 1.4.1 Use of Color, Level A. A link identified inside a block of
   text by colour alone needs either a non-colour cue at rest, or 3:1 contrast
   against the surrounding text PLUS a non-colour cue on hover and focus.

   The brand green clears the contrast prong - 5.77:1 against body text - but
   until now there was no hover underline anywhere in this stylesheet, so a
   colour-only link stayed colour-only however you interacted with it, and the
   second prong failed. It affects 168 prose links across 37 pages, the ones
   not covered by .f4-prose; the heaviest are the policy pages, where spotting
   a link matters most: image-license (23), our-team (8),
   disclaimer-trademark-notice (7), privacy (6).

   Chosen over rolling the full prose treatment across those pages because it
   changes NOTHING at rest. Every page looks exactly as it does now until
   someone points at a link, so it closes the compliance argument without
   touching a design decision Chris's team is still weighing.

   SCOPE. Inside <main> only, so the header navbar, the offcanvas menu and the
   footer - all lists of links, none of them prose - are untouched by
   construction rather than by exclusion. Within main, the things that are
   navigation or controls rather than sentences are excluded by name.

   Keyboard focus gets the same treatment: :focus-visible rather than :focus,
   so it appears for keyboard users without firing on every mouse click. */
main p a:hover,
main p a:focus-visible,
main li a:hover,
main li a:focus-visible {
  text-decoration: underline;
}
/* Whole-page opt-out. travel-advice-index.html is almost entirely link cards,
   so the rule underlined card titles rather than the occasional link inside a
   sentence, which is what it is for. A page adds .no-link-hover to its <main>
   to opt out. Higher specificity than the rule above, so it simply wins.

   Kept as a page-level switch rather than a global "never underline card
   links" rule: card markup varies across the site and a blanket exclusion
   would be guesswork, where this is one page saying no. */
main.no-link-hover p a:hover,
main.no-link-hover p a:focus-visible,
main.no-link-hover li a:hover,
main.no-link-hover li a:focus-visible {
  text-decoration: none;
}

/* Navigation and controls that happen to live in a <p> or an <li>. */
main p a.btn:hover, main p a.btn:focus-visible,
main li a.btn:hover, main li a.btn:focus-visible,
main .nav a:hover, main .nav a:focus-visible,
main .breadcrumb a:hover, main .breadcrumb a:focus-visible,
main .pagination a:hover, main .pagination a:focus-visible,
main .splide__arrows a:hover, main .splide__arrows a:focus-visible,
main .tp-jump a:hover, main .tp-jump a:focus-visible {
  text-decoration: none;
}

/* Review hero band. The index page's 15rem has to clear a breadcrumb, an
   eyebrow, a two-line H1 and an intro card that overlaps its lower edge. A
   review page has a breadcrumb, an eyebrow and a one-line H1, so the same
   figure left a wide empty stripe of colour above the At a Glance card on all
   ten pages.

   Measured on the rendered page rather than guessed, and set twice: 10.5rem
   ended the band exactly at the H1's baseline, which removed the empty stripe
   but also removed the overlap - the card sat in a white gap below the colour
   instead of rising into it the way the index page's intro card does. 13rem
   restores that overlap at about 20px while keeping the band a third shorter
   than the index's. */
.compare-review-hero { --compare-band: 13rem; padding-top: 2.5rem; }
@media (max-width: 767.98px) {
  .compare-review-hero { --compare-band: 9rem; padding-top: 1.5rem !important; }
}

/* The providers each model covers, under its heading on the index. Quieter
   than the body copy and separated from it, so it reads as a label rather than
   as the first line of the paragraph. */
.compare-model-who {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--bs-secondary-color);
  margin-bottom: .75rem;
}

/* METRIC BARS, on the city break review tables.

   Nine rows of digits are the flattest thing on those pages: 9.5 and 3.0 read
   identically apart from the characters, so the shape of a provider - which is
   the actual information - has to be reconstructed by the reader. The bar
   gives it back at a glance.

   Right-aligned and sized to the score out of 10, sitting to the left of the
   number rather than replacing it. The number is still the source of truth;
   this only makes the comparison visible.

   Deliberately quiet. It is a background element behind a table of nine rows,
   not a chart, and a saturated bar nine times over would fight the page. The
   fill is the brand green at 55% against a light track, which reads clearly
   at 8px without becoming the loudest thing on screen. */
.metric-bar {
  display: inline-block;
  vertical-align: middle;
  width: 84px;
  height: 8px;
  margin-right: .6rem;
  border-radius: 4px;
  background: var(--bs-light-gray);
  overflow: hidden;
}
.metric-bar > span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: rgba(var(--bs-primary-rgb), .55);
}
@media (max-width: 575.98px) {
  /* On a phone the label column already takes most of the width; the bar
     would squeeze the number rather than inform it. */
  .metric-bar { display: none; }
}

/* Weaknesses list. Mirrors .compare-platform-checklist, which is the ticked
   strengths list the five other sectors use, so a strength and a weakness read
   as the same kind of statement rather than one looking like an afterthought.
   The icon and its colour carry the difference; the type does not change. */
.compare-platform-crosslist {
  margin-bottom: 1rem;
}
.compare-platform-crosslist li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}
.compare-platform-crosslist li i {
  color: #9a6a1a;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

/* SCOPE, on the city break comparison only. Full / Broad / Specialist /
   Comparison - the dimension the other five sectors do not have.

   The holidays brief calls these "not optional decoration": the scores are
   only comparable read alongside them, because Skyscanner tops the table
   without selling packages at all. So the rule is that scope appears wherever
   the rating does, which is why there is a chip under every panel as well as a
   column in the table. */
/* .splide__slide is display:flex, so a second child sits BESIDE the card
   rather than under it - the chip rendered squeezed against the card's right
   edge, overlapping it. Column direction on this slider only; the other four
   carousels have a single child each and are untouched. */
.compare-holidays-slider .splide__slide {
  flex-direction: column;
}
.compare-scope-chip {
  margin: .6rem 0 0;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--bs-secondary-color);
}
.compare-scope-chip span {
  display: inline-block;
  margin-right: .4rem;
  padding: .1rem .45rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .25rem;
  background: #fff;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-body-color);
}
.compare-scope-tag {
  display: inline-block;
  padding: .1rem .45rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .25rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The scope key. A definition list because that is what it is - four terms and
   their meanings - rather than a table pretending to be one. */
.compare-scope-key { margin: 0; }
.compare-scope-key dt {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-body-color);
}
.compare-scope-key dd {
  margin: 0 0 .6rem;
  font-size: .9rem;
  color: var(--bs-secondary-color);
}
.compare-scope-key dd:last-child { margin-bottom: 0; }

/* Holiday Extras logo sizing, Chris's request 12 Sep 2026: the mark sits
   small inside its frame next to the other brands, which read at a larger
   optical size because their wordmarks fill more of the source file. Scaled
   up ~30% in the two places it was noticed - the At a Glance box on the
   review pages, and the airport transfer compare panel.

   Done with transform:scale rather than width/height so the frame geometry,
   and therefore the card and glance-box layout, is untouched: only the
   painted mark grows. The car rental slider's own holiday-extras rule
   (scale 0.9, further up this file) is deliberately left alone - that one
   was tuned against the other nine car rental tiles. */
.compare-platform-glance-logo-img.compare-platform-logo-holiday-extras {
  transform: scale(1.3);
}
.compare-transfers-slider .compare-platform-logo-img.compare-platform-logo-holiday-extras {
  transform: scale(1.3);
}

/* Hero breadcrumb that cannot split into two columns.

   The hero breadcrumb is a vertical strip - writing-mode:vertical-lr, absolute,
   the full height of the hero. Bootstrap's .breadcrumb is flex-wrap:wrap, so
   when the items need more height than the strip has, they do not clip: they
   wrap into a SECOND vertical column beside the first, and the reading order
   falls apart. The compact review hero (2026-09-08) cut these heroes from ~486
   to ~294px, which is what put them over the line.

   nowrap keeps one column whatever happens, and the tighter vertical padding
   buys back ~13px. Measured on the longest transfer page, Welcome Pickups: at
   768 - the breakpoint where the strip first appears, and the worst case - it
   needed 278px against 277px available. One pixel, but it wrapped.

   Opt-in by class rather than applied to .review-hero-compact generally. The
   other four sectors still carry their long index labels ("Car Rental Index"),
   and they need ~421px: nowrap alone would send them overflowing outside the
   hero instead, which is not an improvement. They want their labels shortened
   first, then this class. */
.hero nav[aria-label=breadcrumb].review-breadcrumb-fit .breadcrumb {
  flex-wrap: nowrap;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}
/* white-space as well as flex-wrap, and this is the one that actually mattered.
   In vertical-lr the block axis runs horizontally, so a line of text that runs
   out of vertical room wraps to a new LINE placed beside the first - a second
   column. "Welcome Pickups" was breaking at its space into "WELCOME" and
   "PICKUPS" side by side, which flex-wrap:nowrap does nothing about because
   the flex list was never the thing wrapping. */
.hero nav[aria-label=breadcrumb].review-breadcrumb-fit .breadcrumb .breadcrumb-item {
  white-space: nowrap;
}

/* Compact review hero, mobile: 4rem of padding each side down to 3rem.

   Chris, 2026-09-12, wanting the supplier logo in the At a Glance box to be
   caught on a phone rather than sitting just under the fold. Measured on a
   375x812 viewport with fonts settled: the card started 840px down against
   812px of viewport - 28px short. 1rem off the pair saves 32px and brings it
   to 808px.

   Nothing to do with the hero image file, which is what it looks like it
   ought to be. .hero-bg is absolutely positioned and fills whatever the
   padding makes, so the hero's height is this padding and only this padding -
   a taller or shorter source image does not move it by a pixel.

   Quarter-rem steps were checked first and none of them reach: 3.75rem saves
   8px, 3.5rem saves 16px, 3.25rem saves 24px, all still below the fold. 3rem
   is the first value that clears it.

   Mobile only. The desktop hero was measured and signed off at 4rem on
   2026-09-08 and is left exactly as it was. */
@media (max-width: 767.98px) {
  .hero.review-hero-compact .hero-page-title {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* The gap under the compact review hero.

   Chris, on the GetYourGuide page: the hero itself is right, the space
   between it and the first line of text is not. That space is .p-top-90,
   a flat padding-top:90px !important sitting on the section below the
   hero, and at 1024 it puts 90px between the hero's bottom edge and
   "COMPARE & BOOK".

   .p-top-90 is used in 54 files, so the class itself is left alone and
   this overrides it only where the compact review hero is directly above.
   The adjacent sibling does the scoping, which is why no markup changed
   in the five review templates.

   90 -> 48 on desktop. On mobile 32, where the saving is worth more than
   the rhythm: it is one of the blocks standing between the fold and the
   At a Glance logo card, together with the hero padding already trimmed.

   !important only because .p-top-90 carries it and would otherwise win on
   specificity regardless of source order. */
.hero.review-hero-compact + section.p-top-90 {
  padding-top: 48px !important;
}
@media (max-width: 767.98px) {
  .hero.review-hero-compact + section.p-top-90 {
    padding-top: 32px !important;
  }
}

/* Hero cut to three quarters of its height, on the two alliance guides Chris
   asked for - oneworld-airline-alliance and skyteam-alliance-explained.
   star-alliance-explained deliberately keeps the full-height hero.

   The height is padding, as it is everywhere else on this site: .hero-bg is
   absolutely positioned and fills whatever .hero-page-title's padding makes.
   Measured at 1024 both pages are 586px, of which 266px is the title block and
   320px is padding. 5.5rem a side gives 442px, which is 75.4% - the nearest
   clean rem value to the 87px an exact quarter would need, and within two
   pixels of it.

   Scoped to its own class rather than added to .hero, which around 70 pages
   use. */
.hero.hero-compact-25 .hero-page-title {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}

/* Logo optical sizing, Chris's request 14 Sep 2026. Three marks read small
   against the brands beside them, because their source files leave more empty
   space around the wordmark than the others do. Scaled ~30% in every place
   each one appears.

   Same mechanism as the Holiday Extras rule above: transform:scale, not
   width/height. The frame keeps its geometry, so the card grid and the At a
   Glance box are untouched and only the painted mark grows.
   .compare-platform-logo-frame has no overflow:hidden and 1.125rem of padding,
   which is the headroom this relies on.

   No media query: a transform applies at every width, so desktop and mobile
   both scale, which is what was asked for.

   SKYSCANNER IS SECTOR-SCOPED. It is reviewed in three sectors and only the
   hotels and car hire marks are to grow - the flights index and
   sky-discount-flights.html keep their current size. That is what the
   body.review-* classes added to the review templates are for; without them a
   single .compare-platform-logo-skyscanner rule would have caught all three. */

/* Netflights - white lettering on a dark ground, the smallest of the three. */
.compare-flights-slider .compare-platform-logo-img.compare-platform-logo-netflights,
.compare-platform-glance-logo-img.compare-platform-logo-netflights {
  transform: scale(1.3);
}

/* Skyscanner - hotels and car hire only. */
.compare-hotels-slider .compare-platform-logo-img.compare-platform-logo-skyscanner,
.compare-car-rental-slider .compare-platform-logo-img.compare-platform-logo-skyscanner,
body.review-hotels .compare-platform-glance-logo-img.compare-platform-logo-skyscanner,
body.review-car-rental .compare-platform-glance-logo-img.compare-platform-logo-skyscanner {
  transform: scale(1.3);
}

/* Attractiontix - index grid and its review page. */
.compare-attraction-tickets-grid .compare-platform-logo-img.compare-platform-logo-attractiontix,
.compare-platform-glance-logo-img.compare-platform-logo-attractiontix {
  transform: scale(1.3);
}

/* PLATFORM COMPARISON INDEX - the six sector cards. Chris, 2026-09-15.
   Four asks, in one block because they describe one component.

   BORDER ON HOVER, matching the trip planner. .tp-guide lifts its border to
   the brand green and adds a soft shadow over .18s; the same treatment here,
   so a card that is entirely a link behaves the same way on both pages.
   Note the markup dropped Bootstrap's .border-0 and .shadow-sm to get it:
   both are !important utilities, and a hover rule fighting them would have
   needed !important of its own on every property. The resting shadow below
   is Bootstrap's own .shadow-sm value, so nothing looks flatter than before.

   ICONS +50% (16px -> 1.5rem) and HEADINGS +25% (20.4px -> 1.6rem), measured
   from the rendered page rather than guessed from the class names - .card-icon
   carries no font-size of its own here, so the icon was inheriting 1rem.

   HEADING COLOUR is --bs-dark-blue (#0a3e59), the token already in the
   palette, not a new hex. The heading's link carries .text-reset, which is
   color: inherit, so colouring the h3 colours the link with it and the
   stretched-link hit area is untouched. */
.cmp-sector-card {
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.cmp-sector-card:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08);
}
/* SHARED WITH THE RESERVATIONS HUB. travel-search.html's five tool cards use
   the same markup as the six sector cards here, so they take the same icon and
   heading treatment (Chris, 2026-09-15) rather than a second copy of these
   four declarations.

   The hover rule above is deliberately NOT shared. A sector card is entirely
   one link, via .stretched-link on its heading; a tool card holds three
   separate buttons, and a border that lifts on hover would tell the reader the
   whole card is clickable when it is not. */
.cmp-sector-card .card-icon i,
.trv-tool-card .card-icon i {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--bs-dark-blue);
}
.cmp-sector-card .card-body h3,
.trv-tool-card .card-body h3 {
  /* 1.6rem first (the +25% asked for), eased back to 1.45rem on seeing it -
     still well up on the 1.275rem these headings started at, but no longer
     competing with the section headings above them. */
  font-size: 1.45rem;
  color: var(--bs-dark-blue);
}

/* TOP RATED row. Chris, 2026-09-15: a hover colour on the supplier name, and
   colour in the stars.

   #eeb461 is the site's own star fill, taken from the inline SVG in
   .star-rate-view .star-value - the amber every other star on the site is
   already drawn in. Written as a literal because that is how it exists today:
   there is no token for it, and inventing one here would leave the SVG and
   this rule as two unconnected definitions of the same colour. Worth promoting
   to a variable if a third use appears.

   The empty stars are left alone deliberately. hubStars() marks them with
   .text-black-50, a Bootstrap !important utility, so they stay grey against
   the amber without needing a rule of their own - which is the behaviour we
   want, and the half star inherits the fill.

   The supplier name is not itself a link: the whole card is, via
   .stretched-link on the heading. So the hover is driven from the card rather
   than the name, and matches the border it animates alongside. */
.cmp-sector-card .hotel-star i {
  color: #eeb461;
}
.cmp-sector-card .border-top strong {
  transition: color .18s ease;
}
.cmp-sector-card:hover .border-top strong {
  color: var(--bs-primary);
}

/* ==========================================================================
   METHODOLOGY PAGES (Chris, 2026-09-16)

   The eight how-we-rate / how-flight4-ratings-work-* pages were a single
   column of <p> and <h3> in one section - six of the eight carried no card at
   all - which read as flat beside the platform comparison hub. These classes
   give that set the same furniture the hub already uses, rather than a second
   visual language: .mth-area-card borrows .cmp-sector-card's border and lift,
   .mth-stats reuses .stats-list, and the palette is the site's own tokens.

   Prefix is mth- so a later grep finds the whole set at once.
   ========================================================================== */

/* Stat strip. Shares .stats-list with how-we-rate-platforms.html's .hwr-stats;
   the only difference is that a methodology page's fourth figure is a date,
   which must not wrap mid-month. */
.mth-stats {
  /* Framed, not floating. Unframed, the four figures sat straight on the
     section background and bled into it; a narrow rule and a white ground
     make the strip read as one panel. (Chris, 2026-09-16) */
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  background-color: #fff;
  padding: 1.5rem .5rem;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .04);
}
.mth-stats .stats-number { white-space: nowrap; }
.mth-stats > li { padding-top: .25rem; padding-bottom: .25rem; }

/* The four "what we measure" areas. Same border, shadow and hover lift as the
   hub's sector cards, so moving between the two pages feels continuous. */
.mth-area-card {
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.mth-area-card:hover {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08);
}
.mth-area-card .card-icon i,
.mth-caveat-card .card-icon i {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--bs-dark-blue);
}
.mth-area-card .card-title {
  color: var(--bs-dark-blue);
}

/* Limitation cards. Deliberately NOT the same as an area card: a left rule and
   a tinted ground mark them as disclosure rather than feature copy, and they
   do not lift on hover because nothing in them is clickable. */
.mth-caveat-card {
  background-color: var(--bs-light);
  border-left: .25rem solid var(--bs-primary) !important;
  border-radius: .375rem;
}
.mth-caveat-card .card-title {
  color: var(--bs-dark-blue);
}

/* Score bands. The table was .table-bordered, which drew a box around every
   cell and made six short rows look like a spreadsheet. Horizontal rules only,
   with the band itself set in the mono-ish tabular treatment so the numbers
   line up down the column. */
.mth-score-table thead th {
  border-bottom: 2px solid var(--bs-border-color);
  font-size: .8125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.mth-score-table td,
.mth-score-table th {
  border-left: 0;
  border-right: 0;
}
.mth-band {
  display: inline-block;
  min-width: 4.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--bs-dark-blue);
}

/* Closing call to action. A tinted ground so the last card on the page reads
   as a destination rather than one more paragraph. */
.mth-cta-card {
  background-color: var(--bs-light);
}
@media (max-width: 991.98px) {
  .mth-cta-card .text-lg-end { text-align: left !important; }
}


/* ==========================================================================
   CLUSTER LINK BLOCK (Chris, 2026-09-16)

   includes/sector-links.php, shown above the footer on the 25 pages of the
   platform-comparison cluster. Reuses .mth-area-card and .mth-caveat-card
   rather than introducing a third card treatment; the only new piece is the
   sector chip, which is a compact row of six and would be heavy as a card.
   ========================================================================== */

.sl-chip {
  display: flex;
  align-items: center;
  padding: .75rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  background-color: #fff;
  color: var(--bs-dark-blue);
  font-weight: 500;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.sl-chip:hover,
.sl-chip:focus-visible {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06);
}
.sl-chip i { color: var(--bs-dark-blue); }
.sl-chip:hover i,
.sl-chip:focus-visible i { color: var(--bs-primary); }

/* Card headings in this block are links. The stretched-link makes the whole
   card clickable, so the heading must not also look like a separate target. */
.sl-block .card-title a { color: inherit; }
.sl-block .mth-area-card:hover .card-title a,
.sl-block .mth-caveat-card:hover .card-title a { color: var(--bs-primary); }

/* Buying guide and explainer heroes (Chris, 2026-09-16).

   Same treatment as the review heroes - .review-hero-compact, 4rem - but
   these headings run to two lines where a review's is "Agoda Review" on one,
   so 4rem top and bottom left the title sitting tight against the edges of
   the band. 5rem, which is the smallest step that reads as deliberate rather
   than as a rounding error, and still clearly more compact than the 90px
   full hero these pages used before. */
.hero.review-hero-compact.hero-compact-lg .hero-page-title {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* ==========================================================================
   COMPARE PANEL BORDER (Chris, 2026-09-18)

   The slider cards looked lost on mobile: at that width a card fills most of
   the viewport, so there is no surrounding layout to imply its edges, and a
   7.5% shadow alone left the content floating rather than framed. The border
   frames it. Desktop benefits too, but mobile is the case that needed it.

   THE CARD BORDER REPLACES ONE THAT WAS ALREADY THERE. The panels carried
   2px solid #fff - a border the same colour as the card and the page behind
   it, so it occupied the space without ever being seen. Swapping the colour
   changes nothing about the geometry: no reflow, no shift in the carousel,
   the cards sit exactly where they did.

   The colour is the site's own --bs-dark-blue at low alpha rather than a new
   grey. At full strength 2px of #0a3e59 reads as a boxed-in outline and
   fights the logo frame inside the card, which has its own edge; at .22 it
   lands close to the site's existing border colour but carries the brand hue,
   so the card has a defined edge without looking ruled off.

   This supersedes, for these panels only, the note added 2026-09-08 that they
   "keep their own treatment ... a border here would double up against the
   frame's edge". That held when the border would have been a full-strength
   line. At this weight it does not.

   Scoped to .compare-platform-panel, which renders on the six compare indexes
   and oneworld-staralliance-skyteam-compared.html and nowhere else - checked,
   sidebar-partners.php names the component in comments but does not emit the
   class. All seven get it, because the panel is one component and one page
   looking different would read as a fault rather than a choice.
   ========================================================================== */

.compare-platform-panel {
  border: 2px solid rgba(10, 62, 89, .22);
}


/* ==========================================================================
   LONG-FORM GUIDE TREATMENT (Chris, 2026-09-21)

   Written for city-break-booking-buying-guide.html, where Chris asked for one
   page to look distinct from the rest of the guide set and slightly more
   modern while its content was being replaced. The other buying guides share
   one treatment - white card, hairline rule under the h2, bordered tables -
   and on a page with ten sections and three tables that reads as a long stack
   of identical boxes.

   NOW THE DEFAULT FOR NEW STAND-ALONE ARTICLES (Chris, 2026-09-21).
   package-holiday-vs-diy.html adopted it the same day, on Chris's read that
   the numbered headings and the chip contents make a long article easier to
   follow on a phone - which was the point of them. He then asked that new
   stand-alone articles start here rather than from the older guide layout.

   So this is no longer "one page's styling". Anything changed here changes
   every article using it, which is the intent: several long guides looking
   alike is a treatment, several looking almost alike is a bug. Before
   changing a value, check who else is on it:

       grep -l 'cbg-page' F4/html/*.html

   A new article opts in with class="cbg-page" on <body>, .cbg-main on the
   content column, and .cbg-card on each section card. It should carry
   .f4-prose on the content column too - see the prose link treatment above -
   or its links will be brand green at weight 300, which fails AA and renders
   a link lighter than the sentence holding it.

   The class name stays .cbg-page. Renaming it would touch both pages and the
   commit history for no behavioural gain, and the prefix's job is to make the
   set greppable, not to name the pages using it.

   WHAT MAKES IT DISTINCT IS STRUCTURE, NOT A NEW PALETTE. The colours are the
   site's own tokens throughout: --bs-primary for the accent, --bs-dark-blue
   for headings. A second palette would read as a different website rather
   than a different page. What changes is the furniture - a coloured edge on
   each card, numbered section headings, borderless tables, a sticky sidebar -
   so the pages are recognisably ours and recognisably not the other guides.

   SCOPED TO .cbg-page ON body, so nothing here can reach a page that has not
   opted in. The prefix is cbg- so a later grep finds the whole set, the same
   convention mth- established for the methodology pages.
   ========================================================================== */

/* --- Section cards ------------------------------------------------------ */

/* The accent edge is the single biggest difference from the other guides, and
   it is drawn with a pseudo-element rather than border-top so the corners of
   the card stay properly rounded at the top. Cards do not lift on hover:
   nothing inside them is a link target, and a lift would promise otherwise. */
.cbg-page .cbg-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: .75rem;
  box-shadow: 0 .125rem .5rem rgba(10, 62, 89, .06);
}
.cbg-page .cbg-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-dark-blue) 100%);
}

/* --- Section headings --------------------------------------------------- */

/* Numbered automatically. The other guides number their sections in the copy
   ("Part 1: ..."), which meant renaming four headings every time a section
   was added or moved; this page has ten. The counter increments per card, so
   inserting a section renumbers the page and the contents list stays the
   only place an order is written down. */
.cbg-page .cbg-main { counter-reset: cbgsec; }
.cbg-page .cbg-head {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  margin-bottom: 1.5rem;
}
.cbg-page .cbg-head::before {
  counter-increment: cbgsec;
  content: counter(cbgsec, decimal-leading-zero);
  flex: 0 0 auto;
  min-width: 2.25rem;
  padding: .25rem .5rem;
  border-radius: .375rem;
  background-color: rgba(108, 176, 21, .12);
  color: var(--bs-dark-blue);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cbg-page .cbg-head h2 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--bs-dark-blue);
}
/* A short accent rule under the heading instead of the full-width hairline
   the other guides use. Full width, repeated ten times down a long page,
   was most of what made the stack feel repetitive. */
.cbg-page .cbg-head h2::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: .75rem;
  border-radius: 2px;
  background-color: var(--bs-primary);
}
/* Cards with no number: contents, author, disclaimer. They are page
   furniture, not sections of the argument. */
.cbg-page .cbg-head-plain::before { content: none; }

/* Sub-headings within a section. The source draft used Bootstrap's
   border-start utilities, which draw a 4px rule the full height of the text
   and, on a two-line heading, look like a pull quote. A small square marker
   carries the same accent at a fraction of the weight. */
.cbg-page .cbg-sub {
  display: flex;
  align-items: baseline;
  gap: .625rem;
  margin-top: 2rem;
  margin-bottom: .75rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--bs-dark-blue);
}
.cbg-page .cbg-sub::before {
  content: "";
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  border-radius: 2px;
  background-color: var(--bs-primary);
}

/* --- Contents ----------------------------------------------------------- */

/* Chips rather than a bulleted list. The list version put ten identical
   chevrons down the left edge; the chip gives each entry its own target area,
   which matters more on a phone than the icon did. */
.cbg-page .cbg-toc-link {
  display: flex;
  align-items: center;
  gap: .625rem;
  height: 100%;
  padding: .625rem .875rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  background-color: #fff;
  color: var(--bs-dark-blue);
  font-size: .875rem;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.cbg-page .cbg-toc-link:hover,
.cbg-page .cbg-toc-link:focus-visible {
  border-color: var(--bs-primary);
  background-color: rgba(108, 176, 21, .06);
  color: var(--bs-dark-blue);
  transform: translateX(2px);
}
.cbg-page .cbg-toc-num {
  flex: 0 0 auto;
  min-width: 1.5rem;
  color: var(--bs-primary);
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Respect a reduced-motion preference: the nudge is decoration. */
@media (prefers-reduced-motion: reduce) {
  .cbg-page .cbg-toc-link { transition: none; }
  .cbg-page .cbg-toc-link:hover,
  .cbg-page .cbg-toc-link:focus-visible { transform: none; }
}

/* Anchor targets sit under nothing fixed on this page, but the jump lands the
   heading hard against the viewport edge. A little breathing room reads as
   deliberate. */
.cbg-page [id^="section-"] { scroll-margin-top: 1.5rem; }

/* --- Tables ------------------------------------------------------------- */

/* Borderless, the same reasoning as .mth-score-table: .table-bordered draws a
   box round every cell, and on a four-column seller table that is 24 boxes
   for 24 short phrases. Horizontal rules and a tinted header do the same job
   with a fraction of the ink. */
.cbg-page .cbg-table {
  --bs-table-border-color: var(--bs-border-color);
  margin-bottom: 0;
}
.cbg-page .cbg-table > thead th {
  padding: .75rem 1rem;
  border-bottom: 2px solid var(--bs-border-color);
  background-color: rgba(10, 62, 89, .04);
  color: var(--bs-dark-blue);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cbg-page .cbg-table > tbody td {
  padding: .875rem 1rem;
  border-left: 0;
  border-right: 0;
  vertical-align: top;
}
.cbg-page .cbg-table > tbody tr:last-child td { border-bottom: 0; }
.cbg-page .cbg-table-wrap {
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  overflow: hidden;
}

/* --- Tip callouts ------------------------------------------------------- */

/* The source draft's tips were bg-light with a 4px left rule, which is the
   same shape as .mth-caveat-card and would have read as a warning. A tip is
   not a caveat, so it gets its own badge and a tinted ground in the accent
   rather than the neutral grey. */
.cbg-page .cbg-tip {
  display: flex;
  gap: .875rem;
  margin-top: 1.5rem;
  padding: 1rem 1.125rem;
  border: 1px solid rgba(108, 176, 21, .28);
  border-radius: .5rem;
  background-color: rgba(108, 176, 21, .07);
}
.cbg-page .cbg-tip-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: .375rem;
  background-color: var(--bs-primary);
  color: #fff;
}
.cbg-page .cbg-tip-icon i { font-size: 1rem; line-height: 1; }
.cbg-page .cbg-tip p { margin-bottom: 0; font-size: .9375rem; }
.cbg-page .cbg-tip .cbg-tip-label { color: var(--bs-dark-blue); font-weight: 600; }

/* --- Lists -------------------------------------------------------------- */

/* The eight city break styles and the five booking steps are both long lists
   of short items. Default list-item spacing runs them together. */
.cbg-page .cbg-list > li { margin-bottom: .625rem; }
.cbg-page .cbg-list > li:last-child { margin-bottom: 0; }
.cbg-page .cbg-list > li > strong { color: var(--bs-dark-blue); }

/* --- FAQ accordion ------------------------------------------------------ */

/* Flush accordion with the number promoted out of the label text. The other
   guides print the digit inside the button, in the same run as the question,
   which leaves nothing to align on when a question wraps onto a second line. */
.cbg-page .cbg-faq .accordion-button {
  gap: .75rem;
  padding-left: 0;
  padding-right: 2.5rem;
  color: var(--bs-dark-blue);
  font-weight: 500;
}
.cbg-page .cbg-faq .accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
}
.cbg-page .cbg-faq .accordion-button:focus { box-shadow: none; }
.cbg-page .cbg-faq .accordion-body { padding-left: 2.5rem; }
.cbg-page .cbg-faq-num {
  flex: 0 0 auto;
  min-width: 1.75rem;
  color: var(--bs-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Sidebar ------------------------------------------------------------ */

/* Sticks from xl up, where the sidebar column exists at all. Below that the
   aside stacks under the article and sticky would do nothing useful. The
   offset clears the header; max-height plus overflow stops a tall sidebar
   from trapping its own lower half off-screen.

   ONLY ON A PAGE WITHOUT includes/sidebar-partners.php. That include pins its
   own panel, and two sticky siblings in one column overlap rather than stack:
   on the five guides that carry it, .cbg-sticky left the partner panel lying
   over Ready to book and Quick Facts (measured 2026-10-18). There the aside
   scrolls away and the partner panel pins alone. */
@media (min-width: 1200px) {
  .cbg-page .cbg-sticky {
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
  }
}

/* --- Responsive --------------------------------------------------------- */


/* TABLE-CELL LINKS, ON THESE TWO PAGES ONLY (Chris, 2026-09-21).

   The site-wide prose rule is keyed on .f4-prose p a and .f4-prose li a, and
   its own notes are explicit that the 937 links sitting in headings, table
   cells and plain divs are "deliberately not touched" - that was a scoping
   decision for a 230-page rollout, not a judgement that a table link should
   look different.

   On a long article it does look different, and that is what Chris was
   pointing at. The seller table on the city break guide carries nine provider
   links in <td>. Untouched they render as brand green at weight 300: green
   text on white is 2.67:1 where AA wants 4.5:1, and 300 against body copy at
   400 makes a link LIGHTER than the sentence beside it. Those are the two
   faults the prose treatment was written to fix, so a cell link on these
   pages gets the same treatment a sentence link does.

   Scoped to .cbg-page so it changes nothing on the 230 pages already live.
   Whether the rest of the site should follow is Chris's call, not a decision
   to make quietly inside a page restyle. */
.cbg-page .f4-prose td a {
  color: inherit;
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-color: var(--bs-primary) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: .16em;
  transition: text-decoration-thickness .12s ease, background-color .12s ease;
}
.cbg-page .f4-prose td a:hover,
.cbg-page .f4-prose td a:focus-visible {
  text-decoration-thickness: 3px;
  background-color: rgba(var(--bs-primary-rgb), .1);
}

/* THE CONTENTS CHIPS VERSUS THE PROSE LINK RULE (Chris, 2026-09-21).

   Both these pages now carry .f4-prose, which is how a page opts into the
   site-wide prose link treatment. That treatment deliberately excludes
   same-page anchors - "a link to #q7 is navigation, never a sentence" - and
   the exclusion hands them back to var(--bs-link-color) at default weight.

   Every contents chip is an <a href="#..."> inside an <li>, so it matches the
   exclusion, which at (0,2,2) out-specifies the plain .cbg-page .cbg-toc-link
   rule at (0,2,0) and would repaint ten chips in link blue.

   Restated here at (0,3,2) so it wins on specificity rather than on source
   order, which is what a later edit to either block would quietly break. The
   declarations are only the ones the exclusion sets - colour, weight,
   decoration, background - so everything else still comes from the rule
   above and there is one place to change a chip's padding or radius. */
.cbg-page .cbg-card li a.cbg-toc-link {
  color: var(--bs-dark-blue);
  font-weight: 500;
  text-decoration: none;
  text-decoration-thickness: auto !important;
  background-color: #fff;
}
.cbg-page .cbg-card li a.cbg-toc-link:hover,
.cbg-page .cbg-card li a.cbg-toc-link:focus-visible {
  color: var(--bs-dark-blue);
  background-color: rgba(108, 176, 21, .06);
}

@media (max-width: 575.98px) {
  .cbg-page .cbg-head { gap: .625rem; }
  .cbg-page .cbg-head h2 { font-size: 1.25rem; }
  .cbg-page .cbg-table > tbody td,
  .cbg-page .cbg-table > thead th { padding-left: .75rem; padding-right: .75rem; }
}


/* ==========================================================================
   KEY STRENGTHS ON REVIEW PAGES (Chris, 2026-09-21)

   WHAT WAS WRONG, and it was a bug rather than a taste problem.
   .compare-platform-checklist li is display:flex, and the markup put the
   <strong> title and the trailing " - detail" text node straight into the
   <li>. A bare text node beside an element becomes an anonymous flex item,
   so every row was THREE flex items - icon, title, detail - laid out as
   three columns rather than one wrapped sentence.

   That is exactly what Chris photographed. Each title has a different
   intrinsic width, so every row's detail started at a different place down
   the card, and a title long enough to wrap - "Comprehensive One Key rewards
   programme" - broke onto two lines inside its own column while its detail
   sat alongside in a third, leaving a hole between them. Nothing was
   deliberately two-column; flex made it two-column by accident.

   The airport transfer template had already been fixed by wrapping the text
   in a <span>, and carries a comment saying so. The fix never reached the
   other four.

   WHAT IT LOOKS LIKE NOW. Rather than restore one long run of "title - long
   detail", the title goes on its own line and the detail sits under it. That
   removes the alignment problem outright instead of hiding it, and it reads
   better at every width: the four titles become a scannable column, and the
   reader who wants the evidence drops a line to find it. It also removes the
   separating dash, which only existed to hold two things apart on one line.

   SCOPED WITH .rev-strength-list, not to .compare-platform-checklist itself.
   That class is also used for plain one-line lists - the proof points on the
   compare index panels, the city break awards, the holiday sectors whose
   strengths are strings with no detail at all. Those have nothing to stack
   and must keep the single-line treatment. Only the five sectors whose
   strengths are title-and-detail pairs opt in.
   ========================================================================== */

.compare-platform-checklist.rev-strength-list {
  margin-bottom: 0;
}
.compare-platform-checklist.rev-strength-list li {
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: 0;
  padding: .875rem 0;
  border-bottom: 1px solid var(--bs-border-color);
  font-size: 1rem;
}
.compare-platform-checklist.rev-strength-list li:first-child { padding-top: 0; }
.compare-platform-checklist.rev-strength-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* The tick sits in a tinted disc rather than loose on the page. Loose, at the
   top of a two-line block, it read as punctuation; in a disc it reads as a
   marker and gives the stacked text something to align against. */
.rev-strength-list .rev-strength-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .1rem;
  border-radius: 50%;
  background-color: rgba(108, 176, 21, .12);
}
/* Out-specifies .compare-platform-checklist li i, which sets its own colour
   and a .2rem top margin meant for a tick sitting directly in the row. */
.rev-strength-list .rev-strength-icon i {
  margin: 0;
  color: var(--bs-primary);
  font-size: .8125rem;
  line-height: 1;
}

.rev-strength-list .rev-strength-title {
  display: block;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bs-dark-blue);
}
.rev-strength-list .rev-strength-detail {
  display: block;
  margin-top: .15rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--bs-secondary-color);
}

/* Mobile keeps the card-per-row treatment the plain checklist already uses.
   Restated because .rev-strength-list is more specific than the existing mobile
   rule and lands later in the file, so without this the cards would vanish. */
@media (max-width: 767.98px) {
  .compare-platform-checklist.rev-strength-list {
    display: grid;
    gap: .65rem;
  }
  .compare-platform-checklist.rev-strength-list li,
  .compare-platform-checklist.rev-strength-list li:first-child,
  .compare-platform-checklist.rev-strength-list li:last-child {
    padding: .85rem .95rem;
    background-color: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
  }
}

/* ==========================================================================
   HOMEPAGE SIDE GUTTER ON SMALL SCREENS (Chris, 2026-09-21)

   Chris read the homepage on a phone and said the content ran nearly edge to
   edge. Measured at 375px it did: body text sat 12px from the screen, where
   every other page on the site lands at 37px.

   THE DIFFERENCE IS CARDS, NOT THE CONTAINER. .container carries Bootstrap's
   untouched 12px each side everywhere, homepage included. Other pages put
   their content in cards, and .card-body adds 24px on top, so 12 + 24 + the
   border reads as a comfortable margin. index.html has no .card-body at all -
   zero, against 6 on a platform review, 11 on a compare index, 23 on the city
   break guide - so on the homepage the 12px gutter IS the whole margin.

   Which is why this is scoped to the homepage rather than fixed on
   .container. Raising the global gutter would push the 377 pages that already
   sit at 37px out to 45px, to solve a problem they do not have.

   AND ONLY BELOW 576px, because that is the only width where it bites. From
   sm up, .container takes a max-width and centres, so the viewport itself
   supplies the margin: at 576px the container is 540px wide, which is 18px of
   free space each side before its own padding is counted.

   20px rather than 16px. 16 is the iOS and Material standard and would be
   defensible, but the homepage has no card edge or border anywhere to imply
   an inner boundary, so it needs slightly more than a page whose text sits on
   a white panel.
   ========================================================================== */

@media (max-width: 575.98px) {
  .home-page .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ==========================================================================
   NUMBERED FACT LISTS ON CITY GUIDES (Chris, 2026-09-21)

   The "10 Things Worth Knowing" sections on the Stockholm and Sydney guides.
   Chris read the Stockholm one and said it felt crowded, and the measurements
   agreed: ten items, each running to two or three lines, separated by 8px of
   margin, with the subheadings 24px clear of the list above them. Ten dense
   paragraphs in a stack with almost nothing between them.

   NOTHING HERE CHANGES THE WORDS OR THE ORDER. It is space, a marker with
   some weight to it, and a rule under each subheading so the two halves of
   the list read as two groups rather than one run of ten.

   NATIVE MARKERS, NOT A COUNTER. The second list is <ol start="6">, which
   continues the numbering from the first. A CSS counter would have to be told
   that separately and would silently restart at 1 the day someone adds an
   item to the first group. ::marker takes the colour and weight, which is the
   part that was missing, and the browser keeps doing the counting.
   ========================================================================== */

.facts-list ol {
  padding-left: 1.75rem;
  margin-bottom: 0;
}
.facts-list ol li {
  margin-bottom: 1rem;
  padding-left: .35rem;
  line-height: 1.7;
}
.facts-list ol li:last-child { margin-bottom: 0; }
.facts-list ol li::marker {
  color: var(--bs-primary);
  font-weight: 700;
}

/* The two group headings. A hairline under each one separates the halves
   without adding another card, and the extra top margin stops the heading
   sitting almost against the last item of the group above it. */
.facts-list h3 {
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.facts-list h3:first-of-type { margin-top: 1.5rem; }

@media (max-width: 575.98px) {
  .facts-list ol { padding-left: 1.5rem; }
  .facts-list ol li { margin-bottom: 1.125rem; }
}

/* The Sydney guide labels its two groups with a bold paragraph where the
   Stockholm guide uses an <h3>, so the same separator is attached to a
   .facts-group class rather than to a tag. Marked on the two paragraphs that
   immediately precede a list, never on the page's other bold paragraphs.
   The mt-4 and mb-3 utilities came off those two at the same time, for the
   same reason the headings lost theirs: a utility's !important wins. */
.facts-list h3,
.facts-list .facts-group {
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.facts-list .facts-group { color: var(--bs-dark-blue); }
.facts-list h3:first-of-type,
.facts-list h2 + .facts-group { margin-top: 1.5rem; }


/* ==================================== Numbered FAQ accordions, site-wide ====
   Fifty pages share one FAQ shape: a flush accordion whose button holds the
   question number in the same text run as the question itself -

       <strong class="rounded-1">2.</strong>&nbsp;<span>What's the ...</span>

   The button is a flex container that centres its items, so on mobile, where
   most questions wrap, nothing lines up. Measured on
   compare-hotel-booking-platforms.html at 390px, five questions:

     - the question's left edge moved between 33.7px and 37.0px, because the
       digits are not tabular and "1." is 3.4px narrower than "4."
     - the digit sat 10.8px below the first line of its own question on the
       two-line rows and 21.6px below it on the three-line row, floating to
       the vertical middle of the block instead of sitting beside line one
     - the chevron did the same, dropping 10.8px on the three-line row

   Three ragged columns down one list, which is what reads as jumbled. This is
   the same defect the .cbg-faq rules fix on the long-form guides, and the fix
   is the same idea: give the digit a fixed column and align everything to the
   first line rather than to the middle.

   SCOPE. .accordion-itinerary already sets align-items: start and drops its
   chevron, and .cbg-faq is the pattern this copies, so both are excluded
   rather than restyled. Everything else is matched through the markup itself -
   a <strong class="rounded-1"> that is a direct child of the button - so no
   page needs editing and no page can be missed. .accordion-why carries icons
   rather than numbers and never matches. */
.accordion-flush:not(.accordion-itinerary):not(.cbg-faq)
  .accordion-button:has(> strong.rounded-1) {
  align-items: flex-start;
}
.accordion-flush:not(.accordion-itinerary):not(.cbg-faq)
  .accordion-button > strong.rounded-1 {
  flex: 0 0 auto;
  min-width: 1.5rem;
  font-variant-numeric: tabular-nums;
}
/* The chevron is 20px against a 21.6px line, so flex-start alone leaves it
   0.8px high against the first line of the question. */
.accordion-flush:not(.accordion-itinerary):not(.cbg-faq)
  .accordion-button:has(> strong.rounded-1)::after {
  margin-top: 0.05rem;
}
/* The answer now starts under the question rather than under the number:
   20px of button padding, the 24px digit column, and the &nbsp; between them. */
.accordion-flush:not(.accordion-itinerary):not(.cbg-faq)
  .accordion-item:has(.accordion-button > strong.rounded-1) .accordion-body {
  padding-left: 3rem;
}
/* The chevron has margin-left: auto, so a question that fills the line ends
   hard against it - "between a" on the hotels page was 10px clear at 390px. */
.accordion-flush:not(.accordion-itinerary):not(.cbg-faq)
  .accordion-button > strong.rounded-1 ~ span {
  padding-right: 0.5rem;
}

/* ================================= Compare index lead statement (mobile) ===
   The one-sentence card that sits at the foot of the coloured band on the six
   compare index pages. Its position is right - it breaks the band edge, the
   way the search pages' widget panel does - but it was carrying nothing but
   .bg-white .rounded .shadow-sm, which is the same treatment as any generic
   panel further down the page. Nothing marked it as the page's opening line.

   THE BORDER CARRIES THE COLOUR. A 4px accent bar down the left edge was
   tried first and dropped - Chris, 2026-09-24, "not an improvement". The
   colour now runs the whole way round at 2px, which is what he asked for
   originally, and the card reads as one object rather than a panel with a
   tab stuck on it.

   --compare-lead-edge is declared beside each sector's --compare-hero-gradient
   rather than derived from it, because a gradient cannot paint a border that
   keeps its radius: border-image discards border-radius outright. It is the
   lighter of the two gradient stops in every case, so the edge is the sector's
   own colour at the strength the band reaches at its right-hand end - green on
   flights, blue on hotels and city breaks, purple on cars, amber on tickets,
   teal on transfers.

   The sentence itself is now set as a lead rather than as body copy: a step up
   in size, dark blue rather than the body grey, and a looser line height. That
   is the part Chris said already stands out, so it is strengthened rather than
   restyled - the white ground stays, and dark blue on white measures 11.4:1.

   .p-3 came off the markup rather than being overridden here. Bootstrap's
   spacing utilities are declared !important, so a padding rule in this file
   could only win with a second !important - two declarations fighting over
   one property on one element, which is how an earlier bug on this site
   happened. Removing the utility the rule supersedes is the honest version.
   .rounded is a utility too, hence the one !important below. */
.compare-lead {
  padding: 1.125rem 1.25rem;
  border: 2px solid var(--compare-lead-edge, var(--bs-primary));
  border-radius: 0.625rem !important;
}
.compare-lead p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--bs-dark-blue);
}

/* ========================================== Buttons with a wrapping label ===
   .btn is display: inline-block with inline children, so a label long enough
   to wrap takes the trailing icon with it - and at some widths the text fits
   on one line while the icon alone drops to a second, which is how the
   homepage "Compare booking platforms" button rendered at 360px: a 71px tall
   button with an arrow sitting by itself underneath.

   inline-flex puts the label and the icon on one row and lets the label wrap
   inside its own box instead, so the icon stays beside the text at every
   width. Measured at 320px, 360px and 390px.

   Opt-in rather than applied to .btn, because every other button on the site
   has a short enough label that it never wraps, and changing all of them to
   flex would be a site-wide layout change to fix one button. */
.btn.btn-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}


/* Jump target for the "(See below for how F4 ratings and reviews are prepared)"
   link in each compare index intro (2026-10-13). Same 6.5rem clearance as the
   glossary sections, so the heading lands below the sticky site header rather
   than underneath it. */
#how-ratings-work { scroll-margin-top: 6.5rem; }


/* ============================================ "For UK travellers" topbar menu
   (2026-10-18). Styled apart from the rest of the header on purpose (Chris: the
   top looked cramped with one style): the trigger is a small outlined button, and
   the menu items are sector-coloured icon tiles, so it reads as a utility rather
   than more navigation. Two things the topbar would otherwise get wrong: it
   colours every link white, which would make the items white on the white
   dropdown; and the sticky navbar sits at z-index 1030, above Bootstrap's 1000
   for dropdowns, so the open menu would slide behind it. Each item sets
   --f4-uk-c to its sector colour in topbar.php. */
.header-topbar .f4-uk-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.3rem;
  background-color: rgba(255, 255, 255, 0.08);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  /* One line always (Chris, 2026-10-18): on the homepage at phone width the
     label wrapped after "UK" and the 40px topbar cut off "travellers". */
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.header-topbar .f4-uk-toggle img {
  border-radius: 2px;
}
.header-topbar .f4-uk-toggle:hover,
.header-topbar .f4-uk-toggle:focus-visible,
.header-topbar .f4-uk-toggle[aria-expanded="true"] {
  color: var(--bs-dark-blue);
  background-color: #fff;
  border-color: #fff;
}
.header-topbar .f4-uk-menu {
  z-index: 1045;
  min-width: 17.5rem;
  margin-top: 0.4rem !important;
  padding: 0 0 0.4rem;
  overflow: hidden;
  border: 0;
  border-top: 3px solid var(--bs-primary);
  border-radius: 0.375rem;
  font-size: 0.9rem;
  text-align: left;
}
.header-topbar .f4-uk-menu .dropdown-header {
  margin-bottom: 0.3rem;
  padding: 0.6rem 1rem;
  background-color: var(--bs-light-gray, #f2f4f5);
  color: var(--bs-dark-blue);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.header-topbar .f4-uk-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 1rem;
  color: var(--bs-body-color);
  white-space: normal;
}
.header-topbar .f4-uk-menu .dropdown-item:hover,
.header-topbar .f4-uk-menu .dropdown-item:focus {
  color: var(--f4-uk-c, var(--bs-primary));
  background-color: color-mix(in srgb, var(--f4-uk-c, var(--bs-primary)) 8%, #fff);
}
.f4-uk-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.25rem;
  background-color: color-mix(in srgb, var(--f4-uk-c, var(--bs-primary)) 14%, #fff);
  color: var(--f4-uk-c, var(--bs-primary));
  font-size: 1rem;
}

/* ==========================================================================
   CITY GUIDE SLIDER (.f4cs-*), homepage, beside "Why Choose Flight4"
   (Chris, 2026-11-01). Markup: includes/city-slider.php. One illustration
   at a time in an outlined frame, with a caption link and a control bar.
   The .f4cs prefix keeps these clear of the hero carousel and every other
   Splide slider; the .splide__arrow overrides below undo the theme's
   absolutely positioned side arrows for this slider only.
   ========================================================================== */
.f4cs {
  position: relative;
  max-width: 27rem;
  margin: 0.5rem auto;
  padding: 1.6rem 2rem 1.45rem;
  background: #fff;
  border: 1px solid rgba(var(--bs-dark-blue-rgb), 0.14);
  border-radius: 0.75rem;
  outline: 1px solid rgba(var(--bs-dark-blue-rgb), 0.16);
  outline-offset: 0.45rem;
  box-shadow: 0 1.5rem 3rem -1.75rem rgba(var(--bs-dark-blue-rgb), 0.45);
}
.f4cs::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 1.5rem;
  right: 1.5rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--bs-primary), var(--bs-dark-blue));
}
.f4cs-head {
  margin-bottom: 0.8rem;
}
.f4cs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bs-dark-blue);
}
.f4cs-eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--bs-primary);
}
.f4cs-slide {
  display: block;
  color: inherit;
  text-decoration: none;
}
.f4cs-tile {
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #f3f5f7;
}
.f4cs-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
a.f4cs-slide:hover .f4cs-tile img {
  transform: scale(1.03);
}
.f4cs-cap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.6rem 0.5rem 0.8rem;
  border-left: 3px solid var(--bs-primary);
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--bs-primary) 7%, #fff);
}
.f4cs-cap-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.f4cs-place {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bs-primary) 62%, #000);
}
.f4cs-guide {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bs-dark-blue);
}
.f4cs-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--bs-dark-blue);
  color: #fff;
  font-size: 0.8rem;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.f4cs-go svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: currentColor;
}
a.f4cs-slide:hover .f4cs-go,
a.f4cs-slide:focus-visible .f4cs-go {
  background: var(--bs-primary);
  transform: translateX(3px);
}
/* The track clips anything outside the slide, so focus is drawn inside the caption. */
a.f4cs-slide:focus-visible {
  outline: none;
}
a.f4cs-slide:focus-visible .f4cs-cap {
  box-shadow: inset 0 0 0 2px var(--bs-dark-blue);
}
.f4cs-soon .f4cs-cap {
  border-left-color: rgba(var(--bs-dark-blue-rgb), 0.25);
  background: #f3f5f7;
}
.f4cs-soon .f4cs-guide {
  font-weight: 600;
  color: rgba(var(--bs-dark-blue-rgb), 0.7);
}
.f4cs-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.85rem;
}
.f4cs-ctrl {
  flex: none;
  display: inline-flex;
  border: 1px solid rgba(var(--bs-dark-blue-rgb), 0.18);
  border-radius: 0.4rem;
  overflow: hidden;
}
.f4cs .f4cs-btn {
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--bs-dark-blue);
  opacity: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.f4cs .f4cs-btn + .f4cs-btn {
  border-left: 1px solid rgba(var(--bs-dark-blue-rgb), 0.18);
}
.f4cs .splide__toggle.f4cs-btn {
  background: var(--bs-dark-blue);
  color: #fff;
}
.f4cs .f4cs-btn:hover {
  background: var(--bs-primary);
  color: #fff;
}
.f4cs .f4cs-btn:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
}
.f4cs .f4cs-btn svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: currentColor;
  transform: none; /* splide.min.css mirrors the prev icon; ours is drawn facing left */
}
.f4cs-progress {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(var(--bs-dark-blue-rgb), 0.12);
  overflow: hidden;
}
.f4cs-progress span {
  display: block;
  height: 100%;
  background: var(--bs-primary);
  transform: scaleX(0);
  transform-origin: left;
}
.f4cs-count {
  flex: none;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: rgba(var(--bs-dark-blue-rgb), 0.65);
}
.f4cs-count b {
  color: var(--bs-dark-blue);
}
@media (max-width: 575.98px) {
  .f4cs {
    padding: 1.25rem 1.25rem 1.1rem;
  }
  .f4cs-guide {
    font-size: 0.92rem;
  }
}

/* HOMEPAGE ABOUT (.f4-about), the section under the hero (Chris, 2026-11-01).
   Matches the city guide slider in "Why Choose Flight4": the image group is
   centred in its column at 30rem (the slider's width until it was cut 10%) and sits level with the text
   instead of hanging at the top of a taller column.
   Copy (Chris, 2026-11-02): 18px regular rather than the theme's light 300,
   17.5px on phones. Light Outfit read too small in a block of paragraphs. */
.f4-about .image-info {
  max-width: 30rem;
  margin-inline: auto;
}
.f4-about-text p {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: 0.85rem;
}
.f4-about-text .block-title {
  margin-bottom: 0.75rem;
}
.f4-about-text .strength-list {
  padding-top: 0.25rem;
}
.f4-about-text .strength-list li {
  font-weight: 400;
}
@media (max-width: 767.98px) {
  .f4-about-text p {
    font-size: 1.094rem;
  }
}
@media (min-width: 1200px) {
  .f4-about > .container > .row {
    align-items: center;
  }
}

/* HOMEPAGE HERO SLIDE 2 crop (Chris, 2026-11-01). The booking platforms
   photo has its travellers' heads near the top edge, and on wide screens the
   default centred crop cut them off under the menu. From tablet width up the
   crop sits 15% down from the top, so the floor is trimmed instead (fully
   top-anchored left too much space above their heads). Phones keep
   the default: there the hero is taller than the photo's shape and the crop
   is left and right, so the heads were never at risk. */
@media (min-width: 768px) {
  .hero .hero-bg img.f4-hero-top {
    object-position: 50% 15%;
  }
}

/* HOMEPAGE HERO SLIDE 1 crops (Chris, 2026-11-02). Slide 1 rotates between
   four photos (index.html, $heroOne). Two have their subject high in the
   frame, so on wide screens the centred crop cut off the top of a head:
   Paris (beret) and Venice. These move the crop up from tablet width; phones
   keep the centred crop, which Chris was happy with. Larger % = image sits
   higher; smaller % = more space above the head. */
@media (min-width: 768px) {
  .hero .hero-bg img.f4-hero-crop-paris {
    object-position: 50% 25%;
  }
  .hero .hero-bg img.f4-hero-crop-venice {
    object-position: 50% 25%;
  }
}

/* Company details under the footer copyright (UK company rules require the
   registered name, number, place of registration and office on the site). */
.footer .f4-company-line {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  opacity: 0.8;
}

/* SHORT PLAIN-TITLE HERO. Chris, 2026-11-06: the about, contact, legal and
   travel index heroes were far taller than their text. .hero-page-title's
   160px top and bottom padding IS the hero's height (.hero-bg is absolute and
   fills it; the image is object-fit:cover, so a shorter hero crops the 2000x900
   source top and bottom rather than needing a new file). On about.html at 1440
   that was 320px of padding around 99px of title.

   Same values as the compact review hero (4rem, 3rem on phones), which were
   measured and signed off on 2026-09-08 and 2026-09-12. A separate class rather
   than reusing .review-hero-compact, because that one also carries review-only
   rules for the section below it. Opt-in per page: .hero-page-title is shared
   by around 70 pages. */
.hero.f4-hero-short .hero-page-title {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (max-width: 767.98px) {
  .hero.f4-hero-short .hero-page-title {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* The vertical breadcrumb strip on the left (shown from 768px up) is as tall
   as the hero, and when its words need more height than that, Bootstrap's
   flex-wrap sends them into a second column beside the first. Measured at
   1440 with this hero at ~221px: the crumbs needed 145-319px, and seven of the
   twelve pages wrapped. Fixed three ways together:
   - the four longest crumb labels were shortened in the markup (the H1 and
     <title> are unchanged), which brings the longest down to ~230px;
   - nowrap and tighter strip padding, as .review-breadcrumb-fit does, so the
     crumb stays one column whatever happens;
   - a 15rem floor on the hero, title centred within it, so a longer crumb
     added later still has room. Not applied on phones, where the strip is
     hidden and the floor would only add height. */
@media (min-width: 768px) {
  .hero.f4-hero-short .hero-page-title {
    min-height: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero.f4-hero-short nav[aria-label=breadcrumb] .breadcrumb {
    flex-wrap: nowrap;
    white-space: nowrap;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }
}

/* HERO CROP LOW IN THE IMAGE (Chris, 2026-11-07). Some of the vector heroes
   have their subject in the lower part of the frame, and on the short heroes
   (f4-hero-short) the centred crop cut it off. From tablet width up this moves
   the crop 80% of the way down: fully bottom-anchored (100%) was tried first,
   but on image-policy it clipped the tops of the town's tallest buildings and
   spent the space on the blank strip below them. Phones keep the centred
   crop, which Chris was happy with. Add the class to the hero <img>; first
   used on image-policy.html. */
@media (min-width: 768px) {
  .hero .hero-bg img.f4-hero-low {
    object-position: 50% 80%;
  }
}

/* HERO CROP A LITTLE HIGH (Chris, 2026-11-07). The opposite of f4-hero-low:
   for vector heroes whose subject reaches above the middle of the frame. On
   affiliate-statement-disclaimer.html the centred crop of green-arrows-2 cut
   off the head of the figure with the telescope on the 240px short hero; 40%
   down keeps the whole figure in. Tablet width up only, like f4-hero-low. */
@media (min-width: 768px) {
  .hero .hero-bg img.f4-hero-high {
    object-position: 50% 40%;
  }
}

/* A SHORT HERO ABOUT 20% TALLER (Chris, 2026-11-07). Add alongside
   f4-hero-short on the <section> for a page that wants a little more of its
   image showing. Desktop and tablet: the 15rem minimum height is what sets
   the height there, so 18rem takes it from 240px to 288px. Phones: the
   padding sets it, and 3rem to 4.25rem takes image-license.html from 201px
   to about 241px. First used on image-license.html. */
.hero.f4-hero-short.f4-hero-taller .hero-page-title {
  padding-top: 4.25rem;
  padding-bottom: 4.25rem;
}
@media (min-width: 768px) {
  .hero.f4-hero-short.f4-hero-taller .hero-page-title {
    padding-top: 4rem;
    padding-bottom: 4rem;
    min-height: 18rem;
  }
}

/* COMPACT HERO WIDGET: NO BOTTOM RULE ON PHONES (Chris, 2026-11-07). Below
   xl the template gives .search-hero a 1px light bottom border, meant for a
   search bar that sits in its own band under the hero. The compact widget
   sits inside the hero image instead, so on a phone the border showed as a
   stray white line across the image under the search box (reported on
   cities-by-interest.html). Applies to every hero that carries the widget:
   index, destinations, travel-advice-index, cities-by-interest and
   airport-transfers-by-destination. */
@media (max-width: 1199.98px) {
  .hero .search-tours.search-hero-compact {
    border-bottom: 0;
  }
}

/* A SHORT HERO ABOUT 20% TALLER, FOR ONE WHOSE TEXT SETS ITS HEIGHT (Chris,
   2026-11-07). f4-hero-taller works by raising the minimum height, which only
   helps where the title is short enough for the minimum to be what sets the
   height. travel-index.html has an intro paragraph under its title, so its
   text already makes it 277px at 1440, past even the taller minimum. This
   adds the room as padding instead: 4rem to 5.75rem on desktop (277px to
   333px) and 3rem to 5rem on a phone (322px to 386px). */
.hero.f4-hero-short.f4-hero-roomy .hero-page-title {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
  .hero.f4-hero-short.f4-hero-roomy .hero-page-title {
    padding-top: 5.75rem;
    padding-bottom: 5.75rem;
  }
}

/* A SHORT HERO ABOUT 15% TALLER (Chris, 2026-11-07). The in-between step
   for f4-hero-short pages, alongside f4-hero-taller (20%). Same method:
   desktop and tablet raise the minimum height (15rem to 17.25rem, 240px to
   276px); phones raise the padding (3rem to 3.75rem, 157px to 181px on
   contact.html). First used on contact.html. */
.hero.f4-hero-short.f4-hero-taller-15 .hero-page-title {
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
}
@media (min-width: 768px) {
  .hero.f4-hero-short.f4-hero-taller-15 .hero-page-title {
    padding-top: 4rem;
    padding-bottom: 4rem;
    min-height: 17.25rem;
  }
}

/* ONE SHADE LIGHTER HERO SHADING (Chris, 2026-11-07). Add to the hero
   <section> to take the scrim from the site's 50% black to 45%. Kept to a
   small step on purpose: on an image with white areas behind the title,
   white text over white under 45% is about 3.4:1, which still passes for
   large headings (3:1) but not for small text. First used on the
   Booking.com hotel review (city-reflection-plane), via the 'class' option
   in includes/hotel-review-template.php. */
.hero.f4-hero-lighter .hero-bg::after {
  background-color: rgba(var(--bs-black-rgb), 0.45);
}

/* HERO CROP TO THE BOTTOM EDGE (Chris, 2026-11-07). For the Skyscanner hotel
   review's double-city-light, which is two rows of buildings: the centred
   crop of the 294px review hero fell between them, showing the base of one
   row and the tops of the other. Anchored to the bottom, the hero shows the
   lower row whole, with the plane above it. Tablet width up only. Set
   through the 'imgclass' option in includes/hotel-review-template.php. */
@media (min-width: 768px) {
  .hero .hero-bg img.f4-hero-crop-bottom {
    object-position: 50% 100%;
  }
}

/* HERO CROP 90% DOWN (Chris, 2026-11-07). For the Booking.com hotel review's
   double-city-blue, two rows of white buildings on blue: the centred crop
   of the 294px review hero cut through both rows. 90% down shows the lower
   row whole, with its plane. Tablet width up
   only. Set through the 'imgclass' option in
   includes/hotel-review-template.php. */
@media (min-width: 768px) {
  .hero .hero-bg img.f4-hero-crop-90 {
    object-position: 50% 90%;
  }
}

/* ---------------------------------------------------------------- GetTerms
   Cookie consent, 2026-11-08. GetTerms draws its round "reopen cookie
   preferences" button (about 57x52px, 15px from the bottom-right corner) in
   a shadow root that this stylesheet cannot reach, so the site moves its own
   things out of the way instead. cookie-widget-wrapper is the element
   GetTerms adds to every page; keying off it means nothing moves if GetTerms
   fails to load.

   1. The scroll-to-top arrow, normally 1.5rem from the corner, sits above
      the GetTerms button. With the partner bar showing it is already at
      100px (rule further up), which clears it, and that rule is more
      specific than this one so it still wins.
   2. The phone partner bar (includes/sidebar-partners.php) keeps its View
      and dismiss buttons clear of the GetTerms button with a wider right
      padding. Set here rather than with a pe-* utility because it depends
      on GetTerms being present. */
body:has(cookie-widget-wrapper) .scroll-top {
  bottom: 5.5rem;
}
.f4-mobile-bar-inner {
  padding-right: 1rem;
}
body:has(cookie-widget-wrapper) .f4-mobile-bar-inner {
  padding-right: 5.25rem;
}

/* Opt-in panel shown in a third-party widget's slot while the widget waits
   for consent (includes/consent-widget-optin.php). */
.f4-consent-optin {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.5rem 0.5rem;
}
.f4-consent-optin-title {
  font-size: 1.15rem;
  color: var(--bs-text-emphasis);
}

/* Phone partner bar "View" button (includes/sidebar-partners.php), navy
   since 2026-11-08. It sat green beside the green GetTerms reopen button and
   the green scroll-to-top arrow, three green buttons in one corner, and the
   one that earns was the hardest to pick out. Navy is the site's other accent
   (topbar, slider arrows) and white on it is about 11:1, where white on the
   primary green is 2.67:1. Turns green on hover/tap like the site's other
   buttons. Set through Bootstrap's button variables, so .btn's own states
   (focus ring, active, disabled) still work.

   Padding trimmed (Chris, same day) to make the button slightly smaller
   with the text size unchanged: 10px 16px gave 48x71px, 6px 12px gives
   about 40x63px, still a comfortable tap target. Written as a padding on
   .btn.f4-mobile-bar-cta because the site's .btn rule sets padding
   directly, which Bootstrap's --bs-btn-padding-* variables cannot reach. */
.btn.f4-mobile-bar-cta {
  padding: 0.375rem 0.75rem;
}
.f4-mobile-bar-cta {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-dark-blue);
  --bs-btn-border-color: var(--bs-dark-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-dark-blue-rgb);
}