@charset "utf-8";

/*
Theme Name: Hiboncierge - Luxury Concierge 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. Topbar
4. Header
5. Offcanvas Menu
6. Itinerary
   6.1 Header Button
   6.2 Drawer
   6.3 Lines And Totals
7. Hero
8. Request Bar
9. About
10. Nine Doors
11. Services Mosaic
12. The Desk
13. Curated Weekends
14. Boutique
15. Hibo Circle
16. Night Hero
17. Stats
18. Reviews
19. Contact
20. Night Variant
21. Forms
22. Footer
23. Back To Top
24. Desk Lamp
*/

/*======================
1. General
========================*/
:root {
  --hc-color-ink: #14110E;
  --hc-color-ink-rgb: 20, 17, 14;
  --hc-color-espresso: #221C15;
  --hc-color-espresso-rgb: 34, 28, 21;
  --hc-color-gold: #C2A46A;
  --hc-color-gold-rgb: 194, 164, 106;
  --hc-color-gold-deep: #9A7C45;
  --hc-color-champagne: #EFE4D2;
  --hc-color-champagne-rgb: 239, 228, 210;
  --hc-color-sand: #F7F3EC;
  --hc-color-sand-rgb: 247, 243, 236;
  --hc-color-white: #FFFFFF;
  --hc-color-white-rgb: 255, 255, 255;
  --hc-color-body: #6C665E;
  --hc-color-muted: #9A938A;
  --hc-color-border: #E6DED2;
  --hc-color-border-2: #D6CBB8;
  /* the night grounds, Hibojet's own blacks (Home 2, the Desk band) */
  --hc-color-night: #111111;
  --hc-color-night-rgb: 17, 17, 17;
  --hc-color-raised: #1C1A17;
  --hc-color-raised-rgb: 28, 26, 23;
  --hc-ff-heading: 'DM Serif Display', Georgia, serif;
  --hc-ff-body: 'Jost', sans-serif;
  --hc-fs-h1: clamp(46px, 5.2vw, 86px);
  --hc-fs-h2: clamp(32px, 3.6vw, 54px);
  --hc-fs-h3: 32px;
  --hc-fs-h4: 22px;
  --hc-fs-h5: 18px;
  --hc-fs-h6: 15px;
  --hc-radius: 0px;
  --hc-radius-sm: 0px;
  --hc-shadow: 0 24px 60px rgba(20, 17, 14, 0.08);
  --hc-shadow-lg: 0 40px 90px rgba(20, 17, 14, 0.16);
  --hc-ease: cubic-bezier(0.22, 0.61, 0.36, 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(--hc-ff-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.78;
  color: var(--hc-color-body);
  background-color: var(--hc-color-white);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  /* DM Serif Display ships one weight: never fake a bolder one */
  font-synthesis: style;
}
a {
  text-decoration: none;
  color: inherit;
  transition: color 0.35s var(--hc-ease);
}
a:hover {
  color: var(--hc-color-gold-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(--hc-color-ink);
}
::selection {
  background: var(--hc-color-gold);
  color: var(--hc-color-ink);
}
.hc-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*---- 1.1 Typography ----*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--hc-ff-heading);
  color: var(--hc-color-ink);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.01em;
}
h1 {
  font-size: var(--hc-fs-h1);
  line-height: 1.04;
}
h2 {
  font-size: var(--hc-fs-h2);
  line-height: 1.1;
}
h3 {
  font-size: var(--hc-fs-h3);
  line-height: 1.24;
}
h4 {
  font-size: var(--hc-fs-h4);
  line-height: 1.3;
}
h5 {
  font-size: var(--hc-fs-h5);
  line-height: 1.4;
}
h6 {
  font-size: var(--hc-fs-h6);
  line-height: 1.5;
}
p {
  margin-bottom: 0;
}
p + p {
  margin-top: 18px;
}
.hc-lead {
  font-size: 19px;
  line-height: 1.72;
  color: var(--hc-color-body);
}
.hc-small {
  font-size: 15px;
  line-height: 1.7;
}
.hc-caps {
  font-family: var(--hc-ff-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1.6;
}
.hc-num {
  font-family: var(--hc-ff-heading);
  font-weight: 400;
  font-variant-numeric: lining-nums;
}
.hc-serif-italic {
  font-family: var(--hc-ff-heading);
  font-style: italic;
  font-weight: 400;
}
.hc-gold {
  color: var(--hc-color-gold-deep);
}
.hc-ink {
  color: var(--hc-color-ink);
}

/*---- 1.2 Spacing ----*/
.sec-pt-130 {
  padding-top: 130px;
}
.sec-pb-130 {
  padding-bottom: 130px;
}
.sec-pt-100 {
  padding-top: 100px;
}
.sec-pb-100 {
  padding-bottom: 100px;
}
.sec-pt-90 {
  padding-top: 90px;
}
.sec-pb-90 {
  padding-bottom: 90px;
}
.sec-pb-60 {
  padding-bottom: 60px;
}
/* The tinted bands carry a photograph under a heavy wash of their own colour,
   so it reads as texture rather than as a picture. The tint is a gradient layer
   stacked over the photograph in the same background shorthand - no overlay
   element and no stacking context, which matters because several blocks are
   pulled up over the band above them by a negative margin. */
.hc-sand {
  background-color: var(--hc-color-sand);
  background-image: linear-gradient(rgba(var(--hc-color-sand-rgb), 0.955),
      rgba(var(--hc-color-sand-rgb), 0.955)), url(../img/bg/section-bg.jpg);
  background-size: cover;
  background-position: center;
}
.hc-dark {
  background-color: var(--hc-color-ink);
  background-image: linear-gradient(rgba(var(--hc-color-ink-rgb), 0.958),
      rgba(var(--hc-color-ink-rgb), 0.958)), url(../img/bg/section-bg.jpg);
  background-size: cover;
  background-position: center;
  color: rgba(var(--hc-color-white-rgb), 0.66);
}
.hc-dark h1,
.hc-dark h2,
.hc-dark h3,
.hc-dark h4,
.hc-dark h5,
.hc-dark h6 {
  color: var(--hc-color-white);
}
.container-wide {
  max-width: 1600px;
  padding-left: 40px;
  padding-right: 40px;
  margin: 0 auto;
  width: 100%;
}

/*---- 1.3 Buttons ----*/
.hc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 60px;
  padding: 0 38px;
  font-family: var(--hc-ff-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hc-color-ink);
  background-color: var(--hc-color-gold);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--hc-ease);
}
.hc-btn::before {
  position: absolute;
  content: "";
  inset: 0;
  background-color: var(--hc-color-ink);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--hc-ease);
  z-index: -1;
}
.hc-btn:hover {
  color: var(--hc-color-gold);
}
.hc-btn:hover::before {
  transform: scaleX(1);
  transform-origin: left center;
}
.hc-btn .btn-ic {
  position: relative;
  display: block;
  width: 13px;
  height: 12px;
  overflow: hidden;
}
.hc-btn .btn-ic i {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 12px;
  line-height: 12px;
  transition: transform 0.45s var(--hc-ease);
}
.hc-btn .btn-ic i:last-child {
  transform: translateX(-130%);
}
.hc-btn:hover .btn-ic i:first-child {
  transform: translateX(130%);
}
.hc-btn:hover .btn-ic i:last-child {
  transform: translateX(0);
}
.hc-btn-outline {
  background-color: transparent;
  color: var(--hc-color-ink);
  box-shadow: inset 0 0 0 1px var(--hc-color-border-2);
}
.hc-btn-outline::before {
  background-color: var(--hc-color-ink);
}
.hc-btn-outline:hover {
  color: var(--hc-color-white);
}
.hc-btn-ghost {
  background-color: transparent;
  color: var(--hc-color-white);
  box-shadow: inset 0 0 0 1px rgba(var(--hc-color-white-rgb), 0.38);
}
.hc-btn-ghost::before {
  background-color: var(--hc-color-white);
}
.hc-btn-ghost:hover {
  color: var(--hc-color-ink);
}
.hc-btn-ink {
  background-color: var(--hc-color-ink);
  color: var(--hc-color-white);
}
.hc-btn-ink::before {
  background-color: var(--hc-color-gold);
}
.hc-btn-ink:hover {
  color: var(--hc-color-ink);
}
.hc-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hc-color-ink);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hc-color-border-2);
  transition: color 0.35s var(--hc-ease), border-color 0.35s var(--hc-ease);
}
.hc-link i {
  font-size: 11px;
  transition: transform 0.4s var(--hc-ease);
}
.hc-link:hover {
  color: var(--hc-color-gold-deep);
  border-color: var(--hc-color-gold);
}
.hc-link:hover i {
  transform: translateX(5px);
}
.hc-dark .hc-link {
  color: var(--hc-color-white);
  border-color: rgba(var(--hc-color-white-rgb), 0.24);
}
.hc-dark .hc-link:hover {
  color: var(--hc-color-gold);
  border-color: var(--hc-color-gold);
}

/*---- 1.4 Section Title ----*/
.hc-sec-title .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--hc-ff-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hc-color-gold-deep);
  margin-bottom: 22px;
}
.hc-sec-title .eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background-color: var(--hc-color-gold);
  transform: rotate(45deg);
  flex: none;
}
.hc-sec-title.text-center .eyebrow::after {
  content: "";
  width: 7px;
  height: 7px;
  background-color: var(--hc-color-gold);
  transform: rotate(45deg);
  flex: none;
}
.hc-sec-title h2 {
  margin-bottom: 0;
}
.hc-sec-title + p,
.hc-sec-title + .hc-lead {
  margin-top: 26px;
}
.hc-sec-title .lead-text {
  font-size: 19px;
  line-height: 1.72;
  margin-top: 24px;
  max-width: 620px;
}
.hc-sec-title.text-center .lead-text {
  margin-left: auto;
  margin-right: auto;
}
.hc-dark .hc-sec-title .eyebrow {
  color: var(--hc-color-gold);
}
.hc-rule {
  display: block;
  width: 64px;
  height: 1px;
  background-color: var(--hc-color-gold);
  border: 0;
  opacity: 1;
}

/*---- 1.5 Helpers & Reveals ----*/
.hc-frame {
  position: relative;
  display: block;
  overflow: hidden;
}
.hc-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 1.2s var(--hc-ease);
}
.hc-frame:hover img {
  transform: scale(1.06);
  transform-origin: center top;
}
.hc-frame-gold {
  position: relative;
}
.hc-frame-gold::after {
  position: absolute;
  content: "";
  inset: 18px;
  border: 1px solid rgba(var(--hc-color-white-rgb), 0.5);
  pointer-events: none;
  z-index: 2;
}
.hc-offset-frame {
  position: relative;
}
.hc-offset-frame::before {
  position: absolute;
  content: "";
  top: 26px;
  left: -26px;
  width: 100%;
  height: 100%;
  border: 1px solid var(--hc-color-gold);
  pointer-events: none;
  z-index: 0;
}
.hc-offset-frame > * {
  position: relative;
  z-index: 1;
}
.hc-ghost-num {
  font-family: var(--hc-ff-heading);
  font-size: 190px;
  font-weight: 600;
  line-height: 0.8;
  color: rgba(var(--hc-color-gold-rgb), 0.16);
  pointer-events: none;
  user-select: none;
}
.hc-side-label {
  position: absolute;
  writing-mode: vertical-rl;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(var(--hc-color-white-rgb), 0.5);
  z-index: 4;
}
.hc-grain {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image: radial-gradient(rgba(var(--hc-color-white-rgb), 0.035) 1px, transparent 1px);
  background-size: 3px 3px;
  z-index: 1;
}
.hc-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(var(--hc-color-ink-rgb), 0) 42%, rgba(var(--hc-color-ink-rgb), 0.55) 100%);
  z-index: 1;
}
.hc-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--hc-color-ink-rgb), 0.5) 0%, rgba(var(--hc-color-ink-rgb), 0.28) 45%, rgba(var(--hc-color-ink-rgb), 0.72) 100%);
  z-index: 1;
}
.hc-bg-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hc-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* A parallaxed backdrop travels by a share of its own height, and its scrub is
   already part-way along before the page is scrolled at all, so it needs
   headroom at both ends or it slides off the frame and shows the edge. The
   largest data-parallax in the pages is 8, which moves 8% of 132% = 10.6% of
   the frame, comfortably inside the 16% left above and below. */
.hc-bg-img img[data-parallax] {
  position: absolute;
  left: 0;
  top: -16%;
  height: 132%;
}
.hc-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* room inside the mask for glyphs that lean or hang past the word (italics, descenders), taken back by the
     margin so the words keep their places */
  padding: 0 0.16em 0.16em 0.08em;
  margin: 0 -0.16em -0.16em -0.08em;
}
.hc-word > span {
  display: inline-block;
  will-change: transform;
}
.js .fade-up,
.js .fade-in,
.js .fade-right,
.js .fade-left {
  opacity: 0;
}
/* Frame Open (primary reveal): a photograph opens from its centre like a frame
   being drawn apart; the reveal engine hands it back open on every skip path */
.js .frame-open {
  clip-path: inset(50% 50% 50% 50%);
}
/* gold hairline draw (secondary reveal) */
.js .draw-line {
  transform: scaleX(0);
  transform-origin: left center;
}
/* hero titles sit on set lines: each line is its own nowrap span */
.hero-title .h-line {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  /* room inside the mask for the descenders (g, y, p) */
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.hero-title .h-line > span {
  display: inline-block;
}
.swiper {
  width: 100%;
}
.hc-rhombus {
  display: inline-block;
  width: 7px;
  height: 7px;
  background-color: var(--hc-color-gold);
  transform: rotate(45deg);
}

/*======================
2. Preloader
========================*/
/* P6 frame window: an espresso screen with a square window at its centre. The
   gold frame draws around the bell, the bell rings once, then the window opens
   from the centre until the four panels have left the screen. --win is the
   window's side, --frame the gold frame's; both are tweened by JS. */
.hc-preloader {
  --win: 0px;
  --frame: 188px;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.hc-preloader .pre-panel {
  position: absolute;
  background-color: var(--hc-color-espresso);
}
.hc-preloader .pre-panel.is-top,
.hc-preloader .pre-panel.is-bottom {
  left: 0;
  right: 0;
  height: max(0px, calc(50% - var(--win) / 2));
}
.hc-preloader .pre-panel.is-top {
  top: 0;
}
.hc-preloader .pre-panel.is-bottom {
  bottom: 0;
}
.hc-preloader .pre-panel.is-left,
.hc-preloader .pre-panel.is-right {
  top: 0;
  bottom: 0;
  width: max(0px, calc(50% - var(--win) / 2));
}
.hc-preloader .pre-panel.is-left {
  left: 0;
}
.hc-preloader .pre-panel.is-right {
  right: 0;
}
/* the window itself is espresso until it opens: a fifth plate that fades away */
.hc-preloader::before {
  position: absolute;
  content: "";
  inset: 0;
  background-color: var(--hc-color-espresso);
  opacity: var(--plate, 1);
}
.hc-preloader .pre-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--frame);
  height: var(--frame);
  border: 1px solid var(--hc-color-gold);
  transform: translate(-50%, -50%);
  z-index: 2;
}
/* one grid cell over the whole screen: the bell sits on the frame's exact centre
   (no transform, so the ring and the rise are free to use it) */
.hc-preloader .pre-inner {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.hc-preloader .pre-mark,
.hc-preloader .pre-word {
  grid-area: 1 / 1;
}
.hc-preloader .pre-mark {
  width: 112px;
  height: auto;
  transform-origin: 50% 85%;
}
/* the name hangs below the frame; the left padding balances the tracking the
   last letter carries, so the word is centred on its letters */
.hc-preloader .pre-word {
  align-self: start;
  margin-top: calc(50vh + 94px + 36px);
  padding-left: 0.5em;
  font-family: var(--hc-ff-heading);
  font-size: 15px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--hc-color-champagne);
  white-space: nowrap;
}

/*======================
3. Topbar
========================*/
.hc-topbar {
  position: relative;
  z-index: 20;
  background-color: var(--hc-color-espresso);
  color: rgba(var(--hc-color-white-rgb), 0.7);
  font-size: 14px;
  letter-spacing: 0.04em;
}
.hc-topbar .topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 48px;
  padding: 6px 0;
}
.hc-topbar .topbar-welcome {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hc-topbar .topbar-welcome .hc-rhombus {
  width: 6px;
  height: 6px;
}
.hc-topbar .topbar-meta {
  display: flex;
  align-items: center;
  gap: 34px;
}
.hc-topbar .topbar-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hc-topbar .topbar-meta i {
  font-size: 13px;
  color: var(--hc-color-gold);
}
.hc-topbar .topbar-meta a:hover {
  color: var(--hc-color-gold);
}
.hc-topbar .topbar-social {
  display: flex;
  align-items: center;
  gap: 20px;
}
.hc-topbar .topbar-social a {
  font-size: 13px;
  color: rgba(var(--hc-color-white-rgb), 0.55);
}
.hc-topbar .topbar-social a:hover {
  color: var(--hc-color-gold);
}
/* the three desks' clocks and the currency */
.hc-topbar .desk-time b {
  font-weight: 500;
  color: var(--hc-color-gold);
}
.hc-topbar .topbar-currency select {
  height: 30px;
  padding: 0 26px 0 10px;
  border: 1px solid rgba(var(--hc-color-white-rgb), 0.24);
  background-color: transparent;
  background-image: linear-gradient(45deg, transparent 50%, var(--hc-color-gold) 50%),
    linear-gradient(135deg, var(--hc-color-gold) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  appearance: none;
  font-family: var(--hc-ff-body);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--hc-color-white);
  cursor: pointer;
}
.hc-topbar .topbar-currency select option {
  color: var(--hc-color-ink);
}
.hc-topbar.is-night {
  background-color: var(--hc-color-night);
  border-bottom: 1px solid rgba(var(--hc-color-white-rgb), 0.08);
}

/*======================
4. Header
========================*/
.hc-header {
  position: absolute;
  /* below the top bar; the sticky state returns to the top edge */
  top: 48px;
  left: 0;
  width: 100%;
  z-index: 30;
}
.hc-header .header-inner > * {
  min-width: 0;
}
.hc-header .header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  min-height: 108px;
}
.hc-logo {
  display: inline-block;
  line-height: 0;
}
.hc-logo img {
  display: block;
  width: auto;
  height: 62px;
}
.hc-logo .logo-light {
  display: inline-block;
}
.hc-logo .logo-main {
  display: none;
}
.hc-nav > ul {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hc-nav > ul > li {
  position: relative;
  padding: 36px 0;
}
.hc-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hc-color-white);
  white-space: nowrap;
}
.hc-nav > ul > li > a i {
  font-size: 9px;
  opacity: 0.6;
  transition: transform 0.35s var(--hc-ease);
}
.hc-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.hc-nav > ul > li:hover > a,
.hc-nav > ul > li.active > a {
  color: var(--hc-color-gold);
}
.hc-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: -26px;
  min-width: 234px;
  list-style: none;
  margin: 0;
  padding: 16px 0;
  background-color: var(--hc-color-white);
  box-shadow: var(--hc-shadow);
  border-top: 2px solid var(--hc-color-gold);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.35s var(--hc-ease), transform 0.35s var(--hc-ease), visibility 0.35s;
  z-index: 5;
}
.hc-nav li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hc-nav .sub-menu li {
  position: relative;
}
.hc-nav .sub-menu li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 26px;
  font-size: 14.5px;
  letter-spacing: 0.04em;
  color: var(--hc-color-body);
  transition: color 0.3s var(--hc-ease), padding 0.35s var(--hc-ease);
}
.hc-nav .sub-menu li > a i {
  font-size: 9px;
  opacity: 0.5;
}
.hc-nav .sub-menu li > a:hover {
  color: var(--hc-color-ink);
  padding-left: 33px;
}
.hc-nav .sub-menu li.active > a {
  color: var(--hc-color-gold-deep);
}
.hc-nav .sub-menu .sub-menu {
  top: -18px;
  left: 100%;
  transform: translateX(16px);
}
.hc-nav .sub-menu li:hover > .sub-menu {
  transform: translateX(0);
}
.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
}
.header-contact {
  display: flex;
  align-items: center;
  gap: 28px;
}
.header-contact .item {
  display: flex;
  align-items: center;
  gap: 13px;
}
.header-contact .ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid rgba(var(--hc-color-white-rgb), 0.28);
  color: var(--hc-color-gold);
  font-size: 14px;
  transition: border-color 0.35s var(--hc-ease), background-color 0.35s var(--hc-ease), color 0.35s var(--hc-ease);
}
.header-contact .item:hover .ic {
  background-color: var(--hc-color-gold);
  border-color: var(--hc-color-gold);
  color: var(--hc-color-ink);
}
.header-contact .txt {
  line-height: 1.4;
}
.header-contact .label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--hc-color-white-rgb), 0.5);
}
.header-contact .value {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--hc-color-white);
  white-space: nowrap;
}
.hc-menu-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex: none;
  gap: 6px;
  border: 1px solid rgba(var(--hc-color-white-rgb), 0.28);
  transition: border-color 0.35s var(--hc-ease), background-color 0.35s var(--hc-ease);
}
.hc-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--hc-color-white);
  transition: background-color 0.35s var(--hc-ease), transform 0.35s var(--hc-ease);
}
.hc-menu-toggle:hover {
  border-color: var(--hc-color-gold);
  background-color: var(--hc-color-gold);
}
.hc-menu-toggle:hover span {
  background-color: var(--hc-color-ink);
}
.hc-menu-toggle:hover span:first-child {
  transform: translateY(-2px);
}
.hc-menu-toggle:hover span:last-child {
  transform: translateY(2px);
}
.header-icon-btn {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: none;
  font-size: 14px;
  border: 1px solid rgba(var(--hc-color-white-rgb), 0.28);
  color: var(--hc-color-white);
  transition: border-color 0.35s var(--hc-ease), background-color 0.35s var(--hc-ease), color 0.35s var(--hc-ease);
}
.header-icon-btn:hover {
  border-color: var(--hc-color-gold);
  background-color: var(--hc-color-gold);
  color: var(--hc-color-ink);
}

/*---- Sticky state ----*/
.hc-header.sticky-on {
  position: fixed;
  top: 0;
  background-color: var(--hc-color-white);
  box-shadow: 0 10px 40px rgba(var(--hc-color-ink-rgb), 0.08);
  animation: hbSlideDown 0.55s var(--hc-ease) both;
}
@keyframes hbSlideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
.hc-header.sticky-on .header-inner {
  min-height: 86px;
}
.hc-header.sticky-on .hc-logo img {
  height: 54px;
}
.hc-header.sticky-on .hc-nav > ul > li {
  padding: 26px 0;
}
.hc-header.sticky-on .hc-nav > ul > li > a,
.hc-header.sticky-on .header-contact .value {
  color: var(--hc-color-ink);
}
.hc-header.sticky-on .hc-nav > ul > li:hover > a,
.hc-header.sticky-on .hc-nav > ul > li.active > a {
  color: var(--hc-color-gold-deep);
}
.hc-header.sticky-on .header-contact .label {
  color: var(--hc-color-muted);
}
.hc-header.sticky-on .header-contact .ic,
.hc-header.sticky-on .hc-menu-toggle,
.hc-header.sticky-on .header-icon-btn {
  border-color: var(--hc-color-border);
}
.hc-header.sticky-on .header-icon-btn {
  color: var(--hc-color-ink);
}
.hc-header.sticky-on .hc-menu-toggle span {
  background-color: var(--hc-color-ink);
}
.hc-header.sticky-on .hc-menu-toggle:hover span {
  background-color: var(--hc-color-ink);
}
.hc-header.sticky-on .hc-logo .logo-light {
  display: none;
}
.hc-header.sticky-on .hc-logo .logo-main {
  display: inline-block;
}

/*---- Header Style Two ----*/
.header-style-two .header-left {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header-style-two .menu-word {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hc-color-white);
}
.header-style-two.sticky-on .menu-word {
  color: var(--hc-color-ink);
}
.header-style-two .header-right {
  gap: 22px;
}

/*---- Header Style Three ----*/
.header-style-three {
  position: absolute;
  top: 48px;
}
.header-style-three .header-shell {
  background-color: var(--hc-color-white);
  padding: 0 40px;
  box-shadow: 0 24px 60px rgba(var(--hc-color-ink-rgb), 0.12);
}
.header-style-three .header-inner {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 96px;
  gap: 40px;
}
.header-style-three .hc-nav > ul {
  justify-content: center;
}
.header-style-three .hc-nav > ul > li > a {
  color: var(--hc-color-ink);
}
.header-style-three .hc-nav > ul > li:hover > a,
.header-style-three .hc-nav > ul > li.active > a {
  color: var(--hc-color-gold-deep);
}
.header-style-three .hc-logo .logo-light {
  display: none;
}
.header-style-three .hc-logo .logo-main {
  display: inline-block;
}
.header-style-three .header-icon-btn,
.header-style-three .hc-menu-toggle {
  border-color: var(--hc-color-border);
  color: var(--hc-color-ink);
}
.header-style-three .hc-menu-toggle span {
  background-color: var(--hc-color-ink);
}
.header-style-three .hc-menu-toggle:hover span {
  background-color: var(--hc-color-ink);
}
.header-style-three .header-right {
  gap: 12px;
}
.header-style-three.sticky-on {
  top: 0;
}
.header-style-three.sticky-on .header-shell {
  box-shadow: none;
  padding: 0;
}

/*======================
5. Offcanvas Menu
========================*/
.hc-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  width: 430px;
  max-width: 100%;
  height: 100%;
  z-index: 999;
  background-color: var(--hc-color-ink);
  transform: translateX(100%);
  transition: transform 0.6s var(--hc-ease);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hc-offcanvas.is-open {
  transform: translateX(0);
}
body.oc-open {
  overflow: hidden;
}
.hc-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  background-color: rgba(var(--hc-color-ink-rgb), 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--hc-ease), visibility 0.5s;
}
.hc-offcanvas-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
/* head and foot stay put; only the link list scrolls */
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex: none;
  padding: 34px 40px 26px;
  border-bottom: 1px solid rgba(var(--hc-color-white-rgb), 0.09);
}
.offcanvas-head img {
  width: 196px;
}
.offcanvas-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid rgba(var(--hc-color-white-rgb), 0.2);
  color: var(--hc-color-white);
  font-size: 15px;
  transition: background-color 0.35s var(--hc-ease), color 0.35s var(--hc-ease), border-color 0.35s var(--hc-ease);
}
.offcanvas-close:hover {
  background-color: var(--hc-color-gold);
  border-color: var(--hc-color-gold);
  color: var(--hc-color-ink);
}
.offcanvas-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 26px 40px 30px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--hc-color-gold-rgb), 0.5) transparent;
}
.offcanvas-nav::-webkit-scrollbar {
  width: 3px;
}
.offcanvas-nav::-webkit-scrollbar-thumb {
  background-color: rgba(var(--hc-color-gold-rgb), 0.5);
}
.offcanvas-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.oc-group + .oc-group {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--hc-color-white-rgb), 0.09);
}
.oc-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hc-color-gold);
  margin-bottom: 8px;
}
.offcanvas-nav a {
  display: block;
  padding: 7px 0;
  font-size: 14.5px;
  letter-spacing: 0.06em;
  color: rgba(var(--hc-color-white-rgb), 0.72);
  transition: color 0.3s var(--hc-ease), padding-left 0.35s var(--hc-ease);
}
.offcanvas-nav a:hover {
  color: var(--hc-color-gold);
  padding-left: 12px;
}
.offcanvas-nav a.is-current {
  color: var(--hc-color-gold);
}
.offcanvas-nav a.is-current::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  background-color: var(--hc-color-gold);
  transform: rotate(45deg);
}
.offcanvas-foot {
  flex: none;
  padding: 24px 40px 30px;
  border-top: 1px solid rgba(var(--hc-color-white-rgb), 0.09);
}
.offcanvas-foot .label {
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hc-color-gold);
  display: block;
  margin-bottom: 10px;
}
.offcanvas-foot .mt-label {
  margin-top: 22px;
}
.offcanvas-foot .mail {
  font-family: var(--hc-ff-heading);
  font-size: 22px;
  color: var(--hc-color-white);
}
.offcanvas-foot .mail:hover {
  color: var(--hc-color-gold);
}
.hc-social {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
}
.hc-social a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 15px;
  border: 1px solid rgba(var(--hc-color-white-rgb), 0.16);
  color: rgba(var(--hc-color-white-rgb), 0.7);
  transition: background-color 0.35s var(--hc-ease), color 0.35s var(--hc-ease), border-color 0.35s var(--hc-ease);
}
.hc-social a:hover {
  background-color: var(--hc-color-gold);
  border-color: var(--hc-color-gold);
  color: var(--hc-color-ink);
}

/*---- Header On Light ----*/
.hc-header.on-light .hc-nav > ul > li > a,
.hc-header.on-light .header-contact .value,
.hc-header.on-light .menu-word {
  color: var(--hc-color-ink);
}
.hc-header.on-light .hc-nav > ul > li:hover > a,
.hc-header.on-light .hc-nav > ul > li.active > a {
  color: var(--hc-color-gold-deep);
}
.hc-header.on-light .header-contact .label {
  color: var(--hc-color-muted);
}
.hc-header.on-light .header-contact .ic,
.hc-header.on-light .hc-menu-toggle,
.hc-header.on-light .header-icon-btn {
  border-color: var(--hc-color-border);
}
.hc-header.on-light .header-icon-btn {
  color: var(--hc-color-ink);
}
.hc-header.on-light .hc-menu-toggle span {
  background-color: var(--hc-color-ink);
}
.hc-header.on-light .hc-logo .logo-light {
  display: none;
}
.hc-header.on-light .hc-logo .logo-main {
  display: inline-block;
}
.hc-nav-right .sub-menu {
  left: auto;
  right: -26px;
}
.hc-nav-right .sub-menu .sub-menu {
  right: 100%;
  left: auto;
  transform: translateX(-16px);
}
.hc-nav-right .sub-menu li:hover > .sub-menu {
  transform: translateX(0);
}
.hc-nav-right .sub-menu li > a {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.visually-hidden-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/*---- Shared Slider Controls ----*/
.slider-nav {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: none;
  font-size: 14px;
  color: var(--hc-color-ink);
  background-color: var(--hc-color-white);
  box-shadow: inset 0 0 0 1px var(--hc-color-border);
  transition: background-color 0.4s var(--hc-ease), color 0.4s var(--hc-ease), box-shadow 0.4s var(--hc-ease);
}
.slider-nav:hover {
  background-color: var(--hc-color-gold);
  box-shadow: inset 0 0 0 1px var(--hc-color-gold);
  color: var(--hc-color-ink);
}
.slider-nav.swiper-button-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.progress-nav .progress-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.progress-ring-track {
  fill: none;
  stroke: rgba(var(--hc-color-ink-rgb), 0.12);
  stroke-width: 1.5;
}
.progress-ring-fill {
  fill: none;
  stroke: var(--hc-color-gold);
  stroke-width: 1.5;
  stroke-linecap: butt;
}
.slider-count {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--hc-color-ink);
}
.slider-count .sep,
.slider-count .tot {
  color: var(--hc-color-muted);
  font-size: 14px;
}

/*======================
6. Itinerary
========================*/
/*---- 6.1 Header Button ----*/
.hc-itin-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 18px 0 8px;
  border: 1px solid rgba(var(--hc-color-gold-rgb), 0.55);
  background-color: transparent;
  color: var(--hc-color-white);
  transition: background-color 0.35s var(--hc-ease), border-color 0.35s var(--hc-ease);
}
.hc-itin-btn:hover {
  background-color: rgba(var(--hc-color-gold-rgb), 0.14);
  border-color: var(--hc-color-gold);
}
.hc-itin-btn .ib-ic {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--hc-color-gold);
  color: var(--hc-color-ink);
  font-size: 15px;
}
.hc-itin-btn .ib-count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background-color: var(--hc-color-ink);
  color: var(--hc-color-white);
  font-family: var(--hc-ff-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.hc-itin-btn .ib-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
.hc-itin-btn .ib-label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.72;
}
.hc-itin-btn .ib-total {
  font-family: var(--hc-ff-heading);
  font-size: 17px;
}
.hc-itin-btn.is-bump .ib-ic {
  animation: hcBell 0.7s var(--hc-ease);
}
@keyframes hcBell {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(11deg); }
  60% { transform: rotate(-7deg); }
  80% { transform: rotate(4deg); }
}
.hc-header.on-light:not(.sticky-on) .hc-itin-btn,
.hc-header.sticky-on .hc-itin-btn {
  color: var(--hc-color-ink);
}

/*---- 6.2 Drawer ----*/
.hc-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1002;
  display: flex;
  flex-direction: column;
  width: 440px;
  max-width: 100%;
  background-color: var(--hc-color-sand);
  transform: translateX(104%);
  transition: transform 0.6s var(--hc-ease), box-shadow 0.6s var(--hc-ease);
}
/* the shadow only while open: parked off screen it would still shade the page edge */
.hc-drawer.is-open {
  transform: none;
  box-shadow: -30px 0 80px rgba(var(--hc-color-ink-rgb), 0.18);
}
.hc-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background-color: rgba(var(--hc-color-ink-rgb), 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--hc-ease), visibility 0.5s;
}
.hc-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.hc-drawer .drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 32px;
  border-bottom: 1px solid var(--hc-color-border);
}
.hc-drawer .drawer-title {
  font-family: var(--hc-ff-heading);
  font-size: 24px;
  color: var(--hc-color-ink);
}
.hc-drawer .drawer-title i {
  margin-right: 10px;
  font-size: 18px;
  color: var(--hc-color-gold-deep);
}
.hc-drawer .drawer-close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--hc-color-border-2);
  background: none;
  color: var(--hc-color-ink);
  transition: background-color 0.3s var(--hc-ease), color 0.3s var(--hc-ease);
}
.hc-drawer .drawer-close:hover {
  background-color: var(--hc-color-ink);
  color: var(--hc-color-white);
}
.hc-drawer .drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 32px;
}
.hc-drawer .drawer-foot {
  padding: 22px 32px 30px;
  background-color: var(--hc-color-white);
  border-top: 1px solid var(--hc-color-border);
}
.hc-drawer .drawer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}

/*---- 6.3 Lines And Totals ----*/
.itin-lines li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--hc-color-border);
}
.itin-lines .il-ic {
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(var(--hc-color-gold-rgb), 0.6);
  color: var(--hc-color-gold-deep);
  font-size: 14px;
}
.itin-lines .il-name {
  font-weight: 500;
  color: var(--hc-color-ink);
  line-height: 1.35;
}
.itin-lines .il-price {
  font-family: var(--hc-ff-heading);
  font-size: 17px;
  color: var(--hc-color-ink);
  white-space: nowrap;
}
.itin-lines .il-detail {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--hc-color-muted);
}
.itin-lines .il-remove {
  justify-self: end;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hc-color-muted);
  transition: color 0.3s var(--hc-ease);
}
.itin-lines .il-remove:hover {
  color: var(--hc-color-ink);
}
.itin-empty {
  padding: 26px 0;
  font-size: 15px;
  color: var(--hc-color-muted);
}
.itin-totals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  margin: 0;
  font-size: 15px;
}
.itin-totals dt {
  font-weight: 400;
  color: var(--hc-color-body);
}
.itin-totals dd {
  margin: 0;
  text-align: right;
  font-family: var(--hc-ff-heading);
  color: var(--hc-color-ink);
}
.itin-totals .is-saving {
  color: var(--hc-color-gold-deep);
}
.itin-totals .is-total {
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--hc-color-border-2);
  font-size: 16px;
  font-weight: 500;
  color: var(--hc-color-ink);
}
.itin-totals dd.is-total {
  font-size: 26px;
  font-weight: 500;
}
.itin-clear {
  border: 0;
  background: none;
  padding: 0;
}

/*======================
7. Hero
========================*/
/* Home 1: the route globe. The copy sits on the left, one block per slide stacked
   in a single grid cell. On the right, the three.js globe turns to each slide's
   route, with that slide's photograph and its live route card set over it. A bar
   below carries a tab per slide with its autoplay progress. */
.hero-area {
  position: relative;
  overflow: hidden;
}
.hero-globe {
  background-color: var(--hc-color-sand);
  padding: 164px 0 118px;
}
.hero-globe::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: 36%;
  height: 100%;
  background-color: var(--hc-color-champagne);
  opacity: 0.5;
  z-index: 0;
}
.hero-side {
  top: 330px;
  left: 6px;
  color: rgba(var(--hc-color-ink-rgb), 0.38);
  z-index: 4;
}
.hero-globe .container-wide {
  position: relative;
  z-index: 2;
}
.globe-grid > * {
  min-width: 0;
}
.globe-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 30px;
  align-items: center;
}

/*---- The copy: slides stacked in one cell ----*/
.globe-slides {
  display: grid;
}
.globe-slide {
  grid-area: 1 / 1;
  visibility: hidden;
}
.globe-slide.is-active {
  visibility: visible;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--hc-color-gold-deep);
  margin-bottom: 24px;
}
.globe-slide .hero-title {
  font-size: clamp(44px, 4.7vw, 78px);
  line-height: 1.02;
  margin-bottom: 28px;
}
.globe-slide .hero-title .hc-serif-italic {
  color: var(--hc-color-gold-deep);
}
.globe-slide .hc-lead {
  max-width: 44ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 42px;
}

/*---- The media: globe, photograph, route card ----*/
.globe-media {
  position: relative;
  min-height: 570px;
}
.globe-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 780px;
  height: 780px;
  transform: translate(-45%, -52%);
  z-index: 0;
}
.globe-halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--hc-color-white-rgb), 0.95) 0%, rgba(var(--hc-color-white-rgb), 0.5) 42%, rgba(var(--hc-color-white-rgb), 0) 70%);
}
.globe-canvas {
  position: absolute;
  inset: 0;
}
.globe-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* the route's two cities, placed on the globe by the render loop */
.globe-label {
  position: absolute;
  left: 0;
  top: 0;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--hc-color-white);
  background-color: var(--hc-color-espresso);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--hc-ease);
  z-index: 2;
}
.globe-label.is-on {
  opacity: 1;
}
.globe-label::after {
  position: absolute;
  content: "";
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 9px;
  background-color: var(--hc-color-espresso);
  transform: translateX(-50%) rotate(45deg);
  z-index: -1;
}
/* no WebGL: the photograph and the card carry the hero alone */
.hero-globe.no-globe .globe-stage {
  display: none;
}
.globe-photo {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 214px;
  aspect-ratio: 4 / 5;
  z-index: 3;
}
.globe-photo::before {
  position: absolute;
  content: "";
  top: -18px;
  left: -18px;
  width: 100%;
  height: 100%;
  border: 1px solid var(--hc-color-gold);
  pointer-events: none;
}
.gp-shot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  box-shadow: var(--hc-shadow-lg);
}
.gp-shot.is-active {
  visibility: visible;
}
.gp-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.route-card {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 310px;
  padding: 26px 28px 22px;
  background-color: var(--hc-color-white);
  box-shadow: var(--hc-shadow-lg);
  border-top: 2px solid var(--hc-color-gold);
  z-index: 3;
}
.route-card .rc-top,
.route-card .rc-route,
.route-card .rc-title,
.route-card .rc-detail,
.route-card .rc-foot {
  display: flex;
}
.route-card .rc-top {
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--hc-color-gold-deep);
}
.route-card .rc-route {
  align-items: center;
  gap: 12px;
  margin: 14px 0 12px;
  font-family: var(--hc-ff-heading);
  font-size: 25px;
  line-height: 1.1;
  color: var(--hc-color-ink);
}
.route-card .rc-route b {
  font-weight: 400;
  white-space: nowrap;
}
.route-card .rc-line {
  position: relative;
  flex: 1 1 auto;
  min-width: 26px;
  height: 1px;
  background-image: linear-gradient(90deg, var(--hc-color-gold) 50%, transparent 50%);
  background-size: 6px 1px;
}
.route-card .rc-line i {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 0 5px;
  font-size: 11px;
  color: var(--hc-color-gold-deep);
  background-color: var(--hc-color-white);
  transform: translate(-50%, -50%);
}
.route-card .rc-title {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--hc-color-ink);
}
.route-card .rc-detail {
  margin-top: 2px;
  color: var(--hc-color-muted);
  line-height: 1.55;
}
.route-card .rc-foot {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hc-color-border);
}
.route-card .rc-from {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hc-color-muted);
}
.route-card .rc-foot .hc-link {
  white-space: nowrap;
}
.route-card .rc-from b {
  margin-left: 6px;
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--hc-color-ink);
}

/*---- The slide bar ----*/
.globe-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-top: 26px;
}
.globe-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  flex: 1 1 auto;
  max-width: 880px;
}
.globe-tab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 12px;
  padding: 0;
  text-align: left;
  color: var(--hc-color-muted);
  transition: color 0.4s var(--hc-ease);
}
.globe-tab .gt-num {
  font-size: 17px;
  color: var(--hc-color-gold-deep);
}
.globe-tab .gt-name {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.globe-tab .gt-bar {
  grid-column: 1 / -1;
  position: relative;
  display: block;
  height: 2px;
  margin-top: 12px;
  background-color: rgba(var(--hc-color-ink-rgb), 0.1);
  overflow: hidden;
}
.globe-tab .gt-fill {
  position: absolute;
  inset: 0;
  background-color: var(--hc-color-gold);
  transform: scaleX(0);
  transform-origin: left center;
}
.globe-tab:hover,
.globe-tab.is-active {
  color: var(--hc-color-ink);
}
.globe-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

/*======================
8. Request Bar
========================*/
/* the concierge's first question - "I'd like to book..." - opens the desk with
   the answers already filled in */
.request-area {
  position: relative;
  z-index: 6;
  margin-top: -56px;
}
.hc-request > * {
  min-width: 0;
}
.hc-request {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.7fr) auto;
  align-items: end;
  background-color: var(--hc-color-white);
  box-shadow: var(--hc-shadow-lg);
  padding: 34px 40px;
}
.hc-request .df-field {
  padding: 0 28px;
  border-right: 1px solid var(--hc-color-border);
}
.hc-request .df-field:first-child {
  padding-left: 0;
}
.hc-request .df-control {
  border: 0;
  border-bottom: 1px solid var(--hc-color-border-2);
  background: none;
}
.hc-request .df-control i {
  left: 0;
}
.hc-request .df-control input,
.hc-request .df-control select {
  height: 42px;
  padding-left: 28px;
  padding-right: 0;
}
.hc-request .rq-submit {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding-left: 32px;
}
.hc-request .rq-hint {
  color: var(--hc-color-muted);
  white-space: nowrap;
}
/* the night console on Home 2 */
.hc-request.is-night {
  background-color: rgba(var(--hc-color-night-rgb), 0.72);
  border: 1px solid rgba(var(--hc-color-gold-rgb), 0.38);
  box-shadow: none;
  backdrop-filter: blur(10px);
}
.hc-request.is-night .df-field {
  border-color: rgba(var(--hc-color-white-rgb), 0.14);
}
.hc-request.is-night .df-control {
  border-bottom-color: rgba(var(--hc-color-white-rgb), 0.3);
}
.hc-request.is-night .df-control input,
.hc-request.is-night .df-control select,
.hc-request.is-night .rq-hint {
  color: var(--hc-color-white);
}
.hc-request.is-night .df-control select option {
  color: var(--hc-color-ink);
}
.hc-request.is-night .df-control input::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
.hc-request.is-night .df-field label {
  color: rgba(var(--hc-color-white-rgb), 0.6);
}

/*======================
9. About
========================*/
/* About Us: the lobby desk in a tall frame with Hibotel's offset gold line, a cabin
   photograph floating against the scroll, and the espresso years plate. The copy
   closes on the founder's note. Below, the nine services run on a slow loop. */
.hc-about {
  position: relative;
  background-color: var(--hc-color-white);
  overflow: hidden;
}
.about-grid > * {
  min-width: 0;
}
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 100px;
  align-items: center;
}
.about-media {
  position: relative;
  padding: 0 96px 120px 30px;
}
.about-media::before {
  position: absolute;
  content: "";
  top: -30px;
  left: 0;
  width: calc(100% - 156px);
  height: calc(100% - 120px);
  border: 1px solid var(--hc-color-gold);
  pointer-events: none;
}
.about-main {
  position: relative;
  aspect-ratio: 4 / 4.9;
  margin-left: 30px;
  z-index: 1;
}
.about-float {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 56%;
  padding: 12px;
  background-color: var(--hc-color-white);
  box-shadow: var(--hc-shadow-lg);
  z-index: 2;
}
.about-float .hc-frame {
  aspect-ratio: 3 / 2;
}
.about-years {
  position: absolute;
  left: 0;
  bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 172px;
  height: 172px;
  background-color: var(--hc-color-espresso);
  z-index: 3;
}
.about-years::before {
  position: absolute;
  content: "";
  inset: 10px;
  border: 1px solid rgba(var(--hc-color-gold-rgb), 0.7);
  pointer-events: none;
}
.about-years .yr {
  font-size: 66px;
  line-height: 0.9;
  color: var(--hc-color-gold);
}
.about-years .cap {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1.55;
  text-align: center;
  text-transform: uppercase;
  color: rgba(var(--hc-color-white-rgb), 0.78);
}
.about-copy .hc-sec-title h2 {
  max-width: 14ch;
}
.about-copy .hc-lead {
  margin-top: 28px;
  color: var(--hc-color-ink);
}
.about-copy .hc-lead + p {
  margin-top: 18px;
}
.about-note {
  margin: 38px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--hc-color-border);
}
.about-note blockquote {
  margin: 0 0 22px;
  font-family: var(--hc-ff-heading);
  font-style: italic;
  font-size: 27px;
  line-height: 1.35;
  color: var(--hc-color-ink);
}
.about-note figcaption {
  display: flex;
  align-items: center;
  gap: 16px;
}
.about-note figcaption img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 0 0 3px var(--hc-color-white), 0 0 0 4px var(--hc-color-gold);
}
.about-note figcaption span {
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hc-color-muted);
  line-height: 1.5;
}
.about-note figcaption b {
  display: block;
  font-family: var(--hc-ff-heading);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hc-color-ink);
}
.about-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
  margin-top: 40px;
}
.about-call {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--hc-color-ink);
}
.about-call .ic {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: none;
  border: 1px solid var(--hc-color-gold);
  color: var(--hc-color-gold-deep);
  font-size: 15px;
  transition: background-color 0.4s var(--hc-ease), color 0.4s var(--hc-ease), border-color 0.4s var(--hc-ease);
}
.about-call:hover .ic {
  background-color: var(--hc-color-ink);
  border-color: var(--hc-color-ink);
  color: var(--hc-color-gold);
}
.about-call .txt {
  line-height: 1.35;
}
.about-call .label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hc-color-muted);
}
.about-call .value {
  display: block;
  font-family: var(--hc-ff-heading);
  font-size: 22px;
}

/*---- The services loop ----*/
.about-houses {
  margin-top: 120px;
  padding: 30px 0;
  border-top: 1px solid var(--hc-color-border);
  border-bottom: 1px solid var(--hc-color-border);
  overflow: hidden;
}
.houses-track {
  display: flex;
  width: max-content;
}
.houses-set {
  display: flex;
  align-items: center;
  gap: 54px;
  padding-right: 54px;
}
.houses-set .house {
  font-family: var(--hc-ff-heading);
  font-style: italic;
  font-size: 60px;
  line-height: 1.15;
  color: transparent;
  -webkit-text-stroke: 1px var(--hc-color-gold-deep);
  white-space: nowrap;
}
.houses-set .house:nth-child(4n + 1) {
  color: var(--hc-color-ink);
  -webkit-text-stroke: 0;
}
.houses-set .hc-rhombus {
  width: 10px;
  height: 10px;
}

/* the day About: a grand facade at low opacity under the white */
.hc-about.has-tex {
  background-image: linear-gradient(rgba(var(--hc-color-white-rgb), 0.9), rgba(var(--hc-color-white-rgb), 0.9)),
    url(../img/bg/section-bg.jpg);
  background-size: cover;
  background-position: center;
}

/*---- Night (Home 2): the raised black between the hero and the mosaic ----*/
.hc-about.is-night {
  background-color: var(--hc-color-raised);
  color: rgba(var(--hc-color-white-rgb), 0.62);
}
.hc-about.is-night .hc-sec-title h2,
.hc-about.is-night .about-copy .hc-lead,
.hc-about.is-night .about-note blockquote,
.hc-about.is-night .about-note figcaption b,
.hc-about.is-night .about-call {
  color: var(--hc-color-white);
}
.hc-about.is-night .hc-sec-title .eyebrow {
  color: var(--hc-color-gold);
}
.hc-about.is-night .about-note,
.hc-about.is-night .about-houses {
  border-color: rgba(var(--hc-color-white-rgb), 0.12);
}
.hc-about.is-night .about-note figcaption span,
.hc-about.is-night .about-call .label {
  color: rgba(var(--hc-color-white-rgb), 0.5);
}
.hc-about.is-night .about-note figcaption img {
  box-shadow: 0 0 0 3px var(--hc-color-raised), 0 0 0 4px var(--hc-color-gold);
}
.hc-about.is-night .about-float {
  background-color: var(--hc-color-night);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
}
/* on black the espresso plate would vanish: it turns gold with ink figures */
.hc-about.is-night .about-years {
  background-color: var(--hc-color-gold);
}
.hc-about.is-night .about-years::before {
  border-color: rgba(var(--hc-color-ink-rgb), 0.35);
}
.hc-about.is-night .about-years .yr {
  color: var(--hc-color-ink);
}
.hc-about.is-night .about-years .cap {
  color: rgba(var(--hc-color-ink-rgb), 0.75);
}
.hc-about.is-night .about-call .ic {
  color: var(--hc-color-gold);
}
.hc-about.is-night .about-call:hover .ic {
  background-color: var(--hc-color-gold);
  border-color: var(--hc-color-gold);
  color: var(--hc-color-ink);
}
.hc-about.is-night .houses-set .house {
  -webkit-text-stroke-color: var(--hc-color-gold);
}
.hc-about.is-night .houses-set .house:nth-child(4n + 1) {
  color: var(--hc-color-white);
}

/*======================
10. Nine Doors
========================*/
/* The nine services as stops on one gold thread (the Home 1 scroll moment): the
   thread fills as the section scrolls and each stop's node lights as it is
   reached. The stops sit in two columns either side of the thread, the right-hand
   column dropped by half a card so the eye zig-zags down it. */
.hc-doors {
  background-color: var(--hc-color-sand);
}
.doors-thread {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 70px 150px;
  margin-top: 76px;
}
.doors-thread .thread-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--hc-color-border-2);
  transform: translateX(-50%);
}
.doors-thread .thread-fill {
  position: absolute;
  inset: 0;
  background-color: var(--hc-color-gold);
  transform: scaleY(var(--thread, 0));
  transform-origin: top center;
}
.door-stop {
  position: relative;
}
/* the right-hand column hangs half a card lower; the negative margin keeps the
   grid rows the height of the left-hand cards */
.door-stop.is-right {
  margin-top: 250px;
  margin-bottom: -250px;
}
.door-stop .stop-node {
  position: absolute;
  top: 36px;
  right: -83px;
  width: 17px;
  height: 17px;
  border: 1px solid var(--hc-color-border-2);
  background-color: var(--hc-color-sand);
  transform: rotate(45deg);
  transition: background-color 0.5s var(--hc-ease), border-color 0.5s var(--hc-ease), box-shadow 0.5s var(--hc-ease);
  z-index: 2;
}
.door-stop.is-right .stop-node {
  right: auto;
  left: -83px;
}
.door-stop.is-lit .stop-node {
  border-color: var(--hc-color-gold);
  background-color: var(--hc-color-gold);
  box-shadow: 0 0 0 7px rgba(var(--hc-color-gold-rgb), 0.18);
}
.door-media {
  aspect-ratio: 16 / 9.6;
}
/* the photograph is taller than its frame and drifts inside it with the scroll */
.door-media img {
  position: absolute;
  left: 0;
  top: -9%;
  height: 118%;
  translate: 0 var(--drift, 0%);
}
.door-copy {
  position: relative;
  padding: 34px 40px 0 0;
}
.door-num {
  position: absolute;
  top: -58px;
  right: 22px;
  font-size: 112px;
  line-height: 1;
  color: var(--hc-color-sand);
  -webkit-text-stroke: 1px rgba(var(--hc-color-gold-rgb), 0.75);
  pointer-events: none;
  z-index: 2;
}
.door-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}
.door-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex: none;
  border: 1px solid var(--hc-color-gold);
  font-size: 19px;
  color: var(--hc-color-gold-deep);
  transition: background-color 0.4s var(--hc-ease), color 0.4s var(--hc-ease), border-color 0.4s var(--hc-ease);
}
.door-stop:hover .door-ic {
  background-color: var(--hc-color-ink);
  border-color: var(--hc-color-ink);
  color: var(--hc-color-gold);
}
.door-copy h3 {
  margin: 0;
  font-size: 32px;
}
.door-copy p {
  max-width: 44ch;
}
.door-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hc-color-border);
}
.door-from {
  color: var(--hc-color-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.door-from b {
  margin-left: 6px;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hc-color-ink);
}

/*======================
11. Services Mosaic
========================*/
/* Home 2: the nine services as one mosaic - a large tile, a column of pairs, a
   row of four. A gold hairline frame draws inside a tile on hover. */
.hc-services-night {
  background-color: var(--hc-color-night);
}
/* Home 2: the apron at night, at low opacity under the black */
.hc-services-night.has-tex {
  background-image: linear-gradient(rgba(var(--hc-color-night-rgb), 0.88), rgba(var(--hc-color-night-rgb), 0.88)),
    url(../img/bg/tex-apron.jpg);
  background-size: cover;
  background-position: center;
}
.mosaic-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
}
.mosaic-head .lead-text {
  max-width: 460px;
  color: rgba(var(--hc-color-white-rgb), 0.62);
}
.hc-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 270px;
  gap: 18px;
}
.mosaic-tile {
  position: relative;
  display: block;
  overflow: hidden;
  color: var(--hc-color-white);
}
.mosaic-tile.is-t1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
.mosaic-tile .tile-media {
  position: absolute;
  inset: 0;
}
.mosaic-tile .tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--hc-ease);
}
.mosaic-tile:hover .tile-media img {
  transform: scale(1.07);
}
.mosaic-tile .tile-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--hc-color-night-rgb), 0.05) 30%, rgba(var(--hc-color-night-rgb), 0.86) 100%);
}
.mosaic-tile::after {
  position: absolute;
  content: "";
  inset: 14px;
  border: 1px solid var(--hc-color-gold);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.5s var(--hc-ease), transform 0.6s var(--hc-ease);
  pointer-events: none;
}
.mosaic-tile:hover::after {
  opacity: 1;
  transform: none;
}
.mosaic-tile .tile-copy {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 14px;
}
.mosaic-tile .tile-num {
  grid-column: 1 / -1;
  font-size: 14px;
  color: var(--hc-color-gold);
}
.mosaic-tile .tile-ic {
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--hc-color-gold-rgb), 0.7);
  font-size: 17px;
  color: var(--hc-color-gold);
}
.mosaic-tile .tile-name {
  font-family: var(--hc-ff-heading);
  font-size: 26px;
  line-height: 1.15;
}
.mosaic-tile.is-t1 .tile-name {
  font-size: 40px;
}
.mosaic-tile .tile-from {
  color: rgba(var(--hc-color-white-rgb), 0.7);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mosaic-tile .tile-from b {
  margin-left: 4px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--hc-color-white);
}

/*======================
12. The Desk
========================*/
/* A night band: the eight engines behind tabs, a white quote card per service,
   the itinerary on dark glass beside it. The desk lamp (the cursor) warms
   whatever the pointer is over, inside this band only. */
.hc-desk {
  position: relative;
  overflow: hidden;
  background-color: var(--hc-color-night);
  color: rgba(var(--hc-color-white-rgb), 0.66);
}
.hc-desk .hc-overlay {
  background: linear-gradient(180deg, rgba(var(--hc-color-night-rgb), 0.9) 0%, rgba(var(--hc-color-night-rgb), 0.82) 50%, rgba(var(--hc-color-night-rgb), 0.95) 100%);
}
.hc-desk .container-wide {
  position: relative;
  z-index: 3;
}
.hc-desk h2,
.hc-desk .itin-title {
  color: var(--hc-color-white);
}
.hc-desk .hc-sec-title .lead-text {
  color: rgba(var(--hc-color-white-rgb), 0.62);
}
.desk-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 30px;
  margin-top: 56px;
  align-items: start;
}
.desk-tabs {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  border: 1px solid rgba(var(--hc-color-white-rgb), 0.12);
  border-bottom: 0;
}
.desk-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 8px 18px;
  border: 0;
  border-right: 1px solid rgba(var(--hc-color-white-rgb), 0.12);
  background-color: rgba(var(--hc-color-night-rgb), 0.55);
  color: rgba(var(--hc-color-white-rgb), 0.72);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.35s var(--hc-ease), color 0.35s var(--hc-ease);
}
.desk-tab:last-child {
  border-right: 0;
}
.desk-tab i {
  font-size: 19px;
  color: var(--hc-color-gold);
}
.desk-tab span {
  white-space: nowrap;
}
.desk-tab::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--hc-color-gold);
  transform: scaleX(0);
  transition: transform 0.45s var(--hc-ease);
}
.desk-tab:hover {
  color: var(--hc-color-white);
}
.desk-tab.is-active {
  background-color: var(--hc-color-sand);
  color: var(--hc-color-ink);
}
.desk-tab.is-active i {
  color: var(--hc-color-gold-deep);
}
.desk-tab.is-active::after {
  transform: none;
}
.desk-panel {
  display: none;
}
.desk-panel.is-active {
  display: block;
}
.desk-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-rows: auto 1fr;
  gap: 0;
  background-color: var(--hc-color-sand);
}
.desk-form .df-head {
  grid-column: 1;
  padding: 40px 40px 0;
}
.desk-form .df-head h3 {
  margin-bottom: 8px;
  font-size: 32px;
}
.desk-form .df-head p {
  max-width: 54ch;
  color: var(--hc-color-body);
}
.desk-form .df-grid {
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 30px 40px 40px;
  align-content: start;
}
.desk-quote {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  padding: 36px 30px 30px;
  background-color: var(--hc-color-white);
  border-left: 1px solid var(--hc-color-border);
}
.desk-quote .dq-title {
  color: var(--hc-color-gold-deep);
  margin-bottom: 14px;
}
.dq-lines li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--hc-color-border-2);
  font-size: 15px;
  color: var(--hc-color-body);
}
.dq-lines li b {
  font-family: var(--hc-ff-heading);
  font-weight: 500;
  color: var(--hc-color-ink);
  white-space: nowrap;
}
.dq-lines li.is-saving b {
  color: var(--hc-color-gold-deep);
}
.dq-note {
  margin-top: 12px;
  color: var(--hc-color-muted);
}
.dq-note.is-warn {
  color: #A5452F;
}
.dq-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: auto 0 18px;
  padding-top: 18px;
  font-size: 13.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hc-color-ink);
}
.dq-total b {
  font-size: 38px;
  font-weight: 500;
  letter-spacing: 0;
}
.dq-add {
  justify-content: center;
  padding-left: 18px;
  padding-right: 18px;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.dq-add.is-added {
  background-color: var(--hc-color-gold);
  color: var(--hc-color-ink);
}
.dq-add[disabled] {
  opacity: 0.45;
  pointer-events: none;
}
/* the itinerary on dark glass */
.desk-itin {
  position: sticky;
  top: 110px;
  padding: 30px 28px;
  background-color: rgba(var(--hc-color-night-rgb), 0.72);
  border: 1px solid rgba(var(--hc-color-gold-rgb), 0.4);
  backdrop-filter: blur(8px);
}
.desk-itin .itin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(var(--hc-color-white-rgb), 0.14);
}
.desk-itin .itin-title {
  font-family: var(--hc-ff-heading);
  font-size: 22px;
}
.desk-itin .itin-title i {
  margin-right: 8px;
  font-size: 16px;
  color: var(--hc-color-gold);
}
.desk-itin .itin-count b {
  color: var(--hc-color-gold);
  font-weight: 500;
}
.desk-itin .itin-lines li {
  border-color: rgba(var(--hc-color-white-rgb), 0.12);
}
.desk-itin .itin-lines .il-name,
.desk-itin .itin-lines .il-price,
.desk-itin .itin-totals dd,
.desk-itin .itin-totals .is-total {
  color: var(--hc-color-white);
}
.desk-itin .itin-lines .il-ic {
  color: var(--hc-color-gold);
}
.desk-itin .itin-lines .il-detail,
.desk-itin .itin-lines .il-remove,
.desk-itin .itin-totals dt,
.desk-itin .itin-empty {
  color: rgba(var(--hc-color-white-rgb), 0.55);
}
.desk-itin .itin-lines .il-remove:hover {
  color: var(--hc-color-gold);
}
.desk-itin .itin-totals {
  margin-top: 18px;
}
.desk-itin .itin-totals .is-total {
  border-color: rgba(var(--hc-color-white-rgb), 0.2);
}
.desk-itin .itin-totals .is-saving {
  color: var(--hc-color-gold);
}
.desk-itin .itin-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 22px;
}
.desk-itin .hc-btn {
  justify-content: center;
  padding: 0 20px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.desk-itin .itin-clear {
  align-self: center;
  color: rgba(var(--hc-color-white-rgb), 0.6);
}
/* Home 2: the tabs run down the left */
.desk-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.desk-head .lead-text {
  max-width: 460px;
  color: rgba(var(--hc-color-white-rgb), 0.62);
}
.desk-layout.is-vertical .desk-main {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
}
.desk-layout.is-vertical .desk-tabs {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  border-bottom: 1px solid rgba(var(--hc-color-white-rgb), 0.12);
  border-right: 0;
}
.desk-layout.is-vertical .desk-tab {
  flex-direction: row;
  justify-content: flex-start;
  gap: 14px;
  padding: 17px 20px;
  border-right: 0;
  border-bottom: 1px solid rgba(var(--hc-color-white-rgb), 0.12);
}
.desk-layout.is-vertical .desk-tab:last-child {
  border-bottom: 0;
}
.desk-layout.is-vertical .desk-tab i {
  width: 22px;
  font-size: 16px;
  text-align: center;
}
.desk-layout.is-vertical .desk-tab::after {
  left: auto;
  top: 0;
  width: 2px;
  height: auto;
  transform: scaleY(0);
}
.desk-layout.is-vertical .desk-tab.is-active::after {
  transform: none;
}
.hc-desk.is-night {
  background-color: var(--hc-color-raised);
}

/*======================
13. Curated Weekends
========================*/
/* Home 1: alternating rows, each a framed photograph beside a priced itinerary.
   Home 2: the same weekends as a slider of cards on the night ground. */
.hc-weekends {
  background-color: var(--hc-color-white);
}
.weekend-rows {
  margin-top: 70px;
}
.weekend-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 90px;
  align-items: center;
}
.weekend-row + .weekend-row {
  margin-top: 110px;
}
.weekend-row.is-flip .weekend-media {
  order: 2;
}
.weekend-row.is-flip .hc-offset-frame::before {
  left: 26px;
}
.weekend-media .hc-frame {
  aspect-ratio: 16 / 11;
}
.weekend-num {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
  color: var(--hc-color-gold-deep);
}
.weekend-copy h3,
.weekend-card h3 {
  margin-bottom: 12px;
  font-size: 36px;
}
/* the weekend's own itinerary: one priced line per part */
.weekend-lines {
  margin: 24px 0;
  border-top: 1px solid var(--hc-color-border);
}
.weekend-lines li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 2px 14px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--hc-color-border);
  font-size: 16px;
}
.weekend-lines li i {
  color: var(--hc-color-gold-deep);
}
.weekend-lines li span {
  color: var(--hc-color-ink);
}
.weekend-lines li em {
  grid-column: 2;
  font-style: normal;
  font-size: 15px;
  color: var(--hc-color-muted);
}
.weekend-lines li b {
  grid-column: 3;
  grid-row: 1;
  font-family: var(--hc-ff-heading);
  font-weight: 500;
  color: var(--hc-color-ink);
  white-space: nowrap;
}
.weekend-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 26px;
}
.weekend-price .wp-was {
  color: var(--hc-color-muted);
}
.weekend-price .wp-was s {
  margin-left: 4px;
}
.weekend-price .wp-now {
  font-size: 14.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hc-color-ink);
}
.weekend-price .wp-now b {
  margin-left: 8px;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 0;
}
.weekend-price .wp-when {
  color: var(--hc-color-gold-deep);
}
/* Home 2 cards */
.weekends-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 50px;
}
.weekends-nav,
.boutique-nav {
  display: flex;
  gap: 12px;
}
.hc-weekends.is-night {
  background-color: var(--hc-color-night);
}
.weekend-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background-color: var(--hc-color-raised);
  border: 1px solid rgba(var(--hc-color-gold-rgb), 0.25);
}
.weekend-card .wc-media img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  object-fit: cover;
}
.weekend-card .wc-copy {
  padding: 44px 42px;
  color: rgba(var(--hc-color-white-rgb), 0.66);
}
.weekend-card h3 {
  color: var(--hc-color-white);
}
.weekend-card .weekend-lines {
  border-color: rgba(var(--hc-color-white-rgb), 0.14);
}
.weekend-card .weekend-lines li {
  border-color: rgba(var(--hc-color-white-rgb), 0.14);
}
.weekend-card .weekend-lines li span,
.weekend-card .weekend-lines li b,
.weekend-card .weekend-price .wp-now {
  color: var(--hc-color-white);
}
.weekend-card .weekend-lines li i,
.weekend-card .weekend-price .wp-when {
  color: var(--hc-color-gold);
}

/*======================
14. Boutique
========================*/
.hc-boutique {
  background-color: var(--hc-color-sand);
}
.boutique-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 50px;
}
.piece-card {
  background-color: var(--hc-color-white);
  transition: box-shadow 0.45s var(--hc-ease), transform 0.45s var(--hc-ease);
}
.piece-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hc-shadow);
}
.piece-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--hc-color-champagne);
}
.piece-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 1.2s var(--hc-ease);
}
.piece-card:hover .piece-media img {
  transform: scale(1.06);
}
.piece-copy {
  padding: 22px 22px 24px;
}
.piece-label {
  display: block;
  font-size: 11.5px;
  color: var(--hc-color-gold-deep);
}
.piece-copy h3 {
  margin: 6px 0 4px;
  font-family: var(--hc-ff-body);
  font-size: 18px;
  font-weight: 500;
}
.piece-price {
  font-size: 22px;
  color: var(--hc-color-ink);
}
.piece-buy {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.piece-buy select {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 34px 0 14px;
  border: 1px solid var(--hc-color-border-2);
  background-color: var(--hc-color-white);
  background-image: linear-gradient(45deg, transparent 50%, var(--hc-color-gold-deep) 50%),
    linear-gradient(135deg, var(--hc-color-gold-deep) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  appearance: none;
  font-size: 14px;
  color: var(--hc-color-ink);
}
.piece-add {
  flex: 0 0 46px;
  height: 46px;
  border: 0;
  background-color: var(--hc-color-ink);
  color: var(--hc-color-gold);
  font-size: 15px;
  transition: background-color 0.35s var(--hc-ease), color 0.35s var(--hc-ease);
}
.piece-add:hover,
.piece-add.is-added {
  background-color: var(--hc-color-gold);
  color: var(--hc-color-ink);
}
.hc-boutique.is-night {
  background-color: var(--hc-color-raised);
}
.hc-boutique.is-night .piece-card {
  background-color: var(--hc-color-night);
}
.hc-boutique.is-night .piece-copy h3,
.hc-boutique.is-night .piece-price {
  color: var(--hc-color-white);
}
.hc-boutique.is-night .piece-buy select {
  border-color: rgba(var(--hc-color-white-rgb), 0.2);
  background-color: var(--hc-color-night);
  color: var(--hc-color-white);
}

/*======================
15. Hibo Circle
========================*/
.hc-circle {
  position: relative;
  overflow: hidden;
}
.hc-circle .hc-overlay {
  background: rgba(var(--hc-color-ink-rgb), 0.82);
}
.hc-circle .container {
  position: relative;
  z-index: 2;
}
.hc-circle .row {
  margin-top: 60px;
}
.circle-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 44px 38px 40px;
  border: 1px solid rgba(var(--hc-color-gold-rgb), 0.35);
  background-color: rgba(var(--hc-color-night-rgb), 0.5);
  transition: transform 0.5s var(--hc-ease), border-color 0.5s var(--hc-ease);
}
.circle-card:hover {
  transform: translateY(-8px);
  border-color: var(--hc-color-gold);
}
.circle-card.is-gold {
  background-color: var(--hc-color-champagne);
  border-color: var(--hc-color-gold);
  color: var(--hc-color-body);
}
.circle-card.is-gold h3 {
  color: var(--hc-color-ink);
}
.circle-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 26px;
  border: 1px solid var(--hc-color-gold);
  font-size: 20px;
  color: var(--hc-color-gold);
}
.circle-card.is-gold .circle-plate {
  background-color: var(--hc-color-ink);
}
.circle-name {
  color: var(--hc-color-gold);
}
.circle-card.is-gold .circle-name {
  color: var(--hc-color-gold-deep);
}
.circle-card h3 {
  font-size: 36px;
  margin: 2px 0 20px;
}
.circle-fee {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.circle-fee b {
  font-size: 44px;
  font-weight: 500;
  color: var(--hc-color-white);
}
.circle-card.is-gold .circle-fee b {
  color: var(--hc-color-ink);
}
.circle-saving {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--hc-color-gold);
}
.circle-card.is-gold .circle-saving {
  color: var(--hc-color-gold-deep);
}
/* perks as plain rows between hairlines */
.circle-perks {
  margin: 26px 0 30px;
  border-top: 1px solid rgba(var(--hc-color-white-rgb), 0.14);
}
.circle-perks li {
  padding: 13px 0;
  border-bottom: 1px solid rgba(var(--hc-color-white-rgb), 0.14);
  font-size: 15px;
}
.circle-card.is-gold .circle-perks,
.circle-card.is-gold .circle-perks li {
  border-color: rgba(var(--hc-color-ink-rgb), 0.12);
  color: var(--hc-color-ink);
}
.circle-card .hc-btn {
  margin-top: auto;
  justify-content: center;
}
.circle-card .hc-btn-outline {
  border-color: var(--hc-color-gold);
  color: var(--hc-color-white);
}
.circle-card.is-joined .hc-btn {
  background-color: var(--hc-color-gold);
  color: var(--hc-color-ink);
}
/* Home 2: the facade shows through the espresso a little more than the house wash */
.hc-circle.is-night.has-tex {
  background-image: linear-gradient(rgba(var(--hc-color-espresso-rgb), 0.88), rgba(var(--hc-color-espresso-rgb), 0.88)),
    url(../img/bg/section-bg.jpg);
}
.hc-circle.is-night {
  background-color: var(--hc-color-night);
  background-image: none;
}

/*======================
16. Night Hero
========================*/
/* Home 2: a full-bleed night slider with the request console at its centre. The
   slides settle from 1.2 to 1 as the page leaves the hero (S2 hero zoom-out). */
.hero-night {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 166px 0 128px;
  background-color: var(--hc-color-night);
}
.hero-night .night-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-night .night-shot {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero-night .night-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
}
.hero-night .night-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(var(--hc-color-night-rgb), 0.78) 0%, rgba(var(--hc-color-night-rgb), 0.58) 45%, rgba(var(--hc-color-night-rgb), 0.92) 100%);
}
.hero-night .night-center {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-night .night-copy {
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: center;
  color: rgba(var(--hc-color-white-rgb), 0.78);
}
.hero-night .hero-eyebrow {
  justify-content: center;
  color: var(--hc-color-gold);
}
.hero-night h1 {
  margin-bottom: 26px;
  font-size: clamp(44px, 4.6vw, 76px);
  line-height: 1.02;
  color: var(--hc-color-white);
}
.hero-night h1 .hc-serif-italic {
  color: var(--hc-color-gold);
}
.hero-night .hc-lead {
  max-width: 58ch;
  margin: 0 auto;
  color: rgba(var(--hc-color-white-rgb), 0.74);
}
.hero-night .hc-request {
  max-width: 1180px;
  margin: 0 auto;
}
.hero-night .night-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  z-index: 2;
}
.night-bar-inner {
  display: flex;
  align-items: center;
  gap: 26px;
  color: var(--hc-color-white);
}
.night-bar-inner .slider-count {
  color: var(--hc-color-white);
}
.night-bar-inner .night-title {
  min-width: 250px;
  color: rgba(var(--hc-color-white-rgb), 0.8);
}
.night-progress {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  background-color: rgba(var(--hc-color-white-rgb), 0.24);
}
.night-progress .night-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background-color: var(--hc-color-gold);
}
.night-nav {
  display: flex;
  gap: 10px;
}
.night-nav .slider-nav {
  border-color: rgba(var(--hc-color-white-rgb), 0.4);
  color: var(--hc-color-white);
}

/*======================
17. Stats
========================*/
.stats-area {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
}
.stats-area .hc-overlay {
  background: rgba(var(--hc-color-ink-rgb), 0.74);
}
.stats-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat-box {
  text-align: center;
  padding: 10px 20px;
}
.stat-box + .stat-box {
  border-left: 1px solid rgba(var(--hc-color-white-rgb), 0.18);
}
.stat-fig {
  display: block;
  font-size: 66px;
  line-height: 1;
  color: var(--hc-color-white);
  margin-bottom: 14px;
}
.stat-cap {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.24em;
  color: var(--hc-color-gold);
}

/*======================
18. Reviews
========================*/
/* Google and Tripadvisor summary panels (the suite's review engine: average,
   total, stars and bars computed from data-dist) beside a slider of letters */
.hc-reviews {
  background-color: var(--hc-color-sand);
}
.rv-layout {
  display: grid;
  gap: 30px;
  margin-top: 60px;
}
.rv-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}
/* score on the left, the bars on the right */
.rv-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 44px;
  padding: 30px 34px;
  background-color: var(--hc-color-white);
  box-shadow: var(--hc-shadow);
}
.rv-panel .rv-bars {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  margin-top: 0;
}
.rv-logo {
  height: 30px;
  width: auto;
}
.rv-score {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 4px;
}
.rv-score b {
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
  color: var(--hc-color-ink);
}
.rv-stars {
  color: var(--hc-color-gold);
  font-size: 15px;
  letter-spacing: 2px;
}
.rv-total {
  color: var(--hc-color-muted);
}
.rv-bars {
  margin-top: 14px;
}
.rv-bars li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
  font-size: 13.5px;
  color: var(--hc-color-muted);
}
.rv-bars li + li {
  margin-top: 5px;
}
.rv-bars .bar {
  height: 4px;
  background-color: var(--hc-color-border);
}
.rv-bars .bar span {
  display: block;
  height: 100%;
  background-color: var(--hc-color-gold);
}
.rv-bars .n {
  text-align: right;
}
.rv-quote {
  height: 100%;
  margin: 0;
  padding: 40px 42px 34px;
  background-color: var(--hc-color-white);
  border-top: 2px solid var(--hc-color-gold);
}
.rv-src img {
  height: 26px;
  width: auto;
}
.rv-quote blockquote {
  margin: 22px 0 26px;
}
.rv-quote blockquote p {
  font-family: var(--hc-ff-heading);
  font-size: 23px;
  font-style: italic;
  line-height: 1.5;
  color: var(--hc-color-ink);
}
.rv-quote figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rv-quote .rv-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}
.rv-quote figcaption b {
  display: block;
  font-weight: 500;
  color: var(--hc-color-ink);
}
.rv-slider .swiper-slide {
  height: auto;
}
.rv-pagination {
  display: flex;
  gap: 8px;
  margin-top: 28px;
}
.rv-pagination .swiper-pagination-bullet {
  width: 26px;
  height: 2px;
  border-radius: 0;
  background-color: var(--hc-color-border-2);
  opacity: 1;
}
.rv-pagination .swiper-pagination-bullet-active {
  background-color: var(--hc-color-gold);
}
.hc-reviews.is-night {
  background-color: var(--hc-color-raised);
}
/* Home 2: the resort from the air, at low opacity under the raised black */
.hc-reviews.is-night.has-tex {
  background-image: linear-gradient(rgba(var(--hc-color-raised-rgb), 0.88), rgba(var(--hc-color-raised-rgb), 0.88)),
    url(../img/bg/tex-resort.jpg);
  background-size: cover;
  background-position: center;
}
.hc-reviews.is-night .rv-panel,
.hc-reviews.is-night .rv-quote {
  background-color: var(--hc-color-night);
  box-shadow: none;
}
.hc-reviews.is-night .rv-score b,
.hc-reviews.is-night .rv-quote blockquote p,
.hc-reviews.is-night .rv-quote figcaption b {
  color: var(--hc-color-white);
}
.hc-reviews.is-night .rv-bars .bar {
  background-color: rgba(var(--hc-color-white-rgb), 0.12);
}

/*======================
19. Contact
========================*/
.hc-contact {
  background-color: var(--hc-color-white);
}
.hc-contact .hc-lead {
  margin: 20px 0 34px;
}
.desk-cards {
  display: grid;
  gap: 14px;
}
.desk-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 16px;
  align-items: center;
  padding: 18px 22px;
  border: 1px solid var(--hc-color-border);
  background-color: var(--hc-color-sand);
}
.desk-card .dc-city {
  font-family: var(--hc-ff-heading);
  font-size: 22px;
  color: var(--hc-color-ink);
}
.desk-card .dc-time {
  grid-row: span 2;
  font-size: 30px;
  color: var(--hc-color-ink);
}
.desk-card .dc-name {
  color: var(--hc-color-muted);
}
.desk-card .dc-state {
  grid-column: 1 / -1;
  color: #3E8E5E;
}
.desk-card .dc-state i {
  margin-right: 6px;
  font-size: 8px;
  vertical-align: middle;
}
.contact-form {
  padding: 46px 44px;
  background-color: var(--hc-color-sand);
}
/* Home 1: a resort seen from the air, at low opacity under the white */
.hc-contact.has-tex {
  background-image: linear-gradient(rgba(var(--hc-color-white-rgb), 0.9), rgba(var(--hc-color-white-rgb), 0.9)),
    url(../img/bg/tex-resort.jpg);
  background-size: cover;
  background-position: center;
}
.hc-contact.is-night {
  background-color: var(--hc-color-night);
  color: rgba(var(--hc-color-white-rgb), 0.66);
}
.hc-contact.is-night h2,
.hc-contact.is-night .desk-card .dc-city,
.hc-contact.is-night .desk-card .dc-time {
  color: var(--hc-color-white);
}
.hc-contact.is-night .desk-card,
.hc-contact.is-night .contact-form {
  background-color: var(--hc-color-raised);
  border-color: rgba(var(--hc-color-white-rgb), 0.1);
}
.hc-contact.is-night .hc-lead {
  color: rgba(var(--hc-color-white-rgb), 0.66);
}

/*======================
20. Night Variant
========================*/
/* Home 2 grounds: Hibojet's blacks. Headings, section titles and small controls
   on the night sections turn light; white cards inside keep their own ink. */
.hc-services-night .hc-sec-title h2,
.hc-desk.is-night .hc-sec-title h2,
.hc-weekends.is-night .hc-sec-title h2,
.hc-boutique.is-night .hc-sec-title h2,
.hc-reviews.is-night .hc-sec-title h2,
.hc-contact.is-night .hc-sec-title h2 {
  color: var(--hc-color-white);
}
.hc-weekends.is-night .slider-nav,
.hc-boutique.is-night .slider-nav {
  border-color: rgba(var(--hc-color-white-rgb), 0.3);
  background-color: transparent;
  color: var(--hc-color-white);
}
.hc-weekends.is-night .slider-nav:hover,
.hc-boutique.is-night .slider-nav:hover {
  border-color: var(--hc-color-gold);
  background-color: var(--hc-color-gold);
  color: var(--hc-color-ink);
}
.hero-night .night-nav .slider-nav {
  background-color: transparent;
}
.hero-night .night-nav .slider-nav:hover {
  border-color: var(--hc-color-gold);
  background-color: var(--hc-color-gold);
  color: var(--hc-color-ink);
}
.hc-boutique.is-night .piece-add {
  background-color: var(--hc-color-gold);
  color: var(--hc-color-ink);
}
.hc-boutique.is-night .piece-add:hover {
  background-color: var(--hc-color-white);
}
/* beside the vertical tabs the form has less room: two columns */
.desk-layout.is-vertical .desk-form {
  grid-template-columns: minmax(0, 1fr) 270px;
}
.desk-layout.is-vertical .desk-form .df-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.desk-layout.is-vertical .desk-form .df-head,
.desk-layout.is-vertical .desk-form .df-grid {
  padding-left: 32px;
  padding-right: 32px;
}

/*======================
21. Forms
========================*/
/* one field system for the request bar, the desk and the contact form: a caps
   label, then a control with its icon inside the left edge */
.df-field label,
.df-rituals legend {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hc-color-muted);
}
.df-control {
  position: relative;
  border: 1px solid var(--hc-color-border-2);
  background-color: var(--hc-color-white);
  transition: border-color 0.35s var(--hc-ease);
}
.df-control:focus-within {
  border-color: var(--hc-color-gold);
}
.df-control i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--hc-color-gold-deep);
  pointer-events: none;
}
.df-control input,
.df-control select,
.df-control textarea {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 14px 0 42px;
  border: 0;
  background: transparent;
  font-family: var(--hc-ff-body);
  font-size: 15px;
  color: var(--hc-color-ink);
  outline: none;
}
.df-control select {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--hc-color-gold-deep) 50%),
    linear-gradient(135deg, var(--hc-color-gold-deep) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.df-control input::placeholder,
.df-control textarea::placeholder {
  color: var(--hc-color-muted);
}
.df-control.is-area i {
  top: 18px;
  transform: none;
}
.df-control textarea {
  height: auto;
  padding-top: 14px;
  padding-bottom: 14px;
  line-height: 1.6;
  resize: vertical;
}
.df-field.is-off {
  opacity: 0.4;
  pointer-events: none;
}
.df-rituals {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  border: 0;
}
.df-rituals legend {
  float: none;
  width: auto;
}
.df-rituals .df-check {
  display: inline-flex;
  margin: 0 8px 8px 0;
  cursor: pointer;
}
.df-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.df-check span {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid var(--hc-color-border-2);
  background-color: var(--hc-color-white);
  font-size: 15px;
  color: var(--hc-color-ink);
  transition: background-color 0.3s var(--hc-ease), border-color 0.3s var(--hc-ease), color 0.3s var(--hc-ease);
}
.df-check span em {
  margin-left: 6px;
  font-style: normal;
  font-size: 13px;
  color: var(--hc-color-muted);
}
.df-check input:checked + span {
  border-color: var(--hc-color-ink);
  background-color: var(--hc-color-ink);
  color: var(--hc-color-white);
}
.df-check input:checked + span em {
  color: var(--hc-color-gold);
}
.df-check input:focus-visible + span {
  outline: 2px solid var(--hc-color-gold);
  outline-offset: 2px;
}
.form-status {
  display: none;
  margin-top: 14px;
}
.form-status.is-shown {
  display: block;
}
.form-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.form-submit .form-status {
  margin-top: 0;
}

/*======================
22. Footer
========================*/
.footer-subscribe .hc-overlay {
  background: linear-gradient(180deg, rgba(var(--hc-color-ink-rgb), 0.84) 0%, rgba(var(--hc-color-ink-rgb), 0.76) 50%, rgba(var(--hc-color-ink-rgb), 0.9) 100%);
}
.footer-subscribe {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
}
.subscribe-inner {
  position: relative;
  z-index: 3;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  color: rgba(var(--hc-color-white-rgb), 0.74);
}
.footer-logo {
  width: 262px;
  margin-bottom: 28px;
}
.subscribe-form {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 34px;
  background-color: rgba(var(--hc-color-white-rgb), 0.1);
  box-shadow: inset 0 0 0 1px rgba(var(--hc-color-white-rgb), 0.24);
}
.subscribe-form input {
  flex: 1;
  min-width: 0;
  height: 60px;
  border: 0;
  background: transparent;
  padding: 0 26px;
  font-size: 15px;
  color: var(--hc-color-white);
  outline: none;
}
.subscribe-form input::placeholder {
  color: rgba(var(--hc-color-white-rgb), 0.5);
}
.subscribe-note {
  display: block;
  margin-top: 22px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 13px;
  color: rgba(var(--hc-color-white-rgb), 0.45);
}
.footer-copyright {
  background-color: var(--hc-color-ink);
  padding: 26px 0;
}
.copyright-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 22px;
}
.copyright-inner p {
  color: rgba(var(--hc-color-white-rgb), 0.5);
  letter-spacing: 0.04em;
}
.footer-links {
  display: flex;
  align-items: center;
  gap: 28px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12.5px;
  color: rgba(var(--hc-color-white-rgb), 0.6);
}
.footer-links a:hover {
  color: var(--hc-color-gold);
}
.footer-copyright .hc-social {
  margin: 0;
}
.footer-copyright .hc-social a {
  width: 46px;
  height: 46px;
  font-size: 15px;
}


/*---- Footer Style Two & Three ----*/
.footer-style-two .footer-widget-area {
  background-color: var(--hc-color-espresso);
  padding: 104px 0 76px;
  color: rgba(var(--hc-color-white-rgb), 0.62);
}
.footer-style-three .footer-widget-area {
  background-color: var(--hc-color-sand);
  background-image: linear-gradient(rgba(var(--hc-color-sand-rgb), 0.955),
      rgba(var(--hc-color-sand-rgb), 0.955)), url(../img/bg/section-bg.jpg);
  background-size: cover;
  background-position: center;
  padding: 104px 0 76px;
  color: var(--hc-color-body);
}
.hc-footer .widget .footer-logo {
  width: 246px;
  margin-bottom: 24px;
}
.hc-footer .site-info-widget p {
  font-size: 15.5px;
  max-width: 40ch;
}
.hc-footer .site-info-widget .hc-social {
  margin-top: 30px;
}
.hc-footer .widget-title {
  position: relative;
  font-size: 20px;
  margin-bottom: 26px;
  padding-bottom: 14px;
}
.footer-style-two .widget-title {
  color: var(--hc-color-white);
}
.hc-footer .widget-title::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 34px;
  height: 1px;
  background-color: var(--hc-color-gold);
}
.hc-footer .nav-widget li + li {
  margin-top: 11px;
}
.hc-footer .nav-widget a {
  position: relative;
  display: inline-block;
  font-size: 15px;
  transition: color 0.3s var(--hc-ease), padding-left 0.35s var(--hc-ease);
}
.hc-footer .nav-widget a:hover {
  padding-left: 13px;
  color: var(--hc-color-gold);
}
.hc-footer .nav-widget a::before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  width: 6px;
  height: 1px;
  background-color: var(--hc-color-gold);
  opacity: 0;
  transition: opacity 0.35s var(--hc-ease);
}
.hc-footer .nav-widget a:hover::before {
  opacity: 1;
}
.hc-footer .contact-lists li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
  line-height: 1.7;
}
.hc-footer .contact-lists li + li {
  margin-top: 16px;
}
.hc-footer .contact-lists .ic {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  font-size: 13px;
  color: var(--hc-color-gold);
  border: 1px solid rgba(var(--hc-color-gold-rgb), 0.4);
  margin-top: 3px;
}
.hc-footer .contact-lists a:hover {
  color: var(--hc-color-gold);
}
.footer-subscribe-form {
  display: flex;
  align-items: stretch;
  margin-top: 26px;
}
.footer-subscribe-form input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(var(--hc-color-white-rgb), 0.18);
  background-color: rgba(var(--hc-color-white-rgb), 0.06);
  font-size: 14.5px;
  color: var(--hc-color-white);
  outline: none;
  transition: border-color 0.35s var(--hc-ease);
}
.footer-style-three .footer-subscribe-form input {
  border-color: var(--hc-color-border);
  background-color: var(--hc-color-white);
  color: var(--hc-color-ink);
}
.footer-subscribe-form input::placeholder {
  color: rgba(var(--hc-color-white-rgb), 0.45);
}
.footer-style-three .footer-subscribe-form input::placeholder {
  color: var(--hc-color-muted);
}
.footer-subscribe-form input:focus {
  border-color: var(--hc-color-gold);
}
.footer-subscribe-form button {
  width: 56px;
  flex: none;
  background-color: var(--hc-color-gold);
  color: var(--hc-color-ink);
  font-size: 13px;
  transition: background-color 0.35s var(--hc-ease), color 0.35s var(--hc-ease);
}
.footer-subscribe-form button:hover {
  background-color: var(--hc-color-ink);
  color: var(--hc-color-gold);
}
.footer-style-three .footer-subscribe-form button:hover {
  background-color: var(--hc-color-ink);
  color: var(--hc-color-gold);
}
.footer-style-two .hc-social a,
.footer-style-three .hc-social a {
  border-color: rgba(var(--hc-color-gold-rgb), 0.34);
}
.footer-style-three .hc-social a {
  color: var(--hc-color-body);
}
.footer-style-three .hc-social a:hover {
  color: var(--hc-color-ink);
}

/*======================
23. Back To Top
========================*/
.hc-back-to-top {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background-color: var(--hc-color-white);
  box-shadow: var(--hc-shadow);
  color: var(--hc-color-ink);
  font-size: 13px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.45s var(--hc-ease), visibility 0.45s, transform 0.45s var(--hc-ease), background-color 0.35s var(--hc-ease), color 0.35s var(--hc-ease);
}
.hc-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hc-back-to-top:hover {
  background-color: var(--hc-color-gold);
}
.hc-back-to-top .progress-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/*======================
24. Desk Lamp
========================*/
/* C5: a warm pool of light follows the pointer inside the Desk band only
   (pointer: fine and hover devices, off under reduced motion). */
.desk-lamp {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 680px;
  height: 680px;
  margin: -340px 0 0 -340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--hc-color-gold-rgb), 0.2) 0%, rgba(var(--hc-color-gold-rgb), 0.07) 38%, rgba(var(--hc-color-gold-rgb), 0) 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--hc-ease);
  will-change: transform;
}
.hc-desk.lamp-on .desk-lamp {
  opacity: 1;
}