@charset "utf-8";

/*
Theme Name: Hibotour - Tours & Travel Agency HTML5 Template.
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Typography
   1.2 Spacing
   1.3 Buttons
   1.4 Section Title
   1.5 Helpers & Reveals
2. Preloader
3. Header
4. Offcanvas Menu
5. Custom Select
6. Hero
7. Trip Finder
8. Route Stops
9. Regions
10. Featured Journey
11. Journey Slider
12. Guide Film
13. Reviews
14. Festivals
15. Polaroid CTA
16. Journal
17. Palace Hero
18. Editorial Quote
19. Jharokha
20. Stays Mosaic
21. Card Rails
22. Numbers Band
23. Reviews Two
24. Desert Nights
25. Journal Rail
26. Polaroid Strip
27. Doorway Hero
28. About Collage
29. Spice Route
30. Slow Water
31. Wellness
32. Culinary Journeys
33. Journal Postmarks
34. Forms
35. Sub Header
36. Tour Cards
37. Tours Page
38. Tour Details
39. Trip Planner
40. Destinations
41. Destination Details
42. Offers
43. About
44. Team
45. Gallery
46. Contact
47. Journal Pages
48. Article
49. Account
50. Error Page
51. Coming Soon
52. Footer
53. Back To Top
54. Media Cursor
55. Rising Lanterns
*/

/*======================
1. General
========================*/
:root {
  --ht-color-saffron: #F79838;
  --ht-color-saffron-rgb: 247, 152, 56;
  --ht-color-saffron-deep: #B45A12;
  --ht-color-saffron-text: #C4661A;
  --ht-color-green: #0C843C;
  --ht-color-green-rgb: 12, 132, 60;
  --ht-color-ivory: #FAF7F2;
  --ht-color-ivory-rgb: 250, 247, 242;
  --ht-color-sand: #EFE7DC;
  --ht-color-sand-rgb: 239, 231, 220;
  --ht-color-stone: #6F6258;
  --ht-color-stone-rgb: 111, 98, 88;
  --ht-color-night: #1D1611;
  --ht-color-night-rgb: 29, 22, 17;
  --ht-color-ink: #2A211C;
  --ht-color-ink-rgb: 42, 33, 28;
  --ht-color-body: #6B625B;
  --ht-color-white: #FFFFFF;
  --ht-color-white-rgb: 255, 255, 255;
  --ht-color-border: #E7DDCF;
  --ht-color-border-2: #D9CBB8;
  --ht-ff-heading: 'Kurale', Georgia, serif;
  --ht-ff-body: 'Mukta', sans-serif;
  --ht-fs-h1: clamp(44px, 4.6vw, 72px);
  --ht-fs-h2: clamp(32px, 3.2vw, 48px);
  --ht-fs-h3: 26px;
  --ht-fs-h4: 21px;
  --ht-fs-h5: 18px;
  --ht-fs-h6: 16px;
  --ht-radius: 0px;
  --ht-arch: 9999px 9999px 0 0;
  --ht-shadow: 0 20px 50px rgba(42, 33, 28, 0.08);
  --ht-shadow-lg: 0 34px 80px rgba(42, 33, 28, 0.16);
  --ht-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* :root, not html: Bootstrap sets :root { scroll-behavior: smooth }, which outranks html and would turn every
   instant jump (ScrollTrigger's re-measuring, back to top) into a glide */
:root {
  scroll-behavior: auto;
}
body {
  font-family: var(--ht-ff-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ht-color-body);
  background-color: var(--ht-color-ivory);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.oc-open {
  overflow: hidden;
}
a {
  text-decoration: none;
  color: inherit;
  transition: color 0.35s var(--ht-ease);
}
a:hover {
  color: var(--ht-color-saffron-deep);
}
img {
  max-width: 100%;
  height: auto;
}
button {
  font-family: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: var(--ht-color-ink);
}
::selection {
  background: var(--ht-color-saffron);
  color: var(--ht-color-ink);
}
[class^="flaticon-"],
[class*=" flaticon-"] {
  display: inline-block;
  line-height: 1;
}
/* the Flaticon set draws its glyphs about 0.12em above the centre of the em
   box (Font Awesome does not), so they are brought back down to sit true */
[class^="flaticon-"]::before,
[class*=" flaticon-"]::before {
  position: relative;
  top: 0.12em;
}
.ht-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 1600px) {
  .container {
    max-width: 1440px;
  }
}
.container-wide {
  max-width: 1760px;
  padding-left: 40px;
  padding-right: 40px;
  margin: 0 auto;
  width: 100%;
}

/*---- 1.1 Typography ----*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ht-ff-heading);
  color: var(--ht-color-ink);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.005em;
}
h1 {
  font-size: var(--ht-fs-h1);
  line-height: 1.08;
}
h2 {
  font-size: var(--ht-fs-h2);
  line-height: 1.12;
}
h3 {
  font-size: var(--ht-fs-h3);
  line-height: 1.25;
}
h4 {
  font-size: var(--ht-fs-h4);
  line-height: 1.3;
}
h5 {
  font-size: var(--ht-fs-h5);
  line-height: 1.4;
}
h6 {
  font-size: var(--ht-fs-h6);
  line-height: 1.5;
}
p {
  margin-bottom: 0;
}
p + p {
  margin-top: 18px;
}
.ht-lead {
  font-size: 19px;
  line-height: 1.7;
  color: var(--ht-color-body);
}
.ht-small {
  font-size: 14px;
  line-height: 1.65;
}
.ht-caps {
  font-family: var(--ht-ff-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.6;
}
.ht-num {
  font-family: var(--ht-ff-heading);
  font-variant-numeric: lining-nums tabular-nums;
}
.ht-accent {
  color: var(--ht-color-saffron-text);
}
.ht-green {
  color: var(--ht-color-green);
}
.ht-ink {
  color: var(--ht-color-ink);
}

/*---- 1.2 Spacing ----*/
.sec-pt-120 {
  padding-top: 120px;
}
.sec-pb-120 {
  padding-bottom: 120px;
}
.sec-pt-90 {
  padding-top: 90px;
}
.sec-pb-90 {
  padding-bottom: 90px;
}
.sec-pt-60 {
  padding-top: 60px;
}
.sec-pb-60 {
  padding-bottom: 60px;
}
.ht-bg-ivory {
  background-color: var(--ht-color-ivory);
}
.ht-bg-white {
  background-color: var(--ht-color-white);
}
.ht-bg-sand {
  background-color: var(--ht-color-sand);
}
.ht-bg-night {
  background-color: var(--ht-color-night);
  color: rgba(var(--ht-color-ivory-rgb), 0.72);
}
.ht-bg-night h1,
.ht-bg-night h2,
.ht-bg-night h3,
.ht-bg-night h4,
.ht-bg-night h5,
.ht-bg-night h6 {
  color: var(--ht-color-ivory);
}

/*---- 1.3 Buttons ----*/
.ht-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 56px;
  padding: 0 32px;
  font-family: var(--ht-ff-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ht-color-ink);
  background-color: var(--ht-color-saffron);
  border-radius: var(--ht-radius);
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: color 0.4s var(--ht-ease);
}
/* The ink wash rises from the foot of the button like a sunset reversed */
.ht-btn::before {
  position: absolute;
  content: "";
  inset: 0;
  background-color: var(--ht-color-ink);
  transform: scaleY(0);
  transform-origin: center bottom;
  transition: transform 0.5s var(--ht-ease);
  z-index: -1;
}
.ht-btn:hover {
  color: var(--ht-color-ivory);
}
.ht-btn:hover::before {
  transform: scaleY(1);
}
.ht-btn .btn-ic {
  position: relative;
  display: block;
  width: 13px;
  height: 12px;
  overflow: hidden;
}
.ht-btn .btn-ic i {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 12px;
  line-height: 12px;
  transition: transform 0.45s var(--ht-ease);
}
.ht-btn .btn-ic i + i {
  transform: translateX(-140%);
}
.ht-btn:hover .btn-ic i:first-child {
  transform: translateX(140%);
}
.ht-btn:hover .btn-ic i + i {
  transform: translateX(0);
}
.ht-btn-line {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--ht-color-saffron);
}
.ht-btn-line::before {
  background-color: var(--ht-color-saffron);
}
.ht-btn-line:hover {
  color: var(--ht-color-ink);
}
.ht-btn-light {
  background-color: transparent;
  color: var(--ht-color-ivory);
  box-shadow: inset 0 0 0 1px rgba(var(--ht-color-ivory-rgb), 0.55);
}
.ht-btn-light::before {
  background-color: var(--ht-color-saffron);
}
.ht-btn-light:hover {
  color: var(--ht-color-ink);
}
.ht-btn-sm {
  height: 46px;
  padding: 0 24px;
  font-size: 12px;
}
.ht-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ht-color-ink);
  padding-bottom: 5px;
}
.ht-link::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--ht-color-saffron);
  transform: scaleX(0.35);
  transform-origin: left center;
  transition: transform 0.5s var(--ht-ease);
}
.ht-link:hover {
  color: var(--ht-color-saffron-deep);
}
.ht-link:hover::after {
  transform: scaleX(1);
}
.ht-link.is-light {
  color: var(--ht-color-white);
}
.ht-link.is-light:hover {
  color: var(--ht-color-saffron);
}

/*---- 1.4 Section Title ----*/
/* The section title repeats the logo lockup: eyebrow, title, a saffron hairline
   where the logo keeps its rule, then the lead in the tagline's place. */
.ht-section-title {
  margin-bottom: 56px;
}
.ht-section-title .eyebrow {
  display: block;
  margin-bottom: 18px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.ht-section-title .title {
  margin-bottom: 0;
}
.ht-section-title .title-rule {
  display: block;
  width: 72px;
  height: 1.5px;
  margin: 26px 0 24px;
  background-color: var(--ht-color-saffron);
  transform-origin: left center;
}
.ht-section-title .ht-lead {
  max-width: 620px;
}
.ht-section-title.text-center .title-rule {
  margin-left: auto;
  margin-right: auto;
  transform-origin: center center;
}
.ht-section-title.text-center .ht-lead {
  margin-left: auto;
  margin-right: auto;
}
.ht-bg-night .ht-section-title .eyebrow {
  color: var(--ht-color-saffron);
}
.ht-bg-night .ht-section-title .ht-lead {
  color: rgba(var(--ht-color-ivory-rgb), 0.72);
}
/* a section title set on a photograph */
.ht-section-title.is-light .title {
  color: var(--ht-color-ivory);
}
.ht-section-title.is-light .eyebrow,
.ht-section-title.is-light .ht-accent {
  color: var(--ht-color-saffron);
}
.ht-section-title.is-light .ht-lead {
  color: rgba(var(--ht-color-ivory-rgb), 0.78);
}
/* tabs that filter a set of items, each with its count */
.ht-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ht-tab {
  padding: 13px 20px;
  border: 1px solid var(--ht-color-border-2);
  background-color: var(--ht-color-white);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ht-color-ink);
  transition: background-color 0.3s var(--ht-ease), border-color 0.3s var(--ht-ease), color 0.3s var(--ht-ease);
}
.ht-tab span {
  margin-left: 6px;
  color: var(--ht-color-saffron-deep);
}
.ht-tab:hover {
  border-color: var(--ht-color-ink);
}
.ht-tab.is-active {
  border-color: var(--ht-color-ink);
  background-color: var(--ht-color-ink);
  color: var(--ht-color-white);
}
.ht-tab.is-active span {
  color: var(--ht-color-saffron);
}
.ht-tab.is-empty {
  opacity: 0.45;
}
/* a round play button with a slowly turning dashed ring */
.story-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
  border-radius: 50%;
  background-color: var(--ht-color-saffron);
  font-size: 22px;
  color: var(--ht-color-ink);
  transition: transform 0.4s var(--ht-ease);
}
.story-play .play-ring {
  position: absolute;
  inset: -14px;
  border: 1.5px dashed rgba(var(--ht-color-white-rgb), 0.9);
  border-radius: 50%;
  animation: ht-spin 16s linear infinite;
}
a:hover .story-play {
  transform: scale(1.06);
}
.story-label {
  position: absolute;
  left: 34px;
  bottom: 28px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ht-color-white);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .story-play .play-ring {
    animation: none;
  }
}

/*---- 1.5 Helpers & Reveals ----*/
.ht-frame {
  position: relative;
  display: block;
  overflow: hidden;
}
.ht-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: center top;
  transition: transform 1.2s var(--ht-ease);
}
.ht-frame:hover img {
  transform: scale(1.06);
}
/* The Mughal window: a full half-circle crown on any width */
.ht-arch {
  border-radius: var(--ht-arch);
}
.ht-arch-line {
  position: relative;
}
.ht-arch-line::after {
  position: absolute;
  content: "";
  inset: -12px -12px 0;
  border: 1px solid rgba(var(--ht-color-saffron-rgb), 0.8);
  border-bottom: 0;
  border-radius: var(--ht-arch);
  pointer-events: none;
}
.ht-watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  max-width: none;
}
.ht-draw {
  transform-origin: left center;
}
.ht-draw.is-center {
  transform-origin: center center;
}
.ht-draw.is-vertical {
  transform-origin: center top;
}
/* a country flag beside the name it belongs to (flag-icons, 4:3) */
img.flag,
img.option-flag {
  display: inline-block;
  width: 20px;
  height: 15px;
  margin: 0 8px 0 0;
  object-fit: cover;
  vertical-align: -2px;
  box-shadow: 0 0 0 1px rgba(var(--ht-color-ink-rgb), 0.12);
}
img.option-flag {
  margin-right: 10px;
}
.ht-select .select-value img.option-flag {
  vertical-align: -2px;
}
.subheader-eyebrow img.flag,
.dest-kicker img.flag {
  width: 22px;
  height: 16.5px;
  vertical-align: -3px;
}
/* anything a filter has set aside */
.is-filtered-out {
  display: none !important;
}
.visually-hidden-label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*======================
2. Preloader
========================*/
/* The overlay is the window's own spread shadow: the arch starts filled with
   ivory, empties to show the hero through it, then opens past the viewport. */
.ht-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
}
.ht-preloader .pre-window {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 210px;
  height: 290px;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(var(--ht-color-saffron-rgb), 0);
  border-bottom: 0;
  border-radius: var(--ht-arch);
  background-color: var(--ht-color-ivory);
  box-shadow: 0 0 0 200vmax var(--ht-color-ivory);
}
.ht-preloader .pre-window::before {
  position: absolute;
  content: "";
  top: -16px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background-color: var(--ht-color-saffron);
}
.ht-preloader .pre-logo {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 164px;
  transform: translate(-50%, -50%);
}
.ht-preloader .pre-sill {
  position: absolute;
  top: calc(50% + 145px);
  left: 50%;
  width: 250px;
  height: 1.5px;
  margin-left: -125px;
  background-color: var(--ht-color-saffron);
}

/*======================
3. Header
========================*/
/* The sticky header shrinks as the page scrolls; margin-bottom gives the page
   back exactly what the header gives up, so the content below never moves */
.ht-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(var(--ht-color-ivory-rgb), 0.97);
  transition: box-shadow 0.4s var(--ht-ease), background-color 0.4s var(--ht-ease), margin-bottom 0.4s var(--ht-ease);
}
.ht-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  height: 100px;
  transition: height 0.4s var(--ht-ease);
}
.ht-header.is-scrolled {
  margin-bottom: 18px;
  box-shadow: 0 12px 34px rgba(var(--ht-color-ink-rgb), 0.08);
}
.ht-header.is-scrolled .header-inner {
  height: 82px;
}
.ht-logo {
  position: relative;
  display: block;
  flex-shrink: 0;
}
.ht-logo img {
  display: block;
  height: 66px;
  width: auto;
  transition: height 0.4s var(--ht-ease);
}
.ht-header.is-scrolled .ht-logo img {
  height: 56px;
}
.ht-logo .logo-light {
  display: none;
}
.ht-nav > ul {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ht-nav li {
  position: relative;
}
.ht-nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 15px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ht-color-ink);
}
.ht-nav > ul > li > a i {
  font-size: 9px;
  transition: transform 0.35s var(--ht-ease);
}
.ht-nav > ul > li:hover > a,
.ht-nav > ul > li.active > a {
  color: var(--ht-color-saffron-deep);
}
.ht-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.ht-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 240px;
  padding: 14px 0;
  list-style: none;
  background-color: var(--ht-color-white);
  border-top: 2px solid var(--ht-color-saffron);
  box-shadow: var(--ht-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.35s var(--ht-ease), transform 0.35s var(--ht-ease), visibility 0.35s;
}
.ht-nav li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ht-nav .sub-menu .sub-menu {
  top: -16px;
  left: 100%;
}
.ht-nav .sub-menu li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 26px;
  font-size: 15px;
  color: var(--ht-color-ink);
  transition: color 0.3s var(--ht-ease), padding 0.3s var(--ht-ease);
}
.ht-nav .sub-menu li a i {
  font-size: 9px;
}
.ht-nav .sub-menu li:hover > a,
.ht-nav .sub-menu li.active > a {
  color: var(--ht-color-saffron-deep);
  padding-left: 32px;
}
.ht-header .header-right {
  display: flex;
  align-items: center;
  gap: 22px;
}
.header-call {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ht-color-ink);
}
.header-call .call-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(var(--ht-color-saffron-rgb), 0.7);
  color: var(--ht-color-saffron-deep);
  font-size: 15px;
  transition: background-color 0.35s var(--ht-ease), color 0.35s var(--ht-ease);
}
.header-call:hover .call-ic {
  background-color: var(--ht-color-saffron);
  color: var(--ht-color-ink);
}
.header-call .call-text {
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  font-size: 16px;
  font-weight: 600;
}
.header-call .call-text small {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ht-color-body);
}
.ht-currency {
  position: relative;
}
.ht-currency select {
  height: 44px;
  padding: 0 26px 0 14px;
  border: 1px solid var(--ht-color-border-2);
  border-radius: 0;
  background-color: transparent;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ht-color-ink);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.3s var(--ht-ease);
}
.ht-currency select:hover,
.ht-currency select:focus {
  border-color: var(--ht-color-saffron);
}
.ht-currency i {
  position: absolute;
  top: 50%;
  right: 11px;
  margin-top: -5px;
  font-size: 9px;
  color: var(--ht-color-saffron-deep);
  pointer-events: none;
}
.ht-offcanvas .oc-currency {
  margin-bottom: 22px;
}
.ht-offcanvas .oc-currency label {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ht-color-body);
}
.ht-offcanvas .oc-currency select {
  width: 160px;
}
.ht-offcanvas .oc-currency i {
  top: auto;
  bottom: 17px;
  right: auto;
  left: 138px;
  margin-top: 0;
}
.ht-menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: 44px;
  height: 44px;
}
.ht-menu-toggle span {
  display: block;
  height: 1.5px;
  width: 28px;
  background-color: var(--ht-color-ink);
  transition: width 0.35s var(--ht-ease), background-color 0.35s var(--ht-ease);
}
.ht-menu-toggle span:nth-child(2) {
  width: 20px;
}
.ht-menu-toggle span:nth-child(3) {
  width: 14px;
}
.ht-menu-toggle:hover span {
  width: 28px;
  background-color: var(--ht-color-saffron-deep);
}
/* Reading progress rides on the logo's hairline, drawn along the header foot */
.ht-header .header-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background-color: var(--ht-color-saffron);
  transform: scaleX(0);
  transform-origin: left center;
}
/* Style 2 (Home 2): transparent over the hero, logo left and the full nav
   pushed right; on scroll it turns ivory and a saffron hairline draws in */
.ht-header.header-style-two {
  position: fixed;
  left: 0;
  right: 0;
  background-color: transparent;
}
.header-style-two::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: rgba(var(--ht-color-white-rgb), 0.18);
  transform-origin: left center;
  transition: background-color 0.4s var(--ht-ease), transform 0.9s var(--ht-ease);
}
.header-style-two .ht-nav {
  margin-left: auto;
}
.header-style-two .ht-logo .logo-main {
  display: none;
}
.header-style-two .ht-logo .logo-light {
  display: block;
}
.header-style-two .ht-nav > ul > li > a {
  color: var(--ht-color-white);
}
.header-style-two .ht-nav > ul > li:hover > a,
.header-style-two .ht-nav > ul > li.active > a {
  color: var(--ht-color-saffron);
}
.header-style-two .ht-currency.ht-select .select-button {
  border-color: rgba(var(--ht-color-white-rgb), 0.4);
  color: var(--ht-color-white);
}
.header-style-two .ht-currency.ht-select .select-button i {
  color: var(--ht-color-saffron);
}
.header-style-two .ht-menu-toggle span {
  background-color: var(--ht-color-white);
}
.ht-header.header-style-two.is-scrolled {
  background-color: rgba(var(--ht-color-ivory-rgb), 0.97);
}
.header-style-two.is-scrolled::before {
  background-color: rgba(var(--ht-color-saffron-rgb), 0.45);
  animation: ht-draw-in 0.9s var(--ht-ease);
}
.header-style-two.is-scrolled .ht-logo .logo-main {
  display: block;
}
.header-style-two.is-scrolled .ht-logo .logo-light {
  display: none;
}
.header-style-two.is-scrolled .ht-nav > ul > li > a {
  color: var(--ht-color-ink);
}
.header-style-two.is-scrolled .ht-nav > ul > li:hover > a,
.header-style-two.is-scrolled .ht-nav > ul > li.active > a {
  color: var(--ht-color-saffron-deep);
}
.header-style-two.is-scrolled .ht-currency.ht-select .select-button {
  border-color: var(--ht-color-border-2);
  color: var(--ht-color-ink);
}
.header-style-two.is-scrolled .ht-currency.ht-select .select-button i {
  color: var(--ht-color-saffron-deep);
}
.header-style-two.is-scrolled .ht-menu-toggle span {
  background-color: var(--ht-color-ink);
}
@keyframes ht-draw-in {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
/* Style 3 (Home 3): stacked - the phone, the full lockup and the currency on
   top, the nav row beneath; on scroll the top row folds away and a mark shows */
.header-style-three .header-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 104px;
  transition: height 0.4s var(--ht-ease), opacity 0.3s var(--ht-ease);
}
.header-style-three .header-top-left {
  justify-self: start;
}
.header-style-three .header-top-right {
  justify-self: end;
}
.header-style-three .ht-logo img {
  height: 68px;
}
.ht-header.header-style-three.is-scrolled {
  margin-bottom: 104px;
}
.header-style-three .header-nav-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  border-top: 1px solid var(--ht-color-border);
  transition: border-color 0.4s var(--ht-ease);
}
.header-style-three .header-right {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.header-style-three .header-right .ht-btn {
  height: 46px;
  padding: 0 22px;
  font-size: 12px;
}
.header-style-three .header-mark {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -21px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.7);
  transition: opacity 0.4s var(--ht-ease), transform 0.4s var(--ht-ease), visibility 0.4s;
}
.header-style-three .header-mark img {
  display: block;
  width: 42px;
  height: 42px;
}
.header-style-three.is-scrolled .header-top {
  height: 0;
  overflow: hidden;
  opacity: 0;
}
.header-style-three.is-scrolled .header-nav-row {
  border-top-color: transparent;
}
.header-style-three.is-scrolled .header-mark {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/*======================
4. Offcanvas Menu
========================*/
.ht-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  width: 440px;
  max-width: 90vw;
  height: 100vh;
  padding: 38px 44px 44px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--ht-color-ivory);
  visibility: hidden;
  transform: translateX(104%);
  transition: transform 0.7s var(--ht-ease), visibility 0.7s;
}
.ht-offcanvas.is-open {
  visibility: visible;
  transform: translateX(0);
}
.ht-offcanvas .oc-mandala {
  bottom: -2px;
  left: 50%;
  width: 560px;
  margin-left: -280px;
  opacity: 0.55;
}
.ht-offcanvas .offcanvas-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 26px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--ht-color-border);
}
.ht-offcanvas .offcanvas-head img {
  display: block;
  height: 60px;
  width: auto;
}
.ht-offcanvas .offcanvas-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ht-color-border-2);
  color: var(--ht-color-ink);
  font-size: 15px;
  transition: background-color 0.35s var(--ht-ease), border-color 0.35s var(--ht-ease), transform 0.5s var(--ht-ease);
}
.ht-offcanvas .offcanvas-close:hover {
  background-color: var(--ht-color-saffron);
  border-color: var(--ht-color-saffron);
  transform: rotate(90deg);
}
.ht-offcanvas .offcanvas-nav {
  position: relative;
}
.ht-offcanvas .oc-group + .oc-group {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--ht-color-border);
}
.ht-offcanvas .oc-label {
  display: block;
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.ht-offcanvas .oc-group ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.ht-offcanvas .oc-group li {
  width: calc(50% - 10px);
}
.ht-offcanvas .oc-group li a {
  display: inline-block;
  font-family: var(--ht-ff-heading);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ht-color-ink);
  transition: color 0.3s var(--ht-ease), transform 0.3s var(--ht-ease);
}
.ht-offcanvas .oc-group li a:hover,
.ht-offcanvas .oc-group li a.is-current {
  color: var(--ht-color-saffron-deep);
  transform: translateX(5px);
}
.ht-offcanvas .offcanvas-foot {
  position: relative;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--ht-color-border);
}
.ht-offcanvas .offcanvas-foot .label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ht-color-body);
}
.ht-offcanvas .offcanvas-foot .oc-contact {
  display: block;
  margin-top: 4px;
  font-family: var(--ht-ff-heading);
  font-size: 21px;
  color: var(--ht-color-ink);
}
.ht-offcanvas .offcanvas-foot .ht-social {
  margin-top: 18px;
}
.ht-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background-color: rgba(var(--ht-color-night-rgb), 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ht-ease), visibility 0.5s;
}
.ht-offcanvas-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.ht-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ht-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(var(--ht-color-stone-rgb), 0.35);
  font-size: 14px;
  color: var(--ht-color-ink);
  transition: background-color 0.35s var(--ht-ease), border-color 0.35s var(--ht-ease), color 0.35s var(--ht-ease), transform 0.35s var(--ht-ease);
}
.ht-social a:hover {
  background-color: var(--ht-color-saffron);
  border-color: var(--ht-color-saffron);
  color: var(--ht-color-ink);
  transform: translateY(-3px);
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit); a styled button and
   listbox are drawn over them and keep them in sync. */
.ht-select {
  position: relative;
}
.ht-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}
.ht-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 36px;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  color: var(--ht-color-ink);
}
.ht-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ht-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--ht-color-saffron-deep);
  transition: transform 0.35s var(--ht-ease);
}
.ht-select.is-open .select-button i {
  transform: rotate(180deg);
}
.ht-select .select-list {
  position: absolute;
  top: calc(100% + 18px);
  left: -30px;
  z-index: 30;
  min-width: calc(100% + 60px);
  max-height: 340px;
  padding: 10px 0;
  overflow-y: auto;
  list-style: none;
  background-color: var(--ht-color-white);
  border-top: 2px solid var(--ht-color-saffron);
  box-shadow: var(--ht-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--ht-ease), transform 0.3s var(--ht-ease), visibility 0.3s;
}
.ht-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 18px);
  border-top: 0;
  border-bottom: 2px solid var(--ht-color-saffron);
  transform: translateY(-10px);
}
.ht-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ht-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 26px;
  font-size: 16px;
  color: var(--ht-color-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ht-ease), color 0.2s var(--ht-ease);
}
.ht-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ht-color-green);
}
.ht-select .select-option .option-meta.is-none {
  color: var(--ht-color-body);
}
.ht-select .select-option.is-focused,
.ht-select .select-option:hover {
  background-color: var(--ht-color-ivory);
}
.ht-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.ht-select .select-option.is-disabled:hover {
  background-color: transparent;
}
.ht-select .select-option.is-selected {
  color: var(--ht-color-saffron-deep);
}
.ht-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--ht-color-saffron-deep);
}
/* the currency switch keeps its outlined box */
.ht-currency.ht-select .select-button {
  width: auto;
  min-width: 98px;
  height: 44px;
  padding: 0 14px;
  gap: 10px;
  border: 1px solid var(--ht-color-border-2);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: border-color 0.3s var(--ht-ease);
}
/* the chevron sits in the button's flow, after the flag and code (the absolute
   rule above is for the native select's icon, which the custom select hides) */
.ht-currency.ht-select .select-button i {
  position: static;
  margin: 0;
}
/* the flag and code never shrink under the chevron */
.ht-currency.ht-select .select-value {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  overflow: visible;
}
.ht-currency.ht-select:hover .select-button,
.ht-currency.ht-select.is-open .select-button {
  border-color: var(--ht-color-saffron);
}
.ht-currency.ht-select .select-list {
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
}
.ht-currency.ht-select .select-option {
  padding: 8px 18px;
  font-size: 14.5px;
}
.ht-select > i {
  display: none;
}
.ht-offcanvas .oc-currency.ht-select .select-button {
  width: 160px;
}

/*======================
6. Hero
========================*/
/* The arch is sized from the viewport so the Trip Finder always lands above
   the fold - 1366x768 laptops included. */
.ht-hero {
  --ht-hero-h: clamp(430px, calc(100vh - 330px), 700px);
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 100px);
  padding: 44px 0 110px;
  overflow: hidden;
}
/* The same view, washed and widened behind everything: the arch is a window
   onto it. The veil keeps both text columns on a calm ground. */
.ht-hero .hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.ht-hero .hero-backdrop img {
  position: absolute;
  inset: -30px;
  width: calc(100% + 60px);
  height: calc(100% + 60px);
  max-width: none;
  object-fit: cover;
  object-position: center 35%;
  filter: blur(10px) saturate(0.85);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.4s var(--ht-ease), transform 9s ease-out;
}
.ht-hero .hero-backdrop img.is-active {
  opacity: 1;
  transform: scale(1);
}
.ht-hero .hero-backdrop::after {
  position: absolute;
  content: "";
  inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--ht-color-ivory-rgb), 0.97) 0%, rgba(var(--ht-color-ivory-rgb), 0.9) 28%, rgba(var(--ht-color-ivory-rgb), 0.6) 50%, rgba(var(--ht-color-ivory-rgb), 0.9) 72%, rgba(var(--ht-color-ivory-rgb), 0.97) 100%),
    linear-gradient(180deg, rgba(var(--ht-color-ivory-rgb), 0) 55%, rgba(var(--ht-color-ivory-rgb), 1) 100%);
}
/* A half mandala rising behind the jharokha like a sunrise */
.ht-hero .hero-mandala {
  left: 50%;
  bottom: 150px;
  width: 1380px;
  margin-left: -690px;
  opacity: 0.22;
  z-index: -1;
}
.ht-hero .hero-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: clamp(48px, 5vw, 110px);
  align-items: center;
}
.ht-hero .hero-copy {
  grid-column: 1;
  justify-self: end;
  max-width: clamp(440px, 31vw, 600px);
  padding-bottom: 80px;
}
.ht-hero .hero-eyebrow {
  display: block;
  margin-bottom: 20px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.ht-hero .hero-title {
  margin: 0;
  font-size: clamp(42px, 4.1vw, 80px);
  line-height: 1.08;
}
.ht-hero .hero-rule {
  display: block;
  width: 72px;
  height: 1.5px;
  margin: 28px 0 24px;
  background-color: var(--ht-color-saffron);
}
.ht-hero .hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 32px;
}
.ht-hero .hero-arch {
  grid-column: 2;
  position: relative;
  width: calc(var(--ht-hero-h) * 0.76);
  height: var(--ht-hero-h);
}
.ht-hero .hero-arch .arch-finial {
  position: absolute;
  top: -30px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background-color: var(--ht-color-saffron);
}
.ht-hero .hero-arch-slider {
  height: 100%;
  overflow: hidden;
  box-shadow: var(--ht-shadow-lg);
}
.ht-hero .hero-arch-slider img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.ht-hero .hero-arch-slider .swiper-slide-active img {
  animation: ht-slow-zoom 9s ease-out both;
}
@keyframes ht-slow-zoom {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}
.ht-hero .hero-aside {
  grid-column: 3;
  justify-self: start;
  width: 100%;
  max-width: clamp(320px, 22vw, 420px);
  padding-bottom: 80px;
}
.ht-hero .caption-label,
.ht-hero .dep-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.ht-hero .caption-text {
  display: block;
  margin-top: 6px;
  font-family: var(--ht-ff-heading);
  font-size: clamp(21px, 1.35vw, 26px);
  line-height: 1.35;
  color: var(--ht-color-ink);
}
.ht-hero .hero-arch-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.ht-hero .hero-arch-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(var(--ht-color-saffron-rgb), 0.7);
  color: var(--ht-color-ink);
  font-size: 13px;
  transition: background-color 0.35s var(--ht-ease);
}
.ht-hero .hero-arch-nav button:hover {
  background-color: var(--ht-color-saffron);
}
.ht-hero .arch-count {
  font-size: 15px;
  color: var(--ht-color-body);
}
.ht-hero .arch-count b {
  font-weight: 400;
  color: var(--ht-color-ink);
}
.ht-hero .hero-departure {
  display: block;
  margin-top: 30px;
  padding: 18px 22px 20px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
  border-left: 2px solid var(--ht-color-saffron);
  transition: transform 0.4s var(--ht-ease), box-shadow 0.4s var(--ht-ease);
}
.ht-hero .hero-departure:hover {
  transform: translateY(-4px);
  box-shadow: var(--ht-shadow-lg);
  color: inherit;
}
.ht-hero .dep-title {
  display: block;
  margin-top: 4px;
  font-family: var(--ht-ff-heading);
  font-size: 22px;
  color: var(--ht-color-ink);
}
.ht-hero .dep-meta {
  display: block;
  margin-top: 2px;
  font-size: 15px;
}
.ht-hero .hero-scores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 28px;
}
.ht-hero .score-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
}
.ht-hero .score-item i {
  font-size: 18px;
  color: #4285F4;
}
.ht-hero .score-item img {
  width: 22px;
  height: 22px;
}
.ht-hero .score-item b {
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--ht-color-ink);
}
.ht-hero .score-note {
  width: 100%;
  font-size: 13.5px;
}
.ht-hero .score-note b {
  font-weight: 600;
  color: var(--ht-color-ink);
}

/*======================
7. Trip Finder
========================*/
.ht-finder {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 1420px;
  margin: -58px auto 0;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow-lg);
}
.ht-finder .finder-field {
  flex: 1 1 0;
  min-width: 0;
  padding: 24px 30px 20px;
  border-right: 1px solid var(--ht-color-border);
}
.ht-finder .finder-small {
  flex: 0 0 150px;
}
.ht-finder label {
  display: block;
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.ht-finder select,
.ht-finder input {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 500;
  color: var(--ht-color-ink);
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.ht-finder .finder-select {
  position: relative;
}
.ht-finder .finder-select select {
  padding-right: 22px;
  cursor: pointer;
}
.ht-finder .finder-select i {
  position: absolute;
  top: 50%;
  right: 2px;
  margin-top: -5px;
  font-size: 10px;
  color: var(--ht-color-saffron-deep);
  pointer-events: none;
}
.ht-finder .finder-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 260px;
  padding: 16px 26px;
  background-color: var(--ht-color-ivory);
  line-height: 1.35;
}
.ht-finder .result-from {
  font-size: 14.5px;
}
.ht-finder .result-from b {
  font-family: var(--ht-ff-heading);
  font-size: 28px;
  font-weight: 400;
  color: var(--ht-color-ink);
}
.ht-finder .result-meta {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ht-color-green);
}
.ht-finder .result-total {
  font-size: 13px;
  color: var(--ht-color-body);
}
.ht-finder .result-meta.is-closed {
  color: var(--ht-color-saffron-deep);
}
.ht-finder > .ht-btn {
  height: auto;
  min-height: 96px;
  padding: 0 38px;
}

/*======================
8. Route Stops
========================*/
.ht-promises .promise-route {
  position: relative;
}
/* The dotted road the five stops sit on, drawn on as the section arrives:
   odd stops read above the road, even stops below it. */
.ht-promises .route-line {
  position: absolute;
  top: 246px;
  left: 3%;
  right: 3%;
  height: 0;
  border-top: 2px dotted rgba(var(--ht-color-saffron-rgb), 0.85);
}
.ht-promises .promise-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
}
.ht-promises .promise-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ht-promises .stop-text {
  order: -1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 200px;
  padding-bottom: 22px;
}
.ht-promises .promise-stop:nth-child(even) {
  padding-top: 200px;
}
.ht-promises .promise-stop:nth-child(even) .stop-text {
  order: 2;
  height: auto;
  justify-content: flex-start;
  padding: 22px 0 0;
}
.ht-promises .stop-plate {
  line-height: 1;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background-color: var(--ht-color-white);
  box-shadow: 0 0 0 10px var(--ht-color-ivory), var(--ht-shadow);
  color: var(--ht-color-saffron-deep);
  font-size: 42px;
  transition: background-color 0.4s var(--ht-ease), color 0.4s var(--ht-ease);
}
.ht-promises .promise-stop:hover .stop-plate {
  background-color: var(--ht-color-saffron);
  color: var(--ht-color-ink);
}
.ht-promises .stop-num {
  display: block;
  font-size: 15px;
  color: var(--ht-color-saffron-deep);
}
.ht-promises .stop-title {
  margin: 4px 0 10px;
  font-size: 21px;
}
.ht-promises .promise-stop p {
  font-size: 15.5px;
  line-height: 1.65;
}

/*======================
9. Regions
========================*/
.ht-regions {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
/* The palace panorama shows through a sand veil, strongest behind the copy */
.ht-regions .regions-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.ht-regions .regions-bg img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 40%;
}
.ht-regions .regions-bg::after {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--ht-color-sand-rgb), 0.93) 0%, rgba(var(--ht-color-sand-rgb), 0.84) 45%, rgba(var(--ht-color-sand-rgb), 0.95) 100%);
}
.ht-regions .regions-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 50px;
}
.ht-regions .regions-head .ht-section-title {
  margin-bottom: 0;
}
.ht-regions .regions-head .title-rule {
  margin-bottom: 0;
}
.ht-regions .region-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
}
.ht-regions .region-tab {
  position: relative;
  padding: 8px 0;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ht-color-body);
  transition: color 0.3s var(--ht-ease);
}
.ht-regions .region-tab::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background-color: var(--ht-color-saffron);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ht-ease);
}
.ht-regions .region-tab:hover,
.ht-regions .region-tab.is-active {
  color: var(--ht-color-ink);
}
.ht-regions .region-tab.is-active::after {
  transform: scaleX(1);
}
.ht-regions .region-mosaic {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  grid-template-rows: 280px 250px;
  gap: 24px;
}
.ht-regions .mosaic-tile {
  position: relative;
  display: block;
  overflow: hidden;
  color: var(--ht-color-ivory);
}
.ht-regions .mosaic-tile.is-tall {
  grid-row: 1 / span 2;
}
.ht-regions .mosaic-tile.is-wide {
  grid-column: 2 / span 2;
}
.ht-regions .region-mosaic.is-three .mosaic-tile:not(.is-tall) {
  grid-column: 2 / span 2;
}
.ht-regions .tile-media {
  position: absolute;
  inset: 0;
}
.ht-regions .tile-media::after {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--ht-color-night-rgb), 0) 45%, rgba(var(--ht-color-night-rgb), 0.72) 100%);
}
.ht-regions .tile-body {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 22px;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
.ht-regions .tile-name {
  font-family: var(--ht-ff-heading);
  font-size: 28px;
  line-height: 1.15;
  color: var(--ht-color-ivory);
}
.ht-regions .tile-count {
  flex-shrink: 0;
  padding-bottom: 4px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ht-color-saffron);
}
.ht-regions .region-panel.is-active {
  animation: ht-panel-in 0.7s var(--ht-ease) both;
}
@keyframes ht-panel-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*======================
10. Featured Journey
========================*/
.ht-featured {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.ht-featured .featured-paisley {
  top: 60px;
  left: -260px;
  width: 640px;
  opacity: 0.35;
  z-index: -1;
}
.ht-featured .featured-copy {
  position: sticky;
  top: 130px;
}
.ht-featured .featured-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  padding: 22px 0;
  border-top: 1px solid var(--ht-color-border);
  border-bottom: 1px solid var(--ht-color-border);
  font-size: 15px;
}
.ht-featured .featured-facts b {
  display: block;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 400;
  color: var(--ht-color-ink);
}
.ht-featured .featured-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 28px;
}
.ht-featured .price-label {
  font-size: 15px;
}
.ht-featured .price-value {
  font-size: 40px;
  line-height: 1;
  color: var(--ht-color-ink);
}
.ht-featured .price-note {
  width: 100%;
  font-size: 14.5px;
}
.ht-featured .featured-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
.ht-featured .day-stack {
  position: relative;
  padding-left: 88px;
}
.ht-featured .day-line {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 30px;
  width: 1.5px;
  background-color: var(--ht-color-saffron);
}
.ht-featured .day-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 26px;
  padding: 0 0 34px;
}
.ht-featured .day-item + .day-item {
  padding-top: 34px;
  border-top: 1px solid var(--ht-color-border);
}
.ht-featured .day-no {
  position: absolute;
  top: 0;
  left: -88px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--ht-color-ivory);
  box-shadow: inset 0 0 0 1.5px var(--ht-color-saffron);
  font-size: 20px;
  color: var(--ht-color-ink);
  transition: background-color 0.4s var(--ht-ease);
}
.ht-featured .day-item + .day-item .day-no {
  top: 34px;
}
.ht-featured .day-item:hover .day-no {
  background-color: var(--ht-color-saffron);
}
.ht-featured .day-body {
  flex: 1 1 auto;
}
.ht-featured .day-place {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.ht-featured .day-title {
  margin: 4px 0 8px;
  font-size: 23px;
}
.ht-featured .day-body p {
  font-size: 15.5px;
}
.ht-featured .day-thumb {
  flex: 0 0 116px;
  height: 140px;
}

/*======================
11. Journey Slider
========================*/
.ht-journeys {
  position: relative;
  background-color: var(--ht-color-night);
}
.ht-journeys .journey-slide {
  position: relative;
  height: 680px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ht-journeys .journey-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.ht-journeys .journey-slide::after {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--ht-color-night-rgb), 0.55) 0%, rgba(var(--ht-color-night-rgb), 0) 60%);
}
.ht-journeys .journey-slide .container {
  position: relative;
  z-index: 1;
}
/* The caption travels as a postcard: stamp, postmark, then the message */
.ht-journeys .journey-card {
  position: relative;
  max-width: 440px;
  padding: 44px 42px 36px;
  background-color: var(--ht-color-ivory);
  box-shadow: var(--ht-shadow-lg);
  transform: rotate(-1.2deg);
}
.ht-journeys .card-stamp {
  position: absolute;
  top: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 76px;
  border: 2px dashed rgba(var(--ht-color-saffron-rgb), 0.9);
  outline: 4px solid var(--ht-color-ivory);
  background-color: rgba(var(--ht-color-saffron-rgb), 0.12);
  color: var(--ht-color-saffron-deep);
  font-size: 34px;
  transform: rotate(4deg);
}
.ht-journeys .card-postmark {
  position: absolute;
  top: 16px;
  right: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--ht-color-stone-rgb), 0.45);
  font-size: 13px;
  color: rgba(var(--ht-color-stone-rgb), 0.9);
  transform: rotate(-14deg);
}
.ht-journeys .card-eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.ht-journeys .card-title {
  max-width: 250px;
  margin: 36px 0 14px;
  font-size: 32px;
  line-height: 1.12;
}
.ht-journeys .journey-card p {
  font-size: 16px;
}
.ht-journeys .card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--ht-color-border);
}
.ht-journeys .card-price {
  font-size: 14.5px;
}
.ht-journeys .card-price b {
  font-family: var(--ht-ff-heading);
  font-size: 24px;
  font-weight: 400;
  color: var(--ht-color-ink);
}
.ht-journeys .journey-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  z-index: 2;
  pointer-events: none;
}
.ht-journeys .controls-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  pointer-events: auto;
}
.ht-journeys .journey-count {
  white-space: nowrap;
  font-size: 16px;
  color: rgba(var(--ht-color-ivory-rgb), 0.75);
}
.ht-journeys .journey-count b {
  font-weight: 400;
  color: var(--ht-color-ivory);
}
.ht-journeys .journey-progress {
  position: relative;
  width: 160px;
  height: 1.5px;
  background-color: rgba(var(--ht-color-ivory-rgb), 0.3);
}
.ht-journeys .journey-progress i {
  position: absolute;
  inset: 0;
  background-color: var(--ht-color-saffron);
  transform: scaleX(0);
  transform-origin: left center;
}
.ht-journeys .journey-prev,
.ht-journeys .journey-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 64px;
  padding-top: 6px;
  border-radius: var(--ht-arch);
  box-shadow: inset 0 0 0 1px rgba(var(--ht-color-ivory-rgb), 0.55);
  color: var(--ht-color-ivory);
  font-size: 14px;
  transition: background-color 0.35s var(--ht-ease), color 0.35s var(--ht-ease), box-shadow 0.35s var(--ht-ease);
}
.ht-journeys .journey-prev:hover,
.ht-journeys .journey-next:hover {
  background-color: var(--ht-color-saffron);
  box-shadow: inset 0 0 0 1px var(--ht-color-saffron);
  color: var(--ht-color-ink);
}

/*======================
12. Guide Film
========================*/
.ht-film {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.ht-film .film-mandala {
  right: -300px;
  bottom: -2px;
  width: 900px;
  opacity: 0.4;
  z-index: -1;
}
.ht-film .film-arch {
  max-width: 470px;
  margin: 14px auto 0;
}
.ht-film .film-media {
  height: 580px;
  box-shadow: var(--ht-shadow-lg);
}
.ht-film .film-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border-radius: 50%;
  background-color: var(--ht-color-saffron);
  color: var(--ht-color-ink);
  font-size: 22px;
  padding-left: 4px;
  box-shadow: 0 0 0 12px rgba(var(--ht-color-saffron-rgb), 0.3);
  transition: box-shadow 0.5s var(--ht-ease);
}
.ht-film .film-media:hover .film-play {
  box-shadow: 0 0 0 22px rgba(var(--ht-color-saffron-rgb), 0.22);
}
.ht-film .film-quote p {
  font-family: var(--ht-ff-heading);
  font-size: 24px;
  line-height: 1.5;
  color: var(--ht-color-ink);
}
.ht-film .film-guide {
  margin: 28px 0 34px;
  padding-left: 22px;
  border-left: 1.5px solid var(--ht-color-saffron);
}
.ht-film .guide-name {
  display: block;
  font-family: var(--ht-ff-heading);
  font-size: 22px;
  color: var(--ht-color-ink);
}
.ht-film .guide-role,
.ht-film .guide-langs {
  display: block;
  font-size: 15px;
}
.ht-film .guide-langs {
  color: var(--ht-color-green);
}

/*======================
13. Reviews
========================*/
.ht-reviews .review-panel {
  height: 100%;
  padding: 36px 40px 30px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
}
.ht-reviews .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ht-color-border);
}
.ht-reviews .panel-logo {
  width: 170px;
  height: auto;
}
.ht-reviews .panel-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.ht-reviews .score-value {
  font-size: 50px;
  line-height: 1;
  color: var(--ht-color-ink);
}
.ht-reviews .score-symbols,
.ht-reviews .postcard-rating {
  display: inline-flex;
  gap: 3px;
  margin-top: 6px;
  font-size: 15px;
}
.ht-reviews .is-stars i {
  color: #F5B301;
}
.ht-reviews .is-bubbles i {
  color: #00AA6C;
}
.ht-reviews .is-stars i.is-empty,
.ht-reviews .is-bubbles i.is-empty {
  color: var(--ht-color-border-2);
}
.ht-reviews .score-count {
  margin-top: 4px;
  font-size: 14px;
}
.ht-reviews .panel-bars {
  padding: 20px 0 6px;
}
.ht-reviews .panel-bars li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}
.ht-reviews .panel-bars li + li {
  margin-top: 8px;
}
.ht-reviews .bar-label {
  flex: 0 0 12px;
  color: var(--ht-color-ink);
}
.ht-reviews .bar-track {
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  background-color: var(--ht-color-sand);
  overflow: hidden;
}
.ht-reviews .bar-track i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background-color: var(--ht-color-saffron);
  transition: width 1.2s var(--ht-ease);
}
.ht-reviews .bar-pct {
  flex: 0 0 38px;
  text-align: right;
}
.ht-reviews .panel-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin-top: 18px;
}
.ht-reviews .review-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 56px 0 34px;
}
.ht-reviews .filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ht-color-ink);
  box-shadow: inset 0 0 0 1px var(--ht-color-border-2);
  transition: background-color 0.3s var(--ht-ease), box-shadow 0.3s var(--ht-ease);
}
.ht-reviews .filter-btn img {
  width: 18px;
  height: 18px;
}
.ht-reviews .filter-btn span {
  font-size: 13px;
  color: var(--ht-color-body);
}
.ht-reviews .filter-btn:hover,
.ht-reviews .filter-btn.is-active {
  background-color: var(--ht-color-white);
  box-shadow: inset 0 0 0 1px var(--ht-color-saffron);
}
.ht-reviews .review-col.is-hidden {
  display: none;
}
.ht-reviews .postcard {
  position: relative;
  height: 100%;
  padding: 34px 32px 28px;
  background-color: var(--ht-color-ivory);
  box-shadow: var(--ht-shadow);
  transition: transform 0.5s var(--ht-ease), box-shadow 0.5s var(--ht-ease);
}
.ht-reviews .review-col:nth-child(odd) .postcard {
  transform: rotate(-0.8deg);
}
.ht-reviews .review-col:nth-child(even) .postcard {
  transform: rotate(0.8deg);
}
.ht-reviews .review-col .postcard:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: var(--ht-shadow-lg);
}
.ht-reviews .postcard-stamp {
  position: absolute;
  top: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 58px;
  border: 1.5px dashed rgba(var(--ht-color-stone-rgb), 0.5);
  background-color: var(--ht-color-white);
  transform: rotate(5deg);
  transition: transform 0.5s var(--ht-ease);
}
.ht-reviews .postcard:hover .postcard-stamp {
  transform: rotate(-4deg) scale(1.06);
}
.ht-reviews .postcard-stamp.is-google {
  color: #4285F4;
  font-size: 22px;
}
.ht-reviews .postcard-stamp img {
  width: 30px;
  height: 30px;
}
.ht-reviews .postcard-postmark {
  display: block;
  padding-right: 70px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.ht-reviews .postcard-quote {
  margin-top: 16px;
  font-family: var(--ht-ff-heading);
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--ht-color-ink);
}
.ht-reviews .postcard-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--ht-color-border-2);
}
.ht-reviews .postcard-author img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.ht-reviews .postcard-author span {
  font-size: 14px;
  line-height: 1.45;
}
.ht-reviews .postcard-author b {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ht-color-ink);
}

/*======================
14. Festivals
========================*/
.ht-festivals {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.ht-festivals .festivals-lotus {
  top: -80px;
  right: -140px;
  width: 620px;
  opacity: 0.1;
  z-index: -1;
}
.ht-festivals .festivals-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 54px;
}
.ht-festivals .festivals-head .ht-section-title {
  margin-bottom: 0;
}
.ht-festivals .festivals-head .title-rule {
  margin-bottom: 0;
}
.ht-festivals .festival-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid rgba(var(--ht-color-ivory-rgb), 0.16);
}
.ht-festivals .festival-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 26px 30px;
  color: rgba(var(--ht-color-ivory-rgb), 0.72);
  transition: background-color 0.45s var(--ht-ease);
}
.ht-festivals .festival-card + .festival-card {
  border-left: 1px solid rgba(var(--ht-color-ivory-rgb), 0.16);
}
.ht-festivals .festival-card.is-hidden {
  display: none;
}
.ht-festivals .festival-card:hover {
  background-color: rgba(var(--ht-color-saffron-rgb), 0.08);
  color: rgba(var(--ht-color-ivory-rgb), 0.85);
}
.ht-festivals .fest-icon {
  display: flex;
  align-items: flex-end;
  height: 42px;
  font-size: 40px;
  line-height: 1;
  color: var(--ht-color-saffron);
  transition: transform 0.45s var(--ht-ease);
}
.ht-festivals .festival-card:hover .fest-icon {
  transform: translateY(-4px) rotate(-6deg);
}
.ht-festivals .fest-date {
  margin-top: 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ht-color-saffron);
}
.ht-festivals .fest-name {
  margin: 8px 0 4px;
  font-size: 26px;
  color: var(--ht-color-ivory);
}
.ht-festivals .fest-place {
  font-size: 15px;
}
.ht-festivals .fest-countdown {
  margin-top: auto;
  padding-top: 22px;
  font-size: 18px;
  color: var(--ht-color-ivory);
}
.ht-festivals .fest-countdown small {
  font-family: var(--ht-ff-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ht-color-ivory-rgb), 0.6);
  margin: 0 8px 0 2px;
}
.ht-festivals .festival-card.is-live .fest-countdown {
  color: var(--ht-color-saffron);
}

/*======================
15. Polaroid CTA
========================*/
.ht-cta {
  position: relative;
  z-index: 0;
  padding: 210px 0;
  overflow: hidden;
  background-color: var(--ht-color-stone);
  color: rgba(var(--ht-color-ivory-rgb), 0.82);
}
/* The photograph is taller than the band so the parallax never shows an edge */
.ht-cta .cta-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.ht-cta .cta-bg img {
  position: absolute;
  top: -12%;
  left: 0;
  width: 100%;
  height: 124%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}
.ht-cta .cta-bg::after {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--ht-color-stone-rgb), 0.84) 0%, rgba(var(--ht-color-stone-rgb), 0.72) 50%, rgba(var(--ht-color-stone-rgb), 0.86) 100%);
}
.ht-cta .cta-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.ht-cta .cta-eyebrow {
  display: block;
  margin-bottom: 18px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ht-color-saffron);
}
.ht-cta .cta-title {
  margin-bottom: 22px;
  font-size: var(--ht-fs-h2);
  color: var(--ht-color-ivory);
}
.ht-cta .cta-title .ht-accent {
  color: var(--ht-color-saffron);
}
.ht-cta .ht-lead {
  color: rgba(var(--ht-color-ivory-rgb), 0.8);
}
.ht-cta .cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.ht-cta .polaroid {
  position: absolute;
  z-index: -1;
  width: 210px;
  margin: 0;
  padding: 12px 12px 0;
  background-color: var(--ht-color-ivory);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
}
.ht-cta .polaroid img {
  display: block;
  width: 100%;
  height: 196px;
  object-fit: cover;
}
.ht-cta .polaroid figcaption {
  padding: 10px 2px 14px;
  font-family: var(--ht-ff-heading);
  font-size: 17px;
  text-align: center;
  color: var(--ht-color-ink);
}
.ht-cta .polaroid-1 {
  top: 60px;
  left: 3%;
  transform: rotate(-8deg);
}
.ht-cta .polaroid-2 {
  bottom: 50px;
  left: 10%;
  transform: rotate(5deg);
}
.ht-cta .polaroid-3 {
  top: 56px;
  right: 3%;
  transform: rotate(7deg);
}
.ht-cta .polaroid-4 {
  bottom: 46px;
  right: 10%;
  transform: rotate(-5deg);
}

/*======================
16. Journal
========================*/
.ht-journal .journal-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 50px;
}
.ht-journal .journal-head .ht-section-title {
  margin-bottom: 0;
}
.ht-journal .journal-head .title-rule {
  margin-bottom: 0;
}
.ht-journal .journal-media {
  height: 420px;
}
.ht-journal .journal-lead .journal-body {
  position: relative;
  width: 88%;
  margin: -70px 0 0 auto;
  padding: 30px 34px 32px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
}
.ht-journal .journal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  font-size: 14px;
}
.ht-journal .journal-cat {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.ht-journal .journal-title {
  margin: 10px 0 12px;
  font-size: 25px;
  line-height: 1.3;
}
.ht-journal .journal-title a:hover {
  color: var(--ht-color-saffron-deep);
}
.ht-journal .journal-item {
  display: flex;
  align-items: center;
  gap: 24px;
}
.ht-journal .journal-item + .journal-item {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--ht-color-border);
}
.ht-journal .journal-thumb {
  flex: 0 0 120px;
  height: 148px;
}
.ht-journal .journal-item .journal-title {
  margin-bottom: 0;
  font-size: 21px;
}

/*======================
17. Palace Hero
========================*/
/* Home 2: a full-bleed palace, copy at the foot on the left, the Trip Finder
   as a card and the three views as arch thumbnails down the right */
/* the header is fixed over the photograph, so the stage starts below it and is
   centred in what is left: equal space above and below */
.ht-palace {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(780px, 100vh);
  padding-top: 100px;
  overflow: hidden;
  background-color: var(--ht-color-night);
}
.ht-palace .palace-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ht-palace .palace-slider .swiper-slide {
  overflow: hidden;
}
.ht-palace .palace-slider img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 8s linear;
}
.ht-palace .palace-slider .swiper-slide-active img {
  transform: scale(1);
}
.ht-palace .palace-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(var(--ht-color-night-rgb), 0.82) 0%, rgba(var(--ht-color-night-rgb), 0.5) 40%, rgba(var(--ht-color-night-rgb), 0.22) 62%, rgba(var(--ht-color-night-rgb), 0.6) 100%),
    linear-gradient(180deg, rgba(var(--ht-color-night-rgb), 0.6) 0%, rgba(var(--ht-color-night-rgb), 0) 26%, rgba(var(--ht-color-night-rgb), 0) 58%, rgba(var(--ht-color-night-rgb), 0.85) 100%),
    rgba(180, 90, 18, 0.24);
  pointer-events: none;
}
.ht-palace .container-wide {
  position: relative;
  z-index: 2;
  width: 100%;
}
.ht-palace .palace-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px 132px;
  align-items: end;
  gap: 40px;
  padding: 64px 0;
}
/* the copy sits on the centre line of the finder beside it */
.ht-palace .palace-copy {
  align-self: center;
}
/* the finder and the view switcher share a top and a foot */
.ht-palace .finder-card,
.ht-palace .palace-views {
  align-self: stretch;
}
/* spare height opens above the price block; the clear border keeps a minimum gap */
.ht-palace .ht-finder.finder-card .finder-result {
  margin-top: auto;
  border-top: 18px solid transparent;
  background-clip: padding-box;
}
.ht-palace .palace-copy {
  max-width: 700px;
}
.ht-palace .palace-eyebrow {
  display: block;
  margin-bottom: 20px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ht-color-saffron);
}
.ht-palace .palace-title {
  margin: 0;
  font-size: clamp(44px, 4.6vw, 86px);
  line-height: 1.06;
  color: var(--ht-color-white);
}
.ht-palace .palace-title .ht-accent {
  color: var(--ht-color-saffron);
}
.ht-palace .hero-rule {
  display: block;
  width: 72px;
  height: 1.5px;
  margin: 28px 0 24px;
  background-color: var(--ht-color-saffron);
}
.ht-palace .palace-lead {
  max-width: 560px;
  margin: 0;
  font-size: 18px;
  line-height: 1.75;
  color: rgba(var(--ht-color-white-rgb), 0.86);
}
.ht-palace .palace-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 30px;
  margin-top: 36px;
}
/* travellers' faces with the score they gave */
.ht-palace .palace-proof {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 560px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(var(--ht-color-white-rgb), 0.18);
}
.ht-palace .proof-faces {
  display: flex;
  flex-shrink: 0;
}
.ht-palace .proof-faces img {
  width: 46px;
  height: 46px;
  margin-left: -12px;
  border: 2px solid var(--ht-color-night);
  border-radius: 50%;
  object-fit: cover;
}
.ht-palace .proof-faces img:first-child {
  margin-left: 0;
}
.ht-palace .proof-text {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(var(--ht-color-white-rgb), 0.82);
}
.ht-palace .proof-text b {
  font-weight: 600;
  color: var(--ht-color-white);
}
.ht-palace .proof-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 3px;
  font-size: 11px;
  color: #F5B301;
}
/* the Trip Finder, stood on end as a card */
.ht-finder.finder-card {
  flex-direction: column;
  max-width: none;
  margin: 0;
  padding: 30px 30px 28px;
}
.ht-finder.finder-card .finder-title {
  margin: 0 0 8px;
  font-family: var(--ht-ff-heading);
  font-size: 24px;
  line-height: 1.25;
  color: var(--ht-color-ink);
}
.ht-finder.finder-card .finder-field,
.ht-finder.finder-card .finder-small {
  flex: none;
  padding: 12px 0;
  border-right: 0;
  border-bottom: 1px solid var(--ht-color-border);
}
.ht-finder.finder-card .finder-result {
  flex: none;
  margin: 18px 0 16px;
  padding: 14px 18px;
}
.ht-finder.finder-card > .ht-btn {
  flex: none;
  height: 56px;
  min-height: 0;
}
/* the view switcher: counter, three arch thumbnails (each filling a hairline
   while it shows) and the base's square arrows, on a smoked panel */
.ht-palace .palace-views {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 14px 18px;
  border: 1px solid rgba(var(--ht-color-white-rgb), 0.16);
  background-color: rgba(var(--ht-color-night-rgb), 0.46);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.ht-palace .views-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ht-color-white-rgb), 0.7);
}
.ht-palace .views-count {
  font-size: 14px;
  color: rgba(var(--ht-color-white-rgb), 0.6);
}
.ht-palace .views-count b {
  font-size: 24px;
  font-weight: 400;
  color: var(--ht-color-white);
}
.ht-palace .palace-thumbs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.ht-palace .views-nav {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.ht-palace .views-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background-color: var(--ht-color-white);
  font-size: 14px;
  color: var(--ht-color-ink);
  transition: background-color 0.35s var(--ht-ease), color 0.35s var(--ht-ease);
}
.ht-palace .views-nav .palace-next {
  background-color: var(--ht-color-saffron);
}
.ht-palace .views-nav button:hover {
  background-color: var(--ht-color-ink);
  color: var(--ht-color-white);
}
.ht-palace .palace-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  text-align: center;
  color: rgba(var(--ht-color-white-rgb), 0.75);
}
.ht-palace .thumb-arch {
  display: block;
  width: 84px;
  height: 98px;
  overflow: hidden;
  border: 2px solid rgba(var(--ht-color-white-rgb), 0.35);
  transition: border-color 0.4s var(--ht-ease), transform 0.4s var(--ht-ease);
}
.ht-palace .thumb-arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ht-palace .thumb-text {
  font-size: 12px;
  line-height: 1.3;
}
.ht-palace .thumb-text b {
  display: block;
  font-family: var(--ht-ff-heading);
  font-size: 16px;
  font-weight: 400;
  color: var(--ht-color-white);
}
.ht-palace .thumb-progress {
  display: block;
  width: 84px;
  height: 2px;
  background-color: rgba(var(--ht-color-white-rgb), 0.25);
}
.ht-palace .thumb-progress i {
  display: block;
  height: 100%;
  background-color: var(--ht-color-saffron);
  transform: scaleX(0);
  transform-origin: left center;
}
.ht-palace .palace-thumb:hover .thumb-arch {
  border-color: rgba(var(--ht-color-saffron-rgb), 0.8);
}
.ht-palace .palace-thumb.is-active .thumb-arch {
  border-color: var(--ht-color-saffron);
  transform: translateY(-4px);
}
.ht-palace .palace-thumb:focus-visible {
  outline: 2px solid var(--ht-color-saffron);
  outline-offset: 4px;
}
/* short laptop screens: the same stage, tightened to stay above the fold */
@media (min-width: 1200px) and (max-height: 860px) {
  .ht-palace .palace-stage {
    padding: 40px 0;
  }
  .ht-finder.finder-card {
    padding: 24px 28px 22px;
  }
  .ht-finder.finder-card .finder-title {
    font-size: 21px;
  }
  .ht-finder.finder-card .finder-field,
  .ht-finder.finder-card .finder-small {
    padding: 8px 0;
  }
  .ht-palace .ht-finder.finder-card .finder-result {
    padding: 10px 16px;
  }
  .ht-palace .palace-views {
    gap: 8px;
    padding: 16px 12px 14px;
  }
  .ht-palace .palace-thumbs {
    gap: 10px;
  }
  .ht-palace .thumb-arch {
    height: 78px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ht-palace .palace-slider img {
    transform: none;
    transition: none;
  }
  .ht-palace .palace-thumb.is-active .thumb-progress i {
    transform: scaleX(1);
  }
}

/*======================
18. Editorial Quote
========================*/
/* "Where History Still Keeps House": one centred quote on the half-mandala */
.ht-keeps {
  position: relative;
  z-index: 0;
  overflow: hidden;
  text-align: center;
}
.ht-keeps .keeps-mandala {
  bottom: 0;
  left: 50%;
  width: 1100px;
  margin-left: -550px;
  opacity: 0.45;
  z-index: -1;
}
.ht-keeps .keeps-inner {
  max-width: 980px;
  margin: 0 auto;
}
.ht-keeps .keeps-eyebrow {
  margin: 0 0 30px;
  font-family: var(--ht-ff-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.ht-keeps .keeps-quote {
  margin: 0;
}
.ht-keeps .keeps-quote p {
  margin: 0;
  font-family: var(--ht-ff-heading);
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 1.42;
  color: var(--ht-color-ink);
}
.ht-keeps .title-rule {
  display: block;
  width: 72px;
  height: 1.5px;
  margin: 40px auto 30px;
  background-color: var(--ht-color-saffron);
}
.ht-keeps .keeps-sign {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-align: left;
}
.ht-keeps .sign-photo {
  flex-shrink: 0;
  width: 64px;
  height: 78px;
  overflow: hidden;
}
.ht-keeps .sign-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ht-keeps .sign-text {
  font-size: 14px;
  color: var(--ht-color-body);
}
.ht-keeps .sign-text b {
  display: block;
  font-family: var(--ht-ff-heading);
  font-size: 20px;
  font-weight: 400;
  color: var(--ht-color-ink);
}

/*======================
19. Jharokha
========================*/
/* Home 2's scroll moment: a small arch window opens onto the palace against the
   section's own travel. The stage is CSS-sticky; nothing is pinned. */
/* the window's insets and crown as variables: the scrub tweens these, and each
   breakpoint only has to set its own starting arch */
.ht-jharokha {
  --jt: 15%;
  --jx: 36%;
  --jb: 9%;
  --jr: 50vw;
  position: relative;
  height: 100vh;
  min-height: 640px;
  background-color: var(--ht-color-ivory);
}
.ht-jharokha.is-scrub {
  height: 260vh;
}
.ht-jharokha .jharokha-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
}
.ht-jharokha .jharokha-view {
  position: absolute;
  inset: 0;
  clip-path: inset(var(--jt) var(--jx) var(--jb) var(--jx) round var(--jr) var(--jr) 0px 0px);
}
.ht-jharokha .jharokha-view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ht-jharokha .jharokha-view::after {
  position: absolute;
  content: "";
  inset: 45% 0 0;
  background: linear-gradient(180deg, rgba(var(--ht-color-night-rgb), 0) 0%, rgba(var(--ht-color-night-rgb), 0.75) 100%);
}
.ht-jharokha .jharokha-frame {
  position: absolute;
  top: calc(var(--jt) - 14px);
  bottom: var(--jb);
  left: calc(var(--jx) - 14px);
  right: calc(var(--jx) - 14px);
  border: 1px solid rgba(var(--ht-color-saffron-rgb), 0.8);
  border-bottom: 0;
  border-radius: 50vw 50vw 0 0;
  pointer-events: none;
}
.ht-jharokha .jharokha-copy {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}
.ht-jharokha .jharokha-copy .eyebrow,
.ht-jharokha .jharokha-title,
.ht-jharokha .jharokha-copy p {
  max-width: 400px;
}
.ht-jharokha .jharokha-copy .eyebrow {
  display: block;
  margin-bottom: 18px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.ht-jharokha .jharokha-title {
  margin-bottom: 22px;
  font-size: clamp(30px, 2.6vw, 44px);
  line-height: 1.2;
}
.ht-jharokha .jharokha-copy p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.75;
}
.ht-jharokha .jharokha-caption {
  position: absolute;
  bottom: 70px;
  left: 0;
  right: 0;
  display: none;
  color: rgba(var(--ht-color-white-rgb), 0.86);
}
.ht-jharokha.is-scrub .jharokha-caption {
  display: block;
  opacity: 0;
}
.ht-jharokha .caption-place {
  display: block;
  margin-bottom: 10px;
  font-family: var(--ht-ff-heading);
  font-size: clamp(30px, 3vw, 50px);
  line-height: 1.15;
  color: var(--ht-color-white);
}
.ht-jharokha .jharokha-caption p {
  max-width: 520px;
  margin: 0 0 22px;
  font-size: 17px;
}

/*======================
20. Stays Mosaic
========================*/
/* The base's alternating photo and text tiles; postmarks replace the ghost numerals */
.stays-mosaic > [class*="col-"] {
  display: flex;
}
.stay-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 420px;
  padding: 44px 40px 34px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
  transition: transform 0.5s var(--ht-ease), box-shadow 0.5s var(--ht-ease);
}
.stay-tile:hover {
  transform: translateY(-8px);
  box-shadow: var(--ht-shadow-lg);
}
.stay-tile .stay-postmark {
  position: absolute;
  top: 28px;
  right: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border: 1.5px dashed rgba(var(--ht-color-saffron-rgb), 0.75);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  color: var(--ht-color-stone);
  transform: rotate(-12deg);
  transition: transform 0.5s var(--ht-ease);
}
.stay-tile .stay-postmark b {
  font-family: var(--ht-ff-heading);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ht-color-saffron-deep);
}
.stay-tile:hover .stay-postmark {
  transform: rotate(0deg);
}
.stay-tile .stay-ic {
  margin-bottom: 28px;
  font-size: 56px;
  color: var(--ht-color-saffron);
}
.stay-tile .stay-title {
  margin-bottom: 14px;
  font-size: 30px;
}
.stay-tile p {
  margin-bottom: 26px;
  font-size: 15.5px;
  line-height: 1.75;
}
.stay-tile .stay-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px dashed var(--ht-color-border-2);
}
.stay-tile .stay-from {
  font-size: 14px;
}
.stay-tile .stay-from b {
  font-family: var(--ht-ff-heading);
  font-size: 22px;
  font-weight: 400;
  color: var(--ht-color-ink);
}
.stay-photo {
  width: 100%;
  min-height: 420px;
}
.stay-photo img {
  position: absolute;
  inset: 0;
  object-position: center;
}

/*======================
21. Card Rails
========================*/
/* The base's rail head: title left, square arrows right (the next one saffron) */
.rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 56px;
}
.rail-head .ht-section-title {
  margin-bottom: 0;
}
.rail-head .title-rule {
  margin-bottom: 0;
}
.rail-side {
  display: flex;
  align-items: center;
  gap: 30px;
}
.rail-nav {
  display: flex;
  gap: 12px;
}
.rail-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
  font-size: 15px;
  color: var(--ht-color-ink);
  transition: background-color 0.35s var(--ht-ease), color 0.35s var(--ht-ease);
}
.rail-nav .rail-next {
  background-color: var(--ht-color-saffron);
}
.rail-nav button:hover {
  background-color: var(--ht-color-ink);
  color: var(--ht-color-white);
}
/* room inside the rail for shadows and tilted cards */
.ht-rail {
  margin: -14px -14px -44px;
  padding: 14px 14px 44px;
}
.ht-rail .swiper-slide {
  height: auto;
}
.ht-rail .tour-card,
.ht-rail .journal-card {
  height: 100%;
}
.rail-dashes {
  display: flex;
  justify-content: center;
  margin-top: 34px;
  --swiper-pagination-bullet-horizontal-gap: 4px;
}
.rail-dashes .swiper-pagination-bullet {
  width: 22px;
  height: 3px;
  border-radius: 0;
  background-color: var(--ht-color-border-2);
  opacity: 1;
  transition: width 0.35s var(--ht-ease), background-color 0.35s var(--ht-ease);
}
.rail-dashes .swiper-pagination-bullet-active {
  width: 42px;
  background-color: var(--ht-color-saffron);
}

/*======================
22. Numbers Band
========================*/
/* The base's black counter band: saffron India glyphs over big numbers */
.ht-numbers {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 100px 0;
}
.ht-numbers .numbers-mandala {
  top: 50%;
  right: -240px;
  width: 680px;
  margin-top: -340px;
  opacity: 0.07;
  z-index: -1;
}
.ht-numbers .number-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  margin-bottom: 26px;
  border: 1px dashed rgba(var(--ht-color-saffron-rgb), 0.6);
  border-radius: 50%;
  font-size: 40px;
  color: var(--ht-color-saffron);
}
.ht-numbers .number-value {
  display: flex;
  align-items: flex-start;
  font-family: var(--ht-ff-heading);
  font-size: clamp(48px, 4.4vw, 68px);
  line-height: 1;
  color: var(--ht-color-ivory);
}
.ht-numbers .number-value sup {
  top: 0.15em;
  margin-left: 4px;
  font-size: 0.45em;
  color: var(--ht-color-saffron);
}
.ht-numbers .number-label {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(var(--ht-color-ivory-rgb), 0.72);
}

/*======================
23. Reviews Two
========================*/
/* Home 2: the title and both platform panels on the left, postcards sliding right */
.reviews-two .ht-section-title {
  margin-bottom: 26px;
}
.reviews-two .review-scores {
  display: grid;
  gap: 16px;
}
.reviews-two .review-panel.is-slim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: auto;
  padding: 22px 26px;
}
.reviews-two .review-panel.is-slim .panel-logo {
  width: 118px;
}
.reviews-two .review-panel.is-slim .score-value {
  font-size: 38px;
}
.reviews-two .review-panel.is-slim .score-count {
  font-size: 12.5px;
  white-space: nowrap;
}
.rail-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 34px;
}
.rail-foot .rail-dashes {
  justify-content: flex-start;
  margin-top: 0;
}

/*======================
24. Desert Nights
========================*/
.ht-desert {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
/* a scatter of stars, drawn with gradients rather than an image */
.ht-desert .desert-stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 14%, rgba(255, 255, 255, 0.85), transparent 70%),
    radial-gradient(1px 1px at 18% 38%, rgba(255, 255, 255, 0.6), transparent 70%),
    radial-gradient(1.5px 1.5px at 27% 9%, rgba(255, 255, 255, 0.75), transparent 70%),
    radial-gradient(1px 1px at 35% 62%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(2px 2px at 44% 22%, rgba(247, 152, 56, 0.8), transparent 70%),
    radial-gradient(1px 1px at 52% 80%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(1.5px 1.5px at 61% 12%, rgba(255, 255, 255, 0.7), transparent 70%),
    radial-gradient(1px 1px at 70% 44%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(1.5px 1.5px at 79% 7%, rgba(255, 255, 255, 0.8), transparent 70%),
    radial-gradient(1px 1px at 88% 30%, rgba(255, 255, 255, 0.6), transparent 70%),
    radial-gradient(1.5px 1.5px at 94% 70%, rgba(255, 255, 255, 0.6), transparent 70%),
    radial-gradient(1px 1px at 4% 86%, rgba(255, 255, 255, 0.5), transparent 70%);
}
.ht-desert .ht-accent {
  color: var(--ht-color-saffron);
}
.ht-desert .camp-list {
  border-top: 1px solid rgba(var(--ht-color-ivory-rgb), 0.14);
}
.ht-desert .camp-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1.3fr) minmax(0, 1.1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px 6px;
  border-bottom: 1px solid rgba(var(--ht-color-ivory-rgb), 0.14);
  color: rgba(var(--ht-color-ivory-rgb), 0.75);
  transition: background-color 0.35s var(--ht-ease), padding 0.35s var(--ht-ease);
}
.ht-desert .camp-row:hover {
  padding-left: 16px;
  background-color: rgba(var(--ht-color-ivory-rgb), 0.04);
}
.ht-desert .camp-num {
  font-size: 22px;
  color: var(--ht-color-saffron);
}
.ht-desert .camp-name {
  font-family: var(--ht-ff-heading);
  font-size: 22px;
  line-height: 1.2;
  color: var(--ht-color-ivory);
}
.ht-desert .camp-name small {
  display: block;
  margin-top: 4px;
  font-family: var(--ht-ff-body);
  font-size: 13px;
  color: rgba(var(--ht-color-ivory-rgb), 0.6);
}
.ht-desert .camp-nights {
  font-size: 14.5px;
}
.ht-desert .camp-price {
  font-size: 13px;
  text-align: right;
}
.ht-desert .camp-price b {
  display: block;
  font-family: var(--ht-ff-heading);
  font-size: 20px;
  font-weight: 400;
  color: var(--ht-color-saffron);
}
.ht-desert .desert-film {
  max-width: 500px;
  margin-left: auto;
}
.ht-desert .film-media {
  aspect-ratio: 4 / 5;
}
.ht-desert .desert-play {
  position: absolute;
  top: 56%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  background-color: var(--ht-color-saffron);
  font-size: 20px;
  color: var(--ht-color-ink);
}
.ht-desert .play-ring {
  position: absolute;
  inset: -14px;
  border: 1.5px dashed rgba(var(--ht-color-white-rgb), 0.85);
  border-radius: 50%;
  animation: ht-spin 16s linear infinite;
}
.ht-desert .film-note {
  display: block;
  margin-top: 20px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(var(--ht-color-ivory-rgb), 0.6);
}
@keyframes ht-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ht-desert .play-ring {
    animation: none;
  }
}

/*======================
25. Journal Rail
========================*/
.journal-card {
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
  transition: transform 0.5s var(--ht-ease), box-shadow 0.5s var(--ht-ease);
}
.journal-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--ht-shadow-lg);
}
.journal-card .journal-card-media {
  aspect-ratio: 16 / 11;
}
.journal-card .journal-card-body {
  padding: 26px 28px 30px;
}
.journal-card p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.7;
}

/*======================
26. Polaroid Strip
========================*/
/* The base's photo strip as a row of tilted polaroids that open in a lightbox */
.ht-polaroids {
  overflow: hidden;
  padding-bottom: 120px;
}
.ht-polaroids .polaroids-head {
  margin-bottom: 60px;
  text-align: center;
}
.ht-polaroids .polaroids-title {
  margin-bottom: 14px;
  font-size: var(--ht-fs-h2);
}
.ht-polaroids .polaroids-head p {
  max-width: 560px;
  margin: 0 auto;
}
.polaroid-row {
  display: flex;
  justify-content: center;
  padding: 0 30px;
}
.polaroid-row .polaroid {
  position: relative;
  flex: 0 0 auto;
  width: clamp(180px, 17vw, 270px);
  margin: 0 -10px;
  padding: 12px 12px 0;
  background-color: var(--ht-color-white);
  box-shadow: 0 18px 40px rgba(var(--ht-color-ink-rgb), 0.14);
  transform: rotate(-4deg);
  transition: transform 0.5s var(--ht-ease), box-shadow 0.5s var(--ht-ease);
}
.polaroid-row .polaroid:nth-child(even) {
  transform: rotate(3deg) translateY(18px);
}
.polaroid-row .polaroid:nth-child(3n) {
  transform: rotate(-1.5deg) translateY(-8px);
}
.polaroid-row .polaroid:hover,
.polaroid-row .polaroid:focus-visible {
  z-index: 2;
  transform: rotate(0deg) translateY(-10px) scale(1.04);
  box-shadow: var(--ht-shadow-lg);
}
.polaroid-row .polaroid .polaroid-photo {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.polaroid-row .polaroid .polaroid-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.polaroid-row .polaroid .polaroid-caption {
  display: block;
  padding: 12px 4px 16px;
  font-family: var(--ht-ff-heading);
  font-size: 16px;
  text-align: center;
  color: var(--ht-color-ink);
}

/*======================
27. Doorway Hero
========================*/
/* Home 3: a full-width coast, the copy in an arch-cut ivory panel like a temple
   doorway, the Trip Finder dark across its threshold */
.ht-doorway {
  position: relative;
  display: flex;
  min-height: max(680px, calc(100vh - 168px));
  overflow: hidden;
  background-color: var(--ht-color-night);
}
.ht-doorway .doorway-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ht-doorway .doorway-slider .swiper-slide {
  overflow: hidden;
}
.ht-doorway .doorway-slider img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 8s linear;
}
.ht-doorway .doorway-slider .swiper-slide-active img {
  transform: scale(1);
}
/* a green-gold grade for the coast, darker under the caption */
.ht-doorway .doorway-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(var(--ht-color-night-rgb), 0.5) 0%, rgba(var(--ht-color-night-rgb), 0.08) 45%, rgba(var(--ht-color-night-rgb), 0.12) 68%, rgba(var(--ht-color-night-rgb), 0.62) 100%),
    linear-gradient(0deg, rgba(var(--ht-color-night-rgb), 0.55) 0%, rgba(var(--ht-color-night-rgb), 0) 42%),
    rgba(var(--ht-color-green-rgb), 0.14);
  pointer-events: none;
}
.ht-doorway .container-wide {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
}
.ht-doorway .doorway-stage {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  padding-top: 44px;
}
.ht-doorway .doorway-panel {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 540px;
  overflow: hidden;
  border-radius: 270px 270px 0 0;
  background-color: var(--ht-color-ivory);
  box-shadow: var(--ht-shadow-lg);
}
.ht-doorway .doorway-copy {
  padding: 80px 48px 32px;
  text-align: center;
}
.ht-doorway .doorway-eyebrow {
  display: block;
  margin-bottom: 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.ht-doorway .doorway-title {
  margin: 0;
  font-size: clamp(36px, 3vw, 54px);
  line-height: 1.1;
}
.ht-doorway .hero-rule {
  display: block;
  width: 72px;
  height: 1.5px;
  margin: 20px auto 18px;
  background-color: var(--ht-color-saffron);
}
.ht-doorway .doorway-lead {
  max-width: 400px;
  margin: 0 auto;
  font-size: 16.5px;
  line-height: 1.7;
}
.ht-doorway .doorway-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 26px;
  margin-top: 26px;
}
/* the dark finder: two fields a row, price and button beneath */
.ht-finder.finder-dark {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: none;
  margin: 0;
  background-color: var(--ht-color-night);
  box-shadow: none;
}
.ht-finder.finder-dark .finder-field,
.ht-finder.finder-dark .finder-small {
  flex: none;
  padding: 12px 24px 8px;
  border-right: 1px solid rgba(var(--ht-color-ivory-rgb), 0.12);
  border-bottom: 1px solid rgba(var(--ht-color-ivory-rgb), 0.12);
}
.ht-finder.finder-dark .finder-field:nth-child(2n) {
  border-right: 0;
}
.ht-finder.finder-dark label {
  color: var(--ht-color-saffron);
}
.ht-finder.finder-dark select,
.ht-finder.finder-dark input,
.ht-finder.finder-dark .ht-select .select-button {
  color: var(--ht-color-ivory);
}
.ht-finder.finder-dark .ht-select .select-button i,
.ht-finder.finder-dark .finder-select i {
  color: var(--ht-color-saffron);
}
.ht-finder.finder-dark .finder-result {
  flex: none;
  padding: 12px 24px;
  background-color: rgba(var(--ht-color-ivory-rgb), 0.06);
}
.ht-finder.finder-dark .result-from,
.ht-finder.finder-dark .result-total {
  color: rgba(var(--ht-color-ivory-rgb), 0.7);
}
.ht-finder.finder-dark .result-from b {
  color: var(--ht-color-ivory);
}
.ht-finder.finder-dark .result-meta {
  color: var(--ht-color-saffron);
}
.ht-finder.finder-dark > .ht-btn {
  height: auto;
  min-height: 72px;
}
/* caption, counter, progress and the square arrows */
.ht-doorway .doorway-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 22px;
  padding-bottom: 60px;
  text-align: right;
}
.ht-doorway .caption-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ht-color-white-rgb), 0.72);
}
.ht-doorway .caption-place {
  display: block;
  font-family: var(--ht-ff-heading);
  font-size: 34px;
  line-height: 1.15;
  color: var(--ht-color-white);
}
.ht-doorway .caption-where {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: rgba(var(--ht-color-white-rgb), 0.82);
}
.ht-doorway .doorway-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ht-doorway .doorway-count {
  font-size: 15px;
  color: rgba(var(--ht-color-white-rgb), 0.7);
}
.ht-doorway .doorway-count b {
  font-size: 22px;
  font-weight: 400;
  color: var(--ht-color-white);
}
.ht-doorway .doorway-progress {
  display: block;
  width: 110px;
  height: 2px;
  background-color: rgba(var(--ht-color-white-rgb), 0.3);
}
.ht-doorway .doorway-progress i {
  display: block;
  height: 100%;
  background-color: var(--ht-color-saffron);
  transform: scaleX(0.34);
  transform-origin: left center;
  transition: transform 0.6s var(--ht-ease);
}
.ht-doorway .doorway-prev,
.ht-doorway .doorway-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background-color: var(--ht-color-white);
  font-size: 15px;
  color: var(--ht-color-ink);
  transition: background-color 0.35s var(--ht-ease), color 0.35s var(--ht-ease);
}
.ht-doorway .doorway-next {
  background-color: var(--ht-color-saffron);
}
.ht-doorway .doorway-prev:hover,
.ht-doorway .doorway-next:hover {
  background-color: var(--ht-color-ink);
  color: var(--ht-color-white);
}
@media (prefers-reduced-motion: reduce) {
  .ht-doorway .doorway-slider img {
    transform: none;
    transition: none;
  }
}

/*======================
28. About Collage
========================*/
/* The base's staggered collage - two tiles and two photographs, now in arches -
   with the monument band as a watermark behind the copy */
.ht-collage {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
/* the band fades into the ivory at every edge */
.ht-collage .collage-monument {
  right: -60px;
  bottom: 50px;
  width: 820px;
  opacity: 0.28;
  z-index: -1;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 35%, transparent 100%);
}
.ht-collage .collage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ht-collage .collage-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ht-collage .collage-col:nth-child(2) {
  padding-top: 64px;
}
.ht-collage .collage-tile {
  padding: 42px 30px 36px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
  text-align: center;
}
.ht-collage .collage-tile i {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 52px;
  color: var(--ht-color-saffron);
}
.ht-collage .collage-tile h3 {
  margin-bottom: 10px;
  font-size: 22px;
}
.ht-collage .collage-tile p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
}
.ht-collage .collage-tile.is-dark {
  background-color: var(--ht-color-night);
}
.ht-collage .collage-tile.is-dark h3 {
  color: var(--ht-color-ivory);
}
.ht-collage .collage-tile.is-dark p {
  color: rgba(var(--ht-color-ivory-rgb), 0.7);
}
.ht-collage .collage-photo {
  aspect-ratio: 4 / 5;
}
.ht-collage .collage-photo img {
  object-position: center;
}
.ht-collage .collage-copy > p {
  font-size: 16.5px;
  line-height: 1.8;
}
.ht-collage .collage-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 34px;
}

/*======================
29. Spice Route
========================*/
/* Home 3's scroll moment: the route is drawn on a canvas through the pins as the
   section scrolls; the stops sit on a wave */
.spice-route {
  position: relative;
}
.spice-route .spice-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.spice-route .spice-stops {
  position: relative;
  z-index: 1;
}
.spice-route .spice-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.spice-route .spice-stop:nth-child(even) {
  padding-top: 90px;
}
.spice-route .spice-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
  border: 1.5px dashed var(--ht-color-saffron);
  border-radius: 50%;
  background-color: var(--ht-color-ivory);
  font-size: 28px;
  color: var(--ht-color-saffron-deep);
  transition: background-color 0.5s var(--ht-ease), color 0.5s var(--ht-ease), border-color 0.5s var(--ht-ease);
}
.spice-route .spice-pin.is-reached {
  border-style: solid;
  background-color: var(--ht-color-saffron);
  color: var(--ht-color-ink);
}
/* the card itself is the arch: the photograph fills its crown, a saffron
   hairline traces the outline, and the body is a light veil of ivory */
.spice-route .spice-card {
  width: 100%;
  height: 100%;
  padding: 0 0 24px;
  overflow: hidden;
  border: 1px solid rgba(var(--ht-color-saffron-rgb), 0.45);
  border-radius: var(--ht-arch);
  background-color: rgba(var(--ht-color-ivory-rgb), 0.6);
  text-align: center;
  transition: transform 0.5s var(--ht-ease), background-color 0.5s var(--ht-ease), border-color 0.5s var(--ht-ease), box-shadow 0.5s var(--ht-ease);
}
.spice-route .spice-card:hover {
  transform: translateY(-8px);
  border-color: var(--ht-color-saffron);
  background-color: var(--ht-color-ivory);
  box-shadow: var(--ht-shadow);
}
.spice-route .spice-media {
  aspect-ratio: 1 / 1.08;
}
.spice-route .spice-media img {
  object-position: center;
}
.spice-route .spice-where {
  display: block;
  margin-top: 20px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.spice-route .spice-title {
  margin: 6px 0 8px;
  font-size: 21px;
  line-height: 1.25;
}
.spice-route .spice-title a:hover {
  color: var(--ht-color-saffron-deep);
}
.spice-route .spice-title,
.spice-route .spice-where,
.spice-route .spice-foot {
  margin-left: 20px;
  margin-right: 20px;
}
.spice-route .spice-card p {
  margin-bottom: 14px;
  padding: 0 20px;
  font-size: 14.5px;
  line-height: 1.65;
}
.spice-route .spice-foot {
  padding-top: 12px;
  border-top: 1px dashed var(--ht-color-border-2);
  font-size: 13.5px;
}
.spice-route .spice-meta {
  display: block;
}
.spice-route .spice-meta b {
  font-family: var(--ht-ff-heading);
  font-size: 18px;
  font-weight: 400;
  color: var(--ht-color-ink);
}
.spice-route .spice-leg {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ht-color-green);
}
.spice-route .spice-leg.is-end {
  color: var(--ht-color-stone);
}

/*======================
30. Slow Water
========================*/
/* The base's black band with a saffron mandala block; the film crosses the seam */
.ht-slow {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 120px 0;
  background-color: var(--ht-color-night);
  color: rgba(var(--ht-color-ivory-rgb), 0.72);
}
.ht-slow .slow-saffron {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 30%;
  overflow: hidden;
  background-color: var(--ht-color-saffron);
}
.ht-slow .slow-mandala {
  position: absolute;
  top: 50%;
  left: 20%;
  width: 760px;
  max-width: none;
  opacity: 0.3;
  transform: translateY(-50%);
  mix-blend-mode: multiply;
}
.ht-slow .ht-section-title .eyebrow,
.ht-slow .ht-accent {
  color: var(--ht-color-saffron);
}
.ht-slow .ht-section-title .title {
  color: var(--ht-color-ivory);
}
.ht-slow .ht-section-title .ht-lead {
  color: rgba(var(--ht-color-ivory-rgb), 0.72);
}
.ht-slow .slow-numbers {
  margin: 4px 0 40px;
}
.ht-slow .number-value {
  display: flex;
  align-items: flex-start;
  font-family: var(--ht-ff-heading);
  font-size: 46px;
  line-height: 1;
  color: var(--ht-color-ivory);
}
.ht-slow .number-value sup {
  top: 0.15em;
  margin-left: 3px;
  font-size: 0.45em;
  color: var(--ht-color-saffron);
}
.ht-slow .number-label {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(var(--ht-color-ivory-rgb), 0.7);
}
.ht-slow .slow-film {
  aspect-ratio: 16 / 11;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}
.ht-slow .slow-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  background-color: var(--ht-color-white);
  font-size: 20px;
  color: var(--ht-color-ink);
}
.ht-slow .play-ring {
  position: absolute;
  inset: -14px;
  border: 1.5px dashed rgba(var(--ht-color-white-rgb), 0.9);
  border-radius: 50%;
  animation: ht-spin 16s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ht-slow .play-ring {
    animation: none;
  }
}

/*======================
31. Wellness
========================*/
/* Six rituals round a turning lotus mandala */
.ht-wellness .wellness-wrap {
  display: grid;
  grid-template-columns: 1fr 420px 1fr;
  align-items: center;
  gap: 50px;
}
.ht-wellness .wellness-list {
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.ht-wellness .ritual {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.ht-wellness .wellness-list.is-left .ritual {
  flex-direction: row-reverse;
  text-align: right;
}
.ht-wellness .ritual-ic {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
  font-size: 32px;
  color: var(--ht-color-saffron);
  transition: background-color 0.4s var(--ht-ease), color 0.4s var(--ht-ease);
}
.ht-wellness .ritual:hover .ritual-ic {
  background-color: var(--ht-color-saffron);
  color: var(--ht-color-ink);
}
.ht-wellness .ritual-num {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  color: var(--ht-color-saffron-deep);
}
.ht-wellness .ritual-title {
  margin-bottom: 8px;
  font-size: 22px;
}
.ht-wellness .ritual p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}
.ht-wellness .wellness-centre {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
}
.ht-wellness .centre-mandala {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.55;
  animation: ht-spin 90s linear infinite;
}
/* the photo fills the emblem's open centre exactly */
.ht-wellness .centre-photo {
  position: relative;
  width: 60%;
  aspect-ratio: 1 / 1;
  border: 8px solid var(--ht-color-ivory);
  border-radius: 50%;
  box-shadow: var(--ht-shadow-lg);
}
.ht-wellness .centre-photo img {
  object-position: center;
}
.ht-wellness .wellness-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 30px;
  margin-top: 70px;
  font-size: 15px;
}
.ht-wellness .wellness-cta b {
  font-family: var(--ht-ff-heading);
  font-size: 24px;
  font-weight: 400;
  color: var(--ht-color-ink);
}
@media (prefers-reduced-motion: reduce) {
  .ht-wellness .centre-mandala {
    animation: none;
  }
}

/*======================
32. Culinary Journeys
========================*/
/* The base's food menu: handi line art, a two-column list with dotted leaders
   and arrows, the thali cut-out and a row of dishes over a sand band */
.ht-culinary {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.ht-culinary .container {
  position: relative;
}
.ht-culinary .culinary-handi {
  display: block;
  width: 118px;
  margin: 0 0 22px -8px;
}
.ht-culinary .menu-item {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
.ht-culinary .menu-thumb {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: 3px solid var(--ht-color-white);
  border-radius: 50%;
  box-shadow: var(--ht-shadow);
}
.ht-culinary .menu-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ht-culinary .menu-body {
  flex: 1 1 auto;
  min-width: 0;
}
.ht-culinary .menu-top {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.ht-culinary .menu-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
}
.ht-culinary .menu-dots {
  flex: 1 1 auto;
  min-width: 20px;
  border-bottom: 1.5px dotted var(--ht-color-border-2);
  transform: translateY(-5px);
}
.ht-culinary .menu-price {
  flex-shrink: 0;
  font-size: 13px;
}
.ht-culinary .menu-price b {
  font-family: var(--ht-ff-heading);
  font-size: 22px;
  font-weight: 400;
  color: var(--ht-color-saffron-deep);
}
.ht-culinary .menu-item p {
  margin: 8px 0 6px;
  font-size: 15px;
  line-height: 1.65;
}
.ht-culinary .menu-meta {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ht-color-green);
}
.ht-culinary .culinary-thali {
  position: absolute;
  right: 0;
  bottom: -70px;
  z-index: 2;
  width: 240px;
  pointer-events: none;
}
.ht-culinary .culinary-gallery {
  position: relative;
  z-index: 0;
  margin-top: 90px;
  padding-bottom: 120px;
}
.ht-culinary .culinary-gallery::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: var(--ht-color-sand);
}
.ht-culinary .gallery-dish {
  aspect-ratio: 1 / 1;
}
.ht-culinary .gallery-dish img {
  object-position: center;
}

/*======================
33. Journal Postmarks
========================*/
/* a postage stamp: the dotted border in the section's own sand punches the
   perforations, the photograph sits in a hairline frame */
.stamp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 18px 26px;
  border: 8px dotted var(--ht-color-sand);
  background-color: var(--ht-color-white);
  transition: transform 0.5s var(--ht-ease);
}
.stamp-card:hover {
  transform: translateY(-8px) rotate(-0.8deg);
}
.stamp-card .stamp-media {
  aspect-ratio: 16 / 11;
  outline: 1px solid var(--ht-color-border);
  outline-offset: 5px;
}
/* the date as a postmark pressed over the photograph */
.stamp-card .stamp-date {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  margin: -46px 14px 0 auto;
  border: 1.5px dashed var(--ht-color-saffron-deep);
  border-radius: 50%;
  background-color: var(--ht-color-white);
  box-shadow: 0 0 0 5px var(--ht-color-white);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ht-color-stone);
  transform: rotate(-10deg);
  transition: transform 0.5s var(--ht-ease);
}
.stamp-card .stamp-date b {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ht-color-ink);
}
.stamp-card:hover .stamp-date {
  transform: rotate(0deg);
}
.stamp-card .stamp-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 0 6px;
}
.stamp-card .stamp-body p {
  margin: 10px 0 20px;
  font-size: 15px;
  line-height: 1.7;
}
.stamp-card .stamp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--ht-color-border-2);
}
.stamp-card .stamp-read {
  font-size: 13px;
  color: var(--ht-color-body);
}

/*======================
34. Forms
========================*/
/* Custom checkboxes and radios: the native input stays for keyboard and form */
.ht-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 15.5px;
  color: var(--ht-color-ink);
  cursor: pointer;
}
.ht-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.ht-check .check-box {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--ht-color-border-2);
  background-color: var(--ht-color-white);
  transition: border-color 0.25s var(--ht-ease), background-color 0.25s var(--ht-ease);
}
.ht-check .check-box::after {
  position: absolute;
  content: "";
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--ht-color-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.25s var(--ht-ease);
}
.ht-check.is-radio .check-box {
  border-radius: 50%;
}
.ht-check.is-radio .check-box::after {
  left: 4px;
  top: 4px;
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  background-color: var(--ht-color-ink);
  transform: scale(0);
}
.ht-check input:checked + .check-box {
  border-color: var(--ht-color-saffron);
  background-color: var(--ht-color-saffron);
}
.ht-check input:checked + .check-box::after {
  transform: rotate(45deg) scale(1);
}
.ht-check.is-radio input:checked + .check-box::after {
  transform: scale(1);
}
.ht-check input:focus-visible + .check-box {
  outline: 2px solid var(--ht-color-saffron-deep);
  outline-offset: 2px;
}
.ht-check .check-label {
  flex: 1 1 auto;
}
.ht-check .check-count {
  font-size: 13px;
  color: var(--ht-color-body);
}
.ht-check.is-empty {
  opacity: 0.45;
}
/* Budget slider */
.filter-range input[type="range"] {
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.filter-range input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(90deg, var(--ht-color-saffron) var(--ht-fill, 100%), var(--ht-color-border-2) var(--ht-fill, 100%));
}
.filter-range input[type="range"]::-moz-range-track {
  height: 3px;
  background: var(--ht-color-border-2);
}
.filter-range input[type="range"]::-moz-range-progress {
  height: 3px;
  background: var(--ht-color-saffron);
}
.filter-range input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -8.5px;
  border: 2px solid var(--ht-color-white);
  border-radius: 50%;
  background-color: var(--ht-color-saffron-deep);
  box-shadow: 0 2px 8px rgba(var(--ht-color-ink-rgb), 0.25);
  -webkit-appearance: none;
  appearance: none;
}
.filter-range input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ht-color-white);
  border-radius: 50%;
  background-color: var(--ht-color-saffron-deep);
}
.filter-range .range-read {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 14px;
}
.filter-range .range-read b {
  font-weight: 600;
  color: var(--ht-color-ink);
}
/* a select dressed as a bordered field (filters, sort, planner) */
.filter-select.ht-select .select-button {
  height: 50px;
  padding: 0 18px;
  border: 1px solid var(--ht-color-border-2);
  background-color: var(--ht-color-white);
  font-size: 15.5px;
  transition: border-color 0.3s var(--ht-ease);
}
.filter-select.ht-select:hover .select-button,
.filter-select.ht-select.is-open .select-button {
  border-color: var(--ht-color-saffron);
}
.filter-select.ht-select .select-list {
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
}
.filter-select.ht-select.opens-up .select-list {
  bottom: calc(100% + 6px);
}
.filter-select.ht-select .select-option {
  padding: 9px 18px;
  font-size: 15px;
}

/* Number stepper: minus / field / plus */
.ht-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  clear: left;
}
.ht-stepper .stepper-label {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ht-color-body);
}
.ht-stepper .stepper-label b {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ht-color-ink);
}
.ht-stepper .stepper-ctrl {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  border: 1px solid var(--ht-color-border-2);
  background-color: var(--ht-color-ivory);
}
.ht-stepper .stepper-ctrl button {
  width: 36px;
  height: 38px;
  font-size: 11px;
  color: var(--ht-color-ink);
  transition: background-color 0.25s var(--ht-ease);
}
.ht-stepper .stepper-ctrl button:hover:not(:disabled) {
  background-color: var(--ht-color-saffron);
}
.ht-stepper .stepper-ctrl button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.ht-stepper .stepper-ctrl input {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: var(--ht-color-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
.ht-stepper .stepper-ctrl input::-webkit-outer-spin-button,
.ht-stepper .stepper-ctrl input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
/* On / off switch */
.ht-switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--ht-color-ink);
  cursor: pointer;
}
.ht-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.ht-switch .switch-track {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background-color: var(--ht-color-border-2);
  transition: background-color 0.3s var(--ht-ease);
}
.ht-switch .switch-track::after {
  position: absolute;
  content: "";
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--ht-color-white);
  box-shadow: 0 1px 3px rgba(var(--ht-color-ink-rgb), 0.25);
  transition: transform 0.3s var(--ht-ease);
}
.ht-switch input:checked + .switch-track {
  background-color: var(--ht-color-saffron);
}
.ht-switch input:checked + .switch-track::after {
  transform: translateX(18px);
}
.ht-switch input:focus-visible + .switch-track {
  outline: 2px solid var(--ht-color-saffron-deep);
  outline-offset: 2px;
}

/* Text fields */
.ht-input {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 18px;
  border: 1px solid var(--ht-color-border-2);
  border-radius: 0;
  background-color: var(--ht-color-ivory);
  font-family: var(--ht-ff-body);
  font-size: 15.5px;
  color: var(--ht-color-ink);
  transition: border-color 0.3s var(--ht-ease), box-shadow 0.3s var(--ht-ease);
}
.ht-input:focus {
  outline: none;
  border-color: var(--ht-color-saffron-deep);
  box-shadow: 0 0 0 3px rgba(var(--ht-color-saffron-rgb), 0.2);
}
.ht-input::placeholder {
  color: #9A8F86;
}
textarea.ht-input {
  height: auto;
  min-height: 140px;
  padding: 14px 18px;
  line-height: 1.6;
  resize: vertical;
}
input[type="date"].ht-input::-webkit-calendar-picker-indicator {
  opacity: 0.6;
  cursor: pointer;
}
/* A field with its icon: the icon sits inside, on the left */
.ht-field {
  position: relative;
  clear: left;
}
.ht-field .field-icon,
.filter-select .field-icon,
.ht-subscribe .field-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 50px;
  font-size: 15px;
  color: var(--ht-color-saffron-deep);
  pointer-events: none;
}
.ht-field .ht-input,
.ht-field textarea.ht-input {
  padding-left: 48px;
}
.filter-select.has-icon.ht-select .select-button {
  padding-left: 48px;
}
.ht-subscribe.has-icon .field-icon {
  width: 54px;
  height: 60px;
}
.ht-subscribe.has-icon input {
  padding-left: 54px;
}
/* a field always starts below its floated label */
.plan-label + * {
  clear: left;
}
/* What an AJAX form says after sending */
.form-status {
  margin: 14px 0 0;
  font-size: 14.5px;
}
.form-status:empty {
  display: none;
}
.form-status.is-success {
  color: var(--ht-color-green);
}
.form-status.is-error {
  color: var(--ht-color-saffron-deep);
}

/*======================
35. Sub Header
========================*/
/* Inner pages open on goldentour's landscape band: title left on an ivory
   veil, the breadcrumb on a white tab at the foot, as the base did. */
.ht-subheader {
  position: relative;
  z-index: 0;
  padding: 120px 0 0;
  overflow: hidden;
}
.ht-subheader .subheader-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.ht-subheader .subheader-bg img {
  position: absolute;
  top: -12%;
  left: 0;
  width: 100%;
  height: 124%;
  max-width: none;
  object-fit: cover;
  object-position: center 40%;
}
.ht-subheader .subheader-bg::after {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--ht-color-ivory-rgb), 0.97) 0%, rgba(var(--ht-color-ivory-rgb), 0.9) 42%, rgba(var(--ht-color-ivory-rgb), 0.35) 100%);
}
.ht-subheader .subheader-mandala {
  right: -120px;
  bottom: -2px;
  width: 760px;
  opacity: 0.25;
  z-index: -1;
}
.ht-subheader .subheader-inner {
  max-width: 660px;
  padding-bottom: 120px;
}
.ht-subheader .subheader-eyebrow {
  display: block;
  margin-bottom: 18px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.ht-subheader .subheader-title {
  font-size: clamp(42px, 4.2vw, 70px);
}
.ht-subheader .subheader-rule {
  display: block;
  width: 72px;
  height: 1.5px;
  margin: 26px 0 22px;
  background-color: var(--ht-color-saffron);
}
.ht-subheader .subheader-lead {
  font-size: 18.5px;
  line-height: 1.7;
}
.ht-subheader .subheader-crumbs {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 18px 34px 16px;
  background-color: var(--ht-color-ivory);
}
.ht-subheader .container {
  position: relative;
}
.ht-subheader .subheader-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ht-subheader .subheader-crumbs li + li::before {
  content: "\f105";
  margin-right: 12px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
  color: var(--ht-color-saffron-deep);
}
.ht-subheader .subheader-crumbs a {
  color: var(--ht-color-body);
}
.ht-subheader .subheader-crumbs a:hover {
  color: var(--ht-color-saffron-deep);
}
.ht-subheader .subheader-crumbs [aria-current] {
  color: var(--ht-color-saffron-deep);
}

/*======================
36. Tour Cards
========================*/
/* A tour is posted like a card home: photograph, stamp, then the message */
.tour-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
  transition: transform 0.5s var(--ht-ease), box-shadow 0.5s var(--ht-ease);
}
.tour-card:hover {
  transform: translateY(-6px) rotate(-0.6deg);
  box-shadow: var(--ht-shadow-lg);
}
.tour-card .tour-media {
  height: 250px;
  margin: 12px 12px 0;
}
.tour-card .tour-stamp {
  position: absolute;
  top: 26px;
  right: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 64px;
  border: 1.5px dashed rgba(var(--ht-color-saffron-rgb), 0.95);
  outline: 4px solid var(--ht-color-ivory);
  background-color: var(--ht-color-ivory);
  color: var(--ht-color-saffron-deep);
  font-size: 26px;
  transform: rotate(5deg);
  transition: transform 0.5s var(--ht-ease);
}
.tour-card:hover .tour-stamp {
  transform: rotate(-8deg) scale(1.06);
}
.tour-card .tour-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 24px 26px 22px;
}
.tour-card .tour-eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.tour-card .tour-title {
  margin: 8px 0 10px;
  font-size: 23px;
  line-height: 1.25;
}
.tour-card .tour-title a:hover {
  color: var(--ht-color-saffron-deep);
}
.tour-card .tour-summary {
  font-size: 15px;
  line-height: 1.65;
}
.tour-card .tour-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 13.5px;
}
.tour-card .tour-rating {
  display: inline-flex;
  gap: 2px;
  font-size: 12px;
  color: #F5B301;
}
.tour-card .tour-rating .is-empty {
  color: var(--ht-color-border-2);
}
.tour-card .tour-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed var(--ht-color-border-2);
}
.tour-card .tour-body > .tour-meta + .tour-foot,
.tour-card .tour-summary + .tour-meta {
  margin-bottom: 18px;
}
.tour-card .tour-price {
  font-size: 14px;
}
.tour-card .tour-price b {
  display: block;
  font-family: var(--ht-ff-heading);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ht-color-ink);
}
.tour-card .tour-season {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: right;
  color: var(--ht-color-green);
}
.tour-card .tour-season.is-peak {
  color: var(--ht-color-saffron-deep);
}
.tour-card .tour-season.is-closed {
  color: var(--ht-color-body);
}

/*======================
37. Tours Page
========================*/
.tour-filters {
  position: sticky;
  top: 110px;
  padding: 30px 28px 20px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
}
.tour-filters .filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ht-color-border);
}
.tour-filters .filters-head {
  gap: 16px;
}
.tour-filters .filters-title {
  margin-right: auto;
  font-size: 22px;
}
.tour-filters .filters-active {
  font-family: var(--ht-ff-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ht-color-saffron-deep);
}
.tour-filters .filters-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ht-color-ink);
}
.tour-filters .filters-toggle i {
  font-size: 11px;
  transition: transform 0.3s ease;
}
.tour-filters.is-open .filters-toggle i {
  transform: rotate(180deg);
}
.tour-filters .filters-reset {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.tour-filters .filter-group {
  margin: 0;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--ht-color-border);
}
.tour-filters .filter-group:last-child {
  border-bottom: 0;
}
.tour-filters .filter-label {
  display: block;
  float: left;
  width: 100%;
  margin-bottom: 10px;
  padding: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.tours-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 30px;
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ht-color-border);
}
.tours-toolbar .tours-count {
  font-size: 16px;
}
.tours-toolbar .tours-count b {
  color: var(--ht-color-ink);
}
.tours-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.tours-sort {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tours-sort label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tours-sort .filter-select {
  width: 220px;
}
.tours-view {
  display: flex;
  gap: 6px;
}
.tours-view a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--ht-color-border-2);
  color: var(--ht-color-body);
  transition: border-color 0.3s var(--ht-ease), color 0.3s var(--ht-ease), background-color 0.3s var(--ht-ease);
}
.tours-view a:hover,
.tours-view a.is-active {
  border-color: var(--ht-color-saffron);
  background-color: var(--ht-color-saffron);
  color: var(--ht-color-ink);
}
.tour-grid .tour-col.is-hidden,
.tour-grid .tour-col.is-hidden,
.tour-grid .tour-col.is-folded {
  display: none;
}
.tours-empty {
  padding: 60px 30px;
  text-align: center;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
}
.tours-empty h3 {
  margin-bottom: 10px;
}
.tours-empty p {
  max-width: 460px;
  margin: 0 auto 24px;
}
.tours-more {
  margin-top: 50px;
  text-align: center;
}
.tours-more[hidden] {
  display: none;
}
/* List view: the same card, image left, price column right */
.tour-card .tour-cta {
  display: none;
}
.tour-grid.is-list .tour-card {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.55fr);
}
.tour-grid.is-list .tour-card .tour-media {
  height: auto;
  min-height: 270px;
  margin: 12px 0 12px 12px;
}
.tour-grid.is-list .tour-card .tour-stamp {
  right: auto;
  left: 26px;
}
.tour-grid.is-list .tour-card .tour-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  grid-template-rows: auto auto auto 1fr;
  column-gap: 32px;
  padding: 32px 34px;
}
.tour-grid.is-list .tour-card .tour-body > * {
  grid-column: 1;
}
.tour-grid.is-list .tour-card .tour-foot {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  grid-column: 2;
  grid-row: 1 / 5;
  margin: 0;
  padding: 0 0 0 30px;
  border-top: 0;
  border-left: 1px dashed var(--ht-color-border-2);
}
.tour-grid.is-list .tour-card .tour-season {
  text-align: left;
}
.tour-grid.is-list .tour-card .tour-cta {
  display: inline-flex;
  margin-top: 8px;
}

/*======================
38. Tour Details
========================*/
/* Gallery: the base's white title card overlapping the top of the photograph */
.detail-gallery .gallery-main {
  position: relative;
  padding-top: 92px;
}
.detail-titlecard {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  width: calc(100% - 72px);
  padding: 30px 36px 28px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
}
.detail-titlecard .titlecard-eyebrow {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.detail-titlecard .titlecard-title {
  margin: 0;
  font-family: var(--ht-ff-heading);
  font-size: clamp(26px, 2.3vw, 36px);
  line-height: 1.15;
  color: var(--ht-color-ink);
}
.detail-titlecard .titlecard-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 14px;
}
.detail-titlecard .titlecard-rating a {
  color: var(--ht-color-body);
  text-decoration: underline;
  text-decoration-color: var(--ht-color-border-2);
  text-underline-offset: 4px;
}
.detail-titlecard .titlecard-rating a:hover {
  color: var(--ht-color-saffron-deep);
}
.detail-titlecard .tour-rating,
.ht-tour-details .tour-rating {
  display: inline-flex;
  gap: 2px;
  font-size: 12px;
  color: #F5B301;
}
.ht-tour-details .tour-rating .is-empty {
  color: var(--ht-color-border-2);
}
.detail-titlecard .titlecard-price {
  flex-shrink: 0;
  margin: 0;
  font-size: 14px;
  text-align: right;
}
.detail-titlecard .titlecard-price b {
  display: block;
  font-family: var(--ht-ff-heading);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ht-color-saffron-deep);
}
.detail-titlecard .titlecard-price span {
  display: block;
  font-size: 12.5px;
}
.detail-gallery .gallery-hero {
  aspect-ratio: 16 / 9;
}
.detail-gallery .gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.detail-gallery .gallery-thumbs a {
  aspect-ratio: 4 / 3;
}
.detail-gallery .gallery-thumbs img {
  object-position: center;
}
.detail-gallery .thumbs-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--ht-color-night-rgb), 0.55);
  font-family: var(--ht-ff-heading);
  font-size: 20px;
  color: var(--ht-color-white);
}
/* Facts: typographic, label over value */
.detail-facts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 28px 0;
  border-bottom: 1px solid var(--ht-color-border);
}
.detail-facts > div {
  padding: 0 18px;
  border-left: 1px solid var(--ht-color-border);
}
.detail-facts > div:first-child {
  padding-left: 0;
  border-left: 0;
}
.detail-facts dt {
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-stone);
}
.detail-facts dd {
  margin: 0;
  font-family: var(--ht-ff-heading);
  font-size: 19px;
  line-height: 1.25;
  color: var(--ht-color-ink);
}
/* Jump bar */
.detail-nav {
  position: sticky;
  top: 82px;
  z-index: 5;
  margin-bottom: 0;
  background-color: var(--ht-color-ivory);
  border-bottom: 1px solid var(--ht-color-border);
}
.detail-nav ul {
  display: flex;
  gap: 34px;
  overflow-x: auto;
  scrollbar-width: none;
}
.detail-nav ul::-webkit-scrollbar {
  display: none;
}
.detail-nav a {
  position: relative;
  display: block;
  padding: 18px 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ht-color-body);
}
.detail-nav a::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background-color: var(--ht-color-saffron);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ht-ease);
}
.detail-nav a:hover,
.detail-nav a.is-active {
  color: var(--ht-color-ink);
}
.detail-nav a.is-active::after {
  transform: scaleX(1);
}
/* Content cards, as the base stacks them */
.detail-card {
  margin-top: 30px;
  padding: 44px 46px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
  scroll-margin-top: 170px;
}
.detail-card .card-title {
  position: relative;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ht-color-border);
  font-size: 30px;
}
.detail-card .card-title::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: -1px;
  width: 60px;
  height: 2px;
  background-color: var(--ht-color-saffron);
}
.detail-card .card-head {
  position: relative;
}
.detail-card .itinerary-all {
  position: absolute;
  top: 10px;
  right: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.detail-card .card-lead {
  margin-bottom: 26px;
  font-size: 16px;
  line-height: 1.75;
}
.detail-card .card-foot {
  margin: 24px 0 0;
  font-size: 15px;
}
.detail-prose p {
  font-size: 16.5px;
  line-height: 1.8;
}
.detail-prose p:last-child {
  margin-bottom: 0;
}
.detail-highlights {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 40px;
  margin-top: 34px;
  padding-top: 34px;
  border-top: 1px dashed var(--ht-color-border-2);
}
.detail-highlights li {
  display: flex;
  gap: 18px;
}
.detail-highlights .hl-num {
  flex-shrink: 0;
  width: 44px;
  font-family: var(--ht-ff-heading);
  font-size: 34px;
  line-height: 1;
  color: var(--ht-color-saffron);
}
.detail-highlights h3 {
  margin-bottom: 6px;
  font-size: 19px;
}
.detail-highlights p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}
/* Itinerary: day stops on a dashed route line */
.itinerary {
  position: relative;
}
.itinerary::before {
  position: absolute;
  content: "";
  left: 31px;
  top: 40px;
  bottom: 40px;
  border-left: 1.5px dashed rgba(var(--ht-color-saffron-rgb), 0.7);
}
.itinerary .day-head {
  margin: 0;
  font-size: inherit;
}
.itinerary .day-toggle {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  padding: 10px 0;
  text-align: left;
}
.itinerary .day-num {
  position: relative;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1.5px solid var(--ht-color-saffron);
  border-radius: 50%;
  background-color: var(--ht-color-white);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
  transition: background-color 0.35s var(--ht-ease);
}
.itinerary .day-num b {
  margin-top: 3px;
  font-family: var(--ht-ff-heading);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ht-color-ink);
}
.itinerary .day-toggle:not(.collapsed) .day-num {
  background-color: var(--ht-color-saffron);
  color: var(--ht-color-ink);
}
.itinerary .day-title {
  flex: 1 1 auto;
  font-family: var(--ht-ff-heading);
  font-size: 22px;
  line-height: 1.25;
  color: var(--ht-color-ink);
}
.itinerary .day-title small {
  display: block;
  margin-top: 4px;
  font-family: var(--ht-ff-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ht-color-stone);
}
.itinerary .day-toggle i {
  font-size: 12px;
  color: var(--ht-color-saffron-deep);
  transition: transform 0.35s var(--ht-ease);
}
.itinerary .day-toggle:not(.collapsed) i {
  transform: rotate(180deg);
}
.itinerary .day-body {
  padding: 4px 0 22px 86px;
}
.itinerary .day-body p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
}
.itinerary .day-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  margin: 16px 0 0;
  padding: 14px 20px;
  background-color: var(--ht-color-ivory);
}
.itinerary .day-facts div {
  display: flex;
  gap: 8px;
  font-size: 14px;
}
.itinerary .day-facts dt {
  font-weight: 600;
  color: var(--ht-color-ink);
}
.itinerary .day-facts dd {
  margin: 0;
}
.detail-map {
  margin-top: 30px;
  aspect-ratio: 16 / 7;
  background-color: var(--ht-color-sand);
}
.detail-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: sepia(0.2) saturate(0.9);
}
/* Departures */
.departure-list {
  border-top: 1px solid var(--ht-color-border);
}
.departure-list .departure {
  display: grid;
  grid-template-columns: 1.55fr 1.15fr 0.95fr 0.9fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--ht-color-border);
  transition: background-color 0.3s var(--ht-ease), box-shadow 0.3s var(--ht-ease);
}
.departure-list .departure.is-chosen {
  background-color: rgba(var(--ht-color-saffron-rgb), 0.1);
  box-shadow: inset 3px 0 0 var(--ht-color-saffron);
}
.departure-list .dep-dates {
  font-size: 13.5px;
}
.departure-list .dep-dates b {
  display: block;
  font-family: var(--ht-ff-heading);
  font-size: 18px;
  font-weight: 400;
  color: var(--ht-color-ink);
}
.departure-list .dep-season {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ht-color-green);
}
.departure-list .dep-season em {
  display: block;
  font-style: normal;
  color: var(--ht-color-saffron-deep);
}
.departure-list .dep-price {
  font-size: 12.5px;
}
.departure-list .dep-price s {
  margin-left: 6px;
  font-size: 13px;
  color: var(--ht-color-body);
}
.departure-list .dep-price b {
  display: inline-block;
  font-family: var(--ht-ff-heading);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ht-color-ink);
}
.departure-list .dep-seats {
  font-size: 14px;
  font-weight: 600;
  color: var(--ht-color-ink);
}
.departure-list .is-few .dep-seats {
  color: var(--ht-color-saffron-deep);
}
.departure-list .is-sold {
  opacity: 0.55;
}
.departure-list .is-sold .dep-price b {
  text-decoration: line-through;
}
.departure-list .dep-choose {
  padding: 11px 18px;
  border: 1px solid var(--ht-color-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ht-color-ink);
  transition: background-color 0.3s var(--ht-ease), border-color 0.3s var(--ht-ease), color 0.3s var(--ht-ease);
}
.departure-list button.dep-choose:hover,
.departure-list .is-chosen .dep-choose {
  border-color: var(--ht-color-ink);
  background-color: var(--ht-color-ink);
  color: var(--ht-color-white);
}
.departure-list .dep-choose.is-off {
  border-color: var(--ht-color-border-2);
  color: var(--ht-color-body);
}
/* Included / not included: a typographic ledger */
.incl-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 20px;
}
.incl-title::before {
  content: "";
  width: 26px;
  height: 2px;
  background-color: var(--ht-color-green);
}
.incl-title.is-out::before {
  background-color: var(--ht-color-border-2);
}
.incl-list {
  margin: 0;
}
.incl-list > div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--ht-color-border-2);
}
.incl-list dt {
  padding-top: 3px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ht-color-green);
}
.incl-list.is-out dt {
  color: var(--ht-color-stone);
}
.incl-list dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ht-color-ink);
}
.incl-list.is-out dd {
  color: var(--ht-color-body);
}
/* Hosts: the base's portrait cards with a check badge */
.host-card {
  height: 100%;
  padding: 36px 30px 30px;
  background-color: var(--ht-color-ivory);
  text-align: center;
  transition: transform 0.5s var(--ht-ease), box-shadow 0.5s var(--ht-ease);
}
.host-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ht-shadow);
}
.host-card .host-photo {
  position: relative;
  width: 116px;
  height: 116px;
  margin: 0 auto 20px;
}
.host-card .host-photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.host-card .host-badge {
  position: absolute;
  top: 4px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 3px solid var(--ht-color-ivory);
  border-radius: 50%;
  background-color: var(--ht-color-saffron);
  font-size: 12px;
  color: var(--ht-color-ink);
}
.host-card .host-name {
  margin-bottom: 4px;
  font-size: 22px;
}
.host-card .host-role {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.host-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}
/* Cancellation: three windows with real dates, today marked */
.cancel-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 12px;
}
.cancel-line li {
  position: relative;
  padding: 30px 24px 0 0;
  border-top: 4px solid var(--ht-color-green);
}
.cancel-line li[data-stage="b"] {
  border-top-color: var(--ht-color-saffron);
}
.cancel-line li[data-stage="c"] {
  border-top-color: var(--ht-color-stone);
}
.cancel-line .cancel-when {
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ht-color-stone);
}
.cancel-line .cancel-what {
  display: block;
  margin-bottom: 8px;
  line-height: 1.3;
  font-family: var(--ht-ff-heading);
  font-size: 20px;
  font-weight: 400;
  color: var(--ht-color-ink);
}
.cancel-line p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
}
.cancel-line li.is-now::before,
.cancel-key {
  width: 20px;
  height: 20px;
  border: 4px solid var(--ht-color-ink);
  border-radius: 50%;
  background-color: var(--ht-color-white);
}
.cancel-line li.is-now::before {
  position: absolute;
  content: "";
  top: -12px;
  left: calc(var(--ht-now, 0) * 100% - 10px);
}
.cancel-key {
  display: inline-block;
  margin-right: 10px;
  vertical-align: -4px;
}
/* Reviews inside the page reuse the home page's panels and postcards */
.detail-card.ht-reviews .review-panel.is-compact {
  padding: 28px 28px 22px;
  background-color: var(--ht-color-ivory);
  box-shadow: none;
}
.detail-card.ht-reviews .review-panel.is-compact .panel-logo {
  width: 124px;
}
.detail-card.ht-reviews .review-panel.is-compact .score-value {
  font-size: 42px;
}
.detail-card.ht-reviews .review-panel.is-compact .score-count {
  font-size: 13px;
  white-space: nowrap;
}
.detail-card.ht-reviews .review-cards {
  margin-top: 6px;
}
/* FAQ */
.ht-faq .faq-item {
  border-bottom: 1px solid var(--ht-color-border);
}
.ht-faq .faq-item:first-child {
  border-top: 1px solid var(--ht-color-border);
}
.ht-faq .faq-head {
  margin: 0;
  font-size: inherit;
}
.ht-faq .faq-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 20px 0;
  font-family: var(--ht-ff-heading);
  font-size: 19px;
  text-align: left;
  color: var(--ht-color-ink);
}
.ht-faq .faq-toggle i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ht-color-border-2);
  border-radius: 50%;
  font-size: 11px;
  color: var(--ht-color-saffron-deep);
  transition: transform 0.35s var(--ht-ease), background-color 0.35s var(--ht-ease), border-color 0.35s var(--ht-ease);
}
.ht-faq .faq-toggle:not(.collapsed) i {
  border-color: var(--ht-color-saffron);
  background-color: var(--ht-color-saffron);
  color: var(--ht-color-ink);
  transform: rotate(45deg);
}
.ht-faq .faq-body {
  margin: 0;
  padding: 0 52px 22px 0;
  font-size: 15.5px;
  line-height: 1.75;
}
/* Sidebar: Trip Cost in the base's availability card */
.detail-aside {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.trip-cost {
  padding: 34px 32px 32px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
  scroll-margin-top: 120px;
}
.trip-cost .cost-head {
  margin-bottom: 22px;
}
.trip-cost .cost-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
  font-size: 24px;
}
.trip-cost .cost-title::before {
  content: "";
  width: 34px;
  height: 2px;
  background-color: var(--ht-color-saffron);
}
.trip-cost .cost-from {
  margin: 0;
  font-size: 14.5px;
}
.trip-cost .cost-from b {
  font-family: var(--ht-ff-heading);
  font-size: 19px;
  font-weight: 400;
  color: var(--ht-color-saffron-deep);
}
.trip-cost .cost-field {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}
.trip-cost .cost-label {
  display: block;
  float: left;
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.trip-cost .filter-select {
  clear: left;
}
.trip-cost .filter-select.ht-select .select-button {
  background-color: var(--ht-color-ivory);
}
.trip-cost .cost-note {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ht-color-green);
}
.trip-cost .ht-switch {
  margin: 0 0 20px;
}
.trip-cost .ht-check {
  align-items: flex-start;
  padding: 5px 0;
  font-size: 14.5px;
  clear: left;
}
.trip-cost .ht-check .check-box {
  margin-top: 2px;
}
.trip-cost .ht-check small {
  display: block;
  font-size: 12.5px;
  color: var(--ht-color-body);
}
.trip-cost .cost-summary {
  padding-top: 18px;
  border-top: 1px dashed var(--ht-color-border-2);
}
.trip-cost .cost-lines {
  margin: 0 0 12px;
}
.trip-cost .cost-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: 14px;
}
.trip-cost .cost-line dt {
  font-weight: 400;
  color: var(--ht-color-body);
}
.trip-cost .cost-line dd {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ht-color-ink);
}
.trip-cost .cost-line.is-saving dt,
.trip-cost .cost-line.is-saving dd {
  color: var(--ht-color-green);
}
.trip-cost .cost-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--ht-color-border);
}
.trip-cost .cost-total span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-ink);
}
.trip-cost .cost-total b {
  font-family: var(--ht-ff-heading);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  color: var(--ht-color-ink);
}
.trip-cost .cost-pp {
  margin: 4px 0 0;
  font-size: 13.5px;
  text-align: right;
}
.trip-cost .cost-pay {
  margin: 16px 0;
  padding: 12px 16px;
  background-color: rgba(var(--ht-color-green-rgb), 0.08);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ht-color-ink);
}
.trip-cost .cost-warn {
  margin: -4px 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ht-color-saffron-deep);
}
.trip-cost .ht-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.detail-help {
  padding: 30px 32px;
  background-color: var(--ht-color-night);
  color: rgba(var(--ht-color-white-rgb), 0.72);
}
.detail-help .help-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-saffron);
}
.detail-help .help-phone {
  display: block;
  margin: 6px 0 8px;
  font-family: var(--ht-ff-heading);
  font-size: 26px;
  color: var(--ht-color-white);
}
.detail-help .help-phone:hover {
  color: var(--ht-color-saffron);
}
.detail-help p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
@media (min-width: 992px) {
  .detail-aside {
    position: sticky;
    top: var(--ht-aside-top, 120px);
  }
}

/*======================
39. Trip Planner
========================*/
/* The base's stacked booking cards, numbered as three steps */
.plan-card {
  margin-bottom: 30px;
  padding: 44px 46px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
  scroll-margin-top: 120px;
}
.plan-card:last-child {
  margin-bottom: 0;
}
.plan-head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--ht-color-border);
}
.plan-head .plan-step {
  flex-shrink: 0;
  font-family: var(--ht-ff-heading);
  font-size: 54px;
  line-height: 0.9;
  color: var(--ht-color-saffron);
}
.plan-head .plan-title {
  margin-bottom: 6px;
  font-size: 30px;
}
.plan-head .plan-lead {
  margin: 0;
  font-size: 15.5px;
}
.plan-label {
  display: block;
  float: left;
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.plan-field {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}
.plan-field > .filter-select,
.plan-field > .ht-input,
.plan-field > .route-stops,
.plan-field > .dep-cards {
  clear: left;
}
.plan-field:last-child {
  margin-bottom: 0;
}
/* Two ways in */
.plan-modes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0 0 30px;
  padding: 0;
  border: 0;
}
.mode-tile {
  position: relative;
  cursor: pointer;
}
.mode-tile input,
.dep-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.mode-tile .mode-body {
  position: relative;
  display: block;
  height: 100%;
  padding: 24px 26px;
  border: 1px solid var(--ht-color-border-2);
  background-color: var(--ht-color-ivory);
  transition: border-color 0.3s var(--ht-ease), background-color 0.3s var(--ht-ease), box-shadow 0.3s var(--ht-ease);
}
.mode-tile .mode-body::after {
  position: absolute;
  content: "";
  top: 20px;
  right: 20px;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--ht-color-border-2);
  border-radius: 50%;
  background-color: var(--ht-color-white);
  transition: border-color 0.3s var(--ht-ease), box-shadow 0.3s var(--ht-ease);
}
.mode-tile i {
  display: block;
  margin-bottom: 14px;
  font-size: 26px;
  color: var(--ht-color-saffron-deep);
}
.mode-tile b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--ht-ff-heading);
  font-size: 20px;
  font-weight: 400;
  color: var(--ht-color-ink);
}
.mode-tile small {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ht-color-body);
}
.mode-tile input:checked + .mode-body {
  border-color: var(--ht-color-saffron);
  background-color: rgba(var(--ht-color-saffron-rgb), 0.08);
  box-shadow: inset 0 0 0 1px var(--ht-color-saffron);
}
.mode-tile input:checked + .mode-body::after {
  border-color: var(--ht-color-saffron);
  box-shadow: inset 0 0 0 5px var(--ht-color-saffron);
}
.mode-tile input:focus-visible + .mode-body,
.dep-card input:focus-visible + .dep-card-body {
  outline: 2px solid var(--ht-color-saffron-deep);
  outline-offset: 2px;
}
/* Departures as cards */
.dep-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.dep-card {
  position: relative;
  cursor: pointer;
}
.dep-card .dep-card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--ht-color-border-2);
  background-color: var(--ht-color-white);
  font-size: 13px;
  transition: border-color 0.3s var(--ht-ease), background-color 0.3s var(--ht-ease), box-shadow 0.3s var(--ht-ease);
}
.dep-card b {
  font-family: var(--ht-ff-heading);
  font-size: 17px;
  font-weight: 400;
  color: var(--ht-color-ink);
}
.dep-card .dep-card-price {
  margin-top: 6px;
  font-family: var(--ht-ff-heading);
  font-size: 20px;
  color: var(--ht-color-saffron-deep);
}
.dep-card:hover .dep-card-body {
  border-color: var(--ht-color-saffron);
}
.dep-card input:checked + .dep-card-body {
  border-color: var(--ht-color-saffron);
  background-color: rgba(var(--ht-color-saffron-rgb), 0.08);
  box-shadow: inset 0 0 0 1px var(--ht-color-saffron);
}
.dep-card.is-sold {
  opacity: 0.5;
  cursor: not-allowed;
}
.dep-card .dep-card-price s {
  margin-left: 6px;
  font-family: var(--ht-ff-body);
  font-size: 12.5px;
  color: var(--ht-color-body);
}
.dep-card.is-sold .dep-card-price {
  text-decoration: line-through;
}
.dep-card.is-private .dep-card-body {
  border-style: dashed;
}
/* Route stops with the leg between them */
.route-stop .stop-leg {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-left: 31px;
  padding: 12px 0 12px 30px;
  border-left: 1.5px dashed rgba(var(--ht-color-saffron-rgb), 0.7);
  font-size: 13.5px;
}
.route-stop .stop-leg i {
  width: 16px;
  color: var(--ht-color-saffron-deep);
}
.route-stop .stop-leg b {
  font-weight: 600;
  color: var(--ht-color-ink);
}
.route-stop .stop-row {
  display: grid;
  grid-template-columns: 36px 1fr auto 40px;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--ht-color-border);
  background-color: var(--ht-color-ivory);
}
.route-stop .stop-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--ht-color-saffron);
  font-family: var(--ht-ff-heading);
  font-size: 17px;
  color: var(--ht-color-ink);
}
.route-stop .filter-select.ht-select .select-button {
  background-color: var(--ht-color-white);
}
.route-stop .ht-stepper {
  gap: 10px;
  padding: 0;
}
.route-stop .ht-stepper .stepper-label b {
  font-size: 13px;
}
.route-stop .stepper-ctrl {
  background-color: var(--ht-color-white);
}
.route-stop .stop-remove {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ht-color-body);
  transition: background-color 0.3s var(--ht-ease), color 0.3s var(--ht-ease);
}
.route-stop .stop-remove:hover:not(:disabled) {
  background-color: var(--ht-color-white);
  color: var(--ht-color-saffron-deep);
}
.route-stop .stop-remove:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.route-add {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 13px 22px;
  border: 1px dashed var(--ht-color-saffron-deep);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
  transition: background-color 0.3s var(--ht-ease);
}
.route-add:hover:not(:disabled) {
  background-color: rgba(var(--ht-color-saffron-rgb), 0.1);
}
.route-add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.plan-help {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.65;
}
.plan-error {
  margin: 20px 0 0;
  padding: 12px 16px;
  background-color: rgba(var(--ht-color-saffron-rgb), 0.12);
  font-size: 14px;
  font-weight: 600;
  color: var(--ht-color-saffron-deep);
}
/* Travellers, rooms and extras */
.plan-stepper {
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--ht-color-border);
  background-color: var(--ht-color-ivory);
}
.plan-stepper .stepper-ctrl {
  background-color: var(--ht-color-white);
}
.plan-switch {
  margin: 24px 0 28px;
}
.plan-addons .addon-check {
  position: relative;
  z-index: 0;
  align-items: flex-start;
  height: 100%;
  padding: 14px 16px;
  font-size: 15px;
}
.plan-addons .addon-check .check-box {
  margin-top: 2px;
}
.plan-addons .addon-check .check-label::before {
  position: absolute;
  content: "";
  inset: 0;
  z-index: -1;
  border: 1px solid var(--ht-color-border);
  transition: border-color 0.3s var(--ht-ease), background-color 0.3s var(--ht-ease);
}
.plan-addons .addon-check input:checked ~ .check-label::before {
  border-color: var(--ht-color-saffron);
  background-color: rgba(var(--ht-color-saffron-rgb), 0.07);
}
.plan-addons .addon-check small {
  display: block;
  font-size: 13px;
  color: var(--ht-color-body);
}
/* Details and send */
.plan-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px dashed var(--ht-color-border-2);
}
.plan-submit .plan-total {
  margin: 0;
  font-size: 15px;
}
.plan-submit .plan-total b {
  font-family: var(--ht-ff-heading);
  font-size: 30px;
  font-weight: 400;
  color: var(--ht-color-ink);
}
.plan-submit .ht-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Price breakdown: the base's bordered table */
.plan-summary {
  padding: 34px 32px 32px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
}
.plan-summary .summary-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 24px;
}
.plan-summary .summary-title::before {
  content: "";
  width: 34px;
  height: 2px;
  background-color: var(--ht-color-saffron);
}
.plan-summary .summary-name {
  margin-bottom: 4px;
  font-family: var(--ht-ff-heading);
  font-size: 21px;
  line-height: 1.3;
  color: var(--ht-color-ink);
}
.plan-summary .summary-meta {
  margin-bottom: 18px;
  font-size: 13.5px;
}
.plan-summary .summary-meta span {
  display: block;
}
.breakdown {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.breakdown th,
.breakdown td {
  padding: 10px 12px;
  border: 1px solid var(--ht-color-border);
  vertical-align: top;
}
.breakdown th {
  font-weight: 400;
  text-align: left;
  color: var(--ht-color-body);
}
.breakdown td {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  color: var(--ht-color-ink);
}
.breakdown .is-saving th,
.breakdown .is-saving td {
  color: var(--ht-color-green);
}
.breakdown tfoot th,
.breakdown tfoot td {
  background-color: var(--ht-color-ivory);
  vertical-align: middle;
}
.breakdown tfoot th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-ink);
}
.breakdown tfoot b {
  display: block;
  font-family: var(--ht-ff-heading);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
}
.breakdown tfoot td > span {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ht-color-body);
}
.plan-summary .summary-pay {
  margin: 18px 0 0;
  padding: 12px 16px;
  background-color: rgba(var(--ht-color-green-rgb), 0.08);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ht-color-ink);
}
.plan-summary .summary-warn {
  margin: 14px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ht-color-saffron-deep);
}
.plan-summary .ht-btn {
  margin-top: 20px;
}
.plan-aside .summary-small {
  margin: 16px 4px 0;
  font-size: 13px;
  line-height: 1.6;
}
@media (min-width: 992px) {
  .plan-aside {
    position: sticky;
    top: var(--ht-aside-top, 120px);
  }
}

/*======================
40. Destinations
========================*/
/* Region tabs over the base's grid of place cards */
.dest-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 50px;
}
.dest-tab {
  padding: 13px 22px;
  border: 1px solid var(--ht-color-border-2);
  background-color: var(--ht-color-white);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ht-color-ink);
  transition: background-color 0.3s var(--ht-ease), border-color 0.3s var(--ht-ease), color 0.3s var(--ht-ease);
}
.dest-tab span {
  margin-left: 6px;
  color: var(--ht-color-saffron-deep);
}
.dest-tab:hover {
  border-color: var(--ht-color-ink);
}
.dest-tab.is-active {
  border-color: var(--ht-color-ink);
  background-color: var(--ht-color-ink);
  color: var(--ht-color-white);
}
.dest-tab.is-active span {
  color: var(--ht-color-saffron);
}
.dest-grid .dest-col.is-hidden {
  display: none;
}
/* the card itself is the arch: the photograph fills its crown and a saffron
   hairline traces the outline - no white box around a shape */
.dest-card {
  display: block;
  height: 100%;
  padding: 0 0 26px;
  overflow: hidden;
  border: 1px solid rgba(var(--ht-color-saffron-rgb), 0.45);
  border-radius: var(--ht-arch);
  background-color: rgba(var(--ht-color-white-rgb), 0.7);
  text-align: center;
  transition: transform 0.5s var(--ht-ease), background-color 0.5s var(--ht-ease), border-color 0.5s var(--ht-ease), box-shadow 0.5s var(--ht-ease);
}
.dest-card:hover {
  transform: translateY(-8px);
  border-color: var(--ht-color-saffron);
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
}
.dest-card .dest-media {
  aspect-ratio: 1 / 1.08;
  border-radius: 0;
}
.dest-card .dest-media img {
  object-position: center;
}
.dest-card .dest-body {
  padding: 22px 18px 0;
}
.dest-card .dest-eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.dest-card .dest-title {
  margin: 6px 0 10px;
  font-size: 24px;
  transition: color 0.3s var(--ht-ease);
}
.dest-card:hover .dest-title {
  color: var(--ht-color-saffron-deep);
}
.dest-card .dest-meta {
  display: block;
  font-size: 14.5px;
  color: var(--ht-color-body);
}
.dest-card .dest-meta b {
  font-weight: 600;
  color: var(--ht-color-ink);
}
.dest-card .dest-best {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ht-color-green);
}
/* Season table: one row per place, one column per month */
.ht-seasons .seasons-head {
  margin-bottom: 40px;
}
.season-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 26px;
  font-size: 14px;
  color: var(--ht-color-ink);
}
.season-key li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.season-key .key,
.season-table td {
  background-color: var(--ht-color-ivory);
}
.season-key .key {
  width: 20px;
  height: 12px;
}
.season-key .key.is-best,
.season-table td.is-best {
  background-color: var(--ht-color-saffron);
}
.season-key .key.is-shoulder,
.season-table td.is-shoulder {
  background-color: rgba(var(--ht-color-saffron-rgb), 0.35);
}
.season-key .key.is-off,
.season-table td.is-off {
  background-color: var(--ht-color-ivory);
  box-shadow: inset 0 0 0 1px var(--ht-color-border);
}
.season-key .key.is-closed,
.season-table td.is-closed {
  background: repeating-linear-gradient(135deg, var(--ht-color-sand) 0, var(--ht-color-sand) 3px, var(--ht-color-white) 3px, var(--ht-color-white) 6px);
}
.season-panel {
  padding: 40px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
}
.season-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  table-layout: fixed;
}
.season-table thead th {
  padding: 0 0 8px;
  font-weight: 400;
}
.season-table .season-corner {
  width: 210px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-align: left;
  text-transform: uppercase;
  color: var(--ht-color-stone);
}
.season-table .month-pick {
  width: 100%;
  padding: 8px 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ht-color-stone);
  transition: color 0.3s var(--ht-ease), background-color 0.3s var(--ht-ease);
}
.season-table .month-pick:hover,
.season-table th.is-picked .month-pick {
  color: var(--ht-color-ink);
}
.season-table th.is-picked .month-pick {
  background-color: rgba(var(--ht-color-saffron-rgb), 0.18);
}
.season-table abbr {
  text-decoration: none;
  cursor: inherit;
}
.season-table .m-short {
  display: none;
}
.season-table tbody th {
  padding: 0 14px 0 0;
  font-family: var(--ht-ff-heading);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.25;
  text-align: left;
  color: var(--ht-color-ink);
}
.season-table td {
  height: 34px;
  transition: opacity 0.35s var(--ht-ease);
}
.season-table.has-pick td:not(.is-picked) {
  opacity: 0.62;
}
.season-table .season-row.is-hidden {
  display: none;
}
.season-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--ht-color-border);
}
.season-pick .pick-line {
  margin: 0;
  font-family: var(--ht-ff-heading);
  font-size: 21px;
  line-height: 1.5;
  color: var(--ht-color-ink);
}
.season-pick .pick-line b {
  font-weight: 400;
  color: var(--ht-color-saffron-deep);
}
.season-pick .ht-btn {
  flex-shrink: 0;
}

/*======================
41. Destination Details
========================*/
.dest-lead {
  margin: 0;
  aspect-ratio: 16 / 8.5;
}
.dest-lead img {
  object-position: center;
}
.dest-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 36px 0 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--ht-color-border);
}
.dest-kicker,
.quote-eyebrow,
.city-tag {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.dest-name {
  margin: 8px 0 0;
  font-size: clamp(38px, 3.4vw, 54px);
}
.dest-article .dest-intro {
  font-family: var(--ht-ff-heading);
  font-size: 22px;
  line-height: 1.6;
  color: var(--ht-color-ink);
}
.dest-article .detail-prose h3 {
  margin: 10px 0 14px;
  font-size: 28px;
}
/* the months, coloured by the journeys that go */
.month-strip {
  margin: 42px 0;
  padding: 30px 32px 26px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
}
.month-strip .strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 22px;
}
.month-strip .strip-title {
  margin: 0;
  font-size: 26px;
}
.month-strip .season-key {
  justify-content: flex-start;
  font-size: 13px;
}
.strip-months {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
}
.strip-months li {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ht-color-stone);
}
.strip-months i {
  display: block;
  height: 36px;
  margin-top: 8px;
  background-color: var(--ht-color-ivory);
  box-shadow: inset 0 0 0 1px var(--ht-color-border);
}
.strip-months .is-best i {
  background-color: var(--ht-color-saffron);
  box-shadow: none;
}
.strip-months .is-shoulder i {
  background-color: rgba(var(--ht-color-saffron-rgb), 0.35);
  box-shadow: none;
}
.strip-months .is-closed i {
  background: repeating-linear-gradient(135deg, var(--ht-color-sand) 0, var(--ht-color-sand) 3px, var(--ht-color-white) 3px, var(--ht-color-white) 6px);
}
.strip-months .is-now {
  color: var(--ht-color-ink);
}
.strip-months .is-now i {
  outline: 2px solid var(--ht-color-ink);
  outline-offset: 2px;
}
.month-strip .strip-note {
  margin: 20px 0 0;
  font-size: 15px;
}
.month-strip .strip-note b {
  font-weight: 600;
  color: var(--ht-color-ink);
}
.dest-pair {
  margin-bottom: 26px;
}
.dest-pair figure {
  margin: 0;
  aspect-ratio: 4 / 3.2;
}
.dest-pair figure img {
  object-position: center;
}
.dest-caption {
  margin: 12px 0 0;
  font-family: var(--ht-ff-heading);
  font-size: 16px;
  color: var(--ht-color-ink);
}
.dest-quote {
  margin: 34px 0 0;
  padding: 28px 32px;
  border-left: 3px solid var(--ht-color-saffron);
  background-color: var(--ht-color-white);
}
.dest-quote p {
  margin: 0;
  font-family: var(--ht-ff-heading);
  font-size: 21px;
  line-height: 1.55;
  color: var(--ht-color-ink);
}
.dest-quote cite {
  display: block;
  margin-top: 14px;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.dest-aside {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (min-width: 992px) {
  .dest-aside {
    position: sticky;
    top: 120px;
  }
}
.aside-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 24px;
}
.aside-title::before {
  content: "";
  flex-shrink: 0;
  width: 30px;
  height: 2px;
  background-color: var(--ht-color-saffron);
}
.glance-card {
  padding: 34px 32px 24px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
}
.glance-list {
  margin: 0;
}
.glance-list > div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--ht-color-border-2);
}
.glance-list > div:last-child {
  border-bottom: 0;
}
.glance-list dt {
  flex-shrink: 0;
  padding-top: 3px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ht-color-stone);
}
.glance-list dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  color: var(--ht-color-ink);
}
.route-quote {
  padding: 34px 32px 32px;
  background-color: var(--ht-color-night);
  color: rgba(var(--ht-color-ivory-rgb), 0.72);
}
.route-quote .quote-eyebrow {
  margin-bottom: 8px;
  color: var(--ht-color-saffron);
}
.route-quote .aside-title {
  color: var(--ht-color-ivory);
}
.quote-stops .quote-stop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.quote-stops .quote-stop b {
  font-family: var(--ht-ff-heading);
  font-size: 19px;
  font-weight: 400;
  color: var(--ht-color-ivory);
}
.quote-stops .quote-leg {
  margin: 4px 0 4px 8px;
  padding: 4px 0 4px 18px;
  border-left: 1.5px dashed rgba(var(--ht-color-saffron-rgb), 0.8);
  font-size: 13px;
  color: rgba(var(--ht-color-ivory-rgb), 0.6);
}
.quote-totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 22px 0 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--ht-color-ivory-rgb), 0.14);
}
.quote-totals dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ht-color-ivory-rgb), 0.55);
}
.quote-totals dd {
  margin: 4px 0 0;
  font-family: var(--ht-ff-heading);
  font-size: 18px;
  color: var(--ht-color-ivory);
}
.route-quote .quote-price {
  margin-bottom: 20px;
  font-size: 14px;
}
.route-quote .quote-price b {
  display: block;
  font-family: var(--ht-ff-heading);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ht-color-saffron);
}
/* the four cities */
.city-card {
  height: 100%;
  padding: 12px 12px 26px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
  text-align: center;
  transition: transform 0.5s var(--ht-ease), box-shadow 0.5s var(--ht-ease);
}
.city-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--ht-shadow-lg);
}
.city-card .city-media {
  aspect-ratio: 1 / 1.1;
}
.city-card .city-media img {
  object-position: center;
}
.city-card .city-tag {
  margin-top: 20px;
}
.city-card .city-name {
  margin: 6px 0 8px;
  font-size: 25px;
}
.city-card .city-leg {
  margin: 0 12px;
  font-size: 14px;
  color: var(--ht-color-green);
}
.here-map {
  height: 100%;
  min-height: 420px;
  box-shadow: var(--ht-shadow);
}
.here-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: sepia(0.2) saturate(0.9);
}

/*======================
42. Offers
========================*/
.offers-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 40px;
  margin-bottom: 56px;
}
.offers-head .ht-section-title {
  margin-bottom: 0;
}
.offers-head .title-rule {
  margin-bottom: 18px;
}
.offer-list {
  display: flex;
  flex-direction: column;
  gap: 70px;
}
/* the base's wide photograph with the box overlapping its foot */
.offer-card {
  position: relative;
}
.offer-card .offer-media {
  aspect-ratio: 21 / 8;
}
.offer-card .offer-media img {
  object-position: center;
}
.offer-card .offer-flag {
  position: absolute;
  top: 28px;
  left: 28px;
  z-index: 1;
  padding: 11px 18px;
  background-color: var(--ht-color-saffron);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ht-color-ink);
}
.offer-card.is-upcoming .offer-flag {
  background-color: var(--ht-color-white);
}
.offer-card.is-ended .offer-flag {
  background-color: var(--ht-color-stone);
  color: var(--ht-color-ivory);
}
.offer-card .offer-box {
  position: relative;
  width: calc(100% - 80px);
  margin: -110px 0 0 40px;
  padding: 38px 44px 34px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow-lg);
}
.offer-card .offer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}
.offer-card .offer-kicker {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.offer-card .offer-title {
  margin: 8px 0 0;
  font-size: 31px;
  line-height: 1.2;
}
.offer-card .offer-price {
  flex-shrink: 0;
  text-align: right;
}
.offer-card .offer-price s {
  display: block;
  font-size: 15px;
  color: var(--ht-color-body);
}
.offer-card .offer-price b {
  display: block;
  font-family: var(--ht-ff-heading);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.05;
  color: var(--ht-color-saffron-deep);
}
.offer-card .offer-price span {
  font-size: 13px;
}
.offer-card .offer-text {
  max-width: 780px;
  margin: 18px 0 24px;
}
.offer-card .offer-terms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 30px;
  margin: 0 0 28px;
  border-top: 1px solid var(--ht-color-border);
}
.offer-card .offer-terms > div {
  padding: 13px 0;
  border-bottom: 1px dashed var(--ht-color-border-2);
}
.offer-card .offer-terms dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ht-color-stone);
}
.offer-card .offer-terms dd {
  margin: 3px 0 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ht-color-ink);
}
.offer-card .offer-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
}
.offer-card .offer-note {
  font-size: 14px;
  color: var(--ht-color-body);
}
.offer-card.is-live .offer-note {
  font-weight: 600;
  color: var(--ht-color-green);
}
.offer-card.is-ended .offer-media img {
  filter: grayscale(0.7);
}
.offer-card.is-ended .offer-price b {
  color: var(--ht-color-stone);
}
.offers-empty {
  padding: 60px 20px;
  background-color: var(--ht-color-white);
  text-align: center;
}
.ht-popular {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.ht-popular .popular-bg {
  position: absolute;
  inset: -80px 0;
  z-index: -1;
}
.ht-popular .popular-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ht-popular .popular-bg::after {
  position: absolute;
  content: "";
  inset: 0;
  background-color: rgba(var(--ht-color-night-rgb), 0.72);
}

/*======================
43. About
========================*/
.story-film {
  position: relative;
  display: block;
  aspect-ratio: 21 / 8;
}
.story-film img {
  object-position: center;
}
.ht-statement .statement-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.ht-statement .eyebrow,
.ht-match .eyebrow {
  display: block;
  margin-bottom: 18px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.ht-statement .statement-text {
  margin: 0;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.35;
}
.ht-statement .title-rule {
  display: block;
  width: 72px;
  height: 1.5px;
  margin: 34px auto 0;
  background-color: var(--ht-color-saffron);
}
.about-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 70px;
}
.about-tile {
  padding: 34px 20px 30px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
  text-align: center;
  transition: transform 0.5s var(--ht-ease), box-shadow 0.5s var(--ht-ease);
}
.about-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--ht-shadow-lg);
}
.about-tile i {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 46px;
  color: var(--ht-color-saffron);
}
.about-tile h3 {
  margin-bottom: 6px;
  font-size: 19px;
}
.about-tile p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}
.story-collage {
  position: relative;
  padding: 0 90px 90px 0;
}
.story-collage .story-main {
  aspect-ratio: 4 / 4.6;
}
.story-collage .story-small {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 4 / 5;
  border: 8px solid var(--ht-color-ivory);
}
.story-collage .story-main img,
.story-collage .story-small img {
  object-position: center;
}
.story-collage .story-badge {
  position: absolute;
  top: 36px;
  right: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background-color: var(--ht-color-saffron);
  box-shadow: 0 0 0 8px var(--ht-color-ivory);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  color: var(--ht-color-ink);
}
.story-collage .story-badge b {
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.story-timeline li {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--ht-color-border-2);
}
.story-timeline li:first-child {
  border-top: 1px solid var(--ht-color-border);
}
.story-timeline b {
  font-size: 24px;
  font-weight: 400;
  color: var(--ht-color-saffron-deep);
}
.story-timeline p {
  margin: 0;
  font-size: 15.5px;
}
.ht-how {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.ht-how .how-mandala {
  bottom: -40%;
  left: 50%;
  width: 1300px;
  margin-left: -650px;
  opacity: 0.06;
  z-index: -1;
}
.how-step {
  height: 100%;
  padding: 36px 30px 32px;
  border: 1px solid rgba(var(--ht-color-ivory-rgb), 0.14);
  transition: background-color 0.4s var(--ht-ease), border-color 0.4s var(--ht-ease);
}
.how-step:hover {
  border-color: rgba(var(--ht-color-saffron-rgb), 0.6);
  background-color: rgba(var(--ht-color-ivory-rgb), 0.04);
}
.how-step .how-num {
  display: block;
  margin-bottom: 22px;
  font-size: 50px;
  line-height: 1;
  color: var(--ht-color-saffron);
}
.how-step h3 {
  margin-bottom: 10px;
  font-size: 22px;
}
.how-step p {
  margin: 0;
  font-size: 15px;
  color: rgba(var(--ht-color-ivory-rgb), 0.7);
}
.fact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 36px 20px 32px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
  text-align: center;
}
.fact-card i {
  margin-bottom: 14px;
  font-size: 44px;
  color: var(--ht-color-saffron);
}
.fact-card .fact-value {
  font-family: var(--ht-ff-heading);
  font-size: 52px;
  line-height: 1;
  color: var(--ht-color-ink);
}
.fact-card .fact-label {
  margin-top: 12px;
  font-size: 14.5px;
}
.ht-guides-teaser .journal-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 50px;
}
.ht-guides-teaser .journal-head .ht-section-title,
.ht-guides-teaser .journal-head .title-rule {
  margin-bottom: 0;
}

/*======================
44. Team
========================*/
.ht-team .ht-tabs {
  justify-content: center;
  margin: -10px 0 50px;
}
.team-card {
  height: 100%;
  padding: 12px 12px 26px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
  transition: transform 0.5s var(--ht-ease), box-shadow 0.5s var(--ht-ease);
}
.team-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--ht-shadow-lg);
}
.team-card .team-photo {
  aspect-ratio: 1 / 1.12;
}
/* their own words, rising over the portrait on hover or focus */
.team-card .team-quote {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 70px 22px 22px;
  background: linear-gradient(180deg, rgba(var(--ht-color-night-rgb), 0) 0%, rgba(var(--ht-color-night-rgb), 0.9) 60%);
  font-family: var(--ht-ff-heading);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ht-color-white);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s var(--ht-ease), transform 0.45s var(--ht-ease);
}
.team-card:hover .team-quote,
.team-card:focus-within .team-quote {
  opacity: 1;
  transform: none;
}
.team-card .team-body {
  padding: 22px 12px 0;
  text-align: center;
}
.team-card .team-role {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.team-card .team-name {
  margin: 6px 0 14px;
  font-size: 23px;
}
.team-card .team-facts {
  margin: 0;
  text-align: left;
}
.team-card .team-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px dashed var(--ht-color-border-2);
  font-size: 14px;
}
.team-card .team-facts dt {
  flex-shrink: 0;
  padding-top: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ht-color-stone);
}
.team-card .team-facts dd {
  margin: 0;
  text-align: right;
  color: var(--ht-color-ink);
}
.team-card .team-mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--ht-color-saffron-deep);
}
.ht-match .match-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 40px;
}
.ht-match .eyebrow {
  color: var(--ht-color-saffron);
}
.ht-match .match-title {
  margin: 0;
  font-size: clamp(28px, 2.6vw, 40px);
}
.ht-match .ht-accent {
  color: var(--ht-color-saffron);
}

/*======================
45. Gallery
========================*/
.ht-gallery .ht-tabs {
  margin-bottom: 18px;
}
/* masonry from CSS columns: each photograph keeps its own shape */
.gallery-masonry {
  column-count: 3;
  column-gap: 24px;
}
.gallery-masonry .gallery-item {
  display: block;
  margin-bottom: 24px;
  break-inside: avoid;
}
.gallery-masonry .gallery-item img {
  height: auto;
  transform-origin: center;
}
.gallery-masonry .gallery-cap {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 60px 22px 18px;
  background: linear-gradient(180deg, rgba(var(--ht-color-night-rgb), 0) 0%, rgba(var(--ht-color-night-rgb), 0.82) 100%);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ht-color-white-rgb), 0.82);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s var(--ht-ease), transform 0.45s var(--ht-ease);
}
.gallery-masonry .gallery-cap b {
  display: block;
  font-family: var(--ht-ff-heading);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ht-color-white);
}
.gallery-masonry .gallery-item:hover .gallery-cap,
.gallery-masonry .gallery-item:focus-visible .gallery-cap {
  opacity: 1;
  transform: none;
}

/*======================
46. Contact
========================*/
.office-card {
  height: 100%;
  padding: 40px 36px 34px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
}
.office-card .office-ic {
  display: block;
  margin-bottom: 18px;
  font-size: 46px;
  color: var(--ht-color-saffron);
}
.office-card .office-title {
  margin-bottom: 12px;
  font-size: 24px;
}
.office-card p {
  margin-bottom: 0;
  font-size: 15.5px;
}
.office-card .office-status {
  margin: 18px 0 10px;
  font-size: 14px;
}
.office-card .office-status b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ht-color-green);
}
.office-card .office-status.is-closed b {
  color: var(--ht-color-saffron-deep);
}
.office-card .office-note {
  margin: 18px 0 10px;
}
.office-card .office-time {
  font-size: 13.5px;
  color: var(--ht-color-stone);
}
.office-card .office-time b {
  font-family: var(--ht-ff-heading);
  font-size: 18px;
  font-weight: 400;
  color: var(--ht-color-ink);
}
.office-card.is-dark {
  background-color: var(--ht-color-night);
  color: rgba(var(--ht-color-ivory-rgb), 0.72);
}
.office-card.is-dark .office-title,
.office-card.is-dark a {
  color: var(--ht-color-ivory);
}
.office-card.is-dark a:hover {
  color: var(--ht-color-saffron);
}
.office-card.is-dark .office-time {
  color: rgba(var(--ht-color-ivory-rgb), 0.6);
}
.contact-card {
  padding: 44px 46px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
}
.contact-card .ht-section-title {
  margin-bottom: 30px;
}
.contact-map {
  height: 470px;
  box-shadow: var(--ht-shadow);
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: sepia(0.2) saturate(0.9);
}
.contact-getting {
  margin: 26px 0 0;
}
.contact-getting > div {
  padding: 14px 0;
  border-bottom: 1px dashed var(--ht-color-border-2);
}
.contact-getting dt {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.contact-getting dd {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--ht-color-ink);
}

/*======================
47. Journal Pages
========================*/
.ht-blog .journal-meta,
.ht-article-area .journal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  font-size: 14px;
}
.ht-blog .journal-cat,
.ht-article-area .journal-cat {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.ht-blog .journal-title,
.ht-article-area .journal-title {
  margin: 10px 0 0;
  font-size: 22px;
  line-height: 1.3;
}
.ht-blog .journal-title a:hover,
.ht-article-area .journal-title a:hover,
.post-feature-title a:hover {
  color: var(--ht-color-saffron-deep);
}
.blog-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ht-color-border);
}
.blog-tools .blog-count {
  margin: 0;
  font-size: 15px;
}
.blog-tools .blog-count b {
  font-weight: 600;
  color: var(--ht-color-ink);
}
.post-feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  margin-bottom: 30px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
}
.post-feature .post-feature-media {
  min-height: 380px;
}
.post-feature .post-feature-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 38px;
}
.post-feature .post-feature-title {
  margin: 12px 0 14px;
  font-size: 30px;
  line-height: 1.25;
}
.post-feature p {
  margin-bottom: 20px;
  font-size: 15.5px;
}
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
  transition: transform 0.5s var(--ht-ease), box-shadow 0.5s var(--ht-ease);
}
.post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ht-shadow-lg);
}
.post-card .post-card-media {
  aspect-ratio: 16 / 10.5;
}
.post-card .post-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 26px 28px;
}
.post-card .post-card-body p {
  margin: 10px 0 18px;
  font-size: 15px;
  line-height: 1.7;
}
.post-card .post-card-body .ht-link {
  margin-top: auto;
}
.post-card.is-small .post-card-body {
  padding: 18px 20px 22px;
}
.post-card.is-small .journal-title {
  font-size: 18px;
}
.posts-empty {
  padding: 60px 20px;
  background-color: var(--ht-color-white);
  text-align: center;
}
.ht-pagination ul {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 50px;
}
.ht-pagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 1px solid var(--ht-color-border-2);
  background-color: var(--ht-color-white);
  font-size: 16px;
  font-weight: 600;
  color: var(--ht-color-ink);
  transition: background-color 0.3s var(--ht-ease), color 0.3s var(--ht-ease), border-color 0.3s var(--ht-ease);
}
.ht-pagination a.is-current,
.ht-pagination a:hover {
  border-color: var(--ht-color-ink);
  background-color: var(--ht-color-ink);
  color: var(--ht-color-white);
}
/* the sidebar: the base's full set of widgets */
.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.side-widget {
  padding: 30px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
}
.side-widget .side-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 21px;
}
.side-widget .side-title::before {
  content: "";
  flex-shrink: 0;
  width: 26px;
  height: 2px;
  background-color: var(--ht-color-saffron);
}
.side-search {
  display: flex;
  border: 1px solid var(--ht-color-border-2);
}
.side-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  border: 0;
  background-color: var(--ht-color-ivory);
  font-size: 15px;
  color: var(--ht-color-ink);
  outline: none;
}
.side-search input:focus {
  box-shadow: inset 0 0 0 2px rgba(var(--ht-color-saffron-rgb), 0.5);
}
.side-search button {
  flex-shrink: 0;
  width: 52px;
  background-color: var(--ht-color-saffron);
  color: var(--ht-color-ink);
}
.side-about {
  text-align: center;
}
.side-about .about-photo {
  display: block;
  width: 110px;
  height: 110px;
  margin: 0 auto 16px;
  border-radius: 50%;
  object-fit: cover;
}
.side-about .side-title {
  justify-content: center;
}
.side-about .side-title::before {
  display: none;
}
.side-about p {
  margin-bottom: 14px;
  font-size: 15px;
}
.side-cats a {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px dashed var(--ht-color-border-2);
  font-size: 15.5px;
  color: var(--ht-color-ink);
  transition: color 0.3s var(--ht-ease), padding 0.3s var(--ht-ease);
}
.side-cats li:last-child a {
  border-bottom: 0;
}
.side-cats a:hover,
.side-cats a.is-active {
  padding-left: 6px;
  color: var(--ht-color-saffron-deep);
}
.side-cats a span {
  font-size: 14px;
  color: var(--ht-color-stone);
}
.side-recent li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
}
.side-recent li + li {
  border-top: 1px dashed var(--ht-color-border-2);
}
.side-recent .recent-thumb {
  flex: 0 0 76px;
  height: 76px;
}
.side-recent .recent-date {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ht-color-stone);
}
.side-recent .recent-title {
  display: block;
  margin-top: 2px;
  font-family: var(--ht-ff-heading);
  font-size: 16px;
  line-height: 1.35;
  color: var(--ht-color-ink);
}
.side-recent .recent-title:hover {
  color: var(--ht-color-saffron-deep);
}
.side-promo {
  background-color: var(--ht-color-night);
  text-align: center;
}
.side-promo .promo-media {
  width: 70%;
  margin: 0 auto 20px;
  aspect-ratio: 1 / 1.1;
}
.side-promo .promo-eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-saffron);
}
.side-promo .promo-title {
  margin: 8px 0 20px;
  font-size: 22px;
  color: var(--ht-color-ivory);
}
.side-tags {
  margin: 0;
  font-size: 15px;
  line-height: 2;
}
.side-tags a {
  color: var(--ht-color-ink);
  text-decoration: underline;
  text-decoration-color: var(--ht-color-border-2);
  text-underline-offset: 4px;
}
.side-tags a:hover {
  color: var(--ht-color-saffron-deep);
}

/*======================
48. Article
========================*/
.post-format {
  display: block;
  margin: 0 0 30px;
}
.post-format-image,
.post-format-video {
  aspect-ratio: 16 / 9.5;
}
.post-format-image img,
.post-format-video img {
  object-position: center;
}
.post-format-gallery {
  position: relative;
}
.post-format-gallery .post-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9.5;
  object-fit: cover;
}
.post-format-gallery .post-gallery-nav {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.post-gallery-nav .post-gallery-count {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 16px;
  background-color: rgba(var(--ht-color-night-rgb), 0.72);
  font-size: 14px;
  color: rgba(var(--ht-color-white-rgb), 0.7);
}
.post-gallery-nav .post-gallery-count b {
  margin-right: 4px;
  font-size: 20px;
  font-weight: 400;
  color: var(--ht-color-white);
}
.post-gallery-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: var(--ht-color-white);
  color: var(--ht-color-ink);
  transition: background-color 0.3s var(--ht-ease), color 0.3s var(--ht-ease);
}
.post-gallery-nav .post-gallery-next {
  background-color: var(--ht-color-saffron);
}
.post-gallery-nav button:hover {
  background-color: var(--ht-color-ink);
  color: var(--ht-color-white);
}
.post-format-audio {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: 30px;
  padding: 30px;
  background-color: var(--ht-color-night);
}
.post-format-audio .audio-cover {
  aspect-ratio: 1 / 1.15;
}
.post-format-audio .audio-eyebrow,
.post-format-link .link-eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-saffron);
}
.post-format-audio .audio-title {
  margin: 8px 0 18px;
  font-size: 22px;
  color: var(--ht-color-ivory);
}
.post-format-audio iframe {
  display: block;
  width: 100%;
  height: 166px;
  border: 0;
}
.post-format-quote {
  position: relative;
  padding: 52px 56px;
  background-color: var(--ht-color-saffron);
  color: var(--ht-color-ink);
}
.post-format-quote .quote-mark {
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 84px;
  opacity: 0.16;
}
.post-format-quote blockquote {
  margin: 0;
}
.post-format-quote blockquote p {
  margin: 0;
  font-family: var(--ht-ff-heading);
  font-size: 30px;
  line-height: 1.42;
  color: var(--ht-color-ink);
}
.post-format-quote figcaption {
  margin-top: 20px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.post-format-link {
  position: relative;
  padding: 44px 50px;
  background-color: var(--ht-color-night);
  color: rgba(var(--ht-color-ivory-rgb), 0.65);
}
.post-format-link .link-mark {
  position: absolute;
  top: 38px;
  right: 42px;
  font-size: 40px;
  color: var(--ht-color-saffron);
}
.post-format-link .link-title {
  display: block;
  margin: 10px 0 10px;
  font-family: var(--ht-ff-heading);
  font-size: 28px;
  line-height: 1.3;
  color: var(--ht-color-white);
  transition: color 0.3s var(--ht-ease);
}
.post-format-link:hover .link-title {
  color: var(--ht-color-saffron);
}
.post-format-link .link-url {
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ht-color-border);
  font-size: 14px;
}
.post-meta i {
  margin-right: 8px;
  color: var(--ht-color-saffron-deep);
}
.post-content p {
  font-size: 16.5px;
  line-height: 1.85;
}
.post-content .post-intro {
  font-family: var(--ht-ff-heading);
  font-size: 21px;
  line-height: 1.6;
  color: var(--ht-color-ink);
}
.post-content h3 {
  margin: 40px 0 14px;
  font-size: 27px;
}
.post-content .post-figure {
  margin: 32px 0;
}
.post-content .post-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.post-content .post-figure figcaption {
  margin-top: 12px;
  font-family: var(--ht-ff-heading);
  font-size: 15px;
  color: var(--ht-color-stone);
}
.post-content .post-steps {
  margin: 20px 0 10px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.post-content .post-steps li {
  position: relative;
  padding: 14px 0 14px 62px;
  border-bottom: 1px dashed var(--ht-color-border-2);
  font-size: 16px;
  line-height: 1.7;
  counter-increment: step;
}
.post-content .post-steps li::before {
  position: absolute;
  content: counter(step, decimal-leading-zero);
  top: 10px;
  left: 0;
  font-family: var(--ht-ff-heading);
  font-size: 28px;
  color: var(--ht-color-saffron);
}
.post-content .post-steps b {
  font-weight: 600;
  color: var(--ht-color-ink);
}
.post-content .post-quote {
  margin: 36px 0;
  padding: 30px 36px;
  border-left: 3px solid var(--ht-color-saffron);
  background-color: var(--ht-color-white);
}
.post-content .post-quote p {
  margin: 0;
  font-family: var(--ht-ff-heading);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ht-color-ink);
}
.post-content .post-quote cite {
  display: block;
  margin-top: 14px;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.post-content .post-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 30px 0;
}
.post-content .post-pair figure {
  margin: 0;
  aspect-ratio: 4 / 3;
}
.post-content .post-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 36px;
  padding: 26px 30px;
  border-left: 3px solid var(--ht-color-saffron);
  background-color: var(--ht-color-sand);
}
.post-plan .plan-eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.post-plan .plan-name {
  margin: 4px 0 4px;
  font-size: 22px;
}
.post-plan .plan-meta {
  font-size: 14px;
}
.post-plan .plan-meta b {
  font-family: var(--ht-ff-heading);
  font-size: 18px;
  font-weight: 400;
  color: var(--ht-color-ink);
}
.post-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 40px;
  padding: 22px 0;
  border-top: 1px solid var(--ht-color-border);
  border-bottom: 1px solid var(--ht-color-border);
}
.post-foot .post-tags {
  margin: 0;
  font-size: 15px;
}
.post-foot .post-tags span,
.post-share > span:first-child {
  margin-right: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ht-color-stone);
}
.post-foot .post-tags a {
  color: var(--ht-color-ink);
}
.post-foot .post-tags a:hover {
  color: var(--ht-color-saffron-deep);
}
.post-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.post-share a,
.post-share button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ht-color-border-2);
  font-size: 13px;
  color: var(--ht-color-ink);
  transition: background-color 0.3s var(--ht-ease), border-color 0.3s var(--ht-ease);
}
.post-share a:hover,
.post-share button:hover {
  border-color: var(--ht-color-saffron);
  background-color: var(--ht-color-saffron);
  color: var(--ht-color-ink);
}
.post-share .share-note {
  margin-left: 6px;
  font-size: 13px;
  color: var(--ht-color-green);
}
.post-author {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 28px;
  margin-top: 40px;
  padding: 34px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
}
.post-author img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
}
.post-author .author-eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.post-author .author-name {
  margin: 4px 0 8px;
  font-size: 24px;
}
.post-author .author-name small {
  display: block;
  margin-top: 2px;
  font-family: var(--ht-ff-body);
  font-size: 13px;
  color: var(--ht-color-stone);
}
.post-author p {
  margin-bottom: 12px;
  font-size: 15px;
}
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}
.post-nav a {
  display: block;
  padding: 24px 26px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
  transition: transform 0.4s var(--ht-ease);
}
.post-nav a:hover {
  transform: translateY(-4px);
}
.post-nav span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.post-nav b {
  display: block;
  margin-top: 8px;
  font-family: var(--ht-ff-heading);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ht-color-ink);
}
.post-nav .nav-next {
  text-align: right;
}
.post-nav .nav-next span {
  justify-content: flex-end;
}
.post-article .block-title {
  margin: 54px 0 24px;
  font-size: 27px;
}
.comment-list .comment {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px dashed var(--ht-color-border-2);
}
.comment-list .comment-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.comment-list .comment-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 6px;
}
.comment-list .comment-head b {
  font-family: var(--ht-ff-heading);
  font-size: 18px;
  font-weight: 400;
  color: var(--ht-color-ink);
}
.comment-list .comment-head span {
  font-size: 13px;
  color: var(--ht-color-stone);
}
.comment-list .comment-head .comment-badge {
  padding: 2px 8px;
  background-color: var(--ht-color-saffron);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ht-color-ink);
}
.comment-list .comment-reply {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.comment-list .comment-reply:hover {
  color: var(--ht-color-ink);
}
.comment-list .comment-body p {
  margin: 0;
  font-size: 15.5px;
}
.comment-list .comment-children {
  grid-column: 2;
}
.comment-list .comment-children .comment {
  padding-bottom: 0;
  border-bottom: 0;
}
.post-respond .respond-note {
  margin-bottom: 16px;
  font-size: 15px;
}
.post-respond .respond-form {
  padding: 36px;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
}

/*======================
49. Account
========================*/
.account-card {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  max-width: 1100px;
  margin: 0 auto;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow-lg);
}
.account-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 50px 40px;
  background-color: var(--ht-color-sand);
}
.account-visual .account-arch {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 4 / 5;
}
.account-visual .account-quote {
  max-width: 360px;
  margin: 0;
  font-family: var(--ht-ff-heading);
  font-size: 19px;
  line-height: 1.5;
  text-align: center;
  color: var(--ht-color-ink);
}
.account-body {
  padding: 56px 60px;
}
.account-body .account-title {
  margin-bottom: 10px;
  font-size: 34px;
}
.account-body .account-lead {
  margin-bottom: 28px;
}
.account-body .account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.account-body .account-switch {
  margin: 26px 0 0;
  font-size: 15px;
  text-align: center;
}
.account-body .account-switch a {
  font-weight: 600;
  color: var(--ht-color-saffron-deep);
}
.password-field {
  position: relative;
  clear: left;
}
.password-field .ht-input {
  padding-right: 54px;
}
.password-field .password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  color: var(--ht-color-stone);
}
.password-field .password-toggle:hover {
  color: var(--ht-color-saffron-deep);
}
.password-meter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.password-meter .meter-bars {
  display: flex;
  flex: 0 0 140px;
  gap: 4px;
}
.password-meter .meter-bars i {
  flex: 1 1 0;
  height: 4px;
  background-color: var(--ht-color-border);
  transition: background-color 0.3s var(--ht-ease);
}
.password-meter[data-level="1"] .meter-bars i:nth-child(-n+1) {
  background-color: var(--ht-color-saffron-deep);
}
.password-meter[data-level="2"] .meter-bars i:nth-child(-n+2) {
  background-color: var(--ht-color-saffron);
}
.password-meter[data-level="3"] .meter-bars i:nth-child(-n+3),
.password-meter[data-level="4"] .meter-bars i {
  background-color: var(--ht-color-green);
}
.password-meter .meter-label {
  font-size: 13px;
  color: var(--ht-color-stone);
}
.match-note {
  display: block;
  min-height: 1.4em;
  margin-top: 8px;
  font-size: 13px;
}
.match-note.is-ok {
  color: var(--ht-color-green);
}
.match-note.is-bad {
  color: var(--ht-color-saffron-deep);
}

/*======================
50. Error Page
========================*/
.ht-error .error-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 90px;
}
.ht-error .error-visual {
  position: relative;
  padding: 16px 16px 50px;
}
.ht-error .error-window {
  aspect-ratio: 4 / 5;
}
.ht-error .error-window img {
  object-position: center;
}
.ht-error .error-num {
  position: absolute;
  bottom: 0;
  left: 50%;
  padding: 0 24px;
  background-color: var(--ht-color-ivory);
  font-size: clamp(90px, 9vw, 150px);
  line-height: 0.9;
  color: var(--ht-color-saffron);
  transform: translateX(-50%);
}
.ht-error .eyebrow {
  display: block;
  margin-bottom: 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ht-color-saffron-deep);
}
.ht-error .error-title {
  margin: 0;
  font-size: var(--ht-fs-h1);
  line-height: 1.1;
}
.ht-error .title-rule {
  display: block;
  width: 72px;
  height: 1.5px;
  margin: 28px 0 24px;
  background-color: var(--ht-color-saffron);
}
.ht-error .error-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 30px;
  margin: 32px 0 40px;
}
.ht-error .error-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 30px;
  border-top: 1px solid var(--ht-color-border);
}
.ht-error .error-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px dashed var(--ht-color-border-2);
  font-size: 16px;
  color: var(--ht-color-ink);
  transition: color 0.3s var(--ht-ease), padding 0.3s var(--ht-ease);
}
.ht-error .error-links a i {
  font-size: 12px;
  color: var(--ht-color-saffron-deep);
}
.ht-error .error-links a:hover {
  padding-left: 6px;
  color: var(--ht-color-saffron-deep);
}

/*======================
51. Coming Soon
========================*/
body.is-standalone {
  background-color: var(--ht-color-night);
}
.ht-soon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 60px 20px;
  overflow: hidden;
  color: rgba(var(--ht-color-ivory-rgb), 0.8);
  text-align: center;
}
.ht-soon .soon-bg {
  position: absolute;
  inset: 0;
}
.ht-soon .soon-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ht-soon .soon-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(var(--ht-color-night-rgb), 0.55) 0%, rgba(var(--ht-color-night-rgb), 0.9) 75%);
}
.ht-soon .soon-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  width: 100%;
  max-width: 760px;
}
.ht-soon .soon-logo img {
  display: block;
  height: 84px;
  width: auto;
}
/* the panel is an arch window, outlined in the saffron hairline */
.ht-soon .soon-panel {
  width: 100%;
  padding: 120px 60px 50px;
  border: 1px solid rgba(var(--ht-color-saffron-rgb), 0.7);
  border-bottom: 0;
  border-radius: var(--ht-arch);
  background-color: rgba(var(--ht-color-night-rgb), 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ht-soon .soon-eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ht-color-saffron);
}
.ht-soon .soon-title {
  margin: 14px 0 0;
  font-size: clamp(40px, 4.4vw, 68px);
  line-height: 1.1;
  color: var(--ht-color-white);
}
.ht-soon .soon-title .ht-accent {
  color: var(--ht-color-saffron);
}
.ht-soon .soon-rule {
  display: block;
  width: 72px;
  height: 1.5px;
  margin: 26px auto;
  background-color: var(--ht-color-saffron);
}
.ht-soon .soon-lead {
  max-width: 520px;
  margin: 0 auto 34px;
}
.ht-soon .soon-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 520px;
  margin: 0 auto;
}
.ht-soon .soon-count > div {
  padding: 18px 8px 14px;
  border: 1px solid rgba(var(--ht-color-ivory-rgb), 0.2);
  background-color: rgba(var(--ht-color-night-rgb), 0.5);
}
.ht-soon .soon-count b {
  display: block;
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  color: var(--ht-color-white);
}
.ht-soon .soon-count span {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ht-color-ivory-rgb), 0.7);
}
.ht-soon .soon-date {
  margin: 20px 0 30px;
  font-size: 14px;
}
.ht-soon .soon-date b {
  color: var(--ht-color-white);
}
.ht-soon .form-status {
  margin-top: 14px;
  font-size: 14px;
}
.ht-soon .soon-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.ht-soon .ht-social a {
  border-color: rgba(var(--ht-color-ivory-rgb), 0.3);
  color: var(--ht-color-ivory);
}
.ht-soon .ht-social a:hover {
  border-color: var(--ht-color-saffron);
  background-color: var(--ht-color-saffron);
  color: var(--ht-color-ink);
}

/*======================
52. Footer
========================*/
.ht-footer {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background-color: var(--ht-color-sand);
}
.ht-footer .footer-mandala {
  bottom: 62px;
  left: 50%;
  width: 1100px;
  margin-left: -550px;
  opacity: 0.42;
  z-index: -1;
}
.ht-footer .footer-brand {
  max-width: 640px;
  margin: 0 auto;
  padding: 110px 0 64px;
  text-align: center;
}
.ht-footer .footer-brand .footer-logo {
  display: inline-block;
}
.ht-footer .footer-brand .footer-logo img {
  display: block;
  height: 92px;
  width: auto;
}
.ht-footer .footer-brand p {
  margin-top: 26px;
  font-size: 17px;
}
.ht-subscribe {
  position: relative;
  display: flex;
  max-width: 520px;
  margin: 34px auto 0;
  background-color: var(--ht-color-white);
  box-shadow: var(--ht-shadow);
}
.ht-subscribe input {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  height: 60px;
  padding: 0 24px;
  border: 0;
  background: transparent;
  font-size: 16px;
  outline: none;
}
.ht-subscribe input::placeholder {
  color: var(--ht-color-body);
}
.ht-subscribe .ht-btn {
  height: 60px;
  flex-shrink: 0;
}
.ht-footer .form-status.is-success {
  color: var(--ht-color-green);
}
.ht-footer .form-status.is-error {
  color: var(--ht-color-saffron-deep);
}
.ht-footer .form-status {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  min-height: 1.5em;
}
.ht-footer .footer-cols {
  padding: 56px 0 70px;
  border-top: 1px solid rgba(var(--ht-color-stone-rgb), 0.2);
}
/* footer headings are h2 so no page skips a level before them */
.ht-footer .footer-widget .footer-title {
  margin-bottom: 20px;
  font-size: 22px;
}
.ht-footer .footer-widget li + li {
  margin-top: 8px;
}
.ht-footer .footer-widget li a {
  display: inline-block;
  font-size: 16px;
  color: var(--ht-color-body);
  transition: color 0.3s var(--ht-ease), transform 0.3s var(--ht-ease);
}
.ht-footer .footer-widget li a:hover {
  color: var(--ht-color-saffron-deep);
  transform: translateX(4px);
}
.ht-footer .footer-contact li {
  display: flex;
  gap: 14px;
  font-size: 16px;
  line-height: 1.55;
}
.ht-footer .footer-contact li + li {
  margin-top: 14px;
}
.ht-footer .footer-contact i {
  flex-shrink: 0;
  width: 18px;
  margin-top: 4px;
  color: var(--ht-color-saffron-deep);
  font-size: 15px;
  text-align: center;
}
.ht-footer .footer-contact a {
  color: var(--ht-color-ink);
}
.ht-footer .footer-contact a:hover {
  color: var(--ht-color-saffron-deep);
}
.ht-footer .footer-copyright {
  position: relative;
  background-color: var(--ht-color-stone);
  color: rgba(var(--ht-color-ivory-rgb), 0.85);
}
.ht-footer .copyright-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 78px;
  padding: 14px 0;
}
.ht-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
}
.ht-footer .footer-links a:hover {
  color: var(--ht-color-saffron);
}
.ht-footer .footer-copyright .ht-social a {
  width: 36px;
  height: 36px;
  font-size: 13px;
  color: var(--ht-color-ivory);
  border-color: rgba(var(--ht-color-ivory-rgb), 0.3);
}
.ht-footer .footer-copyright .ht-social a:hover {
  color: var(--ht-color-ink);
  border-color: var(--ht-color-saffron);
}
/* Style 2 (Home 2): the base's dark footer with the mandala - brand, links in
   two columns, and contact rows ruled apart */
.ht-footer.footer-style-two {
  background-color: var(--ht-color-night);
  color: rgba(var(--ht-color-ivory-rgb), 0.7);
}
.footer-style-two .footer-mandala {
  bottom: -330px;
  left: 50%;
  width: 1240px;
  margin-left: -620px;
  opacity: 0.09;
}
.ht-footer.footer-style-two .footer-cols {
  padding: 110px 0 80px;
  border-top: 0;
}
.ht-footer.footer-style-two .footer-brand {
  max-width: 380px;
  margin: 0;
  padding: 0;
  text-align: left;
}
.ht-footer.footer-style-two .footer-brand .footer-logo img {
  height: 84px;
}
.ht-footer.footer-style-two .footer-brand p {
  margin: 26px 0 30px;
  font-size: 16px;
  color: rgba(var(--ht-color-ivory-rgb), 0.7);
}
.footer-style-two .footer-brand .ht-social a {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 0;
  background-color: rgba(var(--ht-color-ivory-rgb), 0.08);
  color: var(--ht-color-ivory);
}
.footer-style-two .footer-brand .ht-social a:hover {
  background-color: var(--ht-color-saffron);
  color: var(--ht-color-ink);
}
.ht-footer.footer-style-two .footer-widget .footer-title {
  margin-bottom: 26px;
  color: var(--ht-color-ivory);
}
.footer-style-two .footer-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}
.ht-footer.footer-style-two .footer-widget li + li {
  margin-top: 0;
}
.ht-footer.footer-style-two .footer-widget li a {
  color: rgba(var(--ht-color-ivory-rgb), 0.72);
}
.ht-footer.footer-style-two .footer-widget li a:hover {
  color: var(--ht-color-saffron);
}
.footer-style-two .footer-reach li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(var(--ht-color-ivory-rgb), 0.12);
  font-size: 15px;
  line-height: 1.6;
}
.footer-style-two .footer-reach li:first-child {
  padding-top: 0;
}
.footer-style-two .footer-reach i {
  flex-shrink: 0;
  width: 40px;
  font-size: 34px;
  color: var(--ht-color-saffron);
}
.footer-style-two .footer-reach b {
  display: block;
  margin-bottom: 2px;
  font-family: var(--ht-ff-heading);
  font-size: 18px;
  font-weight: 400;
  color: var(--ht-color-ivory);
}
.ht-footer.footer-style-two .footer-widget .footer-reach a {
  display: inline;
}
.ht-footer.footer-style-two .footer-copyright {
  background-color: rgba(0, 0, 0, 0.28);
  border-top: 1px solid rgba(var(--ht-color-ivory-rgb), 0.1);
}
/* Style 3 (Home 3): light, a newsletter row on top and the base's pair of big
   mandalas behind the columns */
.ht-footer.footer-style-three {
  background-color: var(--ht-color-ivory);
}
.footer-style-three .footer-pair {
  bottom: 40px;
  left: 50%;
  width: 1920px;
  margin-left: -960px;
  opacity: 0.5;
  z-index: -1;
}
.footer-style-three .footer-news {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 90px 0 60px;
  border-bottom: 1px solid rgba(var(--ht-color-stone-rgb), 0.2);
}
.ht-footer.footer-style-three .footer-news .footer-title {
  margin-bottom: 8px;
  font-size: 32px;
}
.footer-style-three .news-copy p {
  max-width: 480px;
  margin: 0;
}
.footer-style-three .news-form {
  flex: 0 0 520px;
}
.footer-style-three .news-form .ht-subscribe {
  margin: 0;
}
.ht-footer.footer-style-three .footer-cols {
  padding: 64px 0 80px;
  border-top: 0;
}
.ht-footer.footer-style-three .footer-brand {
  max-width: 380px;
  margin: 0;
  padding: 0;
  text-align: left;
}
.ht-footer.footer-style-three .footer-brand .footer-logo img {
  height: 84px;
}
.ht-footer.footer-style-three .footer-brand p {
  margin: 26px 0 30px;
  font-size: 16px;
}
.footer-style-three .footer-brand .ht-social a {
  width: 42px;
  height: 42px;
  border: 1px solid var(--ht-color-border-2);
  border-radius: 0;
  color: var(--ht-color-ink);
}
.footer-style-three .footer-brand .ht-social a:hover {
  border-color: var(--ht-color-saffron);
  background-color: var(--ht-color-saffron);
}
.ht-footer.footer-style-three .footer-widget .footer-title {
  margin-bottom: 26px;
}
.footer-style-three .footer-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}
.ht-footer.footer-style-three .footer-widget li + li {
  margin-top: 0;
}
.footer-style-three .footer-reach li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ht-color-border);
  font-size: 15px;
  line-height: 1.6;
}
.footer-style-three .footer-reach li:first-child {
  padding-top: 0;
}
.footer-style-three .footer-reach i {
  flex-shrink: 0;
  width: 40px;
  font-size: 34px;
  color: var(--ht-color-saffron-deep);
}
.footer-style-three .footer-reach b {
  display: block;
  margin-bottom: 2px;
  font-family: var(--ht-ff-heading);
  font-size: 18px;
  font-weight: 400;
  color: var(--ht-color-ink);
}
.ht-footer.footer-style-three .footer-widget .footer-reach a {
  display: inline;
  color: var(--ht-color-body);
}
.ht-footer.footer-style-three .footer-copyright {
  background-color: var(--ht-color-sand);
  color: var(--ht-color-body);
}
.ht-footer.footer-style-three .footer-links a:hover {
  color: var(--ht-color-saffron-deep);
}

/*======================
53. Back To Top
========================*/
/* A small saffron-lined arch; the fill climbs inside it with the page */
.ht-back-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 64px;
  padding-top: 8px;
  border-radius: var(--ht-arch);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--ht-color-ivory);
  box-shadow: inset 0 0 0 1px var(--ht-color-saffron), var(--ht-shadow);
  color: var(--ht-color-ink);
  font-size: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s var(--ht-ease), transform 0.4s var(--ht-ease), visibility 0.4s;
}
.ht-back-to-top::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background-color: var(--ht-color-saffron);
  transform: scaleY(var(--ht-progress, 0));
  transform-origin: center bottom;
  z-index: -1;
}
.ht-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ht-back-to-top:hover {
  color: var(--ht-color-ivory);
  background-color: var(--ht-color-ink);
}

/*======================
54. Media Cursor
========================*/
/* The native cursor stays everywhere; only photographs, sliders, films and the
   map hand it over to a labelled disc. */
.ht-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  margin: -43px 0 0 -43px;
  border-radius: 50%;
  border: 1px solid rgba(var(--ht-color-saffron-rgb), 0.95);
  background-color: rgba(var(--ht-color-night-rgb), 0.58);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ht-color-ivory);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
html.has-media-cursor .ht-cursor {
  visibility: visible;
}
html.has-media-cursor [data-cursor],
html.has-media-cursor [data-cursor] a {
  cursor: none;
}

/*======================
55. Rising Lanterns
========================*/
/* WebGL: Sky lanterns rising over the festivals section ('when the lamps are lit'): three depths of paper lanterns drift up and sway, each flame flickering; fainter behind the festival cards; they part round the pointer (JS block Rising Lanterns) */
.ht-gl {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
  mix-blend-mode: screen;
}
.ht-gl.is-live {
  opacity: 1;
}
.ht-festivals > .container {
  position: relative;
  z-index: 2;
}