@charset "utf-8";

/*
Theme Name: Hibojet - Private Jet Charter HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

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

1. General
2. Common Class
3. Forms
4. Preloader
5. Header
6. Offcanvas Menu
7. Breadcrumb
8. Night Hero
9. Quick Quote
10. About
11. Fleet Mosaic
12. Flight Plan
13. Cabin Slider
14. Text Block
15. Above The Clouds
16. Boarding Pass Reviews
17. Departures Board
18. Latest News
19. Fleet Hero
20. Split And Features
21. Range Rings
22. Jet Cards
23. Counters
24. Review Rail And Film
25. Route Hero
26. Collage And Centre Slider
27. Intro Video
28. Jet Card Plans
29. Bank Turn
30. Dining Menu
31. Fleet Pages
32. Jet Details
33. Charter Quote
34. Offers And Destinations
35. Accordion
36. Destination Details
37. Company Pages
38. Dining Pages
39. Journal
40. Account And Error
41. Footer
42. Back To Top
43. Accessibility
44. Night Sky
45. Jets
46. Available Today
*/

/*======================
1. General
========================*/
/* 1.1 Tokens - passport 1.1 roles (Viplane's champagne and blacks kept) and 1.2 fonts */
:root {
  --hj-color-gold: #D2C09E;
  --hj-color-gold-rgb: 210, 192, 158;
  --hj-color-gold-deep: #A08D69;
  --hj-color-gold-deep-rgb: 160, 141, 105;
  --hj-color-night: #111111;
  --hj-color-night-rgb: 17, 17, 17;
  --hj-color-surface: #181818;
  --hj-color-surface-rgb: 24, 24, 24;
  --hj-color-raised: #222222;
  --hj-color-raised-rgb: 34, 34, 34;
  --hj-color-pearl: #F7F5F1;
  --hj-color-pearl-rgb: 247, 245, 241;
  --hj-color-taupe: #7A7160;
  --hj-color-taupe-rgb: 122, 113, 96;
  --hj-color-ink: #181818;
  --hj-color-ink-rgb: 24, 24, 24;
  --hj-color-body: #6B6B6B;
  --hj-color-body-dark: #A7A6A3;
  --hj-color-white: #FFFFFF;
  --hj-color-white-rgb: 255, 255, 255;
  --hj-color-line: #E6E1D8;
  --hj-color-line-dark: rgba(210, 192, 158, 0.18);
  --hj-color-green: #6FB287;
  --hj-color-red: #D9776A;
  --hj-ff-head: "Sora", sans-serif;
  --hj-ff-body: "Hanken Grotesk", sans-serif;
  --hj-fs-h1: clamp(2.6rem, 1.2rem + 4.1vw, 5.25rem);
  --hj-fs-h2: clamp(2.1rem, 1.3rem + 2.4vw, 3.5rem);
  --hj-fs-h3: clamp(1.3rem, 1.05rem + 0.7vw, 1.75rem);
  --hj-fs-h4: 1.25rem;
  --hj-fs-h5: 1.125rem;
  --hj-fs-h6: 1rem;
  --hj-fs-lead: 1.125rem;
  --hj-radius: 0;
  --hj-radius-sm: 2px;
  --hj-shadow: 0 30px 70px -38px rgba(17, 17, 17, 0.45);
  --hj-shadow-soft: 0 18px 44px -26px rgba(17, 17, 17, 0.28);
  --hj-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --hj-header-h: 96px;
  --hj-top-h: 44px;
}

/* 1.2 Reset */
*,
*::before,
*::after {
  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 {
  margin: 0;
  font-family: var(--hj-ff-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--hj-color-body);
  background-color: var(--hj-color-pearl);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum" 0;
}
body.oc-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--hj-ease), background-color 0.3s var(--hj-ease), border-color 0.3s var(--hj-ease);
}
a:hover {
  color: var(--hj-color-gold-deep);
}
button {
  font-family: inherit;
  cursor: pointer;
}
input,
select,
textarea,
button {
  font: inherit;
}
::selection {
  background: var(--hj-color-gold);
  color: var(--hj-color-night);
}
:focus-visible {
  outline: 2px solid var(--hj-color-gold);
  outline-offset: 3px;
}
.hj-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}
p {
  margin: 0 0 1em;
}
p:last-child {
  margin-bottom: 0;
}

/* 1.3 Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--hj-ff-head);
  color: var(--hj-color-ink);
  margin: 0 0 0.5em;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h1 {
  font-size: var(--hj-fs-h1);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 1.02;
}
h2 {
  font-size: var(--hj-fs-h2);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
h3 {
  font-size: var(--hj-fs-h3);
  line-height: 1.25;
}
h4 {
  font-size: var(--hj-fs-h4);
}
h5 {
  font-size: var(--hj-fs-h5);
}
h6 {
  font-size: var(--hj-fs-h6);
}
.hj-lead {
  font-size: var(--hj-fs-lead);
  line-height: 1.7;
}
.hj-num,
.hj-readout b,
[data-price] {
  font-variant-numeric: tabular-nums;
}
.hj-gold {
  color: var(--hj-color-gold);
}
.hj-pearl .hj-gold,
.hj-light .hj-gold {
  color: var(--hj-color-gold-deep);
}
.visually-hidden-label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 1.4 Grounds - night first, pearl for the light rhythm sections */
.hj-night {
  background-color: var(--hj-color-night);
  color: var(--hj-color-body-dark);
}
.hj-night h1,
.hj-night h2,
.hj-night h3,
.hj-night h4,
.hj-night h5,
.hj-night h6 {
  color: var(--hj-color-white);
}
.hj-night a:hover {
  color: var(--hj-color-gold);
}
.hj-surface {
  background-color: var(--hj-color-surface);
  color: var(--hj-color-body-dark);
}
.hj-pearl {
  background-color: var(--hj-color-pearl);
}
.hj-white {
  background-color: var(--hj-color-white);
}
.hj-section {
  position: relative;
  z-index: 0;
}

/* 1.5 Spacing */
.hj-sec-pt {
  padding-top: 130px;
}
.hj-sec-pb {
  padding-bottom: 130px;
}
.hj-mt-20 {
  margin-top: 20px;
}
.hj-mt-30 {
  margin-top: 30px;
}
.hj-mt-40 {
  margin-top: 40px;
}
.hj-mt-50 {
  margin-top: 50px;
}
.hj-mt-60 {
  margin-top: 60px;
}
.hj-mt-80 {
  margin-top: 80px;
}
.hj-mb-20 {
  margin-bottom: 20px;
}
.hj-mb-30 {
  margin-bottom: 30px;
}
.hj-mb-40 {
  margin-bottom: 40px;
}
.hj-mb-50 {
  margin-bottom: 50px;
}
.hj-mb-60 {
  margin-bottom: 60px;
}
.hj-mb-80 {
  margin-bottom: 80px;
}

/*======================
2. Common Class
========================*/
/* 2.1 Containers */
.container-wide {
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (min-width: 1600px) {
  .container {
    max-width: 1400px;
  }
}

/* 2.2 Section title: eyebrow -> h2.title -> lead */
.hj-section-title {
  margin-bottom: 60px;
}
.hj-section-title.text-center {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.hj-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--hj-ff-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hj-color-gold-deep);
  margin-bottom: 22px;
  line-height: 1.4;
}
.hj-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  flex: 0 0 34px;
}
.hj-eyebrow b {
  color: var(--hj-color-ink);
  font-weight: 700;
}
.text-center .hj-eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  flex: 0 0 34px;
}
.hj-night .hj-eyebrow,
.hj-surface .hj-eyebrow {
  color: var(--hj-color-gold);
}
.hj-night .hj-eyebrow b,
.hj-surface .hj-eyebrow b {
  color: var(--hj-color-white);
}
.hj-section-title .title {
  margin-bottom: 0;
}
.hj-section-title .title span,
.hj-title-accent {
  color: var(--hj-color-gold-deep);
}
.hj-night .hj-section-title .title span,
.hj-surface .hj-section-title .title span,
.hj-night .hj-title-accent {
  color: var(--hj-color-gold);
}
.hj-section-title .hj-lead {
  margin-top: 24px;
  max-width: 640px;
}
.hj-section-title.text-center .hj-lead {
  margin-left: auto;
  margin-right: auto;
}
.hj-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 60px;
}
.hj-title-row .hj-section-title {
  margin-bottom: 0;
  max-width: 600px;
}
.hj-title-row > .hj-tabs {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

/* 2.3 Buttons - square plates, the double arrow slides through */
.hj-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 58px;
  padding: 0 30px 0 34px;
  border: 1px solid var(--hj-color-gold);
  background: var(--hj-color-gold);
  color: var(--hj-color-night);
  font-family: var(--hj-ff-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--hj-ease), border-color 0.45s var(--hj-ease), box-shadow 0.45s var(--hj-ease), transform 0.45s var(--hj-ease);
}
.hj-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hj-color-white);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.55s var(--hj-ease);
}
.hj-btn:hover {
  color: var(--hj-color-night);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -18px rgba(var(--hj-color-gold-rgb), 0.7);
}
.hj-btn:hover::before {
  transform: scaleX(1);
  transform-origin: left center;
}
.btn-ic {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 14px;
}
.btn-ic i {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.45s var(--hj-ease);
}
.btn-ic i + i {
  transform: translateX(-150%);
}
.hj-btn:hover .btn-ic i,
.hj-link:hover .btn-ic i {
  transform: translateX(150%);
}
.hj-btn:hover .btn-ic i + i,
.hj-link:hover .btn-ic i + i {
  transform: translateX(0);
}
.hj-btn-line {
  background: transparent;
  color: var(--hj-color-ink);
  border-color: rgba(var(--hj-color-ink-rgb), 0.35);
}
.hj-btn-line::before {
  background: var(--hj-color-ink);
}
.hj-btn-line:hover {
  color: var(--hj-color-white);
  border-color: var(--hj-color-ink);
  box-shadow: none;
}
.hj-night .hj-btn-line,
.hj-surface .hj-btn-line,
.hj-btn-line.is-light {
  color: var(--hj-color-white);
  border-color: rgba(var(--hj-color-white-rgb), 0.35);
}
.hj-night .hj-btn-line::before,
.hj-surface .hj-btn-line::before,
.hj-btn-line.is-light::before {
  background: var(--hj-color-gold);
}
.hj-night .hj-btn-line:hover,
.hj-surface .hj-btn-line:hover,
.hj-btn-line.is-light:hover {
  color: var(--hj-color-night);
  border-color: var(--hj-color-gold);
}
.hj-btn-dark {
  background: var(--hj-color-night);
  border-color: var(--hj-color-night);
  color: var(--hj-color-white);
}
.hj-btn-dark::before {
  background: var(--hj-color-gold);
}
.hj-btn-dark:hover {
  color: var(--hj-color-night);
  box-shadow: var(--hj-shadow-soft);
}
.hj-btn-sm {
  height: 46px;
  padding: 0 22px 0 24px;
  font-size: 0.75rem;
}
.hj-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.hj-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hj-color-ink);
}
.hj-link .btn-ic {
  color: var(--hj-color-gold-deep);
}
.hj-night .hj-link,
.hj-surface .hj-link {
  color: var(--hj-color-white);
}
.hj-night .hj-link .btn-ic,
.hj-surface .hj-link .btn-ic {
  color: var(--hj-color-gold);
}

/* 2.4 Frames - viewfinder corner ticks and the cabin window */
.hj-frame {
  position: relative;
}
.hj-frame::before,
.hj-frame::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  z-index: 2;
  pointer-events: none;
  transition: transform 0.5s var(--hj-ease);
}
.hj-frame::before {
  top: -12px;
  left: -12px;
  border-top: 1px solid var(--hj-color-gold);
  border-left: 1px solid var(--hj-color-gold);
}
.hj-frame::after {
  right: -12px;
  bottom: -12px;
  border-right: 1px solid var(--hj-color-gold);
  border-bottom: 1px solid var(--hj-color-gold);
}
.hj-frame:hover::before {
  transform: translate(-4px, -4px);
}
.hj-frame:hover::after {
  transform: translate(4px, 4px);
}
.hj-window {
  position: relative;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
}
.hj-window::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--hj-color-white-rgb), 0.45);
  pointer-events: none;
  z-index: 2;
}
.hj-media {
  position: relative;
  overflow: hidden;
}
.hj-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--hj-ease);
}
.hj-zoom:hover .hj-media img,
.hj-media.hj-zoom:hover img {
  transform: scale(1.06);
}

/* 2.5 Readouts - instrument-panel figures */
.hj-readout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.2;
}
.hj-readout small {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hj-color-body);
}
.hj-readout b {
  font-family: var(--hj-ff-head);
  font-weight: 300;
  font-size: 1.625rem;
  letter-spacing: -0.02em;
  color: var(--hj-color-ink);
}
.hj-readout b em {
  font-style: normal;
  font-size: 0.55em;
  margin-left: 3px;
  color: var(--hj-color-gold-deep);
  letter-spacing: 0.04em;
}
.hj-night .hj-readout small,
.hj-surface .hj-readout small {
  color: var(--hj-color-body-dark);
}
.hj-night .hj-readout b,
.hj-surface .hj-readout b {
  color: var(--hj-color-white);
}
.hj-night .hj-readout b em,
.hj-surface .hj-readout b em {
  color: var(--hj-color-gold);
}
.hj-hairline {
  display: block;
  height: 1px;
  background: var(--hj-color-gold);
  transform-origin: left center;
}

/* 2.6 Icon disc - the logo ring */
.hj-disc {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid rgba(var(--hj-color-gold-rgb), 0.55);
  color: var(--hj-color-gold-deep);
  font-size: 2.1rem;
  line-height: 1;
  transition: background-color 0.45s var(--hj-ease), color 0.45s var(--hj-ease), border-color 0.45s var(--hj-ease);
}
.hj-disc i {
  line-height: 1;
}
.hj-night .hj-disc,
.hj-surface .hj-disc {
  color: var(--hj-color-gold);
}
.hj-icon-card:hover .hj-disc {
  background: var(--hj-color-gold);
  border-color: var(--hj-color-gold);
  color: var(--hj-color-night);
}

/* 2.7 Boarding-pass notches: the section sets --hj-notch to its ground */
.hj-pass {
  position: relative;
  --hj-notch: var(--hj-color-pearl);
}
.hj-pass .pass-perf {
  position: relative;
  border-left: 1px dashed rgba(var(--hj-color-ink-rgb), 0.22);
}
.hj-pass .pass-perf::before,
.hj-pass .pass-perf::after {
  content: "";
  position: absolute;
  left: -13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--hj-notch);
}
.hj-pass .pass-perf::before {
  top: -13px;
}
.hj-pass .pass-perf::after {
  bottom: -13px;
}

/* 2.8 Slider arrows and dots - the base's square buttons */
.hj-arrows {
  display: flex;
  gap: 10px;
}
.hj-arrow {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--hj-color-ink-rgb), 0.18);
  background: transparent;
  color: var(--hj-color-ink);
  font-size: 0.875rem;
  transition: all 0.4s var(--hj-ease);
}
.hj-arrow:hover,
.hj-arrow.is-next {
  background: var(--hj-color-gold);
  border-color: var(--hj-color-gold);
  color: var(--hj-color-night);
}
.hj-arrow.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.hj-night .hj-arrow,
.hj-surface .hj-arrow {
  border-color: rgba(var(--hj-color-white-rgb), 0.22);
  color: var(--hj-color-white);
}
.hj-night .hj-arrow:hover,
.hj-night .hj-arrow.is-next,
.hj-surface .hj-arrow.is-next {
  color: var(--hj-color-night);
  border-color: var(--hj-color-gold);
}
.hj-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}
.hj-dots .swiper-pagination-bullet {
  width: 18px;
  height: 2px;
  border-radius: 0;
  margin: 0 !important;
  background: rgba(var(--hj-color-ink-rgb), 0.2);
  opacity: 1;
  transition: width 0.4s var(--hj-ease), background-color 0.4s var(--hj-ease);
}
.hj-dots .swiper-pagination-bullet-active {
  width: 38px;
  background: var(--hj-color-gold);
}
.hj-night .hj-dots .swiper-pagination-bullet {
  background: rgba(var(--hj-color-white-rgb), 0.25);
}
.hj-night .hj-dots .swiper-pagination-bullet-active {
  background: var(--hj-color-gold);
}

/* 2.9 Tabs and filter buttons */
.hj-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hj-tab {
  height: 50px;
  padding: 0 22px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--hj-color-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.35s var(--hj-ease);
}
.hj-tab sup {
  font-size: 0.6875rem;
  color: var(--hj-color-gold-deep);
  top: -0.6em;
}
.hj-tab:hover {
  color: var(--hj-color-ink);
}
.hj-tab.is-active {
  border-color: rgba(var(--hj-color-ink-rgb), 0.22);
  color: var(--hj-color-ink);
  background: var(--hj-color-white);
}
.hj-night .hj-tab,
.hj-surface .hj-tab {
  color: var(--hj-color-body-dark);
}
.hj-night .hj-tab:hover,
.hj-surface .hj-tab:hover {
  color: var(--hj-color-white);
}
.hj-night .hj-tab.is-active,
.hj-surface .hj-tab.is-active {
  color: var(--hj-color-white);
  background: transparent;
  border-color: rgba(var(--hj-color-gold-rgb), 0.6);
}
.hj-night .hj-tab sup {
  color: var(--hj-color-gold);
}
.is-hidden {
  display: none !important;
}

/* 2.10 Set lines and photo grounds */
/* a hero headline breaks exactly where it is written: each line is one span */
.hl {
  display: block;
  white-space: nowrap;
}
/* a faint photograph behind a plain section (the generator never puts two in a row) */
.has-ground {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.hj-ground {
  position: absolute;
  inset: -10% 0;
  z-index: -1;
  opacity: 0.09;
  pointer-events: none;
}
.hj-ground img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
.hj-night > .hj-ground {
  opacity: 0.16;
}
.hj-night > .hj-ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--hj-color-night) 0%, rgba(var(--hj-color-night-rgb), 0) 30%, rgba(var(--hj-color-night-rgb), 0) 70%, var(--hj-color-night) 100%);
}

/* 2.11 Watermarks */
.hj-watermark {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  color: rgba(var(--hj-color-gold-rgb), 0.18);
  line-height: 1;
}

/*======================
3. Forms
========================*/
/* 3.1 Labels and text fields - every field has a label, an icon and a placeholder */
.hj-label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hj-color-ink);
}
.hj-night .hj-label,
.hj-surface .hj-label,
.hj-on-dark .hj-label {
  color: var(--hj-color-body-dark);
}
.hj-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border: 1px solid var(--hj-color-line);
  border-radius: 0;
  background-color: var(--hj-color-white);
  font-size: 0.975rem;
  color: var(--hj-color-ink);
  transition: border-color 0.3s var(--hj-ease), box-shadow 0.3s var(--hj-ease);
}
.hj-input:focus {
  outline: none;
  border-color: var(--hj-color-gold-deep);
  box-shadow: 0 0 0 3px rgba(var(--hj-color-gold-rgb), 0.25);
}
.hj-input::placeholder {
  color: #9B978F;
}
textarea.hj-input {
  height: auto;
  min-height: 150px;
  padding: 16px 18px;
  line-height: 1.6;
  resize: vertical;
}
input[type="date"].hj-input::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
}
.hj-night .hj-input,
.hj-surface .hj-input,
.hj-on-dark .hj-input {
  background-color: rgba(var(--hj-color-white-rgb), 0.04);
  border-color: rgba(var(--hj-color-white-rgb), 0.14);
  color: var(--hj-color-white);
  color-scheme: dark;
}
.hj-night .hj-input::placeholder,
.hj-surface .hj-input::placeholder,
.hj-on-dark .hj-input::placeholder {
  color: rgba(var(--hj-color-white-rgb), 0.45);
}
.hj-field {
  position: relative;
}
.hj-field .field-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 56px;
  font-size: 0.95rem;
  color: var(--hj-color-gold-deep);
  pointer-events: none;
}
.hj-night .hj-field .field-icon,
.hj-surface .hj-field .field-icon,
.hj-on-dark .hj-field .field-icon {
  color: var(--hj-color-gold);
}
.hj-field .hj-input {
  padding-left: 50px;
}
.hj-field.has-textarea .field-icon {
  height: 56px;
}

/* 3.2 Custom select - the native select stays in the form */
.hj-select {
  position: relative;
}
.hj-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}
.hj-select > i {
  display: none;
}
.hj-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border: 1px solid var(--hj-color-line);
  background: var(--hj-color-white);
  color: var(--hj-color-ink);
  font-size: 0.975rem;
  text-align: left;
  transition: border-color 0.3s var(--hj-ease);
}
.hj-field.hj-select .select-button {
  padding-left: 50px;
}
/* a long airport name shortens with an ellipsis instead of widening the form */
.hj-select .select-button .select-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hj-select .select-button > i {
  flex-shrink: 0;
  font-size: 0.625rem;
  color: var(--hj-color-gold-deep);
  transition: transform 0.35s var(--hj-ease);
}
.hj-select.is-open .select-button > i {
  transform: rotate(180deg);
}
.hj-select.is-open .select-button,
.hj-select:hover .select-button {
  border-color: var(--hj-color-gold-deep);
}
.hj-select .select-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 100%;
  max-height: 320px;
  padding: 8px 0;
  margin: 0;
  overflow-y: auto;
  list-style: none;
  background: var(--hj-color-white);
  border-top: 1px solid var(--hj-color-gold);
  box-shadow: var(--hj-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s var(--hj-ease), transform 0.3s var(--hj-ease), visibility 0.3s;
}
.hj-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 6px);
  border-top: 0;
  border-bottom: 1px solid var(--hj-color-gold);
  transform: translateY(-8px);
}
.hj-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hj-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 0.9375rem;
  color: var(--hj-color-ink);
  white-space: nowrap;
  cursor: pointer;
}
.hj-select .select-option .option-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hj-select .select-option .option-meta {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hj-color-gold-deep);
}
.hj-select .select-option .option-meta.is-none {
  color: var(--hj-color-body);
}
.hj-select .select-option.is-focused,
.hj-select .select-option:hover {
  background: var(--hj-color-pearl);
}
.hj-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.hj-select .select-option.is-selected {
  color: var(--hj-color-gold-deep);
}
.hj-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.6875rem;
}
.hj-night .hj-select .select-button,
.hj-surface .hj-select .select-button,
.hj-on-dark .hj-select .select-button {
  background: rgba(var(--hj-color-white-rgb), 0.04);
  border-color: rgba(var(--hj-color-white-rgb), 0.14);
  color: var(--hj-color-white);
}
.hj-night .hj-select .select-button > i,
.hj-surface .hj-select .select-button > i,
.hj-on-dark .hj-select .select-button > i {
  color: var(--hj-color-gold);
}
.hj-night .hj-select .select-list,
.hj-surface .hj-select .select-list,
.hj-on-dark .hj-select .select-list {
  background: var(--hj-color-raised);
}
.hj-night .hj-select .select-option,
.hj-surface .hj-select .select-option,
.hj-on-dark .hj-select .select-option {
  color: var(--hj-color-white);
}
.hj-night .hj-select .select-option.is-focused,
.hj-night .hj-select .select-option:hover,
.hj-surface .hj-select .select-option:hover,
.hj-surface .hj-select .select-option.is-focused,
.hj-on-dark .hj-select .select-option:hover,
.hj-on-dark .hj-select .select-option.is-focused {
  background: rgba(var(--hj-color-white-rgb), 0.06);
}
.hj-night .hj-select .select-option.is-selected,
.hj-surface .hj-select .select-option.is-selected,
.hj-on-dark .hj-select .select-option.is-selected {
  color: var(--hj-color-gold);
}

/* 3.3 Currency switch (header, offcanvas) */
.hj-currency.hj-select .select-button {
  width: auto;
  min-width: 96px;
  height: 44px;
  padding: 0 14px;
  gap: 10px;
  background: transparent;
  border: 1px solid rgba(var(--hj-color-white-rgb), 0.22);
  color: var(--hj-color-white);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.hj-currency.hj-select .select-list {
  min-width: 100%;
  background: var(--hj-color-raised);
}
.hj-currency.hj-select .select-option {
  color: var(--hj-color-white);
  padding: 8px 16px;
  font-size: 0.875rem;
}
.hj-currency.hj-select .select-option:hover,
.hj-currency.hj-select .select-option.is-focused {
  background: rgba(var(--hj-color-white-rgb), 0.06);
}

/* 3.4 Check, radio, switch */
.hj-check {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.hj-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.hj-check .check-box {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1px solid rgba(var(--hj-color-ink-rgb), 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s var(--hj-ease);
}
.hj-check input[type="radio"] + .check-box {
  border-radius: 50%;
}
.hj-check .check-box::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--hj-color-night);
  transform: scale(0);
  transition: transform 0.25s var(--hj-ease);
}
.hj-check input[type="radio"] + .check-box::after {
  border-radius: 50%;
}
.hj-check input:checked + .check-box {
  background: var(--hj-color-gold);
  border-color: var(--hj-color-gold);
}
.hj-check input:checked + .check-box::after {
  transform: scale(1);
}
.hj-check input:focus-visible + .check-box {
  outline: 2px solid var(--hj-color-gold);
  outline-offset: 2px;
}
.hj-night .hj-check .check-box,
.hj-surface .hj-check .check-box,
.hj-on-dark .hj-check .check-box {
  border-color: rgba(var(--hj-color-white-rgb), 0.35);
}

/* 3.5 Stepper (passengers) */
.hj-stepper {
  display: flex;
  align-items: stretch;
  height: 56px;
  border: 1px solid var(--hj-color-line);
  background: var(--hj-color-white);
}
.hj-stepper button {
  width: 50px;
  border: 0;
  background: transparent;
  color: var(--hj-color-gold-deep);
  font-size: 0.75rem;
}
.hj-stepper button:hover {
  background: var(--hj-color-pearl);
}
.hj-stepper input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-weight: 600;
  color: var(--hj-color-ink);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.hj-stepper input::-webkit-outer-spin-button,
.hj-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.hj-stepper input:focus {
  outline: none;
}
.hj-night .hj-stepper,
.hj-surface .hj-stepper,
.hj-on-dark .hj-stepper {
  background: rgba(var(--hj-color-white-rgb), 0.04);
  border-color: rgba(var(--hj-color-white-rgb), 0.14);
}
.hj-night .hj-stepper input,
.hj-surface .hj-stepper input,
.hj-on-dark .hj-stepper input {
  color: var(--hj-color-white);
}
.hj-night .hj-stepper button,
.hj-surface .hj-stepper button,
.hj-on-dark .hj-stepper button {
  color: var(--hj-color-gold);
}
.hj-night .hj-stepper button:hover,
.hj-surface .hj-stepper button:hover,
.hj-on-dark .hj-stepper button:hover {
  background: rgba(var(--hj-color-white-rgb), 0.06);
}

/* 3.6 Range */
.hj-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--hj-color-gold) var(--fill, 50%), rgba(var(--hj-color-ink-rgb), 0.15) var(--fill, 50%));
  outline: none;
}
.hj-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hj-color-white);
  border: 1px solid var(--hj-color-gold-deep);
  box-shadow: 0 0 0 5px rgba(var(--hj-color-gold-rgb), 0.25);
  cursor: pointer;
}
.hj-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hj-color-white);
  border: 1px solid var(--hj-color-gold-deep);
  cursor: pointer;
}
.hj-night .hj-range,
.hj-surface .hj-range {
  background: linear-gradient(90deg, var(--hj-color-gold) var(--fill, 50%), rgba(var(--hj-color-white-rgb), 0.15) var(--fill, 50%));
}

/* 3.7 AJAX status line */
.form-status {
  display: block;
  margin-top: 14px;
  font-size: 0.9375rem;
}
.form-status:empty {
  display: none;
}
.form-status.is-success {
  color: var(--hj-color-green);
}
.form-status.is-error {
  color: var(--hj-color-red);
}

/*======================
4. Preloader
========================*/
/* P12 typed flight plan: the ring mark, a flight-plan line that types itself with
   the real UTC time in it, a hairline that fills as it types, then the night lifts. */
.hj-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hj-color-night);
  color: var(--hj-color-white);
}
.js .hj-preloader {
  display: flex;
}
.no-js .hj-preloader {
  display: none;
}
.hj-preloader .pre-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 0 24px;
}
.hj-preloader .pre-mark {
  width: 92px;
  height: 92px;
}
.hj-preloader .pre-line {
  display: flex;
  align-items: center;
  min-height: 24px;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hj-color-white);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hj-preloader .pre-line b {
  color: var(--hj-color-gold);
  font-weight: 600;
}
.hj-preloader .pre-caret {
  display: inline-block;
  width: 9px;
  height: 17px;
  margin-left: 4px;
  background: var(--hj-color-gold);
  animation: hj-caret 0.9s steps(1) infinite;
}
.hj-preloader .pre-rule {
  position: relative;
  width: min(460px, 80vw);
  height: 1px;
  background: rgba(var(--hj-color-white-rgb), 0.12);
}
.hj-preloader .pre-rule i {
  position: absolute;
  inset: 0;
  background: var(--hj-color-gold);
  transform: scaleX(0);
  transform-origin: left center;
}
@keyframes hj-caret {
  50% {
    opacity: 0;
  }
}

/*======================
5. Header
========================*/
/* The base's centred-logo split: toggle + nav left, the lockup centred, the Zulu
   clock, currency and quote plate right. Fixed from the start (it floats over the
   dark hero or subheader), so turning solid on scroll never moves the page. */
.hj-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  color: var(--hj-color-white);
  transition: background-color 0.45s var(--hj-ease), box-shadow 0.45s var(--hj-ease), transform 0.45s var(--hj-ease);
}
.hj-header .header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  height: var(--hj-header-h);
  border-bottom: 1px solid rgba(var(--hj-color-white-rgb), 0.12);
  transition: height 0.45s var(--hj-ease), border-color 0.45s var(--hj-ease);
}
.hj-header .header-left {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}
.hj-header .header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}
.hj-logo {
  display: block;
  line-height: 0;
}
.hj-logo img {
  height: 58px;
  width: auto;
  transition: height 0.45s var(--hj-ease);
}
.hj-logo .logo-main {
  display: none;
}
.hj-header.is-scrolled {
  background: rgba(var(--hj-color-night-rgb), 0.96);
  box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.7);
}
.hj-header.is-scrolled .header-inner {
  height: 78px;
  border-color: transparent;
}
.hj-header.is-scrolled .hj-logo img {
  height: 48px;
}

/* the menu toggle: three hairlines, the middle one shorter */
.hj-menu-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 1px solid rgba(var(--hj-color-white-rgb), 0.22);
  background: transparent;
  color: inherit;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: border-color 0.3s var(--hj-ease);
}
.hj-menu-toggle span {
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width 0.35s var(--hj-ease), background-color 0.3s;
}
.hj-menu-toggle span:nth-child(2) {
  width: 11px;
  margin-right: 7px;
  background: var(--hj-color-gold);
}
.hj-menu-toggle:hover {
  border-color: var(--hj-color-gold);
}
.hj-menu-toggle:hover span:nth-child(2) {
  width: 18px;
  margin-right: 0;
}

/* main nav */
.hj-nav > ul {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hj-nav li {
  position: relative;
}
.hj-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--hj-header-h);
  padding: 0 9px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hj-color-white);
  transition: color 0.3s var(--hj-ease), height 0.45s var(--hj-ease);
}
.hj-header.is-scrolled .hj-nav > ul > li > a {
  height: 78px;
}
.hj-nav > ul > li > a i {
  font-size: 0.5625rem;
  color: var(--hj-color-gold);
  transition: transform 0.3s var(--hj-ease);
}
.hj-nav > ul > li:hover > a,
.hj-nav > ul > li.active > a {
  color: var(--hj-color-gold);
}
.hj-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.hj-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: -1px;
  height: 1px;
  background: var(--hj-color-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--hj-ease);
}
.hj-nav > ul > li.active > a::after,
.hj-nav > ul > li:hover > a::after {
  transform: scaleX(1);
}
.hj-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 250px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
  background: var(--hj-color-surface);
  border-top: 1px solid var(--hj-color-gold);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.35s var(--hj-ease), transform 0.35s var(--hj-ease), visibility 0.35s;
}
.hj-nav li:hover > .sub-menu,
.hj-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hj-nav .sub-menu .sub-menu {
  top: -15px;
  left: 100%;
}
.hj-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 26px;
  font-size: 0.875rem;
  color: var(--hj-color-body-dark);
  transition: color 0.3s var(--hj-ease), padding 0.3s var(--hj-ease);
}
.hj-nav .sub-menu a i {
  font-size: 0.5625rem;
  color: var(--hj-color-gold);
}
.hj-nav .sub-menu li:hover > a,
.hj-nav .sub-menu li.active > a {
  color: var(--hj-color-white);
  padding-left: 32px;
}
.hj-nav .sub-menu li.active > a {
  color: var(--hj-color-gold);
}

/* Zulu clock - a live UTC readout, as a flight deck shows it */
.hj-zulu {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  padding-right: 18px;
  border-right: 1px solid rgba(var(--hj-color-white-rgb), 0.16);
}
.hj-zulu small {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hj-color-gold);
}
.hj-zulu b {
  font-family: var(--hj-ff-head);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--hj-color-white);
  font-variant-numeric: tabular-nums;
}
.hj-header .hj-btn {
  height: 48px;
  padding: 0 22px 0 24px;
  font-size: 0.75rem;
}

/* reading progress along the header's foot */
.header-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--hj-color-gold);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: opacity 0.3s;
}
.hj-header.is-scrolled .header-progress {
  opacity: 1;
}

/* header 3: a topbar, then the base's boxed white bar */
.hj-topbar {
  font-size: 0.8125rem;
  color: var(--hj-color-body-dark);
  transition: transform 0.45s var(--hj-ease), height 0.45s var(--hj-ease), opacity 0.3s;
  overflow: hidden;
  height: 46px;
}
.hj-topbar .topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 46px;
}
.hj-topbar p {
  margin: 0;
  display: flex;
  gap: 26px;
}
.hj-topbar p span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hj-topbar i {
  color: var(--hj-color-gold);
}
.hj-topbar b {
  color: var(--hj-color-white);
  font-weight: 600;
}
.hj-topbar .topbar-right {
  display: flex;
  align-items: center;
  gap: 26px;
}
.hj-topbar a:hover {
  color: var(--hj-color-gold);
}
/* the split header's topbar: a hairline strip over the hero that folds away
   when the header turns solid */
.hj-header:not(.is-boxed) .hj-topbar {
  height: var(--hj-top-h);
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(var(--hj-color-white-rgb), 0.08);
}
.hj-header:not(.is-boxed) .hj-topbar .topbar-inner {
  height: var(--hj-top-h);
}
.hj-header.is-scrolled .hj-topbar {
  height: 0;
  opacity: 0;
  border-bottom-width: 0;
}
.topbar-leg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.topbar-leg b {
  color: var(--hj-color-white);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.topbar-leg b em {
  font-style: normal;
  margin-left: 6px;
  color: var(--hj-color-gold);
}
.topbar-social {
  display: flex;
  gap: 16px;
  padding-left: 22px;
  border-left: 1px solid rgba(var(--hj-color-white-rgb), 0.14);
}
.topbar-social a {
  font-size: 0.75rem;
  color: var(--hj-color-body-dark);
}
.hj-header.is-boxed {
  background: var(--hj-color-night);
}
.hj-header.is-boxed .header-inner {
  grid-template-columns: auto 1fr auto;
  height: 92px;
  padding: 0 30px 0 34px;
  margin-bottom: -46px;
  background: var(--hj-color-white);
  color: var(--hj-color-ink);
  border: 0;
  box-shadow: var(--hj-shadow);
}
.hj-header.is-boxed .hj-logo .logo-main {
  display: block;
}
.hj-header.is-boxed .hj-logo .logo-light {
  display: none;
}
.hj-header.is-boxed .hj-nav {
  justify-self: center;
}
.hj-header.is-boxed .hj-nav > ul > li > a {
  height: 92px;
  color: var(--hj-color-ink);
}
.hj-header.is-boxed .hj-nav > ul > li:hover > a,
.hj-header.is-boxed .hj-nav > ul > li.active > a {
  color: var(--hj-color-gold-deep);
}
.hj-header.is-boxed .hj-nav > ul > li > a i {
  color: var(--hj-color-gold-deep);
}
.hj-header.is-boxed .hj-menu-toggle {
  border-color: var(--hj-color-line);
  color: var(--hj-color-ink);
}
.hj-header.is-boxed .hj-zulu {
  border-color: var(--hj-color-line);
}
.hj-header.is-boxed .hj-zulu b {
  color: var(--hj-color-ink);
}
.hj-header.is-boxed .hj-zulu small {
  color: var(--hj-color-gold-deep);
}
.hj-header.is-boxed.is-scrolled {
  background: var(--hj-color-white);
}
.hj-header.is-boxed.is-scrolled .header-inner {
  height: 78px;
  margin-bottom: 0;
  box-shadow: none;
}
.hj-header.is-boxed.is-scrolled .hj-nav > ul > li > a {
  height: 78px;
}

/*======================
6. Offcanvas Menu
========================*/
/* The base's hamburger sits at the far left, so the panel slides in from the left */
.hj-offcanvas {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1001;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--hj-color-surface);
  color: var(--hj-color-body-dark);
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform 0.6s var(--hj-ease), visibility 0.6s;
  overflow-y: auto;
}
.hj-offcanvas.is-open {
  transform: translateX(0);
  visibility: visible;
}
.hj-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--hj-ease), visibility 0.5s;
}
.hj-offcanvas-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.hj-offcanvas .offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 34px;
  border-bottom: 1px solid var(--hj-color-line-dark);
}
.hj-offcanvas .offcanvas-head img {
  height: 50px;
  width: auto;
}
.hj-offcanvas .offcanvas-close {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(var(--hj-color-white-rgb), 0.2);
  background: transparent;
  color: var(--hj-color-white);
  transition: all 0.3s var(--hj-ease);
}
.hj-offcanvas .offcanvas-close:hover {
  background: var(--hj-color-gold);
  border-color: var(--hj-color-gold);
  color: var(--hj-color-night);
}
.hj-offcanvas .offcanvas-nav {
  padding: 16px 34px 10px;
}
.hj-offcanvas .oc-group {
  padding: 18px 0;
  border-bottom: 1px solid var(--hj-color-line-dark);
}
.hj-offcanvas .oc-label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hj-color-gold);
}
.hj-offcanvas .oc-group ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 18px;
}
.hj-offcanvas .oc-group a {
  display: block;
  padding: 4px 0;
  font-size: 0.9375rem;
  color: var(--hj-color-white);
}
.hj-offcanvas .oc-group a:hover,
.hj-offcanvas .oc-group a.is-current {
  color: var(--hj-color-gold);
}
.hj-offcanvas .offcanvas-foot {
  margin-top: auto;
  padding: 26px 34px 34px;
}
.hj-offcanvas .offcanvas-foot .label {
  display: block;
  margin: 22px 0 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hj-color-gold);
}
.hj-offcanvas .oc-contact {
  display: block;
  font-family: var(--hj-ff-head);
  font-size: 1.125rem;
  color: var(--hj-color-white);
}
.hj-offcanvas .oc-currency label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hj-color-gold);
}
.hj-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.hj-social a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--hj-color-white-rgb), 0.06);
  color: var(--hj-color-white);
  font-size: 0.875rem;
  transition: all 0.35s var(--hj-ease);
}
.hj-social a:hover {
  background: var(--hj-color-gold);
  color: var(--hj-color-night);
  transform: translateY(-3px);
}

/*======================
7. Breadcrumb
========================*/
/* The base's subheader kept: a jet photograph under the night, the title on the
   left, the breadcrumb on a pearl tab that sits on the band's foot. */
.hj-breadcrumb-area {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: calc(var(--hj-header-h) + var(--hj-top-h) + 110px) 0 0;
  background: var(--hj-color-night);
}
.hj-breadcrumb-area .breadcrumb-bg {
  position: absolute;
  inset: -12% 0;
  z-index: -2;
}
.hj-breadcrumb-area .breadcrumb-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  filter: saturate(0.75);
}
.hj-breadcrumb-area::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(var(--hj-color-night-rgb), 0.94) 0%, rgba(var(--hj-color-night-rgb), 0.72) 45%, rgba(var(--hj-color-night-rgb), 0.35) 100%),
    linear-gradient(180deg, rgba(var(--hj-color-night-rgb), 0.6) 0%, rgba(var(--hj-color-night-rgb), 0) 40%);
}
.hj-breadcrumb-text {
  position: relative;
  padding-bottom: 110px;
}
.hj-breadcrumb-text .hj-eyebrow {
  color: var(--hj-color-gold);
}
.hj-page-title {
  margin: 0;
  color: var(--hj-color-white);
  font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.75rem);
  max-width: 900px;
}
.hj-breadcrumb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 34px;
}
.hj-breadcrumb-nav {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 34px;
  background: var(--hj-color-pearl);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--hj-color-ink);
}
.hj-breadcrumb-nav li {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hj-breadcrumb-nav li + li::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--hj-color-gold-deep);
}
.hj-breadcrumb-nav a:hover {
  color: var(--hj-color-gold-deep);
}
.hj-breadcrumb-nav .active {
  color: var(--hj-color-gold-deep);
}
.hj-breadcrumb-area.is-white-tab .hj-breadcrumb-nav {
  background: var(--hj-color-white);
}
.hj-breadcrumb-area.is-night-tab .hj-breadcrumb-nav {
  background: var(--hj-color-night);
  color: var(--hj-color-white);
}
.hj-breadcrumb-area.is-night-tab .hj-breadcrumb-nav .active {
  color: var(--hj-color-gold);
}
.hj-breadcrumb-wrap {
  position: relative;
}
.hj-breadcrumb-wrap .hj-breadcrumb-nav {
  right: calc(var(--bs-gutter-x) * 0.5);
}

/*======================
8. Night Hero
========================*/
/* Home 1: the base's split (copy left, jet photo right, bar overlapping) on night.
   The photo sits in a cabin window inside the logo's ring; a moonlight follows the
   pointer and lifts the jet out of the dark (C5). */
.hj-hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  min-height: 100vh;
  padding: calc(var(--hj-header-h) + var(--hj-top-h) + 60px) 0 170px;
  display: flex;
  align-items: center;
  --mx: 68%;
  --my: 45%;
}
.hj-hero > .container {
  width: 100%;
}
.hj-hero .hero-moon {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(236, 229, 214, 0.13), rgba(236, 229, 214, 0.04) 45%, rgba(236, 229, 214, 0) 70%);
  pointer-events: none;
  transition: opacity 0.6s var(--hj-ease);
}
.hj-hero .hero-map {
  position: absolute;
  left: -6%;
  top: 8%;
  width: 70%;
  height: 84%;
  z-index: -2;
  background: url("../img/icon/pattern-03.png") left center / contain no-repeat;
  opacity: 0.55;
  pointer-events: none;
}
.hero-copy {
  position: relative;
  max-width: 620px;
}
/* two set lines; the size steps with the column so the longer line (9.5em) always fits */
.hero-title {
  margin-bottom: 40px;
  font-size: 4rem;
  color: var(--hj-color-white);
}
.hero-readouts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 46px;
  border-top: 1px solid var(--hj-color-line-dark);
  border-bottom: 1px solid var(--hj-color-line-dark);
}
.hero-readouts .hj-readout {
  padding: 18px 30px 18px 0;
  margin-right: 30px;
  border-right: 1px solid var(--hj-color-line-dark);
}
.hero-readouts .hj-readout:last-child {
  border-right: 0;
  margin-right: 0;
}
.hero-readouts .hj-readout b {
  font-size: 1.375rem;
}
.hero-visual {
  position: relative;
  width: min(520px, 100%);
  margin-left: auto;
  padding: 40px 0;
}
.hero-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 138%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(var(--hj-color-gold-rgb), 0.35);
  pointer-events: none;
}
.hero-ring::before {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px dashed rgba(var(--hj-color-gold-rgb), 0.18);
}
.hero-ring::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 9px;
  height: 9px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--hj-color-gold);
  box-shadow: 0 0 0 6px rgba(var(--hj-color-gold-rgb), 0.15);
}
.hero-window {
  position: relative;
  width: 78%;
  margin: 0 auto;
  aspect-ratio: 0.66;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 10px rgba(var(--hj-color-white-rgb), 0.04);
}
.hero-window img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% center;
}
.hero-window .window-dim {
  filter: brightness(0.5) saturate(0.85);
}
/* three jets fade through the window; each slide carries its dim and lit copy */
.window-slider {
  position: absolute;
  inset: 0;
}
.window-slider .swiper-wrapper,
.window-slider .swiper-slide {
  height: 100%;
}
.window-nav {
  position: absolute;
  right: -6%;
  top: 64px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.window-count {
  font-family: var(--hj-ff-head);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  color: rgba(var(--hj-color-white-rgb), 0.55);
}
.window-count b {
  font-weight: 400;
  color: var(--hj-color-white);
}
.window-nav .hj-arrow {
  width: 50px;
  height: 50px;
  background: rgba(var(--hj-color-night-rgb), 0.55);
  backdrop-filter: blur(8px);
}
.window-nav .hj-arrow:hover,
.window-nav .hj-arrow.is-next {
  background: var(--hj-color-gold);
}
/* the lit copy only shows where the moonlight falls */
.hero-window .window-lit {
  -webkit-mask-image: radial-gradient(260px circle at var(--lx, 55%) var(--ly, 40%), #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 75%);
  mask-image: radial-gradient(260px circle at var(--lx, 55%) var(--ly, 40%), #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 75%);
}
.hero-tag {
  position: absolute;
  left: -8%;
  bottom: 70px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 210px;
  padding: 20px 24px;
  background: rgba(var(--hj-color-surface-rgb), 0.88);
  border-left: 1px solid var(--hj-color-gold);
  backdrop-filter: blur(10px);
  color: var(--hj-color-body-dark);
  font-size: 0.875rem;
}
.hero-tag .tag-code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hj-color-gold);
}
.hero-tag .tag-code::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hj-color-green);
  box-shadow: 0 0 0 4px rgba(111, 178, 135, 0.2);
  animation: hj-blink 1.8s ease-in-out infinite;
}
.hero-tag b {
  font-family: var(--hj-ff-head);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--hj-color-white);
}
@keyframes hj-blink {
  50% {
    opacity: 0.35;
  }
}

/*======================
9. Quick Quote
========================*/
/* The base's booking bar, now a route: it straddles the hero's foot as the base's
   white bar did, and prices the trip live on the Charter Quote engine. */
.hj-quick-quote {
  position: relative;
  z-index: 5;
  padding-top: 1px;
  background: linear-gradient(180deg, transparent 0, transparent 110px, var(--hj-color-pearl) 110px);
  margin-top: -110px;
  padding-bottom: 110px;
}
.quick-quote {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.8fr) auto;
  align-items: end;
  gap: 18px;
  padding: 34px 34px 0;
  background: var(--hj-color-white);
  box-shadow: 0 40px 80px -40px rgba(var(--hj-color-night-rgb), 0.45);
}
.quick-quote .qq-submit {
  height: 56px;
}
.qq-estimate {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 26px -34px 0;
  padding: 16px 34px;
  background: var(--hj-color-night);
  color: var(--hj-color-body-dark);
}
.qq-estimate > span {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding-right: 26px;
  margin-right: 26px;
  border-right: 1px solid var(--hj-color-line-dark);
}
.qq-estimate > span:last-child {
  border-right: 0;
  margin-right: 0;
  padding-right: 0;
  margin-left: auto;
}
.qq-estimate small {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.qq-estimate b {
  font-weight: 600;
  color: var(--hj-color-white);
  font-variant-numeric: tabular-nums;
}
.qq-estimate em {
  font-style: normal;
  font-family: var(--hj-ff-head);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--hj-color-gold);
}
.qq-estimate i {
  font-style: normal;
  color: var(--hj-color-white);
}
.qq-estimate.is-warn .qq-from small {
  color: var(--hj-color-red);
}

/*======================
10. About
========================*/
/* KEPT: the base's V of five staggered tiles under a centred title. White tiles on
   pearl; on hover a tile goes night and its glyph turns champagne. */
.hj-about-features {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  align-items: start;
}
.hj-about-features li:nth-child(2),
.hj-about-features li:nth-child(4) {
  margin-top: 100px;
}
.hj-about-features li:nth-child(3) {
  margin-top: 200px;
}
.hj-about-features .hj-icon-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  aspect-ratio: 0.93;
  padding: 30px 16px;
  background: var(--hj-color-white);
  box-shadow: var(--hj-shadow-soft);
  text-align: center;
  transition: background-color 0.5s var(--hj-ease), transform 0.5s var(--hj-ease), box-shadow 0.5s var(--hj-ease);
}
.hj-about-features .hj-icon-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 40px;
  height: 1px;
  margin-left: -20px;
  background: var(--hj-color-gold);
  transition: width 0.5s var(--hj-ease), margin 0.5s var(--hj-ease);
}
.hj-about-features .hj-disc {
  width: 96px;
  height: 96px;
  font-size: 2.75rem;
  border-color: transparent;
}
.hj-about-features .hj-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hj-color-ink);
  transition: color 0.4s var(--hj-ease);
}
.hj-about-features .hj-icon-card:hover {
  background: var(--hj-color-night);
  transform: translateY(-8px);
  box-shadow: var(--hj-shadow);
}
.hj-about-features .hj-icon-card:hover::after {
  width: 100%;
  margin-left: -50%;
}
.hj-about-features .hj-icon-card:hover .hj-title {
  color: var(--hj-color-white);
}

/*======================
11. Fleet Mosaic
========================*/
/* UPGRADED: the base's unequal tiles (two small, one wide, one tall) and its tabs.
   Each tile is a cabin class; counts and "from" rates come from the fleet data,
   and a trip tab flies its route through every class, dimming any that must stop. */
.hj-fleet-type .hj-title-row {
  align-items: center;
}
.fleet-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 300px 300px;
  gap: 24px;
}
.fleet-tile.tile-a {
  grid-column: 1;
  grid-row: 1;
}
.fleet-tile.tile-b {
  grid-column: 2;
  grid-row: 1;
}
.fleet-tile.tile-c {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.fleet-tile.tile-d {
  grid-column: 1 / span 2;
  grid-row: 2;
}
.fleet-tile {
  position: relative;
  display: block;
  overflow: hidden;
  color: var(--hj-color-white);
  isolation: isolate;
  transform-style: preserve-3d;
  transition: box-shadow 0.5s var(--hj-ease);
}
.fleet-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1.2s var(--hj-ease), filter 0.6s var(--hj-ease);
}
.fleet-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--hj-color-night-rgb), 0.05) 25%, rgba(var(--hj-color-night-rgb), 0.88) 100%);
}
.fleet-tile::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(var(--hj-color-gold-rgb), 0);
  transition: border-color 0.5s var(--hj-ease), inset 0.5s var(--hj-ease);
  pointer-events: none;
}
.fleet-tile .tile-body {
  position: absolute;
  left: 30px;
  right: 90px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fleet-tile .tile-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hj-color-gold);
}
.fleet-tile .tile-count i {
  font-size: 0.625rem;
  transform: rotate(-35deg);
}
.fleet-tile .tile-name {
  font-family: var(--hj-ff-head);
  font-size: 1.75rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.fleet-tile .tile-meta {
  font-size: 0.875rem;
  color: rgba(var(--hj-color-white-rgb), 0.75);
}
.fleet-tile .tile-meta b {
  color: var(--hj-color-white);
  font-weight: 600;
}
.fleet-tile .tile-trip {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--hj-color-white-rgb), 0.18);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.fleet-tile .tile-trip b {
  font-family: var(--hj-ff-head);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--hj-color-white);
}
.fleet-tile .tile-trip em {
  font-style: normal;
  color: var(--hj-color-green);
}
.fleet-tile.is-limited .tile-trip em {
  color: var(--hj-color-red);
}
.fleet-mosaic.has-trip .tile-trip {
  display: flex;
}
.fleet-tile.is-limited img {
  filter: grayscale(0.85) brightness(0.6);
}
.fleet-tile .tile-arrow {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--hj-color-white-rgb), 0.35);
  color: var(--hj-color-white);
  transition: all 0.45s var(--hj-ease);
}
.fleet-tile:hover img {
  transform: scale(1.07);
}
.fleet-tile:hover::after {
  border-color: rgba(var(--hj-color-gold-rgb), 0.7);
}
.fleet-tile:hover .tile-arrow {
  background: var(--hj-color-gold);
  border-color: var(--hj-color-gold);
  color: var(--hj-color-night);
}
.fleet-tile:hover {
  color: var(--hj-color-white);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.9);
}

/*======================
12. Flight Plan
========================*/
/* RECOMPOSED from the base's numbered feature stack: the three steps are waypoints
   on a dashed great-circle arc that draws across the band; the base's ghost
   numerals become the waypoint numbers. */
.hj-flight-plan .hj-section-title {
  margin-bottom: 0;
}
.hj-flight-plan .plan-cta {
  display: flex;
  justify-content: flex-end;
}
.plan-route {
  position: relative;
  margin-top: 90px;
}
/* the arc runs through the three node centres: nodes are 108px and sit at the start
   of three columns 40px apart, the middle one 114px higher - so the arc starts at
   node 1's centre, crests at node 2's and lands on node 3's at every width */
.route-arc {
  position: absolute;
  left: 54px;
  right: calc((100% - 80px) / 3 - 54px);
  top: 0;
  height: 114px;
  border: 1px dashed rgba(var(--hj-color-gold-deep-rgb), 0.7);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: transparent;
  transform-origin: left center;
  pointer-events: none;
}
.plan-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.plan-step {
  position: relative;
  padding-top: 20px;
}
.plan-step:nth-child(2) {
  padding-top: 0;
  margin-top: -54px;
}
.plan-step:nth-child(1),
.plan-step:nth-child(3) {
  margin-top: 40px;
}
.plan-step .step-node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 108px;
  margin-bottom: 30px;
  border-radius: 50%;
  background: var(--hj-color-white);
  box-shadow: var(--hj-shadow-soft);
  color: var(--hj-color-gold-deep);
  font-size: 2.75rem;
  transition: background-color 0.5s var(--hj-ease), color 0.5s var(--hj-ease);
}
.plan-step .step-node::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid rgba(var(--hj-color-gold-rgb), 0.55);
}
.plan-step .step-node em {
  position: absolute;
  right: -48px;
  top: -12px;
  font-family: var(--hj-ff-head);
  font-style: normal;
  font-size: 4.25rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--hj-color-gold-deep-rgb), 0.45);
}
.plan-step:hover .step-node {
  background: var(--hj-color-night);
  color: var(--hj-color-gold);
}
.plan-step .step-code {
  display: block;
  margin-bottom: 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hj-color-gold-deep);
}
.plan-step h3 {
  margin-bottom: 14px;
}
.plan-step p {
  margin-bottom: 22px;
  max-width: 340px;
}
.plan-step .hj-readout {
  padding-top: 18px;
  border-top: 1px solid var(--hj-color-line);
  max-width: 220px;
}

/*======================
13. Cabin Slider
========================*/
/* UPGRADED from the base's plane slider: a full-width rail of cabin photographs
   with the base's dark card overlapping on the left, now a numbered readout. */
.hj-cabin-slider {
  position: relative;
  z-index: 0;
  padding: 0;
}
.cabin-rail {
  height: 560px;
}
.cabin-rail .swiper-slide {
  width: 560px;
  height: 100%;
  overflow: hidden;
}
.cabin-rail .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.72) saturate(0.9);
  transform: scale(1.06);
  transition: filter 0.8s var(--hj-ease), transform 1.2s var(--hj-ease);
}
.cabin-rail .swiper-slide-active img {
  filter: brightness(1) saturate(1);
  transform: scale(1);
}
.cabin-card-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  pointer-events: none;
}
.cabin-card {
  position: absolute;
  top: -70px;
  left: calc(var(--bs-gutter-x) * 0.5);
  width: 380px;
  min-height: 420px;
  padding: 46px 40px 40px;
  display: flex;
  flex-direction: column;
  background: var(--hj-color-surface);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
  pointer-events: auto;
}
.cabin-card::after {
  content: "";
  position: absolute;
  left: 40px;
  right: 40px;
  top: 0;
  height: 2px;
  background: var(--hj-color-gold);
}
.cabin-card .card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 40px;
}
.cabin-card .card-top i {
  font-size: 3rem;
  line-height: 1;
  color: var(--hj-color-gold);
}
.cabin-card .card-count {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--hj-color-body-dark);
  font-variant-numeric: tabular-nums;
}
.cabin-card .card-count b {
  color: var(--hj-color-gold);
}
.cabin-card h3 {
  font-size: 1.75rem;
  font-weight: 300;
}
.cabin-card .cabin-info {
  margin-bottom: auto;
}
.cabin-card .cabin-info p {
  font-size: 0.9375rem;
}
/* the class's best figures, on the hero's readout rule */
.cabin-card .cabin-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 26px;
  border-top: 1px solid var(--hj-color-line-dark);
  border-bottom: 1px solid var(--hj-color-line-dark);
}
.cabin-card .cabin-figures .hj-readout {
  padding: 14px 0 14px 16px;
  border-left: 1px solid var(--hj-color-line-dark);
}
.cabin-card .cabin-figures .hj-readout:first-child {
  padding-left: 0;
  border-left: 0;
}
.cabin-card .cabin-figures .hj-readout small {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
}
.cabin-card .cabin-figures .hj-readout b {
  font-size: 1.375rem;
}
.cabin-card .cabin-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 34px;
}
.cabin-card .cabin-dots {
  position: static;
  width: auto !important;
  margin: 0;
  justify-content: flex-start;
}
.cabin-card .hj-arrow {
  width: 48px;
  height: 48px;
}

/*======================
14. Text Block
========================*/
/* KEPT: the base's split - copy left, a photograph with the play button right, over
   a faint washed-out plane. On night the wash becomes a pale veil at the edge. */
.hj-text-block {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.hj-text-block .text-block-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.07;
  pointer-events: none;
}
/* the pattern fades out at the foot, so the clouds band below starts on pure night */
.hj-text-block::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: 220px;
  background: linear-gradient(180deg, rgba(var(--hj-color-night-rgb), 0) 0%, var(--hj-color-night) 100%);
  pointer-events: none;
}
.hj-text-block .text-block-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hj-text-block .hj-section-title {
  margin-bottom: 40px;
  max-width: 520px;
}
.video-frame {
  position: relative;
  margin-left: 30px;
}
.video-frame .hj-media {
  aspect-ratio: 1.33;
}
.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--hj-color-white);
  color: var(--hj-color-night);
  font-size: 1.25rem;
  transition: background-color 0.4s var(--hj-ease), transform 0.4s var(--hj-ease);
}
.video-play i {
  margin-left: 4px;
}
.video-play .play-ring {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px dashed rgba(var(--hj-color-white-rgb), 0.85);
  animation: hj-spin 14s linear infinite;
}
.video-play:hover {
  background: var(--hj-color-gold);
  color: var(--hj-color-night);
  transform: scale(1.06);
}
@keyframes hj-spin {
  to {
    transform: rotate(360deg);
  }
}

/*======================
15. Above The Clouds
========================*/
/* Home 1's scroll moment (S3): a night sky, a low moon, and three cloud decks that
   drift at three speeds as the band passes - the headline sits between them. The sky
   starts on the night of the band above, and the nearest deck is a solid pearl bank
   whose foot IS the pearl ground of the section below - no wash, no seam. */
.hj-clouds {
  position: relative;
  z-index: 0;
  overflow: hidden;
  min-height: 900px;
  --moon-x: calc(82% - 48px);
  --moon-y: 168px;
  padding: 200px 0 330px;
  color: var(--hj-color-body-dark);
  background: var(--hj-color-night);
}
/* the band's top edge stays pure night, so the halo never draws a line against the
   band above (above the sky and moon, under every cloud deck) */
.hj-clouds::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
  height: 110px;
  background: linear-gradient(180deg, var(--hj-color-night) 0%, rgba(var(--hj-color-night-rgb), 0) 100%);
  pointer-events: none;
}
.hj-clouds .cloud-sky {
  position: absolute;
  inset: 0;
  z-index: -3;
  /* the moon's glow lives on the still sky (the disc drifts on its own layer) */
  background: radial-gradient(150px circle at var(--moon-x) var(--moon-y), rgba(236, 229, 214, 0.2) 0%, rgba(210, 192, 158, 0.08) 45%, rgba(210, 192, 158, 0) 100%),
    radial-gradient(460px circle at var(--moon-x) var(--moon-y), rgba(140, 148, 185, 0.12) 0%, rgba(120, 130, 170, 0.05) 45%, rgba(120, 130, 170, 0) 100%),
    linear-gradient(180deg, var(--hj-color-night) 0%, #10121A 18%, #151A29 42%, #222840 70%, #3A3C55 100%);
}
.hj-clouds .cloud-moon {
  position: absolute;
  right: 18%;
  top: 120px;
  z-index: -2;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #FBF8F1 0%, #EFE8D8 45%, #D9CDB2 100%);
  box-shadow: 0 0 30px 6px rgba(245, 238, 222, 0.32);
}
.hj-clouds .cloud-moon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 64% 60%, rgba(160, 141, 105, 0.1) 0 9%, transparent 10%), radial-gradient(circle at 36% 66%, rgba(160, 141, 105, 0.08) 0 7%, transparent 8%), radial-gradient(circle at 58% 30%, rgba(160, 141, 105, 0.07) 0 6%, transparent 7%);
}
.hj-clouds .cloud-layer {
  position: absolute;
  left: 50%;
  bottom: -40px;
  width: max(2400px, 170%);
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
}
.hj-clouds .layer-back {
  z-index: -1;
  bottom: 60px;
  opacity: 0.9;
}
.hj-clouds .layer-mid {
  z-index: 1;
  bottom: -30px;
}
/* the front deck's lower third is solid pearl (it melts into the next section): kept low, so only its crest and
   a short run of white show */
.hj-clouds .layer-front {
  z-index: 3;
  bottom: -270px;
}
/* the section after the clouds starts on their white: its own top padding is mostly taken by them */
.hj-clouds + .hj-reviews {
  padding-top: 30px;
}
/* the copy floats in front of the mid deck, so the figures never sit under cloud */
.clouds-copy {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.clouds-copy .title {
  color: var(--hj-color-white);
  margin-bottom: 44px;
}
.clouds-copy .hj-eyebrow {
  color: var(--hj-color-gold);
}
.clouds-readouts {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 44px;
}
.clouds-readouts .hj-readout b {
  color: var(--hj-color-white);
  font-size: 2rem;
}
.clouds-readouts .hj-readout small {
  color: var(--hj-color-body-dark);
}

/*======================
16. Boarding Pass Reviews
========================*/
/* RECOMPOSED: the base's three feedback cards become boarding passes - route,
   rating, words and traveller on the pass, the platform, jet and flight time on a
   perforated stub. The Google and Tripadvisor panels sit above (Review Summary). */
.review-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 50px;
}
.review-panel {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 10px 40px;
  padding: 36px 40px;
  background: var(--hj-color-white);
  box-shadow: var(--hj-shadow-soft);
}
.review-panel .panel-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.review-panel .panel-logo {
  width: auto;
  height: 42px;
  object-fit: contain;
  object-position: left center;
}
.review-panel .panel-score b {
  display: block;
  font-family: var(--hj-ff-head);
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--hj-color-ink);
}
.panel-symbols {
  display: flex;
  gap: 4px;
  margin: 10px 0 6px;
  color: #F4B400;
  font-size: 0.9375rem;
}
.panel-symbols.is-bubbles {
  color: #34E0A1;
}
.panel-symbols.is-bubbles i {
  font-size: 0.875rem;
}
.review-panel .panel-score small {
  font-size: 0.8125rem;
}
.panel-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.panel-bars li {
  display: grid;
  grid-template-columns: 14px 1fr 40px;
  align-items: center;
  gap: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--hj-color-ink);
  font-variant-numeric: tabular-nums;
}
.panel-bars .bar-track {
  position: relative;
  height: 4px;
  background: var(--hj-color-line);
  overflow: hidden;
}
.panel-bars .bar-track i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--hj-color-gold-deep);
  transition: width 1.4s var(--hj-ease);
}
.panel-bars .bar-pct {
  text-align: right;
  color: var(--hj-color-body);
  font-weight: 500;
}
.review-panel .panel-links {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--hj-color-line);
}
.review-filter {
  justify-content: center;
  margin-bottom: 44px;
}
.review-filter img {
  width: 18px;
  height: 18px;
}
.review-grid {
  row-gap: 30px;
}
.review-col.is-hidden {
  display: none;
}
.boarding-pass {
  display: flex;
  height: 100%;
  background: var(--hj-color-white);
  box-shadow: var(--hj-shadow-soft);
  --hj-notch: var(--hj-color-pearl);
  transition: transform 0.5s var(--hj-ease), box-shadow 0.5s var(--hj-ease);
}
.boarding-pass:hover {
  transform: translateY(-6px);
  box-shadow: var(--hj-shadow);
}
.boarding-pass .pass-main {
  flex: 1;
  min-width: 0;
  padding: 30px 28px 28px;
  display: flex;
  flex-direction: column;
}
.pass-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hj-color-line);
}
.pass-route span {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.pass-route span:last-child {
  text-align: right;
}
.pass-route b {
  font-family: var(--hj-ff-head);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--hj-color-ink);
}
.pass-route small {
  font-size: 0.75rem;
  margin-top: 4px;
}
.pass-route > i {
  flex: 1;
  position: relative;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--hj-color-gold-deep);
}
.pass-route > i::before {
  font-family: "Font Awesome 6 Free";
  position: relative;
  z-index: 1;
  padding: 0 8px;
  background: var(--hj-color-white);
}
.pass-route > i::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed rgba(var(--hj-color-gold-deep-rgb), 0.6);
}
.pass-rating {
  display: flex;
  gap: 3px;
  margin-bottom: 12px;
  font-size: 0.8125rem;
  color: #F4B400;
}
.pass-rating.is-bubbles {
  color: #34E0A1;
}
.boarding-pass p {
  font-size: 0.9375rem;
  margin-bottom: 22px;
}
.pass-person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}
.pass-person img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1);
}
.pass-person b {
  display: block;
  font-family: var(--hj-ff-head);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--hj-color-ink);
}
.pass-person small {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hj-color-gold-deep);
}
.boarding-pass .pass-stub {
  flex: 0 0 132px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 20px 24px;
  background: rgba(var(--hj-color-gold-rgb), 0.1);
}
.stub-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--hj-color-ink);
}
.stub-source i {
  font-size: 1rem;
  color: #4285F4;
}
.stub-source img {
  width: 22px;
  height: 22px;
}
.stub-row {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.stub-row small {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hj-color-body);
}
.stub-row b {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hj-color-ink);
}
.stub-code {
  margin-top: auto;
  font-family: var(--hj-ff-head);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  color: var(--hj-color-gold-deep);
  writing-mode: horizontal-tb;
}

/*======================
17. Departures Board
========================*/
/* RECOMPOSED from the base's grey CTA with photo diamonds: a departures board of
   the next empty legs. Airport codes sit on split-flap tiles; dates, countdowns
   and both prices are worked out live by the Charter Quote engine. */
.board {
  background: var(--hj-color-surface);
  border: 1px solid var(--hj-color-line-dark);
}
.board-head,
.board-row {
  display: grid;
  grid-template-columns: 1.25fr 1.7fr 1.15fr 0.55fr 0.8fr 1fr 58px;
  align-items: center;
  gap: 20px;
  padding: 0 28px;
}
.board-head {
  height: 54px;
  border-bottom: 1px solid var(--hj-color-line-dark);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hj-color-gold);
}
.board-row {
  min-height: 96px;
  padding-top: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(var(--hj-color-white-rgb), 0.06);
  color: var(--hj-color-body-dark);
  transition: background-color 0.4s var(--hj-ease);
}
.board-row:last-child {
  border-bottom: 0;
}
.board-row:hover {
  background: rgba(var(--hj-color-gold-rgb), 0.05);
}
.board-row > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.3;
  font-size: 0.9375rem;
}
.board-row small {
  font-size: 0.75rem;
  color: var(--hj-color-body-dark);
  font-variant-numeric: tabular-nums;
}
.board-row .cell-when b {
  font-weight: 600;
  color: var(--hj-color-white);
  font-variant-numeric: tabular-nums;
}
.board-row .cell-when small {
  color: var(--hj-color-gold);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.board-row .cell-route {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.board-row .cell-route b {
  position: relative;
  display: inline-block;
  padding: 8px 10px;
  background: #0B0B0C;
  font-family: var(--hj-ff-head);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  line-height: 1;
  color: var(--hj-color-white);
}
.board-row .cell-route b::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(var(--hj-color-white-rgb), 0.12);
}
.board-row .cell-route i {
  font-size: 0.75rem;
  color: var(--hj-color-gold);
}
.board-row .cell-route small {
  width: 100%;
}
.board-row .cell-jet {
  color: var(--hj-color-white);
}
.board-row .cell-seats b {
  font-family: var(--hj-ff-head);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--hj-color-white);
}
.board-row .cell-was s {
  color: var(--hj-color-body-dark);
  font-variant-numeric: tabular-nums;
}
.board-row .cell-now b {
  font-family: var(--hj-ff-head);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--hj-color-gold);
  font-variant-numeric: tabular-nums;
}
.board-row .cell-now small {
  color: var(--hj-color-green);
  font-weight: 600;
}
.board-row .cell-go {
  width: 52px;
  height: 52px;
}
.board-row.is-soon .cell-when small {
  color: var(--hj-color-red);
}
.board-note {
  margin-top: 22px;
  font-size: 0.875rem;
}

/*======================
18. Latest News
========================*/
/* KEPT: the base's news rail with square arrows; cards are white on pearl. */
.news-rail {
  overflow: hidden;
}
.news-rail .swiper-slide {
  height: auto;
}
.news-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--hj-color-white);
  transition: box-shadow 0.5s var(--hj-ease), transform 0.5s var(--hj-ease);
}
.news-card:hover {
  box-shadow: var(--hj-shadow);
  transform: translateY(-6px);
}
.news-card .news-thumb {
  display: block;
  aspect-ratio: 1.45;
}
.news-card .news-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 32px;
}
.news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 14px;
  font-size: 0.8125rem;
}
.news-meta i {
  color: var(--hj-color-gold-deep);
  margin-right: 6px;
}
.news-card h3 {
  font-size: 1.3125rem;
  line-height: 1.35;
  margin-bottom: 14px;
}
.news-card h3 a:hover {
  color: var(--hj-color-gold-deep);
}
.news-card p {
  font-size: 0.9375rem;
  margin-bottom: 22px;
}
.news-card .hj-link {
  margin-top: auto;
}

/*======================
19. Fleet Hero
========================*/
/* Home 2, RECOMPOSED from the base's full-bleed slider: centred copy over a jet,
   and an instrument deck below whose dials swing to the active jet's figures. */
.hj-fleet-hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.fleet-hero-slider {
  height: 100vh;
  min-height: 760px;
}
.fleet-hero-slider .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.fleet-hero-slider .slide-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.fleet-hero-slider .slide-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 7s linear;
}
.fleet-hero-slider .swiper-slide-active .slide-bg img {
  transform: scale(1);
}
.fleet-hero-slider .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at center 42%, rgba(var(--hj-color-night-rgb), 0.35) 0%, rgba(var(--hj-color-night-rgb), 0.78) 70%),
    linear-gradient(180deg, rgba(var(--hj-color-night-rgb), 0.55) 0%, rgba(var(--hj-color-night-rgb), 0.1) 35%, rgba(var(--hj-color-night-rgb), 0.92) 100%);
}
.fleet-hero-slider .container {
  position: relative;
  z-index: 1;
}
.hj-fleet-hero .slide-copy {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 0 160px;
  text-align: center;
}
.hj-fleet-hero .slide-copy .hj-eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
}
/* two set lines; the longest line is 8.7em, so the size steps with the column */
.hj-fleet-hero .slide-title {
  margin-bottom: 42px;
  font-size: 5.25rem;
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 1.02;
  color: var(--hj-color-white);
}
.hj-fleet-hero .hj-btn-group {
  justify-content: center;
}
.hj-fleet-hero .swiper-slide:not(.swiper-slide-active) .slide-copy {
  opacity: 0;
}
.hero-deck-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 150px;
  z-index: 4;
}
.hero-deck {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr auto;
  align-items: center;
  gap: 30px;
  padding: 22px 30px;
  background: rgba(var(--hj-color-surface-rgb), 0.72);
  border: 1px solid var(--hj-color-line-dark);
  backdrop-filter: blur(14px);
}
.deck-jet {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  padding-right: 30px;
  border-right: 1px solid var(--hj-color-line-dark);
}
.deck-jet small {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hj-color-gold);
}
.deck-jet b {
  margin: 4px 0 2px;
  font-family: var(--hj-ff-head);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--hj-color-white);
}
.deck-jet span {
  font-size: 0.8125rem;
  color: var(--hj-color-body-dark);
}
.deck-gauge {
  display: flex;
  align-items: center;
  gap: 16px;
}
/* a dial: the ring fills to the jet's share of the fleet's best figure */
.gauge-dial {
  position: relative;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: conic-gradient(from 225deg, var(--hj-color-gold) calc(var(--g, 0.5) * 270deg), rgba(var(--hj-color-white-rgb), 0.12) 0 270deg, transparent 0);
}
.gauge-dial::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--hj-color-surface);
}
.gauge-dial i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 22px;
  margin-left: -1px;
  background: var(--hj-color-white);
  transform-origin: 50% 0;
  transform: rotate(calc(-135deg + var(--g, 0.5) * 270deg + 180deg));
  transition: transform 0.9s var(--hj-ease);
}
.gauge-dial i::after {
  content: "";
  position: absolute;
  left: -3px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hj-color-gold);
}
.deck-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.deck-count {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--hj-color-body-dark);
  font-variant-numeric: tabular-nums;
}
.deck-count b {
  color: var(--hj-color-gold);
}
.hj-quick-quote.is-flush {
  margin-top: -110px;
}

/*======================
20. Split And Features
========================*/
/* KEPT: the base's split (photo left, copy right) and its checkerboard of feature
   tiles and photographs with ghost numerals. */
.hj-split-block {
  padding-top: 20px;
}
.split-media {
  position: relative;
  margin: 0 30px 0 12px;
}
.split-media .hj-media {
  aspect-ratio: 1.1;
}
.split-badge {
  position: absolute;
  right: -30px;
  bottom: 40px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--hj-color-night);
  color: var(--hj-color-body-dark);
  text-align: center;
  box-shadow: 0 0 0 10px var(--hj-color-pearl);
}
.split-badge b {
  font-family: var(--hj-ff-head);
  font-size: 2.75rem;
  font-weight: 300;
  line-height: 1;
  color: var(--hj-color-gold);
}
.split-badge small {
  margin-top: 6px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  max-width: 96px;
  line-height: 1.4;
}
.split-copy {
  max-width: 540px;
  margin-left: auto;
}
.split-copy .hj-section-title {
  margin-bottom: 38px;
}
.feature-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature-tile {
  position: relative;
  min-height: 320px;
  padding: 44px 40px 40px;
  border: 1px solid var(--hj-color-line);
  background: var(--hj-color-white);
  overflow: hidden;
  transition: background-color 0.5s var(--hj-ease), border-color 0.5s var(--hj-ease), transform 0.5s var(--hj-ease), box-shadow 0.5s var(--hj-ease);
}
.feature-tile .ghost-num {
  position: absolute;
  right: 22px;
  top: 10px;
  font-family: var(--hj-ff-head);
  font-size: 5.5rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--hj-color-gold-deep-rgb), 0.3);
  transition: -webkit-text-stroke-color 0.5s var(--hj-ease);
}
.feature-tile > i {
  display: block;
  margin-bottom: 30px;
  font-size: 3.25rem;
  line-height: 1;
  color: var(--hj-color-gold-deep);
  transition: color 0.5s var(--hj-ease);
}
.feature-tile h3 {
  margin-bottom: 14px;
  transition: color 0.5s var(--hj-ease);
}
.feature-tile p {
  margin: 0;
  font-size: 0.9375rem;
  transition: color 0.5s var(--hj-ease);
}
.feature-tile:hover {
  background: var(--hj-color-night);
  border-color: var(--hj-color-night);
  transform: translateY(-6px);
  box-shadow: var(--hj-shadow);
}
.feature-tile:hover > i {
  color: var(--hj-color-gold);
}
.feature-tile:hover h3 {
  color: var(--hj-color-white);
}
.feature-tile:hover p {
  color: var(--hj-color-body-dark);
}
.feature-tile:hover .ghost-num {
  -webkit-text-stroke-color: rgba(var(--hj-color-gold-rgb), 0.5);
}
.feature-photo {
  min-height: 320px;
}

/*======================
21. Range Rings
========================*/
/* Home 2's scroll moment: over the base's own dotted world map, each cabin class's
   non-stop ring grows from the chosen hub as the section scrolls, and airports
   light up as a ring reaches them. The rings are true great circles, projected. */
.hj-range-rings {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.range-hubs {
  margin-bottom: 34px;
}
.range-legend li {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hj-color-line-dark);
  color: var(--hj-color-white);
  font-size: 0.9375rem;
}
.range-legend li:first-child {
  border-top: 1px solid var(--hj-color-line-dark);
}
.range-legend li i {
  height: 0;
  border-top: 2px solid var(--ring);
}
.range-legend li[data-ring="light"] {
  --ring: #F2EBDD;
}
.range-legend li[data-ring="midsize"] {
  --ring: #D2C09E;
}
.range-legend li[data-ring="super"] {
  --ring: #A08D69;
}
.range-legend li[data-ring="heavy"] {
  --ring: #6FB287;
}
.range-legend li[data-ring="heavy"] i,
.range-legend li[data-ring="super"] i {
  border-top-style: dashed;
}
.range-legend b {
  font-weight: 600;
  color: var(--hj-color-gold);
  font-variant-numeric: tabular-nums;
}
.range-map {
  position: relative;
  margin-left: 20px;
}
.range-map img {
  width: 100%;
  height: auto;
}
.range-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.range-caption {
  position: absolute;
  left: 0;
  bottom: -8px;
  margin: 0;
  font-size: 0.875rem;
  color: var(--hj-color-body-dark);
}

/*======================
22. Jet Cards
========================*/
/* UPGRADED from the base's plane cards: the icon strip riding the photo's foot,
   the name, the spec sheet from the fleet data, the real hourly rate and a
   Compare tick that feeds the comparison panel. */
.jet-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--hj-color-white);
  transform-style: preserve-3d;
  transition: box-shadow 0.5s var(--hj-ease);
}
.jet-card:hover {
  box-shadow: var(--hj-shadow);
}
.jet-card .jet-thumb {
  display: block;
  aspect-ratio: 1.55;
}
.jet-card .jet-cat {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 2;
  padding: 6px 12px;
  background: rgba(var(--hj-color-night-rgb), 0.82);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hj-color-gold);
}
.jet-card .jet-body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 28px 26px;
}
.jet-icons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: -26px auto 22px;
  padding: 14px 22px;
  background: var(--hj-color-white);
  box-shadow: 0 14px 30px -18px rgba(var(--hj-color-night-rgb), 0.35);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--hj-color-gold-deep);
}
.jet-card h3 {
  text-align: center;
  margin-bottom: 18px;
}
.jet-card h3 a:hover {
  color: var(--hj-color-gold-deep);
}
.jet-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 20px;
  border-top: 1px solid var(--hj-color-line);
  border-bottom: 1px solid var(--hj-color-line);
}
.jet-specs div {
  padding: 12px 6px;
  text-align: center;
}
.jet-specs div + div {
  border-left: 1px solid var(--hj-color-line);
}
.jet-specs dt {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hj-color-body);
}
.jet-specs dd {
  margin: 2px 0 0;
  white-space: nowrap;
  font-family: var(--hj-ff-head);
  font-size: 1rem;
  color: var(--hj-color-ink);
  font-variant-numeric: tabular-nums;
}
.jet-specs dd em {
  font-style: normal;
  font-size: 0.7em;
  color: var(--hj-color-gold-deep);
}
.jet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}
.jet-rate {
  font-size: 0.8125rem;
}
.jet-rate b {
  font-family: var(--hj-ff-head);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--hj-color-gold-deep);
}
.jet-compare {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hj-color-ink);
}
.jet-card.is-compared {
  box-shadow: 0 0 0 1px var(--hj-color-gold-deep), var(--hj-shadow-soft);
}
.fleet-rail {
  overflow: hidden;
  padding: 10px 4px 30px;
  margin: -10px -4px 0;
}
.fleet-rail .swiper-slide {
  height: auto;
}

/* comparison panel */
.compare-panel {
  margin-top: 40px;
  padding: 40px;
  background: var(--hj-color-night);
  color: var(--hj-color-body-dark);
}
.compare-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}
.compare-head h3 {
  margin-bottom: 6px;
  color: var(--hj-color-white);
}
.compare-head p {
  margin: 0;
}
.compare-route .hj-label {
  color: var(--hj-color-body-dark);
}
.compare-route-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-width: 460px;
}
.compare-panel .hj-select .select-button {
  background: rgba(var(--hj-color-white-rgb), 0.04);
  border-color: rgba(var(--hj-color-white-rgb), 0.14);
  color: var(--hj-color-white);
}
.compare-panel .hj-select .select-list {
  background: var(--hj-color-raised);
}
.compare-panel .hj-select .select-option {
  color: var(--hj-color-white);
}
.compare-panel .hj-select .select-option:hover,
.compare-panel .hj-select .select-option.is-focused {
  background: rgba(var(--hj-color-white-rgb), 0.06);
}
.compare-panel .hj-field .field-icon {
  color: var(--hj-color-gold);
}
.compare-grid {
  display: grid;
  grid-template-columns: 170px repeat(3, 1fr);
  border-top: 1px solid var(--hj-color-line-dark);
}
.compare-grid > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 62px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(var(--hj-color-white-rgb), 0.06);
  font-size: 0.875rem;
  color: var(--hj-color-white);
  font-variant-numeric: tabular-nums;
}
.compare-grid > span.cmp-label {
  padding-left: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hj-color-body-dark);
}
.compare-grid > span.cmp-name {
  font-family: var(--hj-ff-head);
  font-size: 1.125rem;
}
.compare-grid > span.cmp-name small {
  font-family: var(--hj-ff-body);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hj-color-gold);
}
.compare-grid .cmp-bar {
  display: block;
  height: 3px;
  background: rgba(var(--hj-color-white-rgb), 0.1);
}
.compare-grid .cmp-bar i {
  display: block;
  height: 100%;
  background: var(--hj-color-gold);
  transform-origin: left center;
  transition: width 0.8s var(--hj-ease);
}
.compare-grid .is-best i {
  background: var(--hj-color-green);
}
.compare-grid .cmp-ok {
  color: var(--hj-color-green);
}
.compare-grid .cmp-stop {
  color: var(--hj-color-red);
}
.compare-grid .cmp-empty {
  color: rgba(var(--hj-color-white-rgb), 0.3);
}

/*======================
23. Counters
========================*/
/* KEPT: the base's black counter band - line-art glyph, big figure, small label.
   Figures that can be worked out (years, jets, airports) come from the data. */
.hj-counters {
  padding: 100px 0 90px;
}
.counter-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.counter-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 30px;
  border-left: 1px solid var(--hj-color-line-dark);
}
.counter-item > i {
  margin-bottom: 18px;
  font-size: 3.25rem;
  line-height: 1;
  color: var(--hj-color-gold);
}
.counter-item b {
  font-family: var(--hj-ff-head);
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--hj-color-white);
  font-variant-numeric: tabular-nums;
}
.counter-item b em {
  font-style: normal;
  font-size: 0.5em;
  color: var(--hj-color-gold);
  vertical-align: super;
}
.counter-item > span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hj-counters.is-boxed {
  padding: 0;
  background: transparent;
}
.hj-counters.is-boxed .container > .counter-row {
  padding: 90px 70px;
  background: var(--hj-color-night);
}

/*======================
24. Review Rail And Film
========================*/
/* Home 2's reviews: a compact rating line in the title row, the two panels, then
   the boarding passes on a rail. The base's full-bleed film band follows. */
.rating-line {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin: 0;
  font-size: 0.9375rem;
}
.rating-line span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rating-line b {
  font-family: var(--hj-ff-head);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--hj-color-ink);
}
.rating-line i {
  color: #4285F4;
}
.review-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px;
}
.review-rail-head .review-filter {
  margin: 0;
  justify-content: flex-start;
}
.review-rail {
  overflow: hidden;
  padding: 6px 4px 30px;
  margin: -6px -4px 0;
}
.review-rail .swiper-slide {
  height: auto;
}
.hj-video-band {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  min-height: 640px;
  overflow: hidden;
}
.hj-video-band .video-bg {
  position: absolute;
  inset: -10% 0;
  z-index: -2;
}
.hj-video-band .video-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hj-video-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at center, rgba(var(--hj-color-night-rgb), 0.2), rgba(var(--hj-color-night-rgb), 0.7));
}
.video-play.is-large {
  position: relative;
  left: auto;
  top: auto;
  margin: 0;
  width: 120px;
  height: 120px;
  background: rgba(var(--hj-color-white-rgb), 0.12);
  border: 1px solid rgba(var(--hj-color-white-rgb), 0.6);
  color: var(--hj-color-white);
  backdrop-filter: blur(6px);
}
.video-play.is-large:hover {
  background: var(--hj-color-gold);
  color: var(--hj-color-night);
}
.video-caption {
  margin: 0;
}
.video-caption .hj-eyebrow {
  margin: 0;
  color: var(--hj-color-white);
}
.video-caption .hj-eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
}
.hj-insta-strip {
  position: relative;
}
.insta-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.insta-grid a {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
}
.insta-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--hj-ease), filter 0.6s var(--hj-ease);
}
.insta-grid i {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 1.5rem;
  color: var(--hj-color-white);
  opacity: 0;
  transform: translate(-50%, -30%);
  transition: all 0.5s var(--hj-ease);
}
.insta-grid a:hover img {
  transform: scale(1.08);
  filter: brightness(0.55);
}
.insta-grid a:hover i {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.insta-handle {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  background: var(--hj-color-night);
  color: var(--hj-color-white);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.insta-handle i {
  color: var(--hj-color-gold);
}
.insta-handle:hover {
  background: var(--hj-color-gold);
  color: var(--hj-color-night);
}
.insta-handle:hover i {
  color: var(--hj-color-night);
}
/* reviews on night (Home 2): dark panels, the passes stay paper-white */
.hj-reviews.hj-night .review-panel {
  background: var(--hj-color-surface);
  box-shadow: none;
  border: 1px solid var(--hj-color-line-dark);
}
.hj-reviews.hj-night .review-panel .panel-score b,
.hj-reviews.hj-night .panel-bars li,
.hj-reviews.hj-night .rating-line b {
  color: var(--hj-color-white);
}
.hj-reviews.hj-night .panel-bars .bar-track {
  background: rgba(var(--hj-color-white-rgb), 0.1);
}
.hj-reviews.hj-night .panel-bars .bar-track i {
  background: var(--hj-color-gold);
}
.hj-reviews.hj-night .panel-bars .bar-pct {
  color: var(--hj-color-body-dark);
}
.hj-reviews.hj-night .review-panel .panel-links {
  border-color: var(--hj-color-line-dark);
}
.hj-reviews.hj-night .review-panel .panel-logo[src*="google"] {
  padding: 6px 10px;
  height: 54px;
  background: var(--hj-color-white);
}
.hj-reviews.hj-night .boarding-pass {
  --hj-notch: var(--hj-color-night);
}

/*======================
25. Route Hero
========================*/
/* Home 3, RECOMPOSED from the base's left-aligned slider under the boxed header:
   each slide is a route, and a flight-deck card prices it on the engine. The
   base's dark booking band follows directly below. */
.hj-route-hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.route-hero-slider {
  height: 100vh;
  min-height: 780px;
}
.route-hero-slider .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.route-hero-slider .slide-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.route-hero-slider .slide-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  transition: transform 7s linear;
}
.route-hero-slider .swiper-slide-active .slide-bg img {
  transform: scale(1);
}
.route-hero-slider .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--hj-color-night-rgb), 0.9) 0%, rgba(var(--hj-color-night-rgb), 0.55) 50%, rgba(var(--hj-color-night-rgb), 0.25) 100%);
}
.route-hero-slider .container {
  position: relative;
  z-index: 1;
}
.route-copy {
  max-width: 640px;
  padding-top: 90px;
}
/* two set lines; the longest line is 8.8em, so the size steps with the column */
.route-copy .slide-title {
  margin-bottom: 40px;
  font-size: 4.4rem;
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 1.02;
  color: var(--hj-color-white);
}
.route-hero-slider .swiper-slide:not(.swiper-slide-active) .route-copy {
  opacity: 0;
}
.route-deck-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 3;
  transform: translateY(-38%);
  pointer-events: none;
}
.route-deck {
  width: 360px;
  margin-left: auto;
  padding: 34px 32px 28px;
  background: rgba(var(--hj-color-surface-rgb), 0.82);
  border: 1px solid var(--hj-color-line-dark);
  backdrop-filter: blur(14px);
  color: var(--hj-color-body-dark);
  pointer-events: auto;
}
.route-deck .deck-label {
  display: block;
  margin-bottom: 20px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hj-color-gold);
}
.deck-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 22px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--hj-color-line-dark);
}
.deck-route span {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.deck-route span:last-child {
  text-align: right;
}
.deck-route b {
  font-family: var(--hj-ff-head);
  font-size: 2.25rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--hj-color-white);
}
.deck-route small {
  margin-top: 6px;
  font-size: 0.8125rem;
}
.deck-route > i {
  flex: 1;
  position: relative;
  text-align: center;
  color: var(--hj-color-gold);
}
.deck-route > i::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: -1;
  border-top: 1px dashed rgba(var(--hj-color-gold-rgb), 0.5);
}
.deck-lines {
  margin: 0 0 24px;
}
.deck-lines div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--hj-color-white-rgb), 0.06);
  font-size: 0.875rem;
}
.deck-lines dt {
  font-weight: 500;
}
.deck-lines dd {
  margin: 0;
  color: var(--hj-color-white);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.deck-lines dd b {
  font-family: var(--hj-ff-head);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--hj-color-gold);
}
.route-deck .deck-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.route-deck .route-dots {
  position: static;
  width: auto !important;
  margin: 0;
}
.route-deck .hj-arrow {
  width: 46px;
  height: 46px;
}
/* the base's dark booking band under the hero */
.hj-quick-quote.is-dark-band {
  margin-top: 0;
  padding: 0;
  background: var(--hj-color-night);
}
.hj-quick-quote.is-dark-band .quick-quote {
  background: transparent;
  box-shadow: none;
  padding: 34px 0 0;
}
.hj-quick-quote.is-dark-band .hj-label {
  color: var(--hj-color-white);
}
.hj-quick-quote.is-dark-band .hj-input,
.hj-quick-quote.is-dark-band .hj-select .select-button,
.hj-quick-quote.is-dark-band .hj-stepper {
  background: rgba(var(--hj-color-white-rgb), 0.04);
  border-color: rgba(var(--hj-color-white-rgb), 0.14);
  color: var(--hj-color-white);
  color-scheme: dark;
}
.hj-quick-quote.is-dark-band .hj-stepper input {
  color: var(--hj-color-white);
}
.hj-quick-quote.is-dark-band .hj-select .select-list {
  background: var(--hj-color-raised);
}
.hj-quick-quote.is-dark-band .hj-select .select-option {
  color: var(--hj-color-white);
}
.hj-quick-quote.is-dark-band .hj-select .select-option:hover,
.hj-quick-quote.is-dark-band .hj-select .select-option.is-focused {
  background: rgba(var(--hj-color-white-rgb), 0.06);
}
.hj-quick-quote.is-dark-band .field-icon {
  color: var(--hj-color-gold);
}
.hj-quick-quote.is-dark-band .qq-estimate {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  border-top: 1px solid var(--hj-color-line-dark);
}

/*======================
26. Collage And Centre Slider
========================*/
/* KEPT: the base's about collage (two tiles, two photos, staggered) over a faded
   airstairs photograph, and its centred jet slider with side peeks, a white icon
   strip and the card below. */
.hj-collage-about {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.collage-bg {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 46%;
  z-index: -1;
  opacity: 0.18;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
}
.collage-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.6);
}
.collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-right: 30px;
}
.collage .is-offset {
  transform: translateY(26px);
}
.collage-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 250px;
  padding: 30px 24px;
  background: var(--hj-color-white);
  box-shadow: var(--hj-shadow-soft);
  text-align: center;
  transition: background-color 0.5s var(--hj-ease);
}
.collage-tile .hj-disc {
  margin-bottom: 10px;
  border-color: transparent;
  font-size: 2.6rem;
}
.collage-tile h3 {
  margin-bottom: 4px;
  font-size: 1.375rem;
}
.collage-tile p {
  margin: 0;
  font-size: 0.875rem;
}
.collage-tile.is-dark {
  background: var(--hj-color-night);
  color: var(--hj-color-body-dark);
}
.collage-tile.is-dark h3 {
  color: var(--hj-color-white);
}
.collage-tile.is-dark .hj-disc {
  color: var(--hj-color-gold);
}
.collage-photo {
  min-height: 250px;
}
.collage-copy {
  max-width: 520px;
  margin-left: auto;
}
.collage-copy .hj-section-title {
  margin-bottom: 38px;
}
.jet-center-slider {
  position: relative;
  height: 520px;
}
.jet-center-slider .swiper-slide {
  width: 58%;
  height: 100%;
  overflow: hidden;
}
.jet-center-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.5) brightness(0.8);
  transition: filter 0.8s var(--hj-ease);
}
.jet-center-slider .swiper-slide-active img {
  filter: none;
}
.center-arrows {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 58%;
  justify-content: space-between;
  padding: 0 24px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.center-arrows .hj-arrow {
  pointer-events: auto;
  background: var(--hj-color-white);
  border-color: var(--hj-color-white);
}
.center-arrows .hj-arrow.is-next {
  background: var(--hj-color-gold);
  border-color: var(--hj-color-gold);
}
.center-card {
  position: relative;
  z-index: 4;
  width: min(820px, 100%);
  margin: -70px auto 0;
  padding: 0 44px 36px;
  background: var(--hj-color-white);
  box-shadow: var(--hj-shadow);
}
.center-card .jet-icons {
  transform: translateY(-50%);
  margin: 0 auto -8px;
  width: max-content;
}
.center-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.center-body h3 {
  margin-bottom: 10px;
  font-size: 1.75rem;
  font-weight: 300;
}
.center-body p {
  margin: 0;
  font-size: 0.9375rem;
}
.center-rate {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.center-rate b {
  font-family: var(--hj-ff-head);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  color: var(--hj-color-gold-deep);
}
.center-rate small {
  font-size: 0.8125rem;
}
.center-rate span {
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hj-color-ink);
}

/*======================
27. Intro Video
========================*/
/* KEPT: the base's most Hibojet section - black on the left, a champagne block on
   the right with the film photograph laid across both. */
.hj-intro-video {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: #0A0A0A;
  color: var(--hj-color-body-dark);
}
.hj-intro-video .intro-gold {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 30%;
  z-index: -1;
  background: var(--hj-color-gold) url("../img/icon/pattern-03.png") 30% center / cover no-repeat;
}
.hj-intro-video .title {
  color: var(--hj-color-white);
}
.hj-intro-video .hj-eyebrow {
  color: var(--hj-color-gold);
}
.hj-intro-video .title span {
  color: var(--hj-color-gold);
}
.intro-copy {
  max-width: 520px;
  margin-bottom: 40px;
}
.intro-media {
  position: relative;
}
.intro-media .hj-media {
  aspect-ratio: 1.38;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}

/*======================
28. Jet Card Plans
========================*/
/* RECOMPOSED from the base's six feature cards: three card tiers (the base's
   ghost-numeral cards, the hours now the numeral) and a calculator that sets the
   card against on-demand charter, with the maths shown underneath. */
.plan-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 30px;
}
.plan-tier {
  position: relative;
  cursor: pointer;
}
.plan-tier input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.plan-tier .tier-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 36px 36px 30px;
  background: var(--hj-color-white);
  border: 1px solid var(--hj-color-line);
  transition: background-color 0.5s var(--hj-ease), border-color 0.5s var(--hj-ease), transform 0.5s var(--hj-ease), box-shadow 0.5s var(--hj-ease);
}
.plan-tier .tier-body::after {
  content: "";
  position: absolute;
  right: 26px;
  top: 30px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(var(--hj-color-ink-rgb), 0.3);
  transition: all 0.4s var(--hj-ease);
}
.plan-tier .tier-name {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hj-color-gold-deep);
}
.plan-tier .tier-hours {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0 10px;
  font-family: var(--hj-ff-head);
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--hj-color-ink);
}
.plan-tier .tier-hours small {
  font-family: var(--hj-ff-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hj-color-body);
}
.plan-tier .tier-line {
  font-size: 0.9375rem;
}
.plan-tier .tier-line b {
  font-weight: 600;
  color: var(--hj-color-ink);
}
.plan-tier .tier-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hj-color-line);
}
.plan-tier .tier-price small {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.plan-tier .tier-price b {
  font-family: var(--hj-ff-head);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--hj-color-gold-deep);
}
.plan-tier:hover .tier-body {
  transform: translateY(-6px);
  box-shadow: var(--hj-shadow-soft);
}
.plan-tier input:checked + .tier-body {
  background: var(--hj-color-night);
  border-color: var(--hj-color-night);
  color: var(--hj-color-body-dark);
}
.plan-tier input:checked + .tier-body .tier-hours,
.plan-tier input:checked + .tier-body .tier-line b {
  color: var(--hj-color-white);
}
.plan-tier input:checked + .tier-body .tier-name,
.plan-tier input:checked + .tier-body .tier-price b {
  color: var(--hj-color-gold);
}
.plan-tier input:checked + .tier-body .tier-price {
  border-color: var(--hj-color-line-dark);
}
.plan-tier input:checked + .tier-body::after {
  border-color: var(--hj-color-gold);
  background: radial-gradient(circle, var(--hj-color-gold) 0 40%, transparent 44%);
}
.plan-tier input:focus-visible + .tier-body {
  outline: 2px solid var(--hj-color-gold);
  outline-offset: 3px;
}
.plan-calc {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: var(--hj-color-white);
  box-shadow: var(--hj-shadow-soft);
}
.calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 40px;
}
.calc-inputs .hj-label b {
  float: right;
  color: var(--hj-color-gold-deep);
  letter-spacing: 0.06em;
}
.calc-inputs .hj-range {
  margin-top: 16px;
}
.calc-out {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 40px;
  background: var(--hj-color-night);
  color: var(--hj-color-body-dark);
}
.calc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--hj-color-white-rgb), 0.07);
  font-size: 0.875rem;
}
.calc-row b {
  font-weight: 600;
  color: var(--hj-color-white);
  font-variant-numeric: tabular-nums;
}
.calc-save {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 18px 0 24px;
}
.calc-save small {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hj-color-gold);
}
.calc-save b {
  font-family: var(--hj-ff-head);
  font-size: 3rem;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--hj-color-white);
  font-variant-numeric: tabular-nums;
}
.calc-save em {
  font-style: normal;
  font-size: 0.875rem;
  color: var(--hj-color-green);
}
.calc-save.is-negative em {
  color: var(--hj-color-red);
}
.calc-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px 40px;
  border-top: 1px solid var(--hj-color-line);
  font-size: 0.8125rem;
}

/*======================
29. Bank Turn
========================*/
/* Home 3's scroll moment: as the band passes, the horizon photograph banks a few
   degrees and an attitude indicator banks with it; the readouts follow the angle. */
.hj-bank-turn {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 150px 0;
}
.bank-horizon {
  position: absolute;
  inset: -18% -12%;
  z-index: -2;
}
/* the horizon: a dusk sky over two cloud decks, all banking together */
.bank-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0B0C12 0%, #161B2C 40%, #2B3150 62%, #6A5560 78%, #3A3441 100%);
}
.bank-deck {
  position: absolute;
  left: 50%;
  width: 150%;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
}
.bank-deck.deck-far {
  top: 44%;
  opacity: 0.9;
}
.bank-deck.deck-near {
  top: 52%;
}
.hj-bank-turn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(var(--hj-color-night-rgb), 0.9) 0%, rgba(var(--hj-color-night-rgb), 0.45) 55%, rgba(var(--hj-color-night-rgb), 0.1) 100%);
}
.bank-readouts {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 44px;
}
.bank-readouts .hj-readout b {
  font-size: 2rem;
}
.attitude {
  position: relative;
  width: min(380px, 80vw);
  aspect-ratio: 1;
  margin-left: auto;
  border-radius: 50%;
  --bank: 0deg;
}
.attitude-ball {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(var(--bank));
}
.attitude-ball .ball-sky,
.attitude-ball .ball-ground {
  position: absolute;
  left: -10%;
  right: -10%;
  height: 55%;
}
.attitude-ball .ball-sky {
  top: -5%;
  background: linear-gradient(180deg, #1B2238 0%, #34405F 100%);
}
.attitude-ball .ball-ground {
  bottom: -5%;
  background: linear-gradient(180deg, #5A4A36 0%, #2E261C 100%);
  border-top: 2px solid var(--hj-color-white);
}
.attitude-ball .ball-ladder {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  transform: translate(-50%, -125%);
}
.attitude-ball .ball-ladder i {
  display: block;
  width: 60px;
  height: 1px;
  background: rgba(var(--hj-color-white-rgb), 0.6);
}
.attitude-ball .ball-ladder i:nth-child(2) {
  width: 36px;
}
.attitude-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--hj-color-gold-rgb), 0.6);
  background: radial-gradient(circle, transparent 0 calc(50% - 22px), rgba(var(--hj-color-surface-rgb), 0.95) calc(50% - 21px));
}
.attitude-ring::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px dashed rgba(var(--hj-color-gold-rgb), 0.35);
}
.attitude-plane {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: 4px;
  transform: translate(-50%, -50%);
}
.attitude-plane::before,
.attitude-plane::after {
  content: "";
  position: absolute;
  top: 0;
  width: 38%;
  height: 4px;
  background: var(--hj-color-gold);
}
.attitude-plane::before {
  left: 0;
}
.attitude-plane::after {
  right: 0;
}
.attitude-plane i {
  position: absolute;
  left: 50%;
  top: -3px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--hj-color-gold);
}
.attitude-pointer {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 0;
  height: 0;
  margin-left: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid var(--hj-color-gold);
}

/*======================
30. Dining Menu
========================*/
/* KEPT (re-purposed): the base's food menu - square thumbnails, names and a line
   of words, the big line-art glyph watermarks and a row of three photographs. */
.hj-dining-menu {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.menu-art {
  position: absolute;
  z-index: -1;
  width: 190px;
  height: auto;
  opacity: 0.35;
  pointer-events: none;
}
.menu-art.art-a {
  left: 2%;
  top: 60px;
}
.menu-art.art-b {
  right: 3%;
  bottom: 330px;
}
.menu-list {
  row-gap: 26px;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 24px;
}
.menu-thumb {
  flex: 0 0 104px;
  width: 104px;
  height: 104px;
}
.menu-body {
  flex: 1;
  min-width: 0;
}
.menu-body h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 1.25rem;
}
.menu-body h3 i {
  flex: 1;
  border-bottom: 1px dashed rgba(var(--hj-color-gold-deep-rgb), 0.5);
  transform: translateY(-4px);
}
.menu-body h3 b {
  font-weight: 400;
  color: var(--hj-color-gold-deep);
  font-variant-numeric: tabular-nums;
}
.menu-body p {
  margin: 0;
  font-size: 0.9375rem;
}
.menu-body p small {
  display: block;
  margin-top: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hj-color-gold-deep);
}
.menu-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 80px;
}
.menu-gallery .hj-media {
  aspect-ratio: 1;
}

/*======================
31. Fleet Pages
========================*/
/* KEPT: the base's plane grid (three across) and plane list (photo left, words
   right, price on the side). UPGRADED: a toolbar of class tabs, a passenger
   stepper and a sort; the compare panel sits under the fleet. */
.is-filtered-out {
  display: none !important;
}
.fleet-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--hj-color-line);
}
.toolbar-right {
  display: flex;
  gap: 16px;
}
.toolbar-field .hj-stepper {
  width: 150px;
}
.toolbar-field .hj-select {
  width: 260px;
}
.fleet-live {
  margin: 18px 0 30px;
  font-size: 0.875rem;
}
.fleet-grid {
  row-gap: 30px;
}
.fleet-empty {
  padding: 40px;
  background: var(--hj-color-white);
  text-align: center;
}
.fleet-rows {
  row-gap: 24px;
}
.jet-row {
  display: grid;
  grid-template-columns: 380px 1fr;
  background: var(--hj-color-white);
  transition: box-shadow 0.5s var(--hj-ease);
}
.jet-row:hover {
  box-shadow: var(--hj-shadow);
}
.jet-row.is-compared {
  box-shadow: 0 0 0 1px var(--hj-color-gold-deep), var(--hj-shadow-soft);
}
.jet-row-thumb {
  display: block;
  min-height: 260px;
}
.jet-row-body {
  display: grid;
  grid-template-columns: 1fr 200px;
}
.jet-row .row-main {
  padding: 30px 34px;
}
.jet-row .jet-icons {
  margin: 0 0 14px;
  padding: 0;
  box-shadow: none;
  justify-content: flex-start;
  background: transparent;
}
.jet-cat-line {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hj-color-gold-deep);
}
.jet-row h3 {
  margin: 6px 0 10px;
}
.jet-row p {
  font-size: 0.9375rem;
  margin-bottom: 18px;
}
.jet-specs.is-row {
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
}
.jet-row .row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  padding: 30px;
  border-left: 1px dashed var(--hj-color-line);
}
.jet-row .jet-rate b {
  display: block;
  font-size: 1.75rem;
  line-height: 1.1;
}
.hj-related-jets {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.hj-related-jets .related-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.18;
}
.hj-related-jets .related-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hj-related-jets .jet-compare {
  display: none;
}
.rail-arrows {
  justify-content: center;
  margin-top: 10px;
}

/*======================
32. Jet Details
========================*/
/* KEPT: the base's details page - a white title card over the photograph, four
   thumbnails, the words, the host cards, rules and cancellation, and the booking
   widget in the sidebar. UPGRADED: a spec sheet from the data, cancellation as
   real dates, and the widget as a live Charter Quote. */
.jd-title {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  width: calc(100% - 50px);
  padding: 30px 36px;
  background: var(--hj-color-white);
  margin-bottom: -56px;
}
.jd-title .hj-eyebrow {
  margin-bottom: 8px;
}
.jd-title h2 {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem);
}
.jd-rate {
  text-align: right;
}
.jd-rate b {
  display: block;
  font-family: var(--hj-ff-head);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  color: var(--hj-color-gold-deep);
}
.jd-rate small {
  font-size: 0.8125rem;
}
.jd-gallery .jd-main {
  display: block;
  aspect-ratio: 1.55;
}
.jd-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.jd-thumbs a {
  display: block;
  aspect-ratio: 1.1;
}
.jd-text {
  margin: 44px 0 10px;
}
.jd-block {
  margin-top: 50px;
  padding: 40px;
  background: var(--hj-color-white);
}
.jd-block .jd-heading,
.jd-heading {
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hj-color-line);
  font-size: 1.5rem;
  font-weight: 300;
}
.spec-sheet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hj-color-line);
  border-left: 1px solid var(--hj-color-line);
}
.spec-sheet .hj-readout {
  padding: 18px 20px;
  border-right: 1px solid var(--hj-color-line);
  border-bottom: 1px solid var(--hj-color-line);
}
.spec-sheet .hj-readout b {
  font-size: 1.5rem;
}
.crew-pair {
  row-gap: 20px;
}
.crew-mini {
  display: flex;
  gap: 20px;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--hj-color-line);
}
.crew-mini img {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.crew-mini h4 {
  margin-bottom: 2px;
  font-size: 1.125rem;
}
.crew-mini span {
  display: block;
  margin-bottom: 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hj-color-gold-deep);
}
.crew-mini p {
  margin: 0;
  font-size: 0.875rem;
}
.policy-list {
  counter-reset: policy;
}
.policy-list li {
  counter-increment: policy;
  display: grid;
  grid-template-columns: 54px 150px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--hj-color-line);
}
.policy-list li:last-child {
  border-bottom: 0;
}
.policy-list li::before {
  content: counter(policy, decimal-leading-zero);
  font-family: var(--hj-ff-head);
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--hj-color-gold-deep);
}
.policy-list b {
  font-weight: 600;
  color: var(--hj-color-ink);
}
.policy-list.is-steps li {
  grid-template-columns: 54px 110px 1fr;
}
.cancel-timeline {
  display: grid;
  grid-template-columns: 2fr 1.3fr 1fr;
  gap: 4px;
  margin-top: 26px;
}
.cancel-stage {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cancel-stage .stage-bar {
  height: 6px;
  margin-bottom: 12px;
  background: var(--hj-color-green);
  opacity: 0.45;
}
.cancel-stage[data-stage="half"] .stage-bar {
  background: var(--hj-color-gold);
}
.cancel-stage[data-stage="none"] .stage-bar {
  background: var(--hj-color-red);
}
.cancel-stage.is-now .stage-bar {
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(var(--hj-color-gold-rgb), 0.25);
}
.cancel-stage b {
  font-weight: 600;
  color: var(--hj-color-ink);
}
.cancel-stage small {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.cancel-today {
  margin: 18px 0 0;
  font-size: 0.875rem;
  color: var(--hj-color-gold-deep);
}
.jd-reviews {
  row-gap: 24px;
}
.jd-reviews .boarding-pass {
  --hj-notch: var(--hj-color-white);
  box-shadow: 0 0 0 1px var(--hj-color-line);
}
/* the sidebar widget */
.jet-widget {
  position: sticky;
  top: 110px;
  margin-left: 10px;
  background: var(--hj-color-night);
  color: var(--hj-color-body-dark);
}
.jw-form {
  padding: 34px 30px 30px;
}
.jw-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  color: var(--hj-color-white);
  font-size: 1.375rem;
  font-weight: 400;
}
.jw-title::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--hj-color-gold);
}
.jw-trip,
.trip-toggle {
  display: flex;
  gap: 26px;
  margin-bottom: 18px;
}
.jw-field {
  margin-bottom: 14px;
}
.jw-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.jw-form .hj-label {
  color: var(--hj-color-body-dark);
}
.jw-form .hj-input,
.jw-form .hj-select .select-button,
.jw-form .hj-stepper {
  height: 50px;
  background: rgba(var(--hj-color-white-rgb), 0.04);
  border-color: rgba(var(--hj-color-white-rgb), 0.14);
  color: var(--hj-color-white);
  color-scheme: dark;
}
.jw-form .hj-field .field-icon {
  height: 50px;
  color: var(--hj-color-gold);
}
.jw-form .hj-stepper input {
  color: var(--hj-color-white);
}
.jw-form .hj-stepper button {
  color: var(--hj-color-gold);
}
.jw-form .hj-select .select-list {
  background: var(--hj-color-raised);
}
.jw-form .hj-select .select-option {
  color: var(--hj-color-white);
}
.jw-form .hj-select .select-option:hover,
.jw-form .hj-select .select-option.is-focused {
  background: rgba(var(--hj-color-white-rgb), 0.06);
}
.jw-form .hj-check .check-box {
  border-color: rgba(var(--hj-color-white-rgb), 0.35);
}
.jw-form .hj-check {
  color: var(--hj-color-white);
}
[data-return-only].is-off {
  opacity: 0.35;
  pointer-events: none;
}
.jw-out {
  margin: 22px 0;
  padding-top: 20px;
  border-top: 1px dashed var(--hj-color-line-dark);
}
.jw-readouts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.jw-readouts .hj-readout b {
  font-size: 1.0625rem;
  color: var(--hj-color-white);
}
.jw-readouts .hj-readout small {
  font-size: 0.5625rem;
  color: var(--hj-color-body-dark);
}
.quote-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.quote-table th {
  padding: 8px 10px 8px 0;
  font-weight: 400;
  text-align: left;
}
.quote-table td {
  padding: 8px 0;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--hj-color-white);
}
.quote-table tr + tr th,
.quote-table tr + tr td {
  border-top: 1px solid rgba(var(--hj-color-white-rgb), 0.06);
}
.quote-table tr.is-saving td,
.quote-table tr.is-saving th {
  color: var(--hj-color-green);
}
.jw-warn {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: rgba(217, 119, 106, 0.12);
  color: var(--hj-color-red);
  font-size: 0.8125rem;
}
.jw-total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hj-color-line-dark);
}
.jw-total span {
  display: flex;
  flex-direction: column;
}
.jw-total span:last-child {
  text-align: right;
}
.jw-total small {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.jw-total b {
  font-family: var(--hj-ff-head);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--hj-color-gold);
  font-variant-numeric: tabular-nums;
}
.jw-total span:last-child b {
  font-size: 1.25rem;
  color: var(--hj-color-white);
}
.jw-form > .hj-btn {
  width: 100%;
}
.jw-note {
  margin: 12px 0 0;
  font-size: 0.75rem;
}

/*======================
33. Charter Quote
========================*/
/* UPGRADED from the base's booking page: its stacked cards become three numbered
   steps, and its price breakdown table becomes a boarding pass that prices the
   trip line by line as it is built. */
.leg-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  padding: 16px 22px;
  background: var(--hj-color-night);
  color: var(--hj-color-body-dark);
  font-size: 0.9375rem;
}
.leg-banner i,
.leg-banner b {
  color: var(--hj-color-gold);
}
.quote-step {
  margin-bottom: 30px;
  background: var(--hj-color-white);
}
.step-head {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 30px 36px;
  border-bottom: 1px solid var(--hj-color-line);
}
.step-num {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--hj-color-gold);
  font-family: var(--hj-ff-head);
  font-size: 1.375rem;
  font-weight: 300;
  color: var(--hj-color-gold-deep);
}
.step-head h2 {
  margin: 0 0 4px;
  font-size: 1.625rem;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.step-head p {
  margin: 0;
  font-size: 0.9375rem;
}
.step-body {
  padding: 30px 36px 36px;
}
.pax-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 26px;
}
.pax-row .hj-label {
  margin: 0;
}
.pax-row .hj-stepper {
  width: 170px;
}
.jet-choices {
  margin: 0;
  padding: 0;
  border: 0;
}
.jet-choices legend {
  margin-bottom: 14px;
}
.jet-choice {
  display: block;
  cursor: pointer;
}
.jet-choice + .jet-choice {
  margin-top: 10px;
}
.jet-choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.choice-body {
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  align-items: center;
  gap: 20px;
  padding: 12px 20px 12px 12px;
  border: 1px solid var(--hj-color-line);
  transition: border-color 0.3s var(--hj-ease), background-color 0.3s var(--hj-ease);
}
.choice-body img {
  width: 96px;
  height: 62px;
  object-fit: cover;
}
.choice-name b {
  display: block;
  font-family: var(--hj-ff-head);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--hj-color-ink);
}
.choice-name small {
  font-size: 0.8125rem;
}
.choice-time {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.choice-price {
  min-width: 100px;
  text-align: right;
  font-family: var(--hj-ff-head);
  font-size: 1.25rem;
  color: var(--hj-color-gold-deep);
  font-variant-numeric: tabular-nums;
}
.jet-choice:hover .choice-body {
  border-color: var(--hj-color-gold);
}
.jet-choice input:checked + .choice-body {
  border-color: var(--hj-color-night);
  background: var(--hj-color-night);
  color: var(--hj-color-body-dark);
}
.jet-choice input:checked + .choice-body .choice-name b {
  color: var(--hj-color-white);
}
.jet-choice input:checked + .choice-body .choice-price {
  color: var(--hj-color-gold);
}
.jet-choice input:focus-visible + .choice-body {
  outline: 2px solid var(--hj-color-gold);
  outline-offset: 2px;
}
.jet-choice.is-short {
  cursor: not-allowed;
  opacity: 0.4;
}
.extras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 26px;
}
.extra-card {
  cursor: pointer;
}
.extra-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.extra-card > span {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  column-gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--hj-color-line);
  transition: all 0.3s var(--hj-ease);
}
.extra-card i {
  grid-row: span 2;
  font-size: 2rem;
  line-height: 1;
  color: var(--hj-color-gold-deep);
}
.extra-card b {
  color: var(--hj-color-ink);
  font-weight: 600;
}
.extra-card small {
  font-size: 0.8125rem;
}
.extra-card input:checked + span {
  border-color: var(--hj-color-gold-deep);
  background: rgba(var(--hj-color-gold-rgb), 0.12);
}
.extra-card input:focus-visible + span {
  outline: 2px solid var(--hj-color-gold);
  outline-offset: 2px;
}
/* the pass clips its own notches: their outer halves match the ground anyway, and
   on a phone they would otherwise poke past the gutter */
.quote-pass {
  position: sticky;
  top: 110px;
  overflow: hidden;
  margin-left: 10px;
  background: var(--hj-color-night);
  color: var(--hj-color-body-dark);
  --hj-notch: var(--hj-color-pearl);
}
.qp-head {
  padding: 30px 30px 26px;
}
.qp-label {
  display: block;
  margin-bottom: 18px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hj-color-gold);
}
.qp-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.qp-route span {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.qp-route span:last-child {
  text-align: right;
}
.qp-route b {
  font-family: var(--hj-ff-head);
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--hj-color-white);
}
.qp-route small {
  margin-top: 4px;
  font-size: 0.8125rem;
}
.qp-route > i {
  flex: 1;
  position: relative;
  text-align: center;
  color: var(--hj-color-gold);
}
.qp-route > i::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: -1;
  border-top: 1px dashed rgba(var(--hj-color-gold-rgb), 0.5);
}
.qp-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}
.qp-facts span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.qp-facts small {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.qp-facts b {
  font-weight: 600;
  color: var(--hj-color-white);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.quote-pass .qp-body {
  padding: 26px 30px 30px;
  border-left: 0;
  border-top: 1px dashed rgba(var(--hj-color-white-rgb), 0.2);
}
.quote-pass .qp-body::before,
.quote-pass .qp-body::after {
  top: -13px;
  bottom: auto;
}
.quote-pass .qp-body::before {
  left: -13px;
}
.quote-pass .qp-body::after {
  left: auto;
  right: -13px;
}
.quote-pass .hj-btn {
  width: 100%;
  margin-top: 22px;
}

/*======================
34. Offers And Destinations
========================*/
/* KEPT: the base's offer rows (a wide photograph with a white card overlapping its
   foot) and its "Highlights Places" cards. The legs board heads the offers page;
   each destination card re-prices from the hub chosen on the map above. */
.legs-filter {
  justify-content: flex-end;
}
.offer-row {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  margin-bottom: 70px;
}
.offer-row:last-child {
  margin-bottom: 0;
}
.offer-row .offer-media {
  grid-column: 1 / span 1;
  grid-row: 1;
  aspect-ratio: 1.45;
}
.offer-row .offer-card {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 2;
  margin-left: -90px;
  padding: 44px 44px 40px;
  background: var(--hj-color-white);
  box-shadow: var(--hj-shadow);
}
.offer-row.is-flip {
  grid-template-columns: 1fr 1.15fr;
}
.offer-row.is-flip .offer-media {
  grid-column: 2;
}
.offer-row.is-flip .offer-card {
  grid-column: 1;
  margin-left: 0;
  margin-right: -90px;
}
.offer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.offer-top .hj-eyebrow {
  margin-bottom: 10px;
}
.offer-top h3 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 300;
}
.offer-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
}
.offer-price s {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.offer-price b {
  font-family: var(--hj-ff-head);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--hj-color-gold-deep);
  font-variant-numeric: tabular-nums;
}
.offer-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 30px;
  margin: 22px 0 28px;
  border-top: 1px solid var(--hj-color-line);
}
.offer-facts div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hj-color-line);
  font-size: 0.875rem;
}
.offer-facts dt {
  font-weight: 500;
}
.offer-facts dd {
  margin: 0;
  font-weight: 600;
  color: var(--hj-color-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hj-range-rings.is-destinations .range-legend {
  margin-bottom: 0;
}
.dest-grid {
  row-gap: 30px;
}
.dest-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--hj-color-white);
  color: var(--hj-color-body);
  transform-style: preserve-3d;
  transition: box-shadow 0.5s var(--hj-ease);
}
.dest-card:hover {
  color: var(--hj-color-body);
  box-shadow: var(--hj-shadow);
}
.dest-card:hover img {
  transform: scale(1.06);
}
.dest-thumb {
  display: block;
  aspect-ratio: 1.3;
}
.dest-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 26px 26px;
}
.dest-code {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hj-color-gold-deep);
}
.dest-name {
  font-family: var(--hj-ff-head);
  font-size: 1.375rem;
  color: var(--hj-color-ink);
}
.dest-line {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--hj-color-line);
}
.dest-line b {
  font-family: var(--hj-ff-head);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--hj-color-ink);
  font-variant-numeric: tabular-nums;
}
.dest-line small {
  font-size: 0.8125rem;
}
.dest-price {
  font-size: 0.8125rem;
}
.dest-price b {
  color: var(--hj-color-gold-deep);
  font-weight: 700;
}
/* destination details: hubs down, cabin classes across */
.dest-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--hj-color-white);
}
.dest-table th,
.dest-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--hj-color-line);
  text-align: left;
  font-size: 0.875rem;
}
.dest-table thead th {
  background: var(--hj-color-night);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hj-color-gold);
}
.dest-table tbody th {
  font-family: var(--hj-ff-head);
  font-weight: 400;
  font-size: 1rem;
  color: var(--hj-color-ink);
}
.dest-table td b {
  display: block;
  font-weight: 600;
  color: var(--hj-color-ink);
  font-variant-numeric: tabular-nums;
}
.dest-table td small {
  font-size: 0.75rem;
}
.dest-table .is-direct {
  color: var(--hj-color-green);
}
.dest-table .is-stop {
  color: var(--hj-color-red);
}
.month-strip {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  margin-top: 18px;
}
.month-strip span {
  padding: 14px 0 10px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--hj-color-line);
}
.month-strip span.is-peak {
  background: var(--hj-color-gold);
  color: var(--hj-color-night);
}
.month-strip span.is-shoulder {
  background: rgba(var(--hj-color-gold-rgb), 0.4);
}
.month-strip span.is-now {
  box-shadow: inset 0 -3px 0 var(--hj-color-night);
}
.month-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 14px;
  font-size: 0.8125rem;
}
.month-key i {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -1px;
  background: var(--hj-color-line);
}
.month-key .k-peak i {
  background: var(--hj-color-gold);
}
.month-key .k-shoulder i {
  background: rgba(var(--hj-color-gold-rgb), 0.4);
}

/*======================
35. Accordion
========================*/
/* Card terms and travel questions: hairline rows on night, a plus that turns */
.acc-item {
  border-bottom: 1px solid var(--hj-color-line-dark);
}
.acc-item:first-child {
  border-top: 1px solid var(--hj-color-line-dark);
}
.acc-head {
  margin: 0;
}
.acc-head button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 24px 0;
  border: 0;
  background: transparent;
  font-family: var(--hj-ff-head);
  font-size: 1.25rem;
  font-weight: 400;
  text-align: left;
  color: var(--hj-color-white);
}
.acc-head button i {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--hj-color-gold-rgb), 0.5);
  border-radius: 50%;
  font-size: 0.75rem;
  color: var(--hj-color-gold);
  transform: rotate(45deg);
  transition: transform 0.4s var(--hj-ease), background-color 0.4s var(--hj-ease);
}
.acc-head button.collapsed i {
  transform: rotate(0);
}
.acc-head button:hover i {
  background: var(--hj-color-gold);
  color: var(--hj-color-night);
}
.acc-item .collapse p,
.acc-item .collapsing p {
  margin: 0;
  padding: 0 60px 26px 0;
}
.hj-pearl .acc-item,
.hj-white .acc-item {
  border-color: var(--hj-color-line);
}
.hj-pearl .acc-head button,
.hj-white .acc-head button {
  color: var(--hj-color-ink);
}
.hj-pearl .acc-head button i,
.hj-white .acc-head button i {
  color: var(--hj-color-gold-deep);
}

/*======================
36. Destination Details
========================*/
/* KEPT: the base's place page - a wide photograph, the title with a direction
   button, words, a pair of photographs and more words - with the engine's flight
   times and the season strip added, and a sidebar of arrival facts. */
.dd-main {
  aspect-ratio: 1.95;
}
.dd-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 36px;
}
.dd-head .hj-eyebrow {
  margin-bottom: 10px;
}
.dd-head h2 {
  margin: 0;
  font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.75rem);
}
.dd-pair {
  row-gap: 20px;
  margin: 10px 0 0;
}
.dd-pair .hj-media {
  aspect-ratio: 1.3;
}
.dd-side {
  position: sticky;
  top: 110px;
  margin-left: 10px;
}
.side-card {
  padding: 32px 30px;
  background: var(--hj-color-night);
  color: var(--hj-color-body-dark);
}
.side-card + .side-card {
  margin-top: 24px;
}
.side-card .hj-btn {
  width: 100%;
}
.side-card.is-photo {
  position: relative;
  padding: 0;
  min-height: 360px;
  overflow: hidden;
}
.side-card.is-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.side-card.is-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(var(--hj-color-night-rgb), 0.9));
}
.side-photo-copy {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.side-photo-copy b {
  font-family: var(--hj-ff-head);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--hj-color-white);
}
.side-photo-copy .hj-link {
  color: var(--hj-color-white);
}
.side-photo-copy .hj-link .btn-ic {
  color: var(--hj-color-gold);
}

/*======================
37. Company Pages
========================*/
/* KEPT: the base's about page (film, statement, icon tiles, split, dark feature
   board, fun facts and photos), its masonry gallery and its contact page (three
   info cards, the map and the form). NEW: the crew page. */
.about-film {
  position: relative;
  margin: 0 12px;
}
.about-film .hj-media {
  aspect-ratio: 2.4;
}
.about-statement {
  max-width: 960px;
  margin-top: 90px;
  margin-bottom: 60px;
}
.about-statement .title {
  font-size: clamp(1.9rem, 1.2rem + 2vw, 3.1rem);
}
.hj-about-features.is-row {
  grid-template-columns: repeat(5, 1fr);
}
.hj-about-features.is-row li:nth-child(n) {
  margin-top: 0;
}
.hj-about-features.is-row .hj-icon-card {
  aspect-ratio: auto;
  padding: 34px 16px;
}
.hj-core-feature.is-night .feature-tile {
  background: var(--hj-color-surface);
  border-color: var(--hj-color-line-dark);
}
.hj-core-feature.is-night .feature-tile h3 {
  color: var(--hj-color-white);
}
.hj-core-feature.is-night .feature-tile p {
  color: var(--hj-color-body-dark);
}
.hj-core-feature.is-night .feature-tile > i {
  color: var(--hj-color-gold);
}
.hj-core-feature.is-night .feature-tile:hover {
  background: var(--hj-color-gold);
  border-color: var(--hj-color-gold);
}
.hj-core-feature.is-night .feature-tile:hover h3,
.hj-core-feature.is-night .feature-tile:hover > i {
  color: var(--hj-color-night);
}
.hj-core-feature.is-night .feature-tile:hover p {
  color: rgba(var(--hj-color-night-rgb), 0.75);
}
.facts-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 30px;
}
.fact-box {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 22px;
  padding: 30px 32px;
  background: var(--hj-color-white);
}
.fact-box i {
  grid-row: span 2;
  font-size: 3rem;
  line-height: 1;
  color: var(--hj-color-gold-deep);
}
.fact-box b {
  font-family: var(--hj-ff-head);
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--hj-color-ink);
  font-variant-numeric: tabular-nums;
}
.fact-box small {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.facts-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.facts-photos .hj-media {
  aspect-ratio: 1.45;
}
.crew-grid {
  row-gap: 30px;
}
.crew-card {
  height: 100%;
  background: var(--hj-color-white);
  transition: box-shadow 0.5s var(--hj-ease), transform 0.5s var(--hj-ease);
}
.crew-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hj-shadow);
}
.crew-photo {
  aspect-ratio: 0.9;
}
.crew-photo img {
  object-position: center top;
  transform-origin: center top;
}
.crew-body {
  position: relative;
  padding: 26px 26px 28px;
}
.crew-role {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hj-color-gold-deep);
}
.crew-body h3 {
  margin: 6px 0 16px;
  font-size: 1.3125rem;
}
.crew-facts {
  margin: 0;
  border-top: 1px solid var(--hj-color-line);
}
.crew-facts div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hj-color-line);
  font-size: 0.8125rem;
}
.crew-facts dd {
  margin: 0;
  font-weight: 600;
  color: var(--hj-color-ink);
  text-align: right;
}
.crew-social {
  position: absolute;
  right: 22px;
  top: -24px;
  display: flex;
  gap: 6px;
}
.crew-social a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hj-color-night);
  color: var(--hj-color-white);
  font-size: 0.8125rem;
  transition: all 0.35s var(--hj-ease);
}
.crew-social a:hover {
  background: var(--hj-color-gold);
  color: var(--hj-color-night);
}
.gallery-masonry {
  columns: 2;
  column-gap: 30px;
}
.gallery-item {
  position: relative;
  display: block;
  margin-bottom: 30px;
  break-inside: avoid;
}
.gallery-item img {
  height: auto;
}
.gallery-over {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--hj-color-night-rgb), 0.5);
  color: var(--hj-color-white);
  font-size: 1.5rem;
  opacity: 0;
  transition: opacity 0.4s var(--hj-ease);
}
.gallery-item:hover .gallery-over {
  opacity: 1;
}
.desk-cards {
  row-gap: 24px;
  margin-bottom: 40px;
}
.desk-card {
  height: 100%;
  padding: 36px 34px;
  background: var(--hj-color-white);
  transition: box-shadow 0.5s var(--hj-ease);
}
.desk-card:hover {
  box-shadow: var(--hj-shadow-soft);
}
.desk-card .hj-disc {
  margin-bottom: 22px;
  width: 72px;
  height: 72px;
  font-size: 2rem;
}
.desk-card h3 {
  margin-bottom: 8px;
}
.desk-card p {
  margin-bottom: 16px;
}
.desk-time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
}
.desk-time b {
  font-family: var(--hj-ff-head);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--hj-color-ink);
  font-variant-numeric: tabular-nums;
}
.contact-map {
  height: 460px;
  filter: grayscale(0.8) contrast(1.05);
}
.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.contact-form-card {
  position: relative;
  z-index: 2;
  width: min(940px, calc(100% - 40px));
  margin: -120px auto 0;
  padding: 60px 60px 56px;
  background: var(--hj-color-white);
  box-shadow: var(--hj-shadow);
}
.contact-form-card .hj-section-title {
  margin-bottom: 36px;
}

/*======================
38. Dining Pages
========================*/
/* KEPT: the base restaurant's row of course icons above the dish photographs, and
   the menu page's list with its call-to-action band. The icons now filter. */
.course-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 50px;
}
.course-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 12px 22px;
  border: 1px solid var(--hj-color-line);
  background: var(--hj-color-white);
  color: var(--hj-color-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all 0.4s var(--hj-ease);
}
.course-tab i {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--hj-color-gold-deep);
  transition: color 0.4s var(--hj-ease);
}
.course-tab sup {
  position: absolute;
  right: 14px;
  top: 12px;
  font-size: 0.6875rem;
  letter-spacing: 0;
  color: var(--hj-color-gold-deep);
}
.course-tab:hover,
.course-tab.is-active {
  background: var(--hj-color-night);
  border-color: var(--hj-color-night);
  color: var(--hj-color-white);
}
.course-tab:hover i,
.course-tab.is-active i,
.course-tab.is-active sup {
  color: var(--hj-color-gold);
}
.dish-grid {
  row-gap: 30px;
}
.dish-card {
  height: 100%;
  background: var(--hj-color-white);
  transition: box-shadow 0.5s var(--hj-ease);
}
.dish-card:hover {
  box-shadow: var(--hj-shadow);
}
.dish-photo {
  aspect-ratio: 1;
}
.dish-price {
  position: absolute;
  right: 16px;
  top: 16px;
  padding: 6px 12px;
  background: var(--hj-color-gold);
  color: var(--hj-color-night);
  font-size: 0.8125rem;
  font-weight: 700;
}
.dish-body {
  padding: 20px 22px 24px;
}
.dish-course {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hj-color-gold-deep);
}
.dish-course i {
  font-size: 1rem;
}
.dish-body h3 {
  margin: 8px 0 0;
  font-size: 1.1875rem;
}
.hj-dining-menu .course-tabs {
  margin-top: -10px;
}
.hj-cta-band {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.hj-cta-band .cta-bg {
  position: absolute;
  inset: -12% 0;
  z-index: -1;
  opacity: 0.3;
}
.hj-cta-band .cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hj-cta-band .hj-section-title {
  margin-bottom: 40px;
}

/*======================
39. Journal
========================*/
/* KEPT: the base's news list with its long sidebar (search, about, popular feeds,
   categories, tags, banner) and its article page (tags, share, previous and next,
   author, comments, comment form). Six post formats. */
.blog-status {
  margin-bottom: 26px;
  font-size: 0.875rem;
}
.blog-status b {
  color: var(--hj-color-ink);
}
.blog-reset {
  margin-left: 10px;
  border: 0;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hj-color-gold-deep);
}
.post-card {
  margin-bottom: 40px;
  background: var(--hj-color-white);
}
.post-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1.9;
}
.post-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--hj-color-night-rgb), 0.7);
  color: var(--hj-color-gold);
  font-size: 1.25rem;
  backdrop-filter: blur(6px);
}
.post-body {
  padding: 32px 38px 36px;
}
.post-cat {
  display: inline-block;
  padding: 4px 10px;
  background: var(--hj-color-gold);
  color: var(--hj-color-night);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.post-cat:hover {
  background: var(--hj-color-night);
  color: var(--hj-color-white);
}
.post-title {
  margin: 4px 0 14px;
  font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.875rem);
  font-weight: 400;
  line-height: 1.3;
}
.post-title a:hover {
  color: var(--hj-color-gold-deep);
}
.post-quote-card {
  position: relative;
  padding: 50px 50px 44px;
  background: var(--hj-color-gold);
  color: var(--hj-color-night);
}
.post-quote-card i {
  position: absolute;
  right: 40px;
  top: 34px;
  font-size: 4rem;
  opacity: 0.25;
}
.post-quote-card p {
  margin-bottom: 14px;
  font-family: var(--hj-ff-head);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.45;
}
.post-quote-card span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.post-link-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 44px 50px;
  background: var(--hj-color-night);
  color: var(--hj-color-white);
}
.post-link-card i {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--hj-color-gold);
  color: var(--hj-color-gold);
}
.post-link-card b {
  display: block;
  font-family: var(--hj-ff-head);
  font-size: 1.375rem;
  font-weight: 400;
}
.post-link-card small {
  color: var(--hj-color-body-dark);
}
.post-link-card:hover {
  color: var(--hj-color-gold);
}
.posts-empty {
  padding: 40px;
  background: var(--hj-color-white);
  text-align: center;
}
.hj-pagination ul {
  display: flex;
  gap: 8px;
}
.hj-pagination a,
.hj-pagination span {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hj-color-white);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hj-color-ink);
}
.hj-pagination .active a,
.hj-pagination a:hover {
  background: var(--hj-color-gold);
  color: var(--hj-color-night);
}
.blog-sidebar {
  margin-left: 10px;
}
.widget {
  margin-bottom: 30px;
  padding: 34px 32px;
  background: var(--hj-color-white);
}
.widget-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font-size: 1.125rem;
  font-weight: 400;
}
.widget-title::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--hj-color-gold-deep);
}
.widget-search {
  position: relative;
}
.widget-search .hj-input {
  padding-right: 60px;
}
.widget-search button {
  position: absolute;
  right: 0;
  top: 0;
  width: 56px;
  height: 56px;
  border: 0;
  background: var(--hj-color-gold);
  color: var(--hj-color-night);
}
.widget-about {
  text-align: center;
}
.widget-about img {
  width: 120px;
  height: 120px;
  margin: 0 auto 16px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.widget-about h4 {
  margin-bottom: 6px;
}
.widget-about p {
  font-size: 0.9375rem;
}
.recent-list li {
  display: flex;
  gap: 16px;
}
.recent-list li + li {
  margin-top: 18px;
}
.recent-thumb {
  flex: 0 0 70px;
}
.recent-thumb img {
  width: 70px;
  height: 70px;
  object-fit: cover;
}
.recent-date {
  display: block;
  font-size: 0.75rem;
  color: var(--hj-color-gold-deep);
}
.recent-title {
  font-family: var(--hj-ff-head);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--hj-color-ink);
}
.cat-list a {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--hj-color-line);
  font-size: 0.9375rem;
}
.cat-list li:last-child a {
  border-bottom: 0;
}
.cat-list a span {
  color: var(--hj-color-gold-deep);
  font-variant-numeric: tabular-nums;
}
.cat-list a.is-active,
.cat-list a:hover {
  color: var(--hj-color-gold-deep);
}
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-cloud a {
  padding: 7px 14px;
  border: 1px solid var(--hj-color-line);
  font-size: 0.8125rem;
}
.tag-cloud a:hover {
  border-color: var(--hj-color-gold-deep);
  color: var(--hj-color-gold-deep);
}
.widget-banner {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.widget-banner img {
  width: 100%;
  height: 440px;
  object-fit: cover;
}
.widget-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(var(--hj-color-night-rgb), 0.92));
}
.banner-copy {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.banner-copy small {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hj-color-gold);
}
.banner-copy b {
  margin-bottom: 8px;
  font-family: var(--hj-ff-head);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--hj-color-white);
}
.post-article {
  padding: 0 0 40px;
}
.post-format {
  margin-bottom: 34px;
}
.post-format.hj-media {
  aspect-ratio: 1.7;
}
.post-gallery {
  position: relative;
  overflow: hidden;
}
.post-gallery .swiper-slide img {
  width: 100%;
  aspect-ratio: 1.7;
  object-fit: cover;
}
.post-gallery-nav {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.post-gallery-count {
  padding: 8px 14px;
  background: var(--hj-color-night);
  color: var(--hj-color-white);
  font-size: 0.8125rem;
}
.post-gallery-count b {
  color: var(--hj-color-gold);
}
.post-gallery-nav .hj-arrow {
  background: var(--hj-color-white);
  border-color: var(--hj-color-white);
}
.post-gallery-nav .hj-arrow.is-next {
  background: var(--hj-color-gold);
  border-color: var(--hj-color-gold);
}
.post-video {
  position: relative;
}
.post-audio {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  background: var(--hj-color-night);
}
.post-audio .audio-cover {
  min-height: 280px;
}
.audio-player {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px;
}
.audio-title {
  margin-bottom: 20px;
  color: var(--hj-color-white);
  font-size: 1.25rem;
}
.audio-player iframe {
  width: 100%;
  height: 120px;
  border: 0;
}
.post-quote-card.is-large p {
  font-size: 1.875rem;
}
.post-link-card.is-large {
  padding: 56px 50px;
}
.post-meta {
  margin-bottom: 14px;
}
.article-title {
  margin-bottom: 24px;
  font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.625rem);
  font-weight: 300;
}
.article-body h3 {
  margin: 34px 0 14px;
}
.article-quote {
  position: relative;
  margin: 34px 0;
  padding: 40px 44px;
  background: var(--hj-color-night);
  color: var(--hj-color-white);
}
.article-quote i {
  display: block;
  margin-bottom: 14px;
  font-size: 1.75rem;
  color: var(--hj-color-gold);
}
.article-quote p {
  margin-bottom: 12px;
  font-family: var(--hj-ff-head);
  font-size: 1.375rem;
  font-weight: 300;
  line-height: 1.5;
}
.article-quote cite {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hj-color-gold);
}
.article-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 30px 0;
}
.article-pair .hj-media {
  aspect-ratio: 1.07;
}
.article-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding: 24px 0;
  border-top: 1px solid var(--hj-color-line);
  border-bottom: 1px solid var(--hj-color-line);
}
.article-tags,
.article-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
}
.article-tags b,
.article-share b {
  margin-right: 8px;
  color: var(--hj-color-ink);
}
.article-tags a {
  padding: 5px 12px;
  background: var(--hj-color-white);
}
.article-share a,
.article-share button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--hj-color-white);
  color: var(--hj-color-ink);
}
.article-share a:hover,
.article-share button:hover {
  background: var(--hj-color-gold);
}
.copy-note {
  font-size: 0.75rem;
  color: var(--hj-color-gold-deep);
}
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 34px 0;
}
.post-nav a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 28px;
  background: var(--hj-color-white);
}
.post-nav a:last-child {
  text-align: right;
}
.post-nav small {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hj-color-gold-deep);
}
.post-nav b {
  font-family: var(--hj-ff-head);
  font-weight: 400;
  color: var(--hj-color-ink);
}
.author-box {
  display: flex;
  gap: 28px;
  padding: 34px;
  background: var(--hj-color-white);
}
.author-box img {
  flex: 0 0 120px;
  width: 120px;
  height: 140px;
  object-fit: cover;
  object-position: center top;
}
.author-box .hj-eyebrow {
  margin-bottom: 8px;
}
.author-box h3 {
  margin-bottom: 8px;
}
.author-box p {
  margin: 0;
}
.comments,
.comment-form {
  margin-top: 50px;
}
.comment-list .comment {
  display: flex;
  gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hj-color-line);
}
.comment-list .comment.is-reply {
  margin-left: 60px;
}
.comment img {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.comment-body {
  flex: 1;
}
.comment-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 8px;
}
.comment-top b {
  font-family: var(--hj-ff-head);
  font-weight: 400;
  color: var(--hj-color-ink);
}
.comment-top span {
  font-size: 0.8125rem;
}
.comment-reply {
  margin-left: auto;
  border: 0;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hj-color-gold-deep);
}
.reply-note {
  padding: 12px 16px;
  background: var(--hj-color-white);
  font-size: 0.875rem;
}
.reply-note button {
  border: 0;
  background: transparent;
  font-weight: 700;
  color: var(--hj-color-gold-deep);
}

/*======================
40. Account And Error
========================*/
/* Sign-in pages: a night panel with the ring mark beside the form. The 404 and
   coming-soon pages fly above the cloud deck. */
.account-card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  max-width: 1080px;
  margin: 0 auto;
  background: var(--hj-color-white);
  box-shadow: var(--hj-shadow);
}
.account-side {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-height: 560px;
  padding: 44px;
  overflow: hidden;
}
.account-side .side-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.account-side .side-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--hj-color-night-rgb), 0.35) 0%, rgba(var(--hj-color-night-rgb), 0.8) 45%, rgba(var(--hj-color-night-rgb), 0.97) 72%);
}
.account-side .side-mark {
  width: 80px;
  height: 80px;
  margin-bottom: auto;
}
.account-side h2 {
  margin: 0;
  font-size: 2rem;
}
.account-side p {
  margin: 0;
}
.side-code {
  margin-top: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hj-color-gold);
}
.side-code b {
  color: var(--hj-color-white);
}
.account-form {
  padding: 56px 56px 50px;
}
.account-form .hj-eyebrow {
  margin-bottom: 10px;
}
.account-title {
  margin-bottom: 30px;
  font-size: 2rem;
  font-weight: 300;
}
.acc-field {
  margin-bottom: 18px;
}
.acc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}
.acc-link {
  font-size: 0.875rem;
  color: var(--hj-color-gold-deep);
}
.acc-submit {
  width: 100%;
  margin-top: 8px;
}
.acc-switch {
  margin: 26px 0 0;
  font-size: 0.9375rem;
}
.acc-switch a {
  font-weight: 700;
  color: var(--hj-color-gold-deep);
}
.hj-field.has-toggle .hj-input {
  padding-right: 54px;
}
.password-toggle {
  position: absolute;
  right: 0;
  top: 0;
  width: 54px;
  height: 56px;
  border: 0;
  background: transparent;
  color: var(--hj-color-gold-deep);
}
.strength {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.strength-bar {
  display: flex;
  gap: 4px;
}
.strength-bar i {
  width: 36px;
  height: 3px;
  background: var(--hj-color-line);
}
.strength[data-level="1"] .strength-bar i:nth-child(-n+1),
.strength[data-level="2"] .strength-bar i:nth-child(-n+2),
.strength[data-level="3"] .strength-bar i:nth-child(-n+3),
.strength[data-level="4"] .strength-bar i:nth-child(-n+4) {
  background: var(--hj-color-gold-deep);
}
.strength[data-level="4"] .strength-bar i {
  background: var(--hj-color-green);
}
.strength small,
.match-note {
  font-size: 0.75rem;
}
.match-note {
  display: block;
  margin-top: 6px;
}
.match-note.is-ok {
  color: var(--hj-color-green);
}
.match-note.is-bad {
  color: var(--hj-color-red);
}
.hj-error {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: calc(var(--hj-header-h) + var(--hj-top-h) + 60px) 0 220px;
  overflow: hidden;
  text-align: center;
}
.hj-error .cloud-sky {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(180deg, #0B0C12 0%, #141827 45%, #262C44 75%, #3E3A4E 100%);
}
.hj-error .cloud-layer {
  position: absolute;
  left: 50%;
  width: max(2400px, 170%);
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
}
.hj-error .layer-back {
  z-index: -2;
  bottom: 40px;
}
.hj-error .layer-front {
  z-index: -1;
  bottom: -180px;
}
.hj-error .cloud-moon {
  position: absolute;
  right: 16%;
  top: 22%;
  z-index: -2;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #FBF8F1 0%, #EFE8D8 45%, #D9CDB2 100%);
  box-shadow: 0 0 40px 8px rgba(245, 238, 222, 0.3), 0 0 160px 60px rgba(210, 192, 158, 0.14);
}
.error-copy {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}
.error-code {
  display: block;
  margin-bottom: -30px;
  font-family: var(--hj-ff-head);
  font-size: clamp(8rem, 5rem + 12vw, 16rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--hj-color-gold-rgb), 0.45);
}
.error-copy .hj-eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
}
.error-title {
  margin-bottom: 20px;
  color: var(--hj-color-white);
}
.error-title span {
  color: var(--hj-color-gold);
}
.error-copy p {
  margin-bottom: 36px;
}
.hj-error.is-soon {
  padding-top: 90px;
}
.soon-logo {
  display: block;
  width: max-content;
  margin: 0 auto 40px;
}
.soon-logo img {
  height: 64px;
  width: auto;
}
.soon-count {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 10px 0 18px;
}
.soon-count span {
  display: flex;
  flex-direction: column;
  width: 118px;
  padding: 20px 0 16px;
  background: rgba(var(--hj-color-surface-rgb), 0.8);
  border: 1px solid var(--hj-color-line-dark);
}
.soon-count b {
  font-family: var(--hj-ff-head);
  font-size: 2.75rem;
  font-weight: 300;
  line-height: 1;
  color: var(--hj-color-white);
  font-variant-numeric: tabular-nums;
}
.soon-count small {
  margin-top: 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hj-color-gold);
}
.soon-date b {
  color: var(--hj-color-white);
}
.hj-error .hj-optin {
  max-width: 560px;
  margin: 10px auto 0;
}
.soon-social {
  justify-content: center;
  margin-top: 30px;
}

/*======================
41. Footer
========================*/
/* Footer 1 keeps the base's centred stack (logo, words, subscribe) on night, with
   one row of links under it. Footer 2 keeps the taupe ground and the dashed
   flight-path pattern of the base's second and third homes. */
/* clipped sideways only, so the jet can rise over the footer's top edge */
.hj-footer {
  position: relative;
  z-index: 0;
  overflow-x: clip;
  color: var(--hj-color-body-dark);
}
.hj-footer .footer-main {
  padding: 130px 0 70px;
}
.hj-footer .footer-centre {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.hj-footer .footer-logo {
  display: inline-block;
  margin-bottom: 34px;
}
.hj-footer .footer-logo img {
  height: 72px;
  width: auto;
}
.hj-footer-mark {
  position: absolute;
  left: 50%;
  top: 40px;
  z-index: -1;
  width: 620px;
  height: 620px;
  margin-left: -310px;
  border-radius: 50%;
  border: 1px solid rgba(var(--hj-color-gold-rgb), 0.12);
  pointer-events: none;
}
.hj-footer-mark::before {
  content: "";
  position: absolute;
  inset: 70px;
  border-radius: 50%;
  border: 1px dashed rgba(var(--hj-color-gold-rgb), 0.1);
}
.hj-optin {
  margin-top: 44px;
  text-align: left;
}
.hj-optin .optin-bar {
  position: relative;
  display: flex;
  background: rgba(var(--hj-color-white-rgb), 0.05);
  border: 1px solid rgba(var(--hj-color-white-rgb), 0.12);
}
.hj-optin .optin-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hj-color-gold);
  pointer-events: none;
}
.hj-optin input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 64px;
  padding: 0 20px 0 56px;
  border: 0;
  background: transparent;
  color: var(--hj-color-white);
}
.hj-optin input[type="email"]::placeholder {
  color: rgba(var(--hj-color-white-rgb), 0.45);
}
.hj-optin input[type="email"]:focus {
  outline: none;
}
.hj-optin .hj-btn {
  height: 64px;
}
.hj-optin .optin-consent {
  margin-top: 16px;
  font-size: 0.875rem;
}
.hj-footer .footer-cols {
  margin-top: 90px;
  padding-top: 60px;
  border-top: 1px solid var(--hj-color-line-dark);
}
.hj-footer .footer-title {
  margin-bottom: 22px;
  font-family: var(--hj-ff-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hj-color-gold);
}
.hj-footer .footer-links li + li {
  margin-top: 8px;
}
.hj-footer .footer-links a {
  display: inline-flex;
  align-items: center;
  color: var(--hj-color-body-dark);
}
.hj-footer .footer-links a::before {
  content: "";
  width: 0;
  height: 1px;
  margin-right: 0;
  background: var(--hj-color-gold);
  transition: width 0.4s var(--hj-ease), margin 0.4s var(--hj-ease);
}
.hj-footer .footer-links a:hover {
  color: var(--hj-color-white);
}
.hj-footer .footer-links a:hover::before {
  width: 14px;
  margin-right: 10px;
}
.hj-footer .footer-two-col {
  columns: 2;
  column-gap: 30px;
}
.hj-footer .footer-two-col li {
  break-inside: avoid;
}
.hj-footer .footer-reach li {
  display: flex;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hj-color-line-dark);
}
.hj-footer .footer-reach li:first-child {
  padding-top: 0;
}
.hj-footer .footer-reach li:last-child {
  border-bottom: 0;
}
.hj-footer .footer-reach i {
  flex: 0 0 auto;
  font-size: 2rem;
  line-height: 1;
  color: var(--hj-color-gold);
}
.hj-footer .footer-reach b {
  display: block;
  margin-bottom: 2px;
  font-family: var(--hj-ff-head);
  font-size: 1rem;
  font-weight: 400;
  color: var(--hj-color-white);
}
.hj-footer .footer-reach a:hover {
  color: var(--hj-color-gold);
}
.hj-footer .footer-hours {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 0.875rem;
}
.hj-footer .footer-hours .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hj-color-green);
  box-shadow: 0 0 0 4px rgba(111, 178, 135, 0.18);
}
.hj-footer .footer-copyright {
  padding: 22px 0;
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.8125rem;
}
.hj-footer .copyright-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.hj-footer .copyright-inner p {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hj-color-white);
}
.hj-footer .copyright-inner p a {
  color: var(--hj-color-gold);
}
.hj-footer .copyright-inner .hj-social {
  margin-top: 0;
}
.hj-footer .copyright-links {
  display: flex;
  gap: 26px;
  font-weight: 600;
  color: var(--hj-color-white);
}
/* footer 2: the base's taupe - its own flight-path pattern over the night */
.hj-footer-two {
  background: var(--hj-color-taupe);
  color: rgba(var(--hj-color-white-rgb), 0.82);
}
.hj-footer-two .footer-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hj-color-night) url("../img/icon/pattern-01.png") center / cover no-repeat;
}
.hj-footer-two .footer-main {
  padding: 110px 0 60px;
}
.hj-footer-two .footer-logo {
  margin-bottom: 28px;
}
.hj-footer-two .footer-logo img {
  height: 62px;
}
.hj-footer-two .footer-title {
  font-family: var(--hj-ff-head);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--hj-color-white);
}
.hj-footer-two .footer-links a {
  color: rgba(var(--hj-color-white-rgb), 0.9);
}
.hj-footer-two .footer-links a::before {
  width: 8px;
  margin-right: 10px;
  background: var(--hj-color-white);
}
.hj-footer-two .footer-links a:hover::before {
  width: 16px;
  background: var(--hj-color-gold);
}
.hj-footer-two .footer-reach li {
  border-color: rgba(var(--hj-color-white-rgb), 0.2);
}
.hj-footer-two .footer-reach i {
  color: var(--hj-color-white);
}
.hj-footer-two .hj-social a {
  background: rgba(var(--hj-color-night-rgb), 0.55);
}
.hj-footer-two .footer-copyright {
  background: var(--hj-color-night);
}
.hj-footer-two .copyright-inner p {
  letter-spacing: 0.04em;
  text-transform: none;
}

/*======================
42. Back To Top
========================*/
/* The logo ring as a progress dial: the champagne arc closes as the page is read */
.hj-back-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(var(--hj-color-gold) calc(var(--hj-progress, 0) * 360deg), rgba(var(--hj-color-white-rgb), 0.14) 0);
  color: var(--hj-color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s var(--hj-ease), transform 0.4s var(--hj-ease), visibility 0.4s;
}
.hj-back-to-top::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--hj-color-night);
}
.hj-back-to-top i {
  position: relative;
  font-size: 0.9375rem;
  transform: rotate(-45deg);
  transition: transform 0.4s var(--hj-ease);
}
.hj-back-to-top:hover i {
  transform: rotate(-45deg) translate(2px, -2px);
  color: var(--hj-color-gold);
}
.hj-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/*======================
43. Accessibility
========================*/
.hj-skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--hj-color-gold);
  color: var(--hj-color-night);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 0.3s var(--hj-ease);
}
.hj-skip-link:focus {
  transform: translateY(0);
  color: var(--hj-color-night);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*======================
44. Night Sky
========================*/
/* WebGL: The night sky at cruise altitude behind the moon and the cloud decks: three depths of stars drift past as they do from a cabin window, the moon's halo lights a thin cirrus haze, and the pointer turns the view (JS block Night Sky) */
.hj-gl {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hj-gl.is-live {
  opacity: 1;
}

/*======================
45. Jets
========================*/
/* the white jet crosses the top of the cabin window in the hero (block Jet Flights) */
.hero-jet {
  position: absolute;
  left: -30%;
  top: -3%;
  z-index: 4;
  width: 104%;
  pointer-events: none;
}
.hero-jet img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.5));
}
/* the black jet above the cloud decks: over the back deck, under the copy and the nearer decks; its rest place
   (no scrolling motion) is right of the words, under the moon */
.hj-clouds .cloud-jet {
  position: absolute;
  left: 56%;
  top: 34%;
  z-index: 0;
  width: clamp(240px, 30vw, 460px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 0 26px rgba(236, 229, 214, 0.16));
}
/* the black jet over the footer's top edge, on the right */
.footer-jet {
  position: absolute;
  right: 3%;
  top: -96px;
  z-index: 2;
  width: clamp(220px, 30vw, 460px);
  pointer-events: none;
}
.footer-jet img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.35));
}

/*======================
46. Available Today
========================*/
/* the jets ready to fly listed on the left; the chosen one on a showroom apron on the right, its figures under it */
.hj-available {
  position: relative;
  overflow: hidden;
}
.hj-available .hj-lead {
  max-width: 440px;
  margin-bottom: 0;
}
.avail-grid {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 70px;
  align-items: center;
}
.avail-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hj-color-line);
}
.avail-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 20px 16px 20px 0;
  border: 0;
  border-bottom: 1px solid var(--hj-color-line);
  background: none;
  text-align: left;
  color: var(--hj-color-body);
  cursor: pointer;
  transition: padding 0.45s ease, background-color 0.45s ease, color 0.3s ease;
}
/* the gold bar marks the chosen jet */
.avail-item::before {
  position: absolute;
  content: "";
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background-color: var(--hj-color-gold-deep);
  transform: scaleY(0);
  transition: transform 0.45s ease;
}
.avail-item:hover {
  color: var(--hj-color-ink);
}
.avail-item.is-active {
  padding-left: 18px;
  color: var(--hj-color-ink);
  background: linear-gradient(90deg, rgba(var(--hj-color-gold-rgb), 0.16), rgba(var(--hj-color-gold-rgb), 0));
}
.avail-item.is-active::before {
  transform: scaleY(1);
}
.avail-item:focus-visible {
  outline: 2px solid var(--hj-color-gold-deep);
  outline-offset: 2px;
}
.ai-index {
  font-size: 14px;
  color: var(--hj-color-gold-deep);
}
.ai-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.ai-name {
  font-family: var(--hj-ff-head);
  font-size: 19px;
  font-weight: 500;
  color: var(--hj-color-ink);
}
.ai-meta {
  font-size: 14px;
}
.ai-ready {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.35;
}
.ai-ready b {
  font-size: 16px;
  font-weight: 600;
  color: var(--hj-color-ink);
}
.ai-ready small {
  font-size: 12.5px;
  color: var(--hj-color-green);
}
/* the apron: the jet, a soft shadow under the wheels and a faint reflection on the polished floor */
.avail-show {
  position: relative;
}
.avail-stage {
  position: relative;
  margin-bottom: 70px;
}
.avail-floor {
  position: absolute;
  left: 6%;
  right: 4%;
  bottom: -26px;
  z-index: 0;
  height: 70px;
  background: radial-gradient(closest-side, rgba(var(--hj-color-night-rgb), 0.3), rgba(var(--hj-color-night-rgb), 0));
}
.avail-jet {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}
.avail-reflect {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 0;
  width: 100%;
  height: auto;
  margin-top: -1%;
  opacity: 0.22;
  /* the flip is the scale property, so the roll-on animation (which sets transform) keeps it */
  scale: 1 -1;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 32%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 32%);
  pointer-events: none;
}
.avail-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px 40px;
  padding: 30px 34px;
  background-color: var(--hj-color-white);
  box-shadow: 0 30px 70px rgba(var(--hj-color-night-rgb), 0.08);
}
.ac-head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
}
.ac-cat {
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hj-color-gold-deep);
}
.ac-name {
  margin: 0;
  font-size: 32px;
  color: var(--hj-color-ink);
}
.ac-base {
  font-size: 15px;
  color: var(--hj-color-body);
}
.ac-base i {
  margin-right: 4px;
  color: var(--hj-color-gold-deep);
}
.ac-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.ac-specs small {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hj-color-body);
}
.ac-specs b {
  font-size: 22px;
  font-weight: 500;
  color: var(--hj-color-ink);
}
.ac-specs em {
  font-size: 14px;
  font-style: normal;
  color: var(--hj-color-body);
}
.ac-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.ac-rate {
  font-size: 15px;
  color: var(--hj-color-body);
}
.ac-rate b {
  font-size: 22px;
  font-weight: 600;
  color: var(--hj-color-ink);
}
.ac-rate em {
  font-style: normal;
}